页面中的dom元素在完成绘制之后动态更改DOM结构或者css样式都会引发浏览器重绘
比如如果只是改动一个元素的背景颜色,那就只引发一个元素的重绘,但是如果改动了元素的位置或者是增加了一个新的元素,那就会引发大量的重绘,因为它影响了所有的兄弟元素
减少重绘的数量有如下几种方式:
(1)js动态引起DOM元素的样式
eg:
<p id="test">this is a test</p>
<script>
var test = document.getElementById(‘test‘);
test.onclick=function(){
test.style.height = ‘300px‘,
test.style.background = ‘red‘,
test.style.color = ‘white‘
}
</script>
在这个例子中,浏览器会对DOM结构进行三次重绘,会严重影响网站的性能,如果改成如下所示,则会很明显地减少重绘数量:
<style>
.change{
height:300px;
background:red;
color:white;
}
</style>
<p id="test">this is a test</p>
<script>
var test = document.getElementById(‘test‘);
test.onclick=function(){
test.className = ‘change‘;
}
</script>
(2)规定图片的宽和高
在浏览器生成布局树的时候,它会给每一个元素留一个区域,如果一开始没有规定好img的宽和高,那么浏览器就只能猜了,而且猜错的概率很大,一旦猜错了之后,它只能重绘来纠正这个错误,所以可以规定图片的宽和高来使浏览器一开始就预留好正确的位置和空间
(3)不要使用表格布局
由于浏览器是一行一行地显示表格的,如果有一行的列宽和行高和之前的不一样,那么之前绘好的行也必须重新绘制,但是在需要显示表格类数据的时候可以使用表格
(4)定义字符集
大多数浏览器(除了IE6,IE7,IE8)都会暂停页面渲染直到它们找到了字符集的定义,因为字符集是渲染页面的一个重要因素,不同的字符集可能意味着完全不同的渲染,显示的效果也是不同的所以,你可以通过在head标签里定义字符集来进一步加快你的页面显示
比不定义字符集还要可怕的是把字符集的定义放在页面后面,以至于你的浏览器已经开始渲染页面了才发现你定义的字符集,除非你定义的字符集和浏览器默认的是一致的,否则它将完全抛弃当前页面的渲染,并且以你定义的字符集重新开始渲染页面
(5)不要重组DOM
尽量不要重新组合DOM结构,如果必须,并且有许多节点要添加,那么不要一次加一个,最好是一起加进去.
也不要多次去修改元素的内联样式
原文：http://my.oschina.net/sunshinewyf/blog/515462