《
页面重构应注意repaint和reflow的9个问题》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302349622013.htm
2. 什么情况下会触发浏览器的repaint/reflow?
一个页面由两局部组成：
DOM：描述该页面的结构
render：描写 DOM 节点 (nodes) 在页面上如何出现
3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受款式影响的。它不包含那些不可见的节点。
援用:
,页面设计中的中文测试; ,面向对象的XHTML与CSS编程; 对Layout属性中非引用类型的值（数字型），如果需要屡次拜访则可以在一次访问时先存储到局部变量中，之后都应用部分变量，这样可以防止每次读取属性时造成浏览器的渲染。
4. 设置元素的position为absolute或fixed
引用:
许多情形下都会触发reflow，如果css里有expression，每次都会重新计算一遍
这两个过程是很消耗浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和浮现并不必定高效, 而每次对元素的操作都会产生 repaints 或 reflow, 因而编写 DOM 交互时如果不注意就会导致页面机能低下.
页面渲染的过程如下：
除了页面在首次加载时必定要阅历该过程之外，还有以下行动会触发这个行为：
引用:
1. DOM元素的增加、修改（内容）、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体色彩（只有Repaint，由于不需要调剂布局）
3. 利用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、转动页面
5. 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
3. 怎么优化？
引用:
,非常实用的CSS统计图表实例; 不要用tables布局的另一个起因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素 reflow。在合适用table的场所，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限度reflow的影响范畴
7. 不要在css里面写expression
引用:
在元素的position为static和relative时，元素处于DOM树构造当中，当对元素的某个操作需要重新渲染时，浏览器会渲染全部页 面。将元素的position设置为absolute跟fixed能够使元素从DOM树结构中脱离出来独破的存在，而浏览器在需要渲染时只须要渲染该元素 以及位于该元素下方的元素，从而在某种水平上缩短浏览器渲染时光，这在当今越来越多的Javascript动画方面尤其值得斟酌。
5. 衡量速度的平滑
引用:
1. 尽可能少的修改元素style上的属性
2. 尽量通过修改className来修改样式
3. 通过cssText属性来设置样式值
3. 缓存Layout属性值
1. 什么是 repaint 和 reflow？
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会告诉 render 重新描写相应的元素, 此过程称为 repaint。
引用:
,静态页面制作注意事项; 比方实现一个动画，以1个像素为单位挪动这样最平滑，但reflow就会过于频繁，CPU很快就会被完整占用。如果以3个像素为单位移动就会好良多。
6,陈凯：浅谈影响B2C网站转化率的七大因素. 不要用tables布局
在这里收拾了一下相干材料，先容一下页面重构应留神repaint和reflow的9个问题
Tag： reflow repaint 页面重构 reflow repaint 页面重构
4.当渲染树天生之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。
引用:
1. 先将元素从document中删除，完成修改后再把元素放回原来的地位
2. 将元素的display设置为”none”，实现修改后再把display修正为本来的值
3. 如果需要创建多个DOM节点，可以使用DocumentFragment创立完后一次性的参加document
2. 集中修改样式
--> [
网站建设之]页面重构应注意repaint和reflow的9个问题
1.解析HTML代码并生成一个 DOM 树。
假如该次变更波及元素布局 (如 width), 阅读器则摈弃原有属性, 从新盘算并把成果传递给 render 以重新刻画页面元素, 此进程称为 reflow。
1. 避免在document上直接进行频繁的DOM操作，如果确切需要可以采取off-document的方法进行，详细的方式包括但不完全包括以下多少种：
2.解析CSS文件，次序为：浏览器默认样式->自定义样式->页面内的样式。
(责任编辑：网站建设)
页面重构应注意repaint和reflow的9个问题相关文章