我认为从根本上调优需要从两个方面去考虑。
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】
整个页面加载完成所耗的时间为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】
对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多。
这里我们可以将"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;
<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属性设置后,IE不会等待加载和转换这段脚本。这就也为着页面加载会快很多。
通常这意味着立即运行的脚本应该封装放在一个函数内,并通过document或者body的onload的事件处理。如果你的脚本是依赖于页面加载后的用户动作,如点击按钮,或者移动鼠标到某个区域,会更加有用!
最后请注意两点:
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>
第一步 insert TextNode into <TD>
create <TD>
create TextNode
第二步 insert <TD> into <TR>
第三步 insert <TR> into TBODY
现在我们将元素的绑定顺序颠倒过来,由上至下的包裹绑定元素
create <TR>
第一步 insert <TR> into TBODY
create <TD>
create TextNode
第二步 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>标签设置。
这个操作也可以通过简单增加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>标签设置。
这个操作也可以通过简单增加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