时间分片

写在前面

昨天（2020-9-19）看2019vueconf的时候，尤大在分享vue3的特点的时候，提到了vue和react在底层针对模板编译和jsx优化的一些不同的时候提到了一个词，时间分片；然后就做了一点功课，写个笔记。

正文

解决了什么？

• js会阻塞ui的渲染，所以当一个操作耗时非常长时，就会造成页面内容显示滞后，带来很不好的用户体验
• 通过将操作划分为一个个小的阶段，来执行

怎么做的？

• 利用异步的一些api
• settimeout
• requestIdleCallback
• requestAnimationFrame

实例

实例描述：通过js插入10000个li到ul中

使用最普通的循环插入

<ul class="list"></ul>
<script>
    'use strict'
    let list = document.querySelector('.list')
    let total = 100000
    for (let i = 0; i < total; ++i) {
        let item = document.createElement('li')
        item.innerText = `我是${i}`
        list.appendChild(item)
    }
</script>

使用定时器

<ul class="list"></ul>
<script>
    'use strict'
    let list = document.querySelector('.list')
    let total = 100000
    const render = (start, end) => {
        if (end < total) {
            setTimeout(() => {
                let frag = document.createDocumentFragment()
                for (let i = start; i < end; ++i) {
                    let item = document.createElement('li')
                    item.innerText = `我是${i}`
                    frag.appendChild(item)
                }
                list.appendChild(frag)
                render(end + 1, end + 20)
            }, 10)
        }
    }
    render(0, 20)
</script>

使用requestAnimationFrame

<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)
        window.requestAnimationFrame(() => {
            let fragment = document.createDocumentFragment()
            for (let i = 0; i < curPage; ++i) {
                let item = document.createElement('li')
                item.innerText = `我是${index + i}`
                fragment.appendChild(item)
            }
            list.appendChild(fragment)
            render(total - curPage, index + curPage)
        })
    }
    render(total, index)
</script>

总结

• 时间分片就是讲耗时的长任务，划分为一个个耗时很短的小任务；将处理结果一点点返回给用户
• 主要的手段就是利用js的event loop机制，通过异步的一些操作来处理切分任务

其他

关于requestAnimationFrame和setInterval处理动画的区别

• 帧率和循环的事件交由浏览器控制，可以更好的控制的帧率
• 性能流畅度更优秀
• 新api，兼容性会有些问题