案例:如何在页面元素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操作的解决方案的更多相关文章

  1. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  2. 摆脱DOM操作,从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  3. jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点

    什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...

  4. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  5. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  6. 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题

    jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...

  7. React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...

  8. 前端组件化(二):优化 DOM 操作

    看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态.由于数据状态改变会导致需要我们去更 ...

  9. JavaScript规范----DOM操作

    一般通过JS代码操作DOM结构,会触发浏览器进行页面渲染.所以要尽量减少DOM操作,避免频繁的页面渲染对性能造成影响. 如有以下场景:程序执行ajax请求,并根据请求结果动态添加列表项.常见的做法是循 ...

随机推荐

  1. Task 8 找水王

    任务: 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. 如果你 ...

  2. java 线程的简单理解

    想要实现线程可以继承Thread也可以实现接口runnable,在类中重写 run()方法在主函数调用start方法就可以开辟线程. 对于java对象都有一个wait()和notify().notif ...

  3. Oracle安装后出现的问题

    安装oracle没有勾选"安装模板数据库",可以通过执行以下命令进行修改: cd $ORACLE_HOME/rdbms/admin 到这个目录下sqlplus /as sysdba ...

  4. flownet2.0 caffe anaconda2 编译安装

    1. 下载flownet2.0源码到指定目录 cd /home/zzq/saliency_models/deep_optical_flow git clone https://github.com/l ...

  5. Alpha版本冲刺(三)

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:丹丹 组员7:家伟 组员8:政演 组员9:鸿杰 组员10:刘一好 组员11:何宇恒 展示组内最 ...

  6. 【第十周】final预发布视频

    final版本发布视频组名: 新蜂组长: 武志远组员: 宫成荣 谢孝淼 杨柳 李峤项目名称:java俄罗斯方块NEO平台:优酷地址:http://v.youku.com/v_show/id_XMTg0 ...

  7. 通过session 怎么防止表单的重复提交!

    1.在提交表单的时候使用隐藏域: String tokenValue=new Date().getTime(); <input type="hidden" name=&quo ...

  8. 关于对JSON.parse()与JSON.stringify()的理解

    JSON.parse()与JSON.stringify()的区别   JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"nam ...

  9. SQL语句查询一个数据库中的所有表

    --读取库中的所有表名 select name from sysobjects where xtype='u' --读取指定表的所有列名 select name from syscolumns whe ...

  10. Ubuntu 14.04(64bit)使用mentohust连接校园网

    ubuntu14.04系统安装成功之后,需要连接上网络才可以对更新系统以及安装一些必须包.而在学校中,经常遇到的情况需要通过锐捷客户端来连接校园网. 更新: 在Ubuntu14.04下面不用装ment ...