改进前:

 <table><tbody></tbody></table>
var tbody=document.getElementsByTagName("tbody")[0];
for(var i=0;i<20000;i++){
var tr=document.createElement("tr");
for(var t=0;t<6;t++){
var td=document.createElement("td");
td.appendChild(document.createTextNode(i+","+t));
tr.appendChild(td);
}
tbody.appendChild(tr);
}

改进后:

   var rowCount=20000;
var divideInto=100;
var chunkSize=rowCount/divideInto;
var iteration=0; var tbody=document.getElementsByTagName("tbody")[0]; setTimeout(function generateRows() {
var base=(chunkSize)*iteration;
for (var i = 0; i < chunkSize; i++) {
var tr = document.createElement("tr");
for (var t = 0; t < 6; t++) {
var td = document.createElement("td");
td.appendChild(document.createTextNode(
(i+base) + "," + t+","+iteration
)
);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
iteration++;
if(iteration<divideInto){
setTimeout(generateRows,50);
}
}, 0);

js用计时器加载大量dom的更多相关文章

  1. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  2. 关于js css html加载顺序整理

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...

  3. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

  4. 关于html,css,js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

  5. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

  6. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  7. JS和jquery加载的区别

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js css html加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控.正常的网页加载流程是这样的.浏览器一边下载HTML网页,一边开 ...

  9. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

随机推荐

  1. centos下安装pyspider

    环境: * CentOS release 6.4 (Final) * Python 2.6.6 pip install pyspider   ,发现lxml没有安装好 直接sudo yum insta ...

  2. Django 学习记录

    这是我自己理解并自己画的,django 请求示意图,表示了它的组织方式. project manage.py: 主要工具文件 settings.py: 配置文件 urls.py: url 定义及其指向 ...

  3. 【转】JAVA – 虚函数、抽象函数、抽象类、接口

    1. Java虚函数 虚函数的存在是为了多态. C++中普通成员函数加上virtual关键字就成为虚函数 Java中其实没有虚函数的概念,它的普通函数就相当于C++的虚函数,动态绑定是Java的默认行 ...

  4. onethink 密码加密方式详解

    /** * 系统非常规MD5加密方法 * @param string $str 要加密的字符串 * @return string */ function think_ucenter_md5($str, ...

  5. js 数组分解 解构

    // ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list

  6. 如何为Drupal缓存对象指定缓存类?

    什么意思?意思是说,假如你有这样的需求,需要将cache_page缓存到数据库,其它的都缓存到memcache,这该怎么办? 看看_cache_get_object()的实现你就会知道上面的问题该怎么 ...

  7. 织梦dedecms修改include和plus重命名提高安全性防漏洞注入挂马

    织梦dedecms是新手站长使用得比较多的一个建站开源程序,正因如此,也是被被入侵挂马比较多的程序.下面就来跟大家说一下怎么重新命名dedecms的include文件夹以及plus文件夹来提高网站的安 ...

  8. 代码收藏系列--jquery--筛选器、事件绑定技巧(转载)

    代码收藏系列--jquery--筛选器.事件绑定技巧 Jquery筛选器的一些常用技巧,比如过滤属性等 /* 过滤获取没有含data-xsui-grid-colspan的节点 */$(this).fi ...

  9. pandas所占内存释放

    df = pd.read_csv('....') 要调用循环处理多个文件时,内存占用情况严重,如果互相之间不需要调用,可以直接del df  释放内存

  10. 为select的option绑定键盘事件

    1. 目的 可以使用快捷键1.2.3.4等自动选中select框对应的option 2. 代码 <select id="selectItem" class="for ...