Javascript动态生成表格的性能比较和调优

最新推荐文章于 2021-09-17 18:00:40 发布
最新推荐文章于 2021-09-17 18:00:40 发布
阅读量129 收藏
点赞数
文章标签： javascript 测试 ViewUI
客户端动态输出table数据并展示表格，是web应用中较为常见的<nobr οncοntextmenu="return false" οnmοusemοve="kwM(2)" id="clickeyekey2" οnmοuseοver="kwE(event,2, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,2)" οnmοuseοut="kwL(event,this)">工作</nobr>。对于循环打印输出tr，td本身是一件非常僵硬和暴力的编程办法，再加上最后绑定元素innerHTML字符流输出，

<clk>　　系统所消耗的<nobr οncοntextmenu="return false" οnmοusemοve="kwM(0)" id="clickeyekey0" οnmοuseοver="kwE(event,0, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,0)" οnmοuseοut="kwL(event,this)">性能</nobr>代价是非常高昂的，如果我们需要展现的数据非常庞大时，那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法，</clk>

<clk>　　如何才能降低性能成本，改善用户体验，快速<nobr οncοntextmenu="return false" οnmοusemοve="kwM(1)" id="clickeyekey1" οnmοuseοver="kwE(event,1, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,1)" οnmοuseοut="kwL(event,this)">安全</nobr>的显示我们所需要的数据呢？</clk>

　　我认为从根本上调优需要从两个方面去考虑。

　　1：server的数据吐出和client的数据解析。这里涉及的知识点较多，今后再做详细的说明。但是对于较为复杂的xml的数据格式来说，client的解析应该用xpath寻址和dom内置对象相结合的方法，高速定位。

　　2：DHTML的优化。包括dom，css，js的优化，也就是MVC（model, view, control）的优化。

　　这里我们用js动态生成一个table， 构建一个3000行，8列的表格，代码分多个版本，便于清晰的比较每个版本不同的性能消耗。

　　vision 0.1 【耗时14694ms】

　　貌似以下的写法是没有任何错误，但是确是最暴力，效率最低，性能消耗最大的写法。对于大量的数据行和列，用for循环拼接元素字符串，最后innerHTML输出是不可取的。

　　3000记录页面加载耗时14694毫秒，近15秒。这样的页面数据加载是近乎灾难的，应该竭力避免。

<html>
<body>
　<div id="tableDiv"></div>
　<script>
　 var maxRow =3000;
　 var maxCol = 8；
　 var strTbl = "<table border='1'><tbody>";
　 var strTbody = '';
　
　 for(var i = 0; i < maxRow; i++){
　　strTbody +="<tr>";
　　 for(var j = 0; j < maxCol; j++){
　　　strTbody += "<td>test</td>";
　　 }
　　strTbody += "</tr>";
　 }
　 strTbl = strTbody + "</tbody></table>";
　
　 var obj = document.getElementById("tableDiv");
　 obj.innerHTML = strTbl;
　
　</script>
</body>
</html>

vision 0.2 【耗时3623ms】

<clk>　　这个版本的代码有非常大的改进，采用DOM<nobr οncοntextmenu="return false" οnmοusemοve="kwM(1)" id="clickeyekey1" οnmοuseοver="kwE(event,1, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,1)" οnmοuseοut="kwL(event,this)">技术</nobr>动态添加元素，说明在需要处理展现大量数据的情况下，运用DOM快速定位并添加绑定元素的方法，效率远比拼接html元素字符串的方法要高许多。</clk>

　　整个页面加载完成所耗的时间为3623毫秒。3000行的记录耗时不到4秒，这个版本的代码结构和编程思路也无可挑剔， 那么这样的加载速度是否可以再快些呢？

<html>
<body>
<script>
　var _table, _tbody, tr, td, text, maxRow, maxCol;
　maxRow = 3000;
　maxCol = 8;
　
　_table = document.createElement("table");
　_table.border = "1";
　_tbody = document.createElement("tbody");
　_table.insertBefore(_tbody, null);
　
　document.body.insertBefore(_table, null);
　for (var i=0; i<maxRow; i++) {
　tr = document.createElement("tr");
　for(var j = 0; j<maxCol; j++){
　 td = document.createElement("td");
　 text = document.createTextNode("Text");
　 td.insertBefore(text, null);
　 tr.insertBefore(td, null);
　}
　　 _tbody.insertBefore(tr, null);
　}
</script>
</body>
</html>

　　vision 0.3 【耗时3320ms】

<clk>　　基于vision 0.2中的代码，我们可以看到，整个代码段有多处用到了"body","window","document"这样的对象，在js中类似这样的对象都为全局对象，对他们的引用操作势必会消耗<nobr οncοntextmenu="return false" οnmοusemοve="kwM(0)" id="clickeyekey0" οnmοuseοver="kwE(event,0, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,0)" οnmοuseοut="kwL(event,this)">性能</nobr>，</clk>

对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多。

　　这里我们可以将"document.body"的引用缓存到局部变量中，这样就完成了一个将全局对象转换成局部变量的过程。

　　在代码中添加：var docBody = document.body;并且将行：document.body.insertBefore(_table, null);替换为：docBody.insertBefore(_table, null);

　　在代码中对"document"单个全局对象的引用就达到8×3000=24000次之多，获取一个document变量比局部变量大约多花费4ms时间, 所以我们下一步把document对象也缓存起来。

　　在代码中添加：var _doc = document;

<clk>　　这样，我们重新加载页面，所耗时间为3320毫秒。只比上个版本所耗的时间减少了10％，似乎<nobr οncοntextmenu="return false" οnmοusemοve="kwM(0)" id="clickeyekey0" οnmοuseοver="kwE(event,0, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,0)" οnmοuseοut="kwL(event,this)">性能</nobr>相差不大，但是在我们日常的开发习惯中，将全局的对象缓存到局部变量中是一个好的开始。</clk>

<html>
<body>
<script>
　var _table, _tbody, tr, td, text, maxRow, maxCol;
　var docBody = document.body;
　var _doc = document;
　maxRow = 3000;
　maxCol = 8;
　
　_table = _doc.createElement("table");
　_table.border = "1";
　_tbody = _doc.createElement("tbody");
　_table.insertBefore(_tbody, null);
　
　docBody.insertBefore(_table, null);
　for (var i=0; i<maxRow; i++) {
　tr = _doc.createElement("tr");
　for(var j = 0; j<maxCol; j++){
　 td = _doc.createElement("td");
　 text = _doc.createTextNode("Text");
　 td.insertBefore(text, null);
　 tr.insertBefore(td, null);
　}
　　 _tbody.insertBefore(tr, null);
　}
</script>
</body>
</html>

vision 0.4 【耗时2779ms】

　　一个document对象加载速度的优化就是在<script>标签指定defer属性。首先在这里简单介绍一下defer属性。defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题，

<clk>　　加上defer等于在页面完全在入后再执行，相当于window.onload，但应用上比window.onload 更灵活。设置这个属性仅适合不需要立即<nobr οncοntextmenu="return false" οnmοusemοve="kwM(1)" id="clickeyekey1" οnmοuseοver="kwE(event,1, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,1)" οnmοuseοut="kwL(event,this)">运行</nobr>&lt;SCRIPT&gt;中代码的情况。</clk>

　　（立即运行的代码指不在函数体内的－－这些代码将会在脚本块加载后立即执行）当defer属性设置后，IE不会等待加载和转换这段脚本。这就也为着页面加载会快很多。

　　通常这意味着立即运行的脚本应该封装放在一个函数内，并通过document或者body的onload的事件处理。如果你的脚本是依赖于页面加载后的用户动作，如点击按钮，或者移动鼠标到某个区域，会更加有用！

　　最后请注意两点：

<clk>　　1、不要在defer型的脚本<nobr οncοntextmenu="return false" οnmοusemοve="kwM(0)" id="clickeyekey0" οnmοuseοver="kwE(event,0, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,0)" οnmοuseοut="kwL(event,this)">程序</nobr>段中调用document.write命令，因为document.write将产生直接输出效果。</clk>

　　2、不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

<html>
<body onload="init()">
<script defer>
function init() {
　var _table, _tbody, tr, td, text, maxRow, maxCol;
　var docBody = document.body;
　var _doc = document;
　maxRow = 3000;
　maxCol = 8;
　
　_table = _doc.createElement("table");
　_table.border = "1";
　_tbody = _doc.createElement("tbody");
　_table.insertBefore(_tbody, null);
　
　docBody.insertBefore(_table, null);
　for (var i=0; i<maxRow; i++) {
　tr = _doc.createElement("tr");
　for(var j = 0; j<maxCol; j++){
　 td = _doc.createElement("td");
　 text = _doc.createTextNode("Text");
　 td.insertBefore(text, null);
　 tr.insertBefore(td, null);
　}
　　 _tbody.insertBefore(tr, null);
　}
}
</script>
</body>
</html>

vision 0.5 【耗时2650ms】

　　上一个版本中的页面加载速度已经缩短到了2779ms。下面我们对代码进行进一步的优化。

　　我们看到代码中dom操作，绑定子元素的方法是由下至上包裹，这样的元素绑定方式会相对较慢。

　create <TR>
　create <TD>
　create TextNode第一步 insert TextNode into <TD>

　　第二步 insert <TD> into <TR>

　　第三步 insert <TR> into TBODY

　　现在我们将元素的绑定顺序颠倒过来，由上至下的包裹绑定元素

　create <TR>
　create <TD>
　create TextNode第一步 insert <TR> into TBODY

　　第二步 insert <TD> into <TR>

　　第三步 insert TextNode into <TD>

<html>
<body onload="init()">
<script defer>
function init() {
　var _table, _tbody, tr, td, text, maxRow, maxCol;
　var docBody = document.body;
　var _doc = document;
　maxRow = 3000;
　maxCol = 8;
　
　_table = _doc.createElement("table");
　_table.border = "1";
　_tbody = _doc.createElement("tbody");
　_table.insertBefore(_tbody, null);
　docBody.insertBefore(_table, null);
　
　for (var i=0; i<maxRow; i++) {
　tr = _doc.createElement("tr");
　 _tbody.insertBefore(tr, null);
　for(var j = 0; j<maxCol; j++){
　 td = _doc.createElement("td");
　 text = _doc.createTextNode("Text");
　 td.insertBefore(text, null);
　 tr.insertBefore(td, null);
　}
　}
}
</script>
</body>
</html>

　vision 0.6 【耗时2580ms】

　　这个版本中我们要调优的是修改table的css属性，使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使用<col>标签设置。

<clk>　　fixed-table布局样式将改善table的<nobr οncοntextmenu="return false" οnmοusemοve="kwM(0)" id="clickeyekey0" οnmοuseοver="kwE(event,0, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,0)" οnmοuseοut="kwL(event,this)">性能</nobr>，因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法，特别是那些有很多列的大型表格。</clk>

　　这个操作也可以通过简单增加css样式实现：

<html>
<body onload="init()">
<script defer>
function init() {
　var _table, _tbody, tr, td, text, maxRow, maxCol;
　var docBody = document.body;
　var _doc = document;
　maxRow = 3000;
　maxCol = 8;
　
　_table = _doc.createElement("table");
　_table.border = "1";
　_table.style.tableLayout = "fixed";
　_tbody = _doc.createElement("tbody");
　_table.insertBefore(_tbody, null);
　docBody.insertBefore(_table, null);
　
　for (var i=0; i<maxRow; i++) {
　tr = _doc.createElement("tr");
　 _tbody.insertBefore(tr, null);
　for(var j = 0; j<maxCol; j++){
　 td = _doc.createElement("td");
　 text = _doc.createTextNode("Text");
　 td.insertBefore(text, null);
　 tr.insertBefore(td, null);
　}
　}
}
</script>
</body>
</html>

　　vision 0.7 【耗时2210ms】

vision 0.6 【耗时2580ms】

　　这个版本中我们要调优的是修改table的css属性，使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使用<col>标签设置。

<clk>　　fixed-table布局样式将改善table的<nobr οncοntextmenu="return false" οnmοusemοve="kwM(0)" id="clickeyekey0" οnmοuseοver="kwE(event,0, this)" style="COLOR: #6600ff; BORDER-BOTTOM: #6600ff 1px dotted; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline" οnclick="kwC(event,0)" οnmοuseοut="kwL(event,this)">性能</nobr>，因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法，特别是那些有很多列的大型表格。</clk>

　　这个操作也可以通过简单增加css样式实现：

<html>
<body onload="init()">
<script defer>
function init() {
　var _table, _tbody, tr, td, text, maxRow, maxCol;
　var docBody = document.body;
　var _doc = document;
　maxRow = 3000;
　maxCol = 8;
　
　_table = _doc.createElement("table");
　_table.border = "1";
　_table.style.tableLayout = "fixed";
　_tbody = _doc.createElement("tbody");
　_table.insertBefore(_tbody, null);
　docBody.insertBefore(_table, null);
　
　for (var i=0; i<maxRow; i++) {
　tr = _doc.createElement("tr");
　 _tbody.insertBefore(tr, null);
　for(var j = 0; j<maxCol; j++){
　 td = _doc.createElement("td");
　 text = _doc.createTextNode("Text");
　 td.insertBefore(text, null);
　 tr.insertBefore(td, null);
　}
　}
}
</script>
</body>
</html>

　　vision 0.7 【耗时2210ms】

来自:http://tech.ddvip.com/2008-09/122206684668612_6.html

<!-- 分页 --><!-- 分页 --><!-- 分页 -->
iteye_9770
关注
通向架构师的道路（第四天）之Tomcat性能调优-让小猫飞奔
lifetragedy的专栏
07-02 14万+
一、总结前一天的学习从“第三天”的性能测试一节中，我们得知了决定性能测试的几个重要指标，它们是：ü   吞吐量ü   Responsetimeü   Cpuloadü   MemoryUsage我们也在第三天的学习中对Apache做过了一定的优化，使其最优化上述4大核心指标的读数，那么我们的Apache调优了，我们的Tomcat也作些相应的调整，当完成今的课程后，到时你的“小猫”到时真的会“飞”起
Javascript动态生成表格的性能调优
张庆（网眼）
09-16 7805
客户端动态输出table数据并展示表格，是web应用中较为常见的工作。对于循环打印输出tr，td本身是一件非常僵硬和暴力的编程办法，再加上最后绑定元素innerHTML字符流输出，系统所消耗的性能代价是非常高昂的，如果我们需要展现的数据非常庞大时，那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法，如何才能降低性能成本，改善用户体验，快速安全的显示
java js渲染_(JS):求教前台页面JS渲染Table的优化方法
weixin_42300927的博客
02-16 178
(JS高手请进):求教前台页面JS渲染Table的优化方法前台页面显示一个若干行列的Table,行列数由后台服务器传递的总记录来计算,通过Firebug可以查看到数据传授到前后至正常显示Table的这段时间很长,用户估计等不及,所以我认为JS的代码有很大的优化空间,请教这里的JS高手,怎么优化这段js代码.页面需要easyUI的Slider控件!functionrenderTable(rsp)...
JS优化
wangsen2235068的专栏
09-28 1200
//下载大小的优化： 一：压缩工具压缩 ESC-1.14 E:\ESC-1.14>cscript esc.wsf -l 4 -ow E:\js\src.js E:\js\new.js -l leval等级[0-4] 0合并多个js, 1 去注释 2去空格 3 去除换行 4简化变量命名 -ow后面第一个参数是原始文件，第二个参数是执行后文件。多个文件空格隔开 二：写代码时候 (1)缩短否定判
Node.js应用的性能监控和调优
[Node.js应用的性能监控和调优](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fa68a79e2594b0387fc73de549c54d1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp) # 1. Node.js应用性能监控基础** ...
Django Sites模型性能测试与调优：掌握4个关键指标，优化不再难
[Django Sites模型性能测试与调优：掌握4个关键指标，优化不再难](https://www.techpeak.co/wp-content/uploads/2021/07/073dTaZQXRl5NQS3q4pgpEI-1..15990354931-1024x576.jpg) # 1. Django Sites模型性能测试概述 ...
【性能优化】：大规模测试下doctest的性能调优策略
[【性能优化】：大规模测试下doctest的性能调优策略](https://slideplayer.com/slide/15474564/93/images/1/Performance+testing+for+large+size+web-services.jpg) # 1. doctest性能优化概述 在当今软件开发环境中...
【性能调优】：提升Tag Helpers渲染性能的终极指南
[【性能调优】：提升Tag Helpers渲染性能的终极指南](https://res.cloudinary.com/endjin/image/upload/f_auto/q_80/c_scale/w_1024/assets/images/blog/2022/02/tag-helpers-blog-header.png) # 1. Tag Helpers的...
js中性能优化的几大方法（页面级优化和代码级优化）
weixin_44735018的博客
02-04 1665
js中性能优化 页面级优化 页面级优化的方法有以下几种： CSS Sprites—使用雪碧图 具体的使用方法可以自行百度 教你来使用雪碧图 使用CDN 下图用bootstrap来举例 使用bootstrap的时候，下载bootstrap文件比使用CDN性能差得多 压缩合并代码–使用webpack等打包工具压缩代码 使用DNS预解析 代码级别的优化 代码级别的优化有以下几种： 减少DOM操作 避免直接对DOM进行操作，例如如下操作 var lis=document.queryS
优化Jquery,加快网页加载速度
leijuly'blog
11-26 4955
总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window).load 压缩js 全面掌握jquery库 1. 总是从ID选择器开始继承 在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById
JS 原生自动加载的大数据表格探索
japlus的博客
05-09 1681
大数据表格，就是能够没有分页的情况下，一次展示上万条数据的表格
​一顿操作，我把 Table 组件性能提升了十倍
小生方勤
09-17 806
背景Table 表格组件在 Web 开发中的应用随处可见，不过当表格数据量大后，伴随而来的是性能问题：渲染的 DOM 太多，渲染和交互都会有一定程度的卡顿。通常，我们有两种优化表格的方式：...
纯前端表格控件SpreadJS使用教程 - 性能优化汇总
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-14 1592
场景： 在许多用户的实际应用场景中，常常需要加载几种表单：1)数据量大；2)公式多且复杂。在这些常见的场景中往往需要较多的时间去加载表单，导致每次都需要等待较长的时间，用户体验较差。 需要做大量的绘制操作时，表单出现“假死”的情况。 较大数据量的表单下，需要将全部单元格进行自适应。 场景1的优化： 对于表单的性能表现，我们也在不断地优化，每个版本我们也会针对一些典型的用户场景进行优化，所以新版本会相对于前面的版本性能会有所提升。例如，同一份表单在v11和v14的加载速度也会有所不同。因此，当我们使用
JavaScript动态创建表格的三种方法解析
"这篇文章主要介绍了JavaScript中动态创建表格的三种方法，通过实例代码分享了每种方式的具体实现，...以上就是JavaScript动态创建表格的三种常见方法，每种都有其适用场景，开发者可以根据实际需求选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值