, 给出两种解决方案:
Web Worker: 使用 Web Worker 提供的多线程环境来处理 long task;
Time Slicing: 将主线程上的 long task 进行时间分片;
保证被动交互让用户感觉流畅...除去用户的逻辑代码, 一帧内留给浏览器整合的时间大概只有 6ms 左右, 回到像素管道上来, 我们可以从这几方面进行优化:
避免 CSS 选择器嵌套过深
Style 这部分的优化在 css 样式选择器的使用...可以看到经过调换顺序后, 后执行的 el.style.width 会新开一个像素管道, 而不会在原先的像素管道进行重排。...[i].style.width = newWidth + 'px'; // ②
}
可以在火焰图中看到它发生了重绘的警告,
?...执行顺序是 ①②①②①②①..., 假若我们在第一个 ① 后面插入一条竖线后 ①|②①②①②①, 其就变成先修改值后取值的情景, 所以也就发生了重绘!