首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

js性能-DOM编程之重绘跟重排

2012-11-22 
js性能-DOM编程之重绘和重排浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两

js性能-DOM编程之重绘和重排

浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构

?

?

DOM树 ?-------- 表示页面结构渲染树 ? -------- 表示DOM节点如何显示
? ? ? DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。? ? ? 渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义,理解页面元素为一个具体填充(padding),边距(marging),边框(borders)和位置(position)的盒子。? ? ? 一旦DOM和渲染树构建完成,浏览器就开始显示(绘制"paint")页面元素。

?

?

?

? ? ?当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。

?

? ? 重排:浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树

?

? ??重绘完成重排后,浏览器会重新绘制受影响的部分到屏幕中。

?

?

? ? 重排何时发生

?

?

添加或删除可见的DOM元素元素位置的改变元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸的改变

?

热点排行