js性能-DOM编程之重绘和重排
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构:
?
?
DOM树 ?-------- 表示页面结构渲染树 ? -------- 表示DOM节点如何显示?
?
?
? ? ?当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。
?
? ? 重排:浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
?
? ??重绘:完成重排后,浏览器会重新绘制受影响的部分到屏幕中。
?
?
? ? 重排何时发生:
?
?
添加或删除可见的DOM元素元素位置的改变元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸的改变?