---

前言

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

---

效果图

---

html_12">html

html" title=javascript>javascript"><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>

---

原始写法

html" title=javascript>javascript">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);}
}

---

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

html" title=javascript>javascript">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方法的时候)

html" title=javascript>javascript">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();
}

---

优化方式三(判断环境)

html" title=javascript>javascript">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();
}