1.介绍
为什么会写一篇这样的文章呢，因为再看完这样一篇测试之后感觉重绘和回流对浏览器的性能影响还是很大的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
.box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}
.box-ps{-webkit-animation:box-ps 2s linear;}
.box-tf{-webkit-animation:box-tf 2s linear;}
@-webkit-keyframes box-ps{
0%{
left:0;
}100%{
left:500px;
}
}
@-webkit-keyframes box-tf{
0%{
-webkit-transform:translate(0,0);
}100%{
-webkit-transform:translate(500px,0);
}
}
</style>
<div class="box-ps"></div>
<div class="box-tf"></div>
</html>
jianshu1.gif
使用translate浏览器性能
jianshu2.gif
可以看到left一直在回流重绘，但是translate就不一样啦，这是因为CSS3做了很多优化。
2.浏览器渲染机制
- 浏览器把我们获取的html代码分析成一个dom树，html中的每个tag都是dom树中的一个节点，根节点就是我们常用的document对象。dom树里面包含了所有的html tag，包含display:none的元素，还有js动态添加的元素等。
- 浏览器把所有样式（主要包含CSS和浏览器的样式设置）解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式。
- dom tree和样式结构体（cssom）结合后构建呈现树（render，tree）render tree有点像dom的树，但是还是有区别的，render的树可以识别样式，每个node都有自己的样式，而且render tree不包含隐藏的节点（比如display:none的节点，还有head节点）因为这些节点不会用于呈现，并且不会影响呈现的，所以就不会包含到render tree中。
3.什么是重绘和回流
1.当render tree 中的一部分（或者全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流，每个页面至少需要一次回流，那就是页面第一次加载的时候。
2.当render tree 中的一些元素需要更新属性时，而这些属性只影响元素的外观，风格，而不会影响布局时，就叫做重绘。
回流一定会重绘，但是重绘不一定回流
4.那些情况会发生重绘和回流
- 页面第一次加载的时候
- 改变字体，改变元素尺寸（如果只改变字体颜色，元素背景颜色那么只触发重绘）
- 改变元素里面内容的时候（比如在input里面输入文字）
- 添加/删除可见DOM元素（注意：如果元素本身就display:none的元素不会发生重排；visibility:hidden的元素显示或隐藏不影响重排）
- fiexd定位的元素，在拖动滚动条的时候会一直发生回流。
- 调整窗口大小的时候
- 计算offertWidth 和 offsetHeight属性的时候
5. 如果减少回流和重绘
- 使用tranform代替top
- 使用visibility 代替 display:none（前者只会重绘，后者会回流）
- 避免使用table布局（可能一个很小的改动会造成整个table的重新布局）
- 尽可能在dom树末端改变class（回流是不可避免的，但可以减少其影响。尽可能在DOM树末端改变class，可以限制回流的范围，使其影响尽可能少的节点）
- 避免设置多层内联样式（比如 div > span > a，因为浏览器要去递归寻找，比较复杂。）
- 将动画应用到position属性为absolute或者fixed的元素上（避免影响其他元素布局，这样只是重绘，而不是回流，同时控制动画可以选择requestAnimationFrame）
- 避免使用CSS表达式
- 避免频繁的操作dom（你可以js创建一个元素，完成所有dom操作在添加到页面当中）
- 避免频繁的读取会引发回流/重绘的属性（如果要多次使用可以保存起来 const width = element.offertWidth）
网友评论