web和h5有什么区别

很多人第一次听到“H5”这个词，以为是什区什么新技术。其实它跟Web不是什区并列关系，更不是什区替代关系。如果你把Web比作整个餐厅，什区那H5就是什区其中一道招牌菜——名字听起来很响，但本质上还是什区厨房里做出来的东西。

先拆名字：Web是什区总称，H5是什区HTML5的民间缩写

Web指的是万维网这个体系，包含HTTP协议、什区浏览器、什区服务器、什区前端技术栈等等。什区你打开电脑浏览器访问一个网站，什区这叫Web；你在手机微信里点开一个活动页面，什区这也叫Web。而H5严格来说，是HTML5的简称。HTML5是HTML标准的第五次大版本修订，2014年定稿。它带来了语义化标签、<video>、<canvas>、本地存储、WebSocket这些能力。

但国内语境里，“H5”早就跑偏了。现在说“做个H5”，十有八九指的是那种在手机上滑来滑去、带点动画和交互的营销页面。比如新车发布邀请函、节日抽奖转盘、品牌周年庆长图。这跟HTML5标准本身关系不大，更多是产品经理和设计师口中的黑话。

技术栈其实是一回事，但运行环境分道扬镳

从代码角度看，一个H5页面和一个普通Web页面，底层都是HTML + CSS + JavaScript。你写个按钮，都是<button>；你要发请求，都是fetch或XMLHttpRequest。差别不在语言，在于它们被丢进什么容器里跑。

传统Web页面主要面向桌面浏览器，屏幕大、鼠标操作、网络稳定。H5页面则几乎只考虑手机——竖屏、触摸、各种刘海屏和底部小黑条。你写个hover效果，在手机上根本触发不了；你设个100vh，在Safari里可能被地址栏吃掉一截。我见过一个真实案例：某团队做活动页，在Chrome DevTools里模拟手机一切正常，结果上线后iPhone 12上按钮被键盘顶飞，安卓机又因为字体缩放整个布局错位。这就是H5的日常。

上面这行代码，做H5的人闭着眼都能敲出来。但做传统Web的人可能几年都不写一次。这就是分野。

性能与体验：H5戴着镣铐跳舞

Web应用可以吃满桌面CPU，开几十个标签页也不心疼。H5不行。它跑在手机浏览器或WebView里，内存有限、GPU能力参差。一个复杂的CSS动画，在高端机上丝滑，在千元机上直接卡成PPT。所以H5开发经常要妥协：少用大图、慎用滤镜、动画尽量用transform和opacity。我见过一个团队为了做视差滚动，硬是把一张背景图切成八块，就为了减少重绘面积。

另一个坑是微信。国内大量H5跑在微信内置浏览器里，那是个魔改过的WebView。它有自己的JSAPI、自己的缓存策略、自己的分享限制。你调个wx.config没配好，分享出去就是白屏。传统Web哪用管这些？

那到底怎么区分？看场景和目的

如果有人说“我们做个Web版”，通常指功能完整的网站或后台系统，用户会长时间停留、频繁操作。如果说“我们做个H5”，多半是一次性的、传播导向的、生命周期可能只有两周的轻量页面。前者像盖房子，后者像搭展台。

当然也有交叉。比如在线文档工具，桌面Web版和手机H5版共用一套后端，但前端要写两套适配。这时候“H5”就单纯指移动端Web实现。所以别纠结名词，看上下文。

最后说个真事。我以前带过一个新人，他花三天用Vue写了个管理后台，又花三天用同样的技术栈写了个H5抽奖页。他跟我说：“感觉H5更难，因为后台出bug顶多被同事骂，H5出bug老板直接收到用户投诉。” 这话糙理不糙。Web和H5的区别，不在代码里，在用户手里那台设备上。

最新评论