为什么说DOM操作是昂贵的

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

浏览器渲染引擎工作流程


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

这几个工作流程并不会严格遵循先后顺序,而是有可能出现同时进行。
为什么说DOM操作是昂贵的_第1张图片


为什么会卡顿?


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


关注我,不后悔!

你可能感兴趣的:(其他,JavaScript,DOM,Javascript)