您的位置：首页 > Web前端 > JQuery

【jquery仿dataList——性能优化】模板预编译思想提高性能10倍以上！！！

2012-03-22 01:55 633 查看

那撒，IE和google性能不减反增，求高手解释.......

前言

呵呵，当然，什么预编译什么性能提高5倍以上基本上市坑爹的，这里就是为了吸引阅读量，哈哈。

上当的大哥主动顶下哇？？？

正题

之前针对这个专题也写了很多文章了，到今天一个基本的框架已经成型，最近做了一次优化——关于模板的。

居然性能差距达10倍以上还真不是开玩笑呢！！！

我先简要说明下这个插件的流程

我们提供二维数据源+数据模板——》每行数据和数据模板进行数据组织生成最终html标签——》加入文档

优化处理

之前处理起来便是进行正则表达式替换，反正功能达到要求了也就没有管那么多，今天突然想到一招预编译方法（其实有参照啦）

改了后明显感觉到数据变化，有图有真相，请看！！！

看见了差距了吧！！！

最后附上代码：

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://www.cnblogs.com/scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = [];
var i;
for (i = 0; i < 1000; i++) {
var temp = {};
temp.name = "name_" + i.toString();
temp.age = "age_" + i.toString();
temp.home = "home_" + i.toString();
temp.test = "test_" + i.toString();
data.push(temp);
}
var template = "<div>{name}</div><div>{age}</div><div>{home}</div><div>{test}</div><hr/>"
var wl1 = $("#wl1");
var wl2 = $("#wl2");
var wl3 = $("#wl3");
var wl4 = $("#wl4");

//原始做法
function old() {
var now = new Date();
var beginTime = now.getTime();

var html = "";
$.each(data, function (index, v) {
var tempHtm = template;
$.each(v, function (i, item) {
var regStr = "/\\{" + i + "\\}/g";
var reg = eval(regStr);
tempHtm = tempHtm.replace(reg, item);
});
html += tempHtm;
});
wl1.append(html);
var endT = new Date();
var endTime = endT.getTime();
var spTime = (endTime - beginTime);
wl3.append(""+i.toString()+"行数据，老方法代码大概执行：" + spTime + "毫秒");
}
//现在做法
function update() {
var now = new Date();
var beginTime = now.getTime();

var templateObj = [];
var reg = /\{[A-Za-z]*\}/;
var para = reg.exec(template);
var tempHtml = template;
while (para && para.length > 0) {
var len = para.index;
var temp = {};
temp.html = tempHtml.substr(0, len);
temp.field = para[0].substr(1, para[0].length - 2); ;
templateObj.push(temp);
tempHtml = tempHtml.substr(len + para[0].length);
para = reg.exec(tempHtml);
}
var end = {};
end.html = tempHtml;
templateObj.push(end);

var html = "";
$.each(data, function (index, dataItem) {
var tempHtm = "";
$.each(templateObj, function (i, item) {
if (item.field) {
tempHtm = tempHtm + item.html + dataItem[item.field];
} else {
tempHtm = tempHtm + item.html;
}
});
html += tempHtm;
});
wl2.append(html);

var endT = new Date();
var endTime = endT.getTime();
var spTime = (endTime - beginTime);
wl4.append(""+i.toString()+"行数据，新方法代码大概执行：" + spTime + "毫秒");
}
old();
update();
});

</script>
</head>
<body>
<div id="wl3">
</div>
<div id="wl4">
</div>
<div id="wl1">
</div>
<div id="wl2">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航