大量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请求,并根据请求结果动态添加列表项.常见的做法是循 ...
随机推荐
- Task 8 找水王
任务: 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. 如果你 ...
- java 线程的简单理解
想要实现线程可以继承Thread也可以实现接口runnable,在类中重写 run()方法在主函数调用start方法就可以开辟线程. 对于java对象都有一个wait()和notify().notif ...
- Oracle安装后出现的问题
安装oracle没有勾选"安装模板数据库",可以通过执行以下命令进行修改: cd $ORACLE_HOME/rdbms/admin 到这个目录下sqlplus /as sysdba ...
- flownet2.0 caffe anaconda2 编译安装
1. 下载flownet2.0源码到指定目录 cd /home/zzq/saliency_models/deep_optical_flow git clone https://github.com/l ...
- Alpha版本冲刺(三)
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:丹丹 组员7:家伟 组员8:政演 组员9:鸿杰 组员10:刘一好 组员11:何宇恒 展示组内最 ...
- 【第十周】final预发布视频
final版本发布视频组名: 新蜂组长: 武志远组员: 宫成荣 谢孝淼 杨柳 李峤项目名称:java俄罗斯方块NEO平台:优酷地址:http://v.youku.com/v_show/id_XMTg0 ...
- 通过session 怎么防止表单的重复提交!
1.在提交表单的时候使用隐藏域: String tokenValue=new Date().getTime(); <input type="hidden" name=&quo ...
- 关于对JSON.parse()与JSON.stringify()的理解
JSON.parse()与JSON.stringify()的区别 JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"nam ...
- SQL语句查询一个数据库中的所有表
--读取库中的所有表名 select name from sysobjects where xtype='u' --读取指定表的所有列名 select name from syscolumns whe ...
- Ubuntu 14.04(64bit)使用mentohust连接校园网
ubuntu14.04系统安装成功之后,需要连接上网络才可以对更新系统以及安装一些必须包.而在学校中,经常遇到的情况需要通过锐捷客户端来连接校园网. 更新: 在Ubuntu14.04下面不用装ment ...