- 浏览: 79266 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
zhangxpower:
..楼上神马表情啊
js with理解和用法 -
zlfday:
我想要的并发那章的没有啊
think in java(Java编程思想)练习答案 -
zo.zhang:
感谢分享,看的很明白~
js with理解和用法 -
kevinwong:
感谢 装了个新的eclipse就没了高亮 郁闷半天 终于解决
eclipse 中相同代码高亮显示 -
dingsheng2009:
...
java ee 常用jar包下载地址
客户端动态输出table数据并展示表格,是web应用中较为常见的工作。对于循环打印输出tr,td本身是一件非常僵硬和暴力的编程办法,再加上最后绑定元素innerHTML字符流输出,
系统所消耗的性能代价是非常高昂的,如果我们需要展现的数据非常庞大时,那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法,
如何才能降低性能成本,改善用户体验,快速安全的显示我们所需要的数据呢?
我认为从根本上调优需要从两个方面去考虑。
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】
这个版本的代码有非常大的改进,采用DOM技术动态添加元素,说明在需要处理展现大量数据的情况下,运用DOM快速定位并添加绑定元素的方法,效率远比拼接html元素字符串的方法要高许多。
整个页面加载完成所耗的时间为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】
基于vision
0.2中的代码,我们可以看到,整个代码段有多处用到了"body","window","document"这样的对象,在js中类似这样的对象都为全局对象,对他们的引用操作势必会消耗性能,
对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多。
这里我们可以将"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;
这样,我们重新加载页面,所耗时间为3320毫秒。只比上个版本所耗的时间减少了10%,似乎性能相差不大,但是在我们日常的开发习惯中,将全局的对象缓存到局部变量中是一个好的开始。
<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作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题,
加上defer等于在页面完全在入后再执行,相当于window.onload,但应用上比window.onload
更灵活。设置这个属性仅适合不需要立即运行<SCRIPT>中代码的情况。
(立即运行的代码指不在函数体内的--这些代码将会在脚本块加载后立即执行)当defer属性设置后,IE不会等待加载和转换这段脚本。这就也为着页面加载会快很多。
通常这意味着立即运行的脚本应该封装放在一个函数内,并通过document或者body的onload的事件处理。如果你的脚本是依赖于页面加载后的用户动作,如点击按钮,或者移动鼠标到某个区域,会更加有用!
最后请注意两点:
1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
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>标签设置。
fixed-table布局样式将改善table的性能,因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法,特别是那些有很多列的大型表格。
这个操作也可以通过简单增加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】
最后的一个版本的调优就是给单元格赋值的方式。在所有的示例中,创建了一个TextNode,并添加给TD。而在这个版本中我们将使用innerText代替插入一个text节点,代码调整为:
td.innerText
=
"Text";
(注意:innerText只在IE中受支持,属于IE扩展,兼容FireFox可使用innerHTML,但是innerHTML正如文章开头所说的,效率非常低下,不建议使用)
<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");
docBody.insertBefore(_table, null);
_table.insertBefore(_tbody, 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");
td.innerText = "Text";
tr.insertBefore(td, null);
}
}
}
</script>
</body>
</html>
vision 0.8
【耗时672ms】终极优化
将字符串作为数组对象的方式是目前效率最高,性能最优的方式。
<script>
var t1 =
new Date();
</script>
<html>
<head>
<title></title>
<script>
function
testTime(){
var t2 = new Date();
alert(t2-t1+"ms");
}
</script>
</head>
<body
onload="init();testTime();">
<div id="tableDiv"></div>
<script>
var maxRow =3000;
var maxCol = 8;
var strTbody
= ["<table border='1'><tbody>"];
for(var i = 0; i <
maxRow; i++){
strTbody.push("<tr>");
for(var j = 0; j <
maxCol; j++){
strTbody.push("<td>test</td>");
}
strTbody.push("</tr>");
}
strTbody.push("</tbody></table>");
var obj =
document.getElementById("tableDiv");
obj.innerHTML =
strTbody.join("");
</script>
</body>
</html>
发表评论
-
firefix和ie中javascript使用区别(部分)
2008-12-26 10:14 1018文章转自:http://blog.csdn.net/nile ... -
javascript 简单信息安全
2008-12-18 15:42 697<!DOCTYPE html PUBLIC " ... -
javascript 格式化日期,
2008-12-11 23:47 700<!DOCTYPE html PUBLIC " ... -
javascript动态改变css
2008-12-11 21:28 1617<!DOCTYPE html PUBLIC " ... -
javascript实现Iterator
2008-12-05 10:29 1444<!DOCTYPE HTML PUBLIC " ... -
使用json-lib
2008-12-04 16:30 976下载 到 http://json-li ... -
全面理解javascript的caller,callee,call,apply概念
2008-12-03 13:17 775在提到上述的概念之前,首先想说说javascript中函数的隐 ... -
javascript 单利模式
2008-12-01 21:05 727<!DOCTYPE HTML PUBLIC " ... -
javascript中表格(table)操作
2008-11-28 08:08 1846<html> <head> < ... -
js 简单的页面上排序
2008-11-24 23:13 1367<!DOCTYPE HTML PUBLIC " ... -
模拟开心网新消息
2008-11-24 20:38 1036最近在做公司的项目的用到了 类似开心网上新消息的功能,本人写了 ... -
js with理解和用法
2008-11-20 22:28 9320进来在看到在js中使用with,实话我以前从来没有碰到过。 e ... -
style.left,offsetLeft相对于容器的位置控制
2008-11-13 09:51 2784如果父div的position定义为relative,子div ... -
js弹出选择时间窗口选择时间
2008-11-06 17:57 2797<html> <head><me ...
相关推荐
这是一个动态生成表格的 HTML 页面,使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息,包括姓名、科目和得分,并提供了删除操作。 在页面中,先声明了一个 table 元素,并设置了 id 为 ...
javascript动态添加表格数据行 在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种...
javascript动态生成页面元素
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
JAVA-WEB系统性能调优 JAVA-WEB系统性能调优是指通过合理配置和优化JAVA-WEB系统的各个组件,以提高系统的性能和响应速度。该文档将详细介绍JAVA-WEB系统性能调优的流程、JVM性能调优、性能瓶颈分析等内容。 一、...
javascript动态生成table及处理.
JavaScript动态生成css,JavaScript动态生成cssJavaScript动态生成css
NULL 博文链接:https://rsy.iteye.com/blog/1532991
JavaScript动态生成带删除行功能的表格 本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要...
通过javaScript动态生成表格,其中也使用了div和css,对样式进行动态设置。
javascript动态创建表格,适合HTML语言初学者使用,亲测可用
Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript ...
我自己写的,那出来与大家分享:javascript下动态创建表格的三种方式
JavaScript动态操作表格,添加,删除行、列及单元格
JAVASCRIPT 动态复制表格,不错的脚本,推荐你看下了。
javascript实现的动态增减表格 dom ie
Javascript动态创建表格 兼容google浏览器、360,ie等浏览器,很实用
本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端...
javascript动态增删表格行
资源名称:CSS重构:样式表性能调优内容简介:CSS对于现代网站的用户体验至关重要,其地位不亚于决定着网站外形的HTML和让网站动起来的Javascript。本书作为CSS代码重构指南,不仅展示了如何编写结构合理的CSS...