今天不整那些虚头巴脑的理论，就聊聊我踩过的坑。

回想九年前刚入行做 H5 的时候，觉得不就是写写 HTML、CSS 加个 JS 嘛？结果呢，上线第一版活动页，在 iPhone 6 上跑得好好的，换个安卓机直接崩成灰，加载慢得让人想砸电脑。那时候我就明白，h5 开发需要掌握什么，真不是背几个 API 就能搞定的。

很多新人问我，学 H5 是不是要精通所有框架？其实大错特错。H5 这行，最核心的其实是“兼容性”和“性能”。我有个朋友，前两年接了个电商大促的 H5 单，技术栈用的是最新的 Vue3，代码写得那叫一个漂亮。可一上线，因为没考虑到老机型对 ES6+ 语法的支持问题，导致低端机用户打开全是白屏。最后只能回炉重造，加了 Babel 转译，又配了 Polyfill，硬生生把工期拖了三天。这就是教训：h5 开发需要掌握什么？首先你得懂浏览器内核的差异，知道 Chrome、Safari 和微信内置浏览器到底差在哪。

再说说布局。以前我们还在用 float 死磕，现在 Flex 和 Grid 是标配。但千万别以为用了 Flex 就万事大吉。记得有次做一个长图形式的邀请函，为了适配各种屏幕比例，我特意写了个自适应脚本，结果在横屏模式下，文字排版全乱了。后来我才发现，原来是因为没有处理好 viewport 的缩放逻辑，还有那个该死的 100vh 在某些 Android 版本下会失效。这些细节，书本上可不会写，都是拿真金白银砸出来的经验。

关于交互，很多人觉得 H5 就是动效多好看就行。错！用户点一下页面要是卡顿超过 0.3 秒，他们就直接划走了。我做过一个数据监测，加载时间每增加 1 秒，跳出率就飙升 20%。所以，h5 开发需要掌握什么？还得会优化图片资源，学会懒加载，甚至要懂得怎么用 Canvas 代替 DOM 操作来减少重绘。我有个项目，把原本 5MB 的素材包，通过压缩和雪碧图技术，压到了 800KB，加载速度直接从 5 秒变成了 1 秒，转化率直接翻倍。

最后，别只盯着代码看。现在的 H5 开发，很多时候是在微信生态里玩命。你得了解微信的 JS-SDK，知道怎么调起分享、怎么获取地理位置，还得注意微信的风控规则。有一次，我的一个活动链接因为频繁调用接口，直接被微信封禁了两天，损失惨重。这时候你才明白，h5 开发需要掌握什么，除了技术，还得懂业务规则和安全边界。

总结一下，做 H5 别总想着走捷径。第一步，把基础语法吃透，特别是 CSS 布局和 JS 异步处理；第二步，多去真机上测，别光靠模拟器；第三步，学会分析性能数据，哪里卡了就改哪里。这条路挺苦，但看着自己做的页面几万人在线互动，那种成就感，真的值。

希望这篇碎碎念能帮到正在迷茫的你。技术这玩意儿，没有终点，只有不断避坑的过程。共勉吧。