前言：
同事遇到一个应用场景，后端接口响应的速度很快，但是前端处理数据比较复杂然后渲染到echart图表中，导致页面渲染严重卡顿。带着点好奇，所以实际测试了下谷歌浏览器渲染页面的过程。如下：
例子1：改变背景颜色和宽度测试重排和重绘 (Performance：可以查看发生的详细过程)，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
测试： 重绘 和 重排
</div>
<br>
<button>改变背景色，触发重绘</button>
<br>
<br>
<button>改变宽度，触发重排 => 触发重绘</button>
</body>
<script>
let box = document.querySelector('.box')
let btn1 = document.querySelectorAll('button');
for (const [key, value] of Object.entries(btn1)) {
value.addEventListener('click', () => {
if (key == 0) {
box.style.backgroundColor = "red"
} else {
box.style.width = "400px"
}
});
}
</script>
<style>
.box {
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>
</html>
- 点击按钮1：先点击record记录这一过程，等页面完成渲染再stop，可以看到performance中的详细参数：
- 点击按钮2：可以看到performance中的详细参数：
例子2：动态渲染10万条li标签，例子借鉴出处🗡 (Performance insights：可以测试总的时间)，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul></ul>
</body>
<script>
// 方法1:
// let ul = document.querySelector('ul')
// for (let i = 0; i < 100000; i++) {
// const li = document.createElement('li');
// li.innerHTML = `List item ${i}`;
// ul.appendChild(li);
// // Layout: 5.129秒 (100) 5.096秒 (100)
// }
// 方法2：
let ul = document.querySelector('ul')
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100000; i++) {
const li = document.createElement('li');
li.innerHTML = `List item ${i}`;
fragment.appendChild(li);
// Layout: 4.893秒 (100) 5.063秒 (100)
}
ul.appendChild(fragment);
</script>
<style>
</style>
</html>
谷歌浏览器为例，实际测试如下：
结论：普遍状态下，由于方法2中添加大量元素时使用 DocumentFragments，导致页面重排（layout）花的时间更少。
文章的最后，查阅以下网站：
-
Chrome 开发者工具官网：developer.chrome.com/docs/devtoo…
-
本文测试功能所使用方法，可参考官网用法：developer.chrome.com/docs/devtoo…
