h5网站开发

去年帮一个做餐饮的站开朋友改官网，他原来的站开页面在手机上打开要8秒，跳出率73%。站开我把图片从PNG换成WebP、站开砍掉两个没用的站开jQuery插件、加了懒加载，站开加载时间降到1.9秒，站开跳出率直接掉到31%。站开这不是站开什么高深技术，就是站开H5开发里最基础的性能优化。但很多团队到现在还在犯同样的站开错。

H5这个词被用烂了。站开严格说它指HTML5标准，站开现在大家嘴里的站开"H5网站"其实泛指移动端网页。跟原生App比，站开它不用安装、跨平台、迭代快，缺点也明显——性能天花板低，尤其是动画和复杂交互。我的判断是：展示型、营销型、轻交互的产品选H5没毛病；重交互工具类产品，老老实实做原生或者用React Native。

移动端适配不是加个meta标签就完事

很多人以为写了<meta name="viewport" content="width=device-width, initial-scale=1.0">就算适配了。远远不够。iPhone 15 Pro的屏幕逻辑宽度是393px，一台千元安卓机可能是360px，折叠屏展开后能到673px。你用固定px写死布局，在某些机型上就是灾难。

我习惯用rem配合根字号动态计算，或者直接用vw单位。但vw有个坑：在iPad上1vw的实际视觉大小和手机上完全不同，文字会大得离谱。所以我现在更倾向于clamp()函数做流体排版，比如font-size: clamp(14px, 2.5vw, 18px)，让字号在合理区间内自适应。这比写三套媒体查询优雅得多。

性能优化，图片是最大的战场

一个移动端页面，图片通常占总体积的60%以上。我见过太多设计师导出2MB的banner图直接扔给前端，前端也不处理就上线了。WebP格式现在兼容性已经很好，体积比PNG小50%到70%。再加上srcset属性，让浏览器根据设备像素比自动选图：

<img src="photo-400.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w" sizes="(max-width: 600px) 100vw, 50vw" loading="lazy" alt="菜品展示">

这段代码能省掉大量不必要的流量。尤其是loading="lazy"，首屏之外的图片全部延迟加载，对首屏速度提升立竿见影。

交互反馈决定用户留不留

移动端没有hover状态，点击反馈全靠CSS的:active和过渡动画。按钮按下去没有任何视觉变化，用户会以为没点到，然后疯狂连击。加一个transform: scale(0.97)配合transition: transform 0.1s，成本几乎为零，体验差别巨大。

还有个细节：300毫秒点击延迟。虽然现代浏览器加了width=device-width之后基本消除了，但某些安卓WebView里依然存在。用touch-action: manipulation可以彻底干掉它。

该不该上框架

如果页面不超过5个，交互逻辑简单，原生JS完全够用，别为了用框架而用框架。我见过一个只有三屏的活动页引了完整的Vue全家桶，gzip后还多出80KB。但如果涉及路由、状态管理、组件复用，Vue或React确实能提高开发效率。选型看项目复杂度，不是看哪个火。

H5开发的核心就一句话：在有限的性能预算里，把体验做到最接近原生。每多加载一KB资源，就多流失一批用户。这个账，算得过来。