浏览器解析代码过程页面的显示过程分为以下几个阶段：生成DOM树（包括display:none节点）基于DOM树，根据集合属性节点（margin,padding,width,height等）生成rendertree（不包括display:none,headnodes，但包括visibility:hiddennodes）在rendertree的基础上继续渲染color,backgroundcolor和otherstylesreflow:当rendertree部分或全部由于大小和边距的变化需要重新构建的过程称为reflowrepaint:当颜色背景不会引起页面布局变化，而只是重新渲染的过程称为重绘。通过上面的定义，可以明显看出重绘的代价比回流要小。重绘只涉及样式变化，不涉及布局。重绘就像给别人染头发，回流相当于给别人整容。什么会导致reflow页面渲染初始化DOM结构发生变化，脸都满了妈妈都认不出来了，所以会触发reflowrenderTree的变化，比如减少padding，增加border等，changingthepagelayout,andwindowresizeeventtriggers最复杂的一个：获取一些属性，触发reflow很多浏览器都会优化reflow，他会等到足够多的changesHappened，做一个batchreflow。但直接更改渲染树除外。在获取某些属性时，浏览器也会触发回流，以便获取正确的值。这使得浏览器的优化无效。这些属性包括offsetTop,offsetLeft,offsetWidth,offsetHeightscrollTop/Left/Width/Height,clientTop/Left/Width/Height,width,height调用getComputedStyle()，或者IE的currentStyle代码复制过来，哈哈，大致解释一下重绘和样式变化引起的回流vars=document.body.style;s.padding="2px";//回流+重绘s.border="1pxsolidred";//回流+重绘s.color="blue";//再次重绘s.backgroundColor="#ccc";//重新绘制s.fontSize="14px";//重绘一次重排+重绘，没想到，改变字体大小也会重排document.body.appendChild(document.createTextNode('abc!'));//添加节点，回流+重绘，可见回流必须伴随着重绘，但是单独重绘会导致回流对性能有一定的影响。虽然浏览器很巧妙的帮我们做了批处理，但是还是有很多上面提到的可怕的属性，一拿到就会回流。如何处理？减少回流避免逐项更改样式。最好一次性更改样式属性，或者将样式列表定义为类并一次性更改类属性。避免循环遍历DOM。创建一个documentFragment或div，在其上应用所有DOM操作，最后将其添加到window.document。避免多次读取offsetLeft等属性。如果无法避免，则将它们缓存在变量中。复杂元素的绝对或固定定位使其脱离文档流。否则，回流焊的成本非常高。display:none和visibility:hidden会产生回流和重绘。不可见但存在，保留空间，不影响结构，所以只生成repaint
