js性能-DOM编程之重绘和重排
2016-02-19 14:40
681 查看
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: 1.DOM树 -------- 表示页面结构 2.渲染树 -------- 表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。 渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义,理解页面元素为一个具体填充(padding),边距(marging),边框(borders)和位置(position)的盒子。 一旦DOM和渲染树构建完成,浏览器就开始显示(绘制"paint")页面元素。 当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。 重排:浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。 重绘:完成重排后,浏览器会重新绘制受影响的部分到屏幕中。 重排何时发生: 1.添加或删除可见的DOM元素 2.元素位置的改变 3.元素尺寸改变 4.内容改变 5.页面渲染器初始化 6.浏览器窗口尺寸的改变
原文
相关文章推荐
- 双击锁定,单击排序的js实现
- 史上最全javascript parseInt函数详解
- jsp文件中charset和pageEncoding的区别
- js刷新当前页面
- 归纳下js面向对象的几种常见写法
- js动画(4)——多物体运动
- Javascript中的循环变量声明,到底应该放在哪儿?
- json
- JS Window
- JSTL EL 详解
- 关于URL编码/javascript/js url 编码/url的三个js编码函数
- javascript实现选项卡切换效果
- 柯里化函数之Javascript
- JSON格式互转集合
- jstl 处理字符串函数 substring spli等
- pdf.js – 利用HTML5技术读取PDF文件
- javascript实现班级的学生信息显示
- JSP中的EL表达式详细介绍
- JavaScript之表单
- 理解JavaScript中的事件处理