ITPub博客

首页 > IT职业 > IT生活 > jquery仿dataList——性能优化

jquery仿dataList——性能优化

IT生活 作者:hu261 时间:2021-09-09 09:47:21 0 删除 编辑

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

图片描述

 

图片描述

前言


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

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

正题


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

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

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

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

图片描述

 

优化处理


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

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

图片描述

图片描述

图片描述

图片描述

看见了差距了吧!!!

最后附上代码:

源代码


?


/code>"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml">         type="text/javascript">    >        $(document).ready(function () {            var data = [];            var i;            for (i = 0; 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 = "
{name}
{age}
{home}
{test}

"
            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();        });             
"wl3">    
    
"wl4">    
    
"wl1">    
    
"wl2">    

 

 

 

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3112/viewspace-2812372/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: jQuery的事件one
下一篇: ASP.NET compatibility
请登录后发表评论 登录
全部评论

注册时间:2019-08-30

  • 博文量
    77
  • 访问量
    763