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文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
随机推荐
- vue - index.html
描述:通过App.vue绑定#App元素(进行展示).div#id中间写入任何内容都会失效. <!DOCTYPE html> <html> <head> <m ...
- setImmediate 函数详解
1.兼容性 只有IE10以上的IE浏览器才支持. 2.用途 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setImmediate 该 ...
- 一次vm 虚拟机时间倒流而导致的oracle 数据库启动故障
一次vm 虚拟机时间倒流而导致的oracle 数据库启动故障 本文是原创文章.若转载请注明出处: http://blog.csdn.net/msdnchina/article/details/3878 ...
- js操作当前窗口
CreateTime--2017年7月21日09:58:34Author:Marydon js操作当前窗口 1.打开一个新的窗口(新的标签页) 实现方式:window.open(url) 实例一: ...
- tar排除指定目录打包
转载自:http://hxl2009.blog.51cto.com/779549/476513 假设 test目录下有 1 2 3 4 5 这5个目录现在要将 3 4 5目录tar打包,1和2目录不要 ...
- 深度CTR预估模型中的特征自动组合机制演化简史 zz
众所周知,深度学习在计算机视觉.语音识别.自然语言处理等领域最先取得突破并成为主流方法.但是,深度学习为什么是在这些领域而不是其他领域最先成功呢?我想一个原因就是图像.语音.文本数据在空间和时间上具有 ...
- python3 解析xml
转载:http://www.jb51.net/article/79494.htm 这篇文章主要为大家详细介绍了深入解读Python解析XML的几种方式,以ElementTree模块为例,演示具体使用方 ...
- SQL基础之聚合与排序
聚合函数是用来求和,平均值,最大最小值一类的函数. 常用的有COUNT.SUM.MAX.MIN.AVG. count() 参数为列名,也可以使用*,表示全部列. 默认*会统计所有行的数据,如果想过滤掉 ...
- pair + map 函数结合使用
题目链接:codeforces 44A5birch yellowmaple redbirch yellowmaple yellowmaple green 4 3oak yellowoak yellow ...
- RequireJS 和 Sea.js
相同之处 RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然. 不同之处 两者的主要区别如下: 定位有差异.Requ ...