那撒，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>