Web App和Native App性能对比

Posted 2020-10-01 包仔饭

比起手机App，网站有一些明显的优点。

• 跨平台：所有系统都能运行
• 免安装：打开浏览器，就能使用
• 快速部署：升级只需在服务器更新代码
• 超链接：可以与其他网站互连，可以被搜索引擎检索

但是，现实是怎样呢？

（1）体验差。手机App的操作流畅性，远超网站。

（2）业界不支持。所有公司的移动端开发重点，几乎都是原生app。

（3）用户不在乎。大多数用户都选择使用手机app，而不是网站。

如果将来有一天，Web app会成为主流，一定有一个前提，那就是它的性能可以赶上Native app。

 

Web app输给Native app的地方，不是界面（UI），而是操作性能。主要是互动（interaction）和动画（animation）这两方面，会出现卡顿（jank），用户会感觉到明显的时滞，有时简直慢得难以忍受。

Web app的性能瓶颈，主要有以下原因。

（1）Web基于DOM，而DOM很慢。浏览器打开网页时，需要解析文档，在内存中生成DOM结构，如果遇到复杂的文档，这个过程是很慢的。可以想象一下，如果网页上有上万个、甚至几十万个形状（不管是图片或CSS），生成DOM需要多久？更不要提与其中某一个形状互动了。

（2）DOM拖慢javascript。所有的DOM操作都是同步的，会堵塞浏览器。JavaScript操作DOM时，必须等前一个操作结束，才能执行后一个操作。只要一个操作有卡顿，整个网页就会短暂失去响应。浏览器重绘网页的频率是60FPS（即16毫秒/帧），JavaScript做不到在16毫秒内完成DOM操作，因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。

（3）网页是单线程的。现在的浏览器对于每个网页，只用一个线程处理。所有工作都在这一个线程上完成，包括布局、渲染、JavaScript执行、图像解码等等，怎么可能不慢？

（4）网页没有硬件加速。网页都是由CPU处理的，没用GPU进行图形加速。

上面这些原因，对于PC还不至于造成严重的性能问题，但是手机的硬件资源相对有限，用户互动又相对频繁，结果跟Native app一比，就完全落在了下风。