继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery仿dataList——性能优化

关注TA
已关注
手记
粉丝
获赞

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

 

 

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP