浏览器不优化DOM操作性能的示例分析
本篇文章为大家展示了浏览器不优化DOM操作性能的示例分析，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
知乎上有人提问：
现在前端这么繁荣，为什么大家在扎堆在 JS 上做文章，搞什么 TypeScript，Deno 什么的。DOM 操作不是开销最大的么，为什么大家不把精力放到优化浏览器交互而是 JS 技术的革新上？
浏览器一直在优化 DOM 的性能啊。
框架的目标是提高开发效率，而非运行效率。况且 DOM 的性能（或者延伸到浏览器的性能）这个确实不是由社区驱动的，虽然主流几大浏览器都是开源的，但这些浏览器的开发者几乎都是商业公司。
相比 JS 而言，开发者们对于浏览器布局和渲染的关注更少。毕竟大家对 JavaScript 的关注比较多，但是对于 CSS(3) 的性能关注就比较少了。
例如 V8 的新 JS 编译器 Turbofan 以及新的解释器 Ignition 很多开发者都听说过，甚至 QuickJS，Hermes 的发布都引起了开发者们的强烈关注。但是对于 DOM 操作或者 CSS 引擎则很少有开发者关注。
其实浏览器一直在努力。如果你不信，你可以下载一个 2 年前的 Chrome 来访问一下当前页面 。
2005 年 HTML 规范大概 100 页。
2020 年 HTML 规范大概 800 页。
DOM 重绘
贴一张动图来看看 Chrome 对 DOM 重绘的改进。
当 Chrome 准备在屏幕上绘制像素时，它必须首先确定页面上的哪些元素需要重绘，哪些可以从上一帧的缓存中复制。在具有频繁 DOM 更改的动态页面上，会导致严重的性能问题。
Chrome 怎么改进的呢？Chrome 为每个元素生成绘制命令，通过跟踪分析这些绘制命令，以此来识别视觉上不重叠的子集。如果未修改其中一个子集，则可以直接从缓存中复制整个块，而无需进行任何其他工作。这就显著了提升了 DOM 改变后的重绘性能。
上述内容就是浏览器不优化DOM操作性能的示例分析，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。
