为什么说DOM操作是昂贵的

总体上来说，操作DOM对象时，会触发浏览器的布局（layout) 和 绘制（paint) 行为，这两个罪魁祸首会导致DOM卡慢，占用内存较高等，从而影响用户体验。

浏览器渲染引擎工作流程

---

1. 创建DOM树 HTML分析器，分析HTML元素，构建一颗DOM树
2. 创建StyleRules CSS分析器，分析CSS文件,构建Rules树
3. 创建Render树 将DOM树和Rules树关联起来，构建一颗Render树
4. 布局Layout 分析布局信息，计算坐标位置
5. 绘制Painting 开始绘制

这几个工作流程并不会严格遵循先后顺序，而是有可能出现同时进行。

---

为什么会卡顿？

---

当你在使用操作JQuery操作DOM时，可能轻松写出几句影响布局（layout) 的语句，比如获取需要的DOM属性、添加或删除DOM元素、改变浏览器窗口大小、修改DOM某些元素样式等等。这些操作指令一旦发出，浏览器就不得不提前执行layout，或者重复执行多次操作，尽管前几次的操作可能是白白浪费的无用功。
所以说，使用虚拟DOM（VDOM）映射成实际DOM来进行DOM操作，或使用CSS动画来替代DOM动画，会大大减少页面重绘。使得性能更加完善。

---

关注我，不后悔！