浏览器渲染过程的第(4)(5)步
Layout：元素排列 ---- 排列 ----再次排列（重排）
Paint：元素绘制 ----- 绘制 ---- 再次绘制（重绘）
css 图层：
如何看图层：
Paint Count 绘制次数
（2）重绘是以图层为单位，如果图层中某个元素需要重绘，则整个图层都需要重绘
重绘不一定重排、重排一定会重绘
重排重绘的常见操作：
1. 增、删、改 DOM 节点的时候
2. 移动 DOM 位置
3. 更改 css 样式
4. window.resize
5. 获取某些元素 宽、高 （重排）
（3）重绘、重排优化操作
1. 使用 css3 的 transform 来代替 top、left
transform 的改变仅仅影响图层的组合，不会引发重绘和重排
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="./1.png" alt="" id="img">
<script>
setTimeout(() => {
var oImg = document.getElementById('img')
console.log(oImg)
oImg.style.left = '20px'
}, 1000)
</script>
</body>
</html>运行:
2. 多次操作合并
把多次改变样式的操作合并成一次
3. 使用文档碎片，vue 使用了这个（源码）
扫一扫
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
