js用计时器加载大量dom
改进前:
<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的更多相关文章
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- 关于js css html加载顺序整理
1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- 关于html,css,js三者的加载顺序问题
<head lang="en"> <meta charset="utf-8"> <title></title> ...
- js的异步加载你真的懂吗
面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ? 1 , 创建document对象, 开始解析页面, ...
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- JS和jquery加载的区别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js css html加载顺序
1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控.正常的网页加载流程是这样的.浏览器一边下载HTML网页,一边开 ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
随机推荐
- 转:java中数组与List相互转换的方法
1.List转换成为数组.(这里的List是实体是ArrayList) 调用ArrayList的toArray方法. toArray public <T> T[] toArray(T[] ...
- asp 按钮 调用ajax时 会出现返回错误,尽量使用html按钮进行调用
asp 按钮 调用ajax时 会出现返回错误,尽量使用html按钮进行调用
- C# 之 FTPserver中文件上传与下载(二)
通过上一篇博客<C# 之 FTPserver中文件上传与下载(一)>,我们已经创建好了一个FTPserver,而且该server须要username和password的验证 ...
- python-嵌套循环(Nested loop)-久久乘法表
嵌套-久久乘法 for i in range(1,10): for j in range(1,10): print('{} × {} = {}'.format(i,j,i*j))最外层的循环依次将数值 ...
- 如何修改Linux系统的 /etc/ssh/sshd_config 文件 "/etc/ssh/sshd_config" E212: Can't open file for writin
第一步:我们使用命令行vim /etc/ssh/sshd_config 执行修改,强制保持 :wq! 系统不让我们修改这个文件 "/etc/ssh/sshd_config" ...
- springMVC中实现用户登录权限验证
通过上网搜资料显示,使用filter和interceptor都可以实现.不过推荐使用interceptor. 下面就使用Interceptor实现用户登录权限验证功能. 拦截器需要实现Inceptor ...
- memcahced&redis命令行cmd下的操作
一.memcahced 1.安装 执行memcached.exe -d install 把memcached加入到服务中 执行memcached.exe -d uninstall 卸载memcac ...
- Apache 虚拟目录和默认首页的设置
Apache虚拟目录和默认首页的设置,用apache服务器的朋友必须要懂的. 虚拟目录 1.找到"conf/httpd.conf" 文件 2.在节点:<IfModule al ...
- 强大的Vivado IP工具——自定义IP的使用
首先,要指出,本文不描述任何IP的功能与使用. 在开发一个大型FPGA项目时,多人协作是必不可少的.这个时候,如何提交设计给负责集成的人,是项目开发中最关键的问题之一. 常用的一个方法是,提交网表 ...
- 使用sublime模板加快编码效率
这是使用模板系列的最后一篇了,也是最实用的方法. 前面提到的,插入文件的方法,适合计算机水平一般的初学者:而用TCL脚本的,则适合喜欢自定义各种奇特功能的专业人士. 那么,本次介绍的配置编辑器的方法, ...