zoukankan      html  css  js  c++  java
  • 【jquery仿dataList——性能优化】模板预编译思想提高性能10倍以上!!!

    那撒,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>
    
  • 相关阅读:
    常用PHP array数组函数
    每天学习30分钟新知识之html教程1
    laravel学习之路2: jwt集成
    JWT简介json web token bear token
    MDwiki 调研
    laravel学习之路1:认证相关
    OAuth 2.0介绍
    第一行代码 6.4 数据存储全方案-详解持久化数据- 数据库
    github(1)安装及使用图文详解
    Android集成讯飞语音、百度语音、阿里语音识别
  • 原文地址:https://www.cnblogs.com/yexiaochai/p/2410913.html
Copyright © 2011-2022 走看看