不停的往页面中插入元素,记录JS执行时间和浏览器渲染时间
<body>
<div id="app"></div>
<script>
let timer = Date.now()
let total = 100;
for (let i = 0; i < total; i++) {
let li = document.createElement('li')
li.innerHTML = i;
app.appendChild(li)
}
setTimeout(() => {
console.log(Date.now() - timer, '浏览器渲染的时间')
}, 0);
console.log(Date.now() - timer, 'JS脚本执行的时间')
</script>
</body>
如何做好渲染优化,我们有两个方法:时间分片和虚拟滚动
时间分片
<body>
<div id="app"></div>
<script>
let timer = Date.now()