如何流畅地在浏览器中渲染100万个元素？深入浏览器底层渲染原理图文分享

文章预览

点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 前言： 本文从表象深入到浏览器底层原理，逐步剖析造成页面卡顿的原因，总共 6000 字，文字和配图都是自己手打和制作的，只为了更准确的展示思路，但也难免会有我没发现的疏漏和错误，如果有欢迎指出，大家一起学习。 「先来看看下面的场景：」 我们首先用 「创建了一个按钮」 ，点击按钮后 js 会 「循环创建 100 万个元素并添加到 body 中」  (PS：为了时长只渲染了 10 万个)，我们明显看到 「动画中的小球在执行了创建元素的 js 代码后直接卡住不动了，而且整个页面的别的交互也全都卡住了，然后在几秒之后恢复。」 接下来我们就从表象到 「浏览器底层原理」 逐步分析造成 「页面卡顿的原因」 是什么以及 「如何进行解决」 ， 「最终目标：使用多种方法在循环创建 10 ………………………………