大量DOM操作的解决方案
案例:如何在页面元素ul中一次性插入30000个li标签,保证页面体验流畅呢?
解决方案:可以从减少 DOM 操作次数、缩短循环时间两个方面减少主线程阻塞的时间
- 减少 DOM 操作次数的良方是 DocumentFragment;
- 缩短循环时间需要考虑使用分治的思想把 30000 个
<li>
分批次插入到页面中,每次插入的时机是在页面重新渲染之前,采用requestAnimationFrame
。
代码示例:
(() => {
const ndContainer = document.getElementById('js-list');
if (!ndContainer) {
return;
} const total = 30000;
const batchSize = 4; // 每批插入的节点次数,越大越卡
const batchCount = total / batchSize; // 需要批量处理多少次
let batchDone = 0; // 已经完成的批处理个数 function appendItems() {
const fragment = document.createDocumentFragment();
for (let i = 0; i < batchSize; i++) {
const ndItem = document.createElement('li');
ndItem.innerText = (batchDone * batchSize) + i + 1;
fragment.appendChild(ndItem);
} // 每次批处理只修改 1 次 DOM
ndContainer.appendChild(fragment); batchDone += 1;
doBatchAppend();
} function doBatchAppend() {
if (batchDone < batchCount) {
window.requestAnimationFrame(appendItems);
}
} // 执行
doBatchAppend(); ndContainer.addEventListener('click', function (e) {
const target = e.target;
if (target.tagName === 'LI') {
alert(target.innerHTML);
}
});
})();
大量DOM操作的解决方案的更多相关文章
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题
jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...
- React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...
- 前端组件化(二):优化 DOM 操作
看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态.由于数据状态改变会导致需要我们去更 ...
- JavaScript规范----DOM操作
一般通过JS代码操作DOM结构,会触发浏览器进行页面渲染.所以要尽量减少DOM操作,避免频繁的页面渲染对性能造成影响. 如有以下场景:程序执行ajax请求,并根据请求结果动态添加列表项.常见的做法是循 ...
随机推荐
- NABCD(校园包车)
广州商学院包车 N(need) 各个高校包车需求量大,然而校园内包车信息太散乱,售票地点不确定,有些老师.学生特别是新生,甚至不知有校园包车这一回事, 随着信息网络的发展,为了给师生带来校园更多的方便 ...
- Internet History, Technology and Security (Week⑨)
Week ⑨ We are now on the second to last week of the class and finishing up our look at Internet Secu ...
- JAVA自学日记——Part Ⅲ
终于来到了可视化窗口制作的部分了,从学习JAVA之前,到开始入手学习,一直到现在,都在盼望着有一天可以自己写出一款有界面而且是很美观的应用程序,今天算是一个真正开始的时间节点,值得纪念. 内容有很多, ...
- ACM数论之旅14---抽屉原理,鸽巢原理,球盒原理(叫法不一又有什么关系呢╮(╯▽╰)╭)
这章没有什么算法可言,单纯的你懂了原理后会不会运用(反正我基本没怎么用过 ̄ 3 ̄) 有366人,那么至少有两人同一天出生(好孩子就不要在意闰年啦( ̄▽ ̄")) 有13人,那么至少有两人同一月 ...
- VIM 命令收藏
1.vim#在命令行中输入vim,进入vim编辑器2.i#按一下i键,下端显示 --INSERT--#插入命令,在vim中可能任意字符都有作用3.Esc#退出i(插入)命令进行其它命令使用4.:r f ...
- java 数据结构与算法---递归
原理来自百度百科 一.递归的概念 程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通 ...
- zookeeper如何实现负载均衡的?(具体连接哪一个zookeeper服务器的选择?)阿里面试
如果想了解web 6大负载均衡算法,参考:六大Web负载均衡原理与实现 主要是三点:负载均衡算法,健康检查和会话保持 1:首先,我们要了解,我们的应用程序,比如java web程序,里面配置了10个z ...
- 【.Net】c# 让double保留两位小数
1.Math.Round(0.333333,2);//按照四舍五入的国际标准2. double dbdata=0.335333; string str1=String.Format(&qu ...
- java 对象的解释过程
- NIO - 三大组件
NIO 概述 NIO有三个核心组件: 通道(Channels) 缓存(Buffers) 选择器(Selectors) 实际上,NIO的组件和类远不止这三个,但这个三个组件是核心.至于其它组件,例如Pi ...