改进前:

 <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. java中,静态代码块static的简单简介

    直接上代码,更直观,包括一些解释: /** * 类初始化时,首先加载静态代码块, * 注意:所有静态代码块都会在方法之前执行,不管放置的位置:但是静态代码块按照顺序执行 * 再次执行调用的方法 */ ...

  2. HDU 1104 Remainder (BFS(广度优先搜索))

    Remainder Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  3. [Unity3D]Unity3D游戏开发之Lua与游戏的不解之缘终结篇:UniLua热更新全然解读

    ---------------------------------------------------------------------------------------------------- ...

  4. Android_WebView_全屏

    WebView(网络视图)能加载显示网页,能够将其视为一个浏览器. 它使用了WebKit渲染引擎加载显示网页,实现WebView有下面两种不同的方法: 第一种方法的步骤: 1.在要Activity中实 ...

  5. 算法笔记_089:蓝桥杯练习 7-2求arccos值(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 利用标准库中的cos(x)和fabs(x)函数实现arccos(x)函数,x取值范围是[-1, 1],返回值为[0, PI].要求结果准确 ...

  6. Win10系统Host文件修改不了权限不足怎么办

    Win10系统Host文件修改不了权限不足怎么办 Win10系统Host文件修改不了不能保存 工具原料:电脑+win10 Win10系统Host文件修改不了权限不足方法步骤如下: .打开"运 ...

  7. JDBC操作,执行数据库更新操作

    目标: 使用Connection对象取得Statement实例 使用Statement进行数据增删改. Statement接口 要对数据库操作,要使用Statement完成.此接口可以使用Connec ...

  8. CentOS 安装jdk1.7 32位

    CentOS 安装jdk1.7 32位 1.下载jdk-7u21-linux-i586.rpm ? 1 wget http://uni-smr.ac.ru/archive/dev/java/bulk/ ...

  9. springmvc管理资源开放

    关于web.xml的url映射的小知识:<url-pattern>/</url-pattern>  会匹配到/login这样的路径型url,不会匹配到模式为*.jsp这样的后缀 ...

  10. windows Service 2012 系统时间格式带中文

    C# 获取DataTime.Now   显示     2019年4月23日 下午 10:03:00 导致转换格式失败, 因为 源码中写的是   DataTime.Now.ToString();   输 ...