改进前:

 <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. ASCII、Unicode、UTF8编码类型的理解

    一.ASCII码        在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte) ...

  2. 2、jQuery选择器

    2.1 基本选择器 它有元素Id.Class.元素名.多个选择符组成,通过基本选择器可以实现大多数页面元素的查找. 选择器 功能 返回值 #id 根据给定的ID匹配一个元素 单个元素 element ...

  3. C/C++中float和double的存储结构(转)

    在C/C++中float是32位的,double是64位的,两者在内存中的存储方式和能够表示的精度均不同,目前C/C++编译器标准都遵照IEEE制定的浮点数表示法来进行float,double运算. ...

  4. ECMAScript6 | 新特性(部分)

    新特性概览 参考文章:http://www.cnblogs.com/Wayou/p/es6_new_features.html 这位前辈写的很好,建议深入学习 ———————————————————— ...

  5. oracle 事务多表查询以及额外的用处

    /* 以下代码是对emp表进行显示宽度设置*/ col empno for 9999;col ename for a10;col job for a10;col mgr for 9999;col hi ...

  6. Linux修改时间的方法

    http://www.blogjava.net/itvincent/archive/2007/08/03/134242.html修改linux的时间可以使用date指令 在命令行输入: date 显示 ...

  7. sql 语句中 id&lt ;SELECT * FROM t_blog WHERE id&lt;#{id} ORDER BY id DESC LIMIT 1

  8. 利用python进行泰坦尼克生存预测——数据探索分析

    最近一直断断续续的做这个泰坦尼克生存预测模型的练习,这个kaggle的竞赛题,网上有很多人都分享过,而且都很成熟,也有些写的非常详细,我主要是在牛人们的基础上,按照数据挖掘流程梳理思路,然后通过练习每 ...

  9. Calendar类经常用法 日期间的转换 set方法有巨坑

           今天发现项目的工具类方法有个bug,并且还能迷惑你的bug,刚開始也是非常迷惑,由于这个bug之前出现过,可是过了两天就自己好了.今天又出现了.哦对,今天是 2017年3月31日,之 ...

  10. Lintcode---二叉树的最大深度

    给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的距离. 您在真实的面试中是否遇到过这个题? Yes 样例 给出一棵如下的二叉树: 1 / \ 2 3 / \ 4 5 这个二叉树的 ...