关于WEB性能的思考

Posted 2021-04-30 观阅之余

有关WEB性能的思考，不涉及方法论。

之所以萌生出写这篇文章的想法，源于最近看的一些有关虚拟DOM以及DOM操作为什么慢的参考资料，让我联想到了web性能。

一开始好奇虚拟DOM技术，看了看实现的算法后发现，虚拟DOM是为了解决DOM慢的问题，于是开始重点关注DOM为什么慢，然后就发现这其实是WEB性能问题。

不过，DOM为什么慢和DOM性能这两个问题也不是完全重合，因为这里所说的DOM慢，是属于WEB性能问题的一部分。还是先说一下DOM慢在何处吧。

DOM慢，主要来源两方面：DOM操作本身慢，DOM操作的影响导致页面响应慢。

DOM操作本身慢，主要涉及DOM操作的时间复杂度。

DOM操作的影响，是指网页渲染。DOM操作会导致布局，绘制，图层合并等浏览器行为，而这些行为统称为渲染，渲染是WEB的性能瓶颈。

WEB性能问题中，一般分为两个主要问题：首屏加载性能和交互性能（渲染性能）。

从上面可以看出DOM慢直指WEB渲染性能差。WEB渲染性能主要发生于重排和强制同步布局（重复读写DOM操作等），那么解决问题的方法之一是减少重排的可能性，尽量一次性操作，或者集中批量操作读或者写操作。针对这个问题的解决方案有fastDOM，另外一种就是上面提到的虚拟DOM技术。

上面提到虚拟DOM主要是为了解决DOM慢而提出的，通过集中处理DOM树中的改变，从而提高DOM渲染的效率。虚拟DOM是利用原生JS对象表示（代理）原始DOM树的信息和结构，当用户操作或浏览器行为需要页面状态发生改变时，那就根据状态的改变重构这个原生JS对象，然后对比新的对象树和旧的对象树，得到两树的差异，最后只针对变化的地方修改原始DOM树，重新渲染视图。这样一来，就可以集中处理DOM树的操作，较少渲染次数，提高渲染效率。因为针对原始DOM树的操作都可以在JS对象树中执行，而原生JS对象的操作快很多，算法实现也更容易，所以虚拟DOM技术可以提高DOM渲染效率。如果你使用过React或者Vue，肯定了解过这两个前端框架均采用了virtual DOM。此外，virtual DOM的核心算法是diff算法，即比较两棵DOM树的差异。

本文原发于简书平台，原文链接：

https://www.jianshu.com/p/7415078acc91

点击“阅读原文”，即可查看~