web APP 将替代 native app成新主流

来源：（V客学院知识分享）

 

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

 

 

 

1. 跨平台：所有系统都能运行

 

2.免安装：打开浏览器，就能使用

 

3.快速部署：升级只需在服务器更新代码

 

4.超链接：可以与其他网站互连，可以被搜索引擎检索

 

 

 

但是，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进行图形加速。

 

 

 

综合所述，Web版的体验不佳。那是否有解决方案？

 

就是尽量绕开 DOM 得使用，比如用数据库实体操作，或者CANVAS 渲染。

 

Canvas 渲染：用户就等于在跟图片互动，这样就绕开了DOM，降低了操作时滞。而且，canvas可以被硬件加速，这样就提高了性能。canvas的转化基于React框架实现，FlipBoard 开发了一个专门的库React-canvas，已经开源。

 

当然CANVAS 也存在很大问题：

 

canvas只是一个位图，本身没有语义，如果要在它上面实现UI，等于HTML语言已有的东西都要再发明一遍，比如如何实现超链接、如何实现CSS效果等等。一些最简单的东西都变得很麻烦，因为canvas不是自适应的（responsive），文字在哪里断行，都要自己计算，而且用户也无法选中文本。还有让搜索引擎检索网页，解决起来也不是很容易。

 

 

 

对未来Web app 技术发展提出了几点预测：

 

 

 

（1）多线程浏览器。每个网页应该由多个线程进行处理，主线程只负责布局和渲染，而且应该在16毫秒内完成，JavaScript由worker线程执行，这样就不会发生堵塞了。Mozilla正在开发的Servo就是这样一个项目。

 

 

 

（2）DOM的异步操作。JavaScript对DOM的操作不再是同步的，而是触发后，交给Event Loop机制进行监听。

 

 

 

（3）非DOM方案。浏览器不再将网页处理成DOM结构，而是变为其他结构。React的Virtual DOM方案就是这一类的尝试，还有更激进的方案，比如用数据库取代DOM。