本篇文章为大家展示了浏览器不优化DOM操作性能的示例分析，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比郴州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式郴州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖郴州地区。费用合理售后完善，十年实体公司更值得信赖。

知乎上有人提问：

现在前端这么繁荣，为什么大家在扎堆在 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操作性能的示例分析，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

当前名称：浏览器不优化DOM操作性能的示例分析
文章地址：http://scyanting.com/article/ghhocs.html