微任务批量操作大量HTML元素

const times = 20000;
        let html = ''
        // 生成两万个模板字符串
        for (let i = 0; i < times; i++) {
            html = ` <div>${i}${html}</div>`
        }
        // 追加模板到页面
        document.body.innerHTML += html
        // 修改生成的div元素样式
        let queue = [] // 创建缓存样式的数组（每个任务中queue最多只有一个元素）
        let microTask  //执行修改样式的微任务
        const st = () => {
            const div = document.querySelector('div') // 合并样式
            const style = queue.reduce((acc, cur) => ({ ...acc, ...cur }), {})
            for (let prop in style) {
                div.style[prop] = style[prop]
            }
            queue = []
            microTask = null
        }
        const setStyle = (style) => {
            queue.push(style)
            // 创建微任务
            if (!microTask) {
                microTask = Promise.resolve().then(st)
            }
        }
        for (let i = 0; i < times; i++) {
            const style = {
                fontSize: (i % 12) + 12 + 'px',
                color: i % 2 ? 'red' : 'green',
                margin: (i % 12) + 12 + 'px'
            }
            setStyle(style)
        }