什么是时间分⽚（TimeSlicing）？
图⽚来⾃使⽤ RAIL 模型评估性能
根据上图我们可以知道，当延迟超过100ms，⽤户就会察觉到轻微的延迟。
所以为了避免这种情况，我们可以使⽤两种⽅案，⼀种是Web Worker，另⼀种是时间切⽚（Time Slicing）。
Web Worker
我们都知道，JS是单线程，所以当我们在运⾏长任务时，容易造成页⾯假死的状态，虽然我们可以将任务放在任务队列中，通过异步的⽅式执⾏，但这并不能改变JS的本质。
所以为了改变这种现状，whatwg推出了Web Workers。
具体的语法不会进⾏说明，有兴趣的童鞋可以查看MDN Web Worker。 我们可以看看使⽤了Web Worker之后的优化效果：
const testWorker = new Worker('./worker.js')
setTimeout(_ => {
testWorker.postMessage({})
console.log(ev.data)
}
}, 5000)
// worker.js
const start = w()
while (w() - start < 1000) {}
postMessage('done!')
}
代码以及截图来⾃于让你的⽹页更丝滑
时间切⽚（Time Slicing）
时间切⽚是⼀项使⽤得⽐较⼴的技术⽅案，它的本质就是将长任务分割为⼀个个执⾏时间很短的任务，然后再⼀个个地执⾏。
这个概念在我们⽇常的性能优化上是⾮常有⽤的。
例如当我们需要在页⾯中⼀次性插⼊⼀个长列表时（当然，通常这种情况，我们会使⽤分页去做）。 如果利⽤时间分⽚的概念来实现这个功能，我们可以使⽤requestAnimationFrame+DocumentFragment
关于这两个API，我同样不会做详细的介绍，有兴趣的可以查看MDN requestAnimationFrame跟MDN DocumentFragment。
这⾥有两个DEMO，⼤家可以对⽐下流畅程度：
未使⽤时间分⽚：
<style>
* {
margin: 0;
padding: 0;
}
.list {
width: 60vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<ul class="list"></ul>
<script>
'use strict'
let list = document.querySelector('.list')
let total = 100000
for (let i = 0; i < total; ++i) {
let item = ateElement('li')
item.innerText = `我是${i}`
list.appendChild(item)
}
</script>
使⽤时间分⽚：
<style>
* {
margin: 0;
padding: 0;
}
.list {西南票务网
width: 60vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<ul class="list"></ul>
<script>
'use strict'
let list = document.querySelector('.list')
let total = 100000
let size = 20
let index = 0
const render = (total, index) => {
if (total <= 0) {
return
}
let curPage = Math.min(total, size)
let fragment = ateDocumentFragment()
for (let i = 0; i < curPage; ++i) {
let item = ateElement('li')
item.innerText = `我是${index + i}`
fragment.appendChild(item)
木蠹蛾}
list.appendChild(fragment)
render(total - curPage, index + curPage)
})
}
render(total, index)
</script>
没有做太多的测评，但是从⽤户视觉上的感受来看就是，第⼀种⽅案，我就是想刷新都要打好⼏个转，往下滑的时候也有⽩屏的现象。除了上述的⽣成DOM的⽅案，我们同样可以利⽤Web Api requestIdleCallback以及ES6 API Generator]来实现。
同样不会做太多的介绍，详细规则可以看MDN requestIdleCallback以及MDN Generator。
具体实现如下：
<style>
* {
margin: 0;
padding: 0;
}
.list {
width: 60vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<ul class="list"></ul>
<script>
'use strict'
function gen(task) {
requestIdleCallback(deadline => {江西食品网
let next = ()
while (!next.done) {
if (deadline.timeRemaining() <= 0) {
gen(task)
return
}
next = ()
}
})
}
let list = document.querySelector('.list')
let total = 100000
function* loop() {
for (let i = 0; i < total; ++i) {
let item = ateElement('li')
item.innerText = `我是${i}`共青团中央委员会
list.appendChild(item)
yield
}
}
gen(loop())红领巾伴我成长
</script>
参考资料
1. web-performance
毛集论坛2. Measure Performance with the RAIL Model
3. 让你的⽹页更丝滑
4. 「前端进阶」⾼性能渲染⼗万条数据(时间分⽚)转⾃陈⼤鱼头
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议