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 版权协议,转载请附上原文出处链接和本声明。