js底层原理

  • Post author:
  • Post category:其他


1.操作DOM是昂贵的(操作DOM会导致重排和重绘)

2.js和DOM是两种东西,每次连接都需要消耗性能。

【js和DOM存在不同的文件中,例如chorme,使用webCore库来渲染页面,单js引擎是V8】


浏览器渲染过程:

1.解析HTML,构建DOM树

2.解析CSS,生产css规则树

3.合并DOM树和CSS规则树,生成render树

4.布局render树,负责各元素尺寸、位置的计算

5.绘制render树,绘制页面像素信息

6.浏览器会将各层的信息发送给GUP,GUP将各层合成

(不可见节点:meta、link标签,display:none属性标签)

造成重排的操作:添加或删除可见的dom元素、元素位置改变、尺寸改变、内容改变、页面渲染器初始化、浏览器窗口尺寸改变

触发重排的属性:offsetTop offsetLeft offsetWidth offsetHeight scrollTop scrollLeft scrollWidth scrollHeight clientTop clientLeft clientWidth clientHeight getComputedStyle()



【触发重排一定会触发重绘】



造成重绘的操作:改变颜色等




版权声明:本文为weixin_40249853原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。