正规网站制作公司哪里有,做的不错的h5高端网站,wordpress如何加友链,效果图制作流程MENU web前端之原生实现分时函数、分时间段渲染页面#xff0c;而不是等到所有操作都执行结束才渲染页面、提高用户体验web前端之原生实现树形目录结构、一维数组生成多维数组、无限级菜单目录 web前端之原生实现分时函数、分时间段渲染页面#xff0c;而不是等到所有操作都执… MENU web前端之原生实现分时函数、分时间段渲染页面而不是等到所有操作都执行结束才渲染页面、提高用户体验web前端之原生实现树形目录结构、一维数组生成多维数组、无限级菜单目录 web前端之原生实现分时函数、分时间段渲染页面而不是等到所有操作都执行结束才渲染页面、提高用户体验
前言 当前需要向页面插入十万个div元素如果使用普通的渲染方式会造成延迟。这时候就需要通过分时函数来实现渲染了。 html
div classw_680 d_f jc_sbdiv classd_f fd_c ai_cbutton onclickhandleInsert()插入1万个元素(原始写法)/buttondiv ididOld/div/divdiv classd_f fd_c ai_cbutton onclickhandleOptimize()插入1万个元素(优化后的写法)/buttondiv ididOptimize/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();
}解析 待定… web前端之原生实现树形目录结构、一维数组生成多维数组、无限级菜单目录
html
div idmenuBox/divJavaScript
mainInit();// 数据处理
// 扁平数组结构转换成JSON树形结构
function mainInit() {// 源数据let data [{ id: 5, parentId: 2, name: 目录1-1-1, },{ id: 1, parentId: 0, name: 目录1, },{ id: 13, parentId: 9, name: 目录2-2-3, },{ id: 3, parentId: 1, name: 目录1-2, },{ id: 2, parentId: 1, name: 目录1-1, },{ id: 12, parentId: 9, name: 目录2-2-2, },{ id: 4, parentId: 1, name: 目录1-3, },{ id: 7, parentId: 0, name: 目录2, },{ id: 9, parentId: 7, name: 目录2-2, },{ id: 6, parentId: 2, name: 目录1-1-2, },{ id: 11, parentId: 9, name: 目录2-2-1, },{ id: 8, parentId: 7, name: 目录2-1, },{ id: 10, parentId: 7, name: 目录2-3, },];// 构造一个新对象// 对象的属性名是id值// 对象的属性值是数组对应项的值let map {};data.forEach(item {map[item.id] item;});const result [];data.forEach(item {const parent map[item.parentId];if (parent) {// 如果有children则push数据到children中// 如果没有就新建一个空的children数组// 然后再push数据parent.children parent.children || [];parent.children.push(item);} else {// 在本例中// else只会进入两次// 也是最外层目录result.push(item);}});const root document.getElementById(menuBox);createMenu(result, root);
}// 生成标签元素
function createMenu(data, root) {if (!data.length) throw new Error(出错啦);data.forEach(item {const detailsEle document.createElement(details);const summaryEle document.createElement(summary);const span document.createElement(span);span.innerHTML item.name;summaryEle.appendChild(span);detailsEle.appendChild(summaryEle);root.appendChild(detailsEle);if (item.children?.length) createMenu(item.children, detailsEle);});
}CSS
null
