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

标签： jquery datalist 性能优化 | 发表时间：2012-03-22 01:55 | 作者：叶小钗
出处：http://www.cnblogs.com/

前言

 

呵呵，当然，什么预编译什么性能提高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>

本文链接

相关 [jquery datalist 性能优化] 推荐：

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

- - 博客园_首页
呵呵，当然，什么预编译什么性能提高5倍以上基本上市坑爹的，这里就是为了吸引阅读量，哈哈. 之前针对这个专题也写了很多文章了，到今天一个基本的框架已经成型，最近做了一次优化——关于模板的. 居然性能差距达10倍以上还真不是开玩笑呢. 我先简要说明下这个插件的流程. 我们提供二维数据源+数据模板——》每行数据和数据模板进行数据组织生成最终html标签——》加入文档.

Jquery性能优化

- - JavaScript - Web前端 - ITeye博客
一、注意定义jQuery变量的时候添加var关键字. 这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下：. $loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的. 二、请使用一个var来定义变量.

MySQL性能优化

- sun - IT程序员面试网
在笔试面试中，尤其是像百度，淘宝这些数据量非常大，而且用LAMP架构的公司，数据库优化方面就显得特别重要了. 此外，除了数据库索引之外，在LAMP结果如此流行的今天，数据库（尤其是MySQL）性能优化也是海量数据处理的一个热点. 下面就结合自己的经验，聊一聊MySQL数据库优化的几个方面. 首先，在数据库设计的时候，要能够充分的利用索引带来的性能提升，至于如何建立索引，建立什么样的索引，在哪些字段上建立索引，上面已经讲的很清楚了，这里不在赘述.

Hebernate 性能优化

- - 企业架构 - ITeye博客
文章分为十三个小块儿对Hibernate性能优化技巧进行总结性分析，分析如下：. 一、在处理大数据量时，会有大量的数据缓冲保存在Session的一级缓存中，这缓存大太时会严重显示性能，所以在使用Hibernate处理大数 据量的，可以使用session. clear()或者session. evict(Object) 在处理过程中，清除全部的缓存或者清除某个对象.

Hbase 性能优化

- - CSDN博客云计算推荐文章
因 官方Book Performance Tuning部分章节没有按配置项进行索引，不能达到快速查阅的效果. 所以我以配置项驱动，重新整理了原文，并补充一些自己的理解，如有错误，欢迎指正. 默认值：3分钟（180000ms）. 说明：RegionServer与Zookeeper间的连接超时时间.

JavaScript性能优化

- - ITeye博客
互联网泡沫让投资者长了记性：态度更加谨慎.         如今主流浏览器都在比拼JavaScript引擎的执行速度，但最终都会达到一个理论极限，即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍JavaScript性能优化的技巧，并提供相应的测试用例，供大家在自己使用的浏览器上验证， 同时会对特定的JavaScript背景知识做一定的介绍.

Mysql性能优化

- - 数据库 - ITeye博客
MySQL性能优化. 　　性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间. 性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等. 　　数据库管理人员可以使用SHOW STATUS语句来查询MySQL数据库的性能. 语法：SHOW STATUE LIKE ‘value’；其中value参数是常用的几个统计参数.

Linux 性能优化

- - Gsion&apos;s Blog
1) Linux Proc文件系统，通过对Proc文件系统进行调整，达到性能优化的目的. 2) Linux性能诊断工具，介绍如何使用Linux自带的诊断工具进行性能诊断. 加粗斜体表示可以直接运行的命令. 二、/proc/sys/kernel/优化. 该文件有一个二进制值，该值控制系统在接收到ctrl+alt+delete按键组合时如何反应.

hbase性能优化

- - CSDN博客推荐文章
  当你调用create方法时将会加载两个配置文件:hbase-default.xml and hbase-site.xml,利用的是当前的java类路径， 代码中configuration设置的这些配置将会覆盖hbase-default.xml和hbase-site.xml中相同的配置,如果两个配置文件都存在并且都设置好了相应参上面的属性下面的属性即可.

oracle性能优化

- - 行业应用 - ITeye博客
                              oracle数据库的性能优化. 主要从内部存储结构，逻辑分区，表结构范式，sql语句优化. hibernate处的层次更高，主要从缓存，和sql语句的使用.     对于ORACLE数据库的数据存取，主要有四个不同的调整级别，第一级调整是操作系统级包括硬件平台,第二级调整是ORACLE RDBMS级的调整,第三级是数据库设计级的调整,最后一个调整级是SQL级.