---

前言

当前需要向页面插入十万个div元素，如果使用普通的渲染方式，会造成延迟。这时候就需要通过分时函数来实现渲染了。

---

效果图

---

html

<div class="w_680 d_f jc_sb">
    <div class="d_f fd_c ai_c">
        <button onclick="handleInsert()">插入1万个元素(原始写法)</button>

        <div id="idOld"></div>
    </div>

    <div class="d_f fd_c ai_c">
        <button onclick="handleOptimize()">插入1万个元素(优化后的写法)</button>

        <div id="idOptimize"></div>
    </div>
</div>

---

原始写法

function handleInsert() {
    let idOld = document.querySelector('#idOld'),
        datas = Array.from({ length: 100000 }, (_, i) => i + 1);

    for (const item of datas) {
        const div = document.createElement('div');

        div.textContent = item;
        idOld.appendChild(div);
    }
}

---

优化方式一(参数归一化)

function handleOptimize() {
    let datas = Array.from({ length: 100000 }, (_, i) => i + 1),
        idOptimize = document.querySelector('#idOptimize'),
        taskHandler = (item, i) => {
            const div = document.createElement('div');
            
            div.textContent = item;
            idOptimize.appendChild(div);
        };

    performChunk(datas, taskHandler);
    // performChunk(100000, taskHandler);
}

function performChunk(datas, taskHandler) {
	// 参数归一化
    if (typeof datas === 'number') datas = Array.from({ length: datas }, (_, i) => i + 1);
    if (datas.length === 0) return false;

    let i = 0;

    function _run() {
        if (i >= datas.length) return false;

        requestIdleCallback((idle) => {
            while (idle.timeRemaining() > 0 && i < datas.length) {
                taskHandler(datas[i], i);

                i++;
            }

            _run();
        });
    }

    _run();
}

---

优化方式二(当浏览器不支持requestIdleCallback方法的时候)

function handleOptimize() {
    let datas = Array.from({ length: 100000 }, (_, i) => i + 1),
        idOptimize = document.querySelector('#idOptimize'),
        taskHandler = (item, i) => {
            const div = document.createElement('div');
            
            div.textContent = item;
            idOptimize.appendChild(div);
        },
        scheduler = (task) => {
            setTimeout(() => {
                const start = Date.now();
                task(() => Date.now() - start < 50);
            }, 100);
        };

    performChunk(datas, taskHandler, scheduler);
}

function performChunk(datas, taskHandler, scheduler) {
    if (typeof datas === 'number') datas = Array.from({ length: datas }, (_, i) => i + 1);
    if (datas.length === 0) return false;

    let i = 0;

    function _run() {
        if (i >= datas.length) return false;

        scheduler((isGoOn) => {
            while (isGoOn() > 0 && i < datas.length) {
                taskHandler(datas[i], i);

                i++;
            }

            _run();
        });
    }

    _run();
}

---

优化方式三(判断环境)

function handleOptimize() {
    let datas = Array.from({ length: 100000 }, (_, i) => i + 1),
        idOptimize = document.querySelector('#idOptimize'),
        taskHandler = (item, i) => {
            const div = document.createElement('div');
            
            div.textContent = item;
            idOptimize.appendChild(div);
        }

    browserPerformChunk(datas, taskHandler);
}

function browserPerformChunk(datas, taskHandler) {
    const scheduler = (task) => {
        requestIdleCallback((idle) => {
            task(() => idle.timeRemaining() > 0);
        });
    };

    performChunk(datas, taskHandler, scheduler);
}

function performChunk(datas, taskHandler, scheduler) {
    if (typeof datas === 'number') datas = Array.from({ length: datas }, (_, i) => i + 1);
    if (datas.length === 0) return false;

    let i = 0;

    function _run() {
        if (i >= datas.length) return false;

        scheduler((isGoOn) => {
            while (isGoOn() > 0 && i < datas.length) {
                taskHandler(datas[i], i);

                i++;
            }

            _run();
        });
    }

    _run();
}