CSS教程之repaint和reflow的相干常识
不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。破洛洛文章简介：页面重构应注重的repaint和reflow.
比来懂得了下repaint和reflow的相干常识，以为在页面重构过程当中就应当思索前端开辟（js）职员对dom举行操纵，可以加重客户扫瞄器的鸭梨。
在这里收拾了一下相干材料，保举看帖子底部的文章，假如以为排版不敷好请移步我的博客围不雅。这是一个会商帖，举一反三，人人说说本人事情中的履历~
1.甚么是repaint和reflow？
一个页面由两部分构成：
DOM：形貌该页面的布局
render：形貌DOM节点(nodes)在页面上怎样出现
当DOM元素的属性产生变更(如color)时,扫瞄器会关照render从头刻画响应的元素,此历程称为repaint。
假如该次变更触及元素结构(如width),扫瞄器则丢弃原有属性,从头盘算并把了局传送给render以从头刻画页面元素,此历程称为reflow。
这两个历程是很泯灭扫瞄器功能的,从IE系列和Chrome衬着页面速率上的差异便可看出衬着引擎盘算对应值和出现其实不必定高效,而每次对元素的操纵城市产生repaints或reflow,因而编写DOM交互时假如不注重就会招致页面功能低下.
页面衬着的历程以下：
1.剖析HTML代码并天生一个DOM树。
2.剖析CSS文件，按次为：扫瞄器默许款式->自界说款式->页面内的款式。
3.天生一个衬着树（rendertree）。这个衬着树和DOM树的分歧的地方在于，它是受款式影响的。它不包含那些不成见的节点。
4.当衬着树天生以后，扫瞄器就会在屏幕上“画”出一切衬着树中的节点。
2.甚么情形下会触发扫瞄器的repaint/reflow?
除页面在初次加载时一定要履历该历程以外，另有以下举动会触发这个举动：
援用:
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(inIE))
3.怎样优化？
1.制止在document上间接举行频仍的DOM操纵，假如的确必要能够接纳off-document的体例举行，详细的办法包含但不完整包含以下几种：
援用:
1.先将元素从document中删除，完成修正后再把元素放回本来的地位
2.将元素的display设置为”none”，完成修正后再把display修正为本来的值
3.假如必要创立多个DOM节点，可使用DocumentFragment创立完后一次性的到场document
2.会合修正款式
援用:
1.尽量少的修正元素style上的属性
2.只管经由过程修正className来修正款式
3.经由过程cssText属性来设置款式值
3.缓存Layout属性值
援用:
关于Layout属性中非援用范例的值（数字型），假如必要屡次会见则能够在一次会见时先存储到部分变量中，以后都利用部分变量，如许能够制止每次读取属性时形成扫瞄器的衬着。
4.设置元素的position为absolute或fixed
援用:
在元素的position为static和relative时，元素处于DOM树布局傍边，当对元素的某个操纵必要从头衬着时，扫瞄器会衬着全部页面。将元素的position设置为absolute和fixed可使元素从DOM树布局中离开出来自力的存在，而扫瞄器在必要衬着时只必要衬着该元素和位于该元素下方的元素，从而在某种水平上延长扫瞄器衬着工夫，这在现今愈来愈多的Javascript动画方面特别值得思索。
5.衡量速率的光滑
援用:
好比完成一个动画，以1个像素为单元挪动如许最光滑，但reflow就会过于频仍，CPU很快就会被完整占用。假如以3个像素为单元挪动就会好良多。
6.不要用tables结构
援用:
不要用tables结构的另外一个缘故原由就是tables中某个元素一旦触发reflow就会招致table里一切的别的元素reflow。在合适用table的场所，能够设置table-layout为auto或fixed，如许可让table一行一行的衬着，这类做法也是为了限定reflow的影响局限
7.不要在css内里写expression
援用:
良多情形下城市触发reflow，假如css里有expression，每次城市从头盘算一遍
参考文章：
1.怎样削减扫瞄器repaint和reflow
2.Repaint,reflow/relayout,restyle
3.Reflows&Repaints:CSSPerformancemakingyourJavaScriptslow?
4.Repaint跟踪扫瞄器的衬着[假如你的FF是3.5beta+监听网页的重绘情形]
</p>
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素. 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 可以使用 CSS 检查工具进行设计。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
页:
[1]