web性能优化 - 重排与重绘

重排与重绘

重排 [重构/回流/reflow]：
当DOM变化影响了节点的几何属性，浏览器需要重新计算节点的几何属性，并且页面中其他节点的可能受影响，这样渲染树就发生了改变并重新构造渲染树。这个过程称为重排。
引起方式：改变页面布局（width,height,left,top等）

重绘 [repaint或redraw] ：
重绘是一个节点的外观发生改变的行为，例如改变color、outline等属性。
浏览器会根据节点的新属性重新绘制，使节点呈现新的外观。重绘不会带来重新布局，并不一定伴随着重排。
引起方式：在页面布局稳定情况下，改变颜色、背景色

两者关系：
重排会引起重绘，重绘不一定一起重排

两者对浏览器的影响：
提升浏览器渲染开支，降低浏览器性能，可视效果就是导致浏览器卡顿缓慢。

降低重排与重绘的手段与方式：

1.减少dom操作
例如：改变一个元素的样式，不要反复获取这个dom进行逐次的css样式修改，而是将dom元素存在变量中，将多个样式放在一个类名下，操作类名

//--css
.box { width:300px; height:200px; background:red; }
//---js
var oBox = document.getElementById('box');
oBox.className = 'box';

不要这么做

document.getElementById('box').style.width = 300+'px';
document.getElementById('box').style.height= 200+'px';
document.getElementById('box').style.backgroundColor = 'red';

2.将大量操作dom元素，引发重排的操作，在文档流外进行
添加10000个li

var oUl = document.getElementById('ul1');
var resultStr = '';
for(var i=0; i<1000; i++){
  var oLi = '<li>'+('hello world'+i)+'</li>';
  resultStr += oLi;
}
 oUl.innerHTML= resultStr;

不要这么做：

var oUl = document.getElementById('ul1');
for(var i=0; i<1000; i++){
  var oLi = document.createElement('li');
  oLi.innerHTML = 'hello world'+i;
  oUl.appendChild(oLi);
}

3.使用文档碎片做DOM操作

var oUl = document.getElementById('ul1');
var fragment = document.createDocumentFragment();
for(var i=0; i<1000; i++){
var oLi = document.createElement('li');
oLi .innerText = 'hello world'+i;
fragment.appendChild(oLi);
}
oUl.appendChild(fragment);

4.通过css方式，降低对文档流的重排
将需要反复操作，且每次操作都会引起重排的DOM元素，开始display设置为none
完整所有操作后，再讲display设置为block

var oUl = document.getElementById('ul1');
oUl.style.display = 'none';
for(var i=0; i<1000; i++){
  var oLi = document.createElement('li');
  oLi.innerHTML = 'hello world'+i;
  oUl.appendChild(oLi);
}
oUl.style.display = 'block';

5.使用cloneNode与replaceChild

var old = document.getElementById('mylist');
var clone = old.cloneNode(true); 
//如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，只复制当前节点。
appendDataToElement(clone, data);
old.parentNode.replaceChild(clone, old);

6.使用transform 替代 position去完成动画，减少重排与重绘
chrome 调试工具 performance中查看 painting; 使用css3要比css2快3倍以上

//--css
#ul1 { left: 0; top: 0; position: absolute; width:100px; height: 100px; background: red; transition: all ease 0.5s;}
body { height: 800px;}
/* body:hover #ul1 { left: 300px; top: 300px;}  */
body:hover #ul1 { -webkit-transform: translate(300px,300px); transform: translate(300px,300px); }

//--html
<ul id="ul1"></ul>

7.给页面图片或者其父级设定一个尺寸
为页面中所有图片指定宽度和高度可以消除不必要的重排和重新绘，使页面渲染速度更快

• 指定与图片本身相一致的尺寸、如果一个图片文件实际上的大小是60×60像素，不要在HTML或CSS里设置尺寸为30×30像素；提前作2套图，一个是缩略，一个是展示

8.将JS脚本放置最后面，较少阻塞，加快浏览器渲染（排版与绘制）速度
页面加载渲染过程

• 解析HTML代码并生产一个DOM树
• 解析CSS文件，顺序为：浏览器默认样式 => 自定义样式 => 页面内样式
• 生产渲染树。与DOM树不同的是渲染树受样式影响，不包括不可见节点
• 根据渲染树，浏览器就会在屏幕上绘制出渲染树上的所有节点