标签:使用 sp 数据 问题 时间 bs 程序 如何 数据结构
浏览器下载完页面中所有的组件之后,会解析生成两个内部数据结构:
1. DOM树:表示页面结构
2. 表示DOM节点如何显示
当DOM和渲染树构建完成之后,浏览器就开始显示(绘制)页面元素,当DOM的变化影响了元素的几何属性(如改变边框或者高度)浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会受到影响,浏览器会使中受到影响的部分失效,并重新构造渲染树,这个过程被称为所谓的“重排”。完成重排后,浏览器会重新绘制受影响的部分到屏幕中,这个过程被称为“重绘”。
不是所有的DOM变化都影响元素的几何属性,如果演变元素的背景色并不影响它的宽度和高度,这种情况,只会发生一次重绘,而不会发生重排,因为元素的布局没改变,
重绘和重排对影响速度问题,一般会延迟时间。应尽可能减少这样的操作。
重排发生一般出现这几种情况:
1. 添加或删除可见的DOM元素;
2. 改变元素位置;
3. 元素的尺寸改变(包括:外边距、内边距、边框、高度等)
4. 内容改变(如:文本改变或图片被另外一个不同尺寸的图片替代)
5. 页面渲染器初始化;
6. 浏览器窗口尺寸的改变;
根据改变的范围和程度,渲染树中或大或小的对应部分也需要重新计算。有些改变会触发整个页面的重排:如当滚动条出现时候
每次重排都会产生计算消耗,大多数浏览器通过队列化修改并批量执行来优化重排过程,然而,你可能会强制刷新队列并要求任务立刻执行,获取布局信息的操作会导致队列刷新。
一个好的提高程序响应的速度策略就是减少重绘和重排的操作发生,为了减少,应该合并多次对DOM和样式的修改,然后一次处理。离线操作DOM,使用缓存,并减少访问局部信息的次数
标签:使用 sp 数据 问题 时间 bs 程序 如何 数据结构
原文地址:http://www.cnblogs.com/taojiujiu/p/4037394.html