上一张图,很多人都看过的

地址:http://aui.github.io/artTemplate/test/test-speed.html

这个地址是在看artTemplate的时候看到的,很早都看过但是没去研究为什么artTemplate为什么那么快,其他的为什么那么慢。最近看underscore的源码,先看了template部分,再想起这张图,我就不服了。凭神马underscore那么慢,基本上就是倒数第二的成绩。我代码写得少,上面那个图是在骗我吗!!!

于是看了下作者的测试代码,也在作者那个页面跑了好几次,结果几乎都差不多,难道事实就是这样的!!!!underscore的渲染速度是垫底的成绩。于是看了看作者的测试代码,其他的不管,只看underscore的。

 name: 'underscoreTemplate',
tester: function () {
var source = document.getElementById('underscoreTemplate').innerHTML;
var fn = _.template(source);
for (var i = ; i < number; i ++) {
fn(data);
}
}

页面上还有一些变量

// 数据量
var length = ;
// 渲染次数
var number = ; var data = {
list: []
}; for (var i = ; i < length; i ++) {
data.list.push({
index: i,
user: '<strong style="color:red">糖饼</strong>',
site: 'http://www.planeart.cn',
weibo: 'http://weibo.com/planeart',
QQweibo: 'http://t.qq.com/tangbin'
});
};

模板代码

<!-- underscore 的模板 -->
<script id="underscoreTemplate" type="text/tmpl">
<ul>
<% for (var i = , l = list.length; i < l; i ++) { %>
<li>用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
<% } %>
</ul>
</script>

以上代码貌似都没什么看头,都是正常的使用代码,但是我想说underscore可以这样用var fn = _.template(source,{variable:list});您也可以在 variable 设置里指定一个变量。名外部指定变量名内部就不会使用with,问题就出在这里,测试代码没这样用!!!!

其实underscore内部代码稍加改动就可以去掉with。于是我把代码稍加改动,使用方式稍加改动,以下是改后的代码。 我使用的underscore的版本是1.7.0

    // JavaScript micro-templating, similar to John Resig's implementation.
// Underscore templating handles arbitrary delimiters, preserves whitespace,
// and correctly escapes quotes within interpolated code.
// NB: `oldSettings` only exists for backwards compatibility.
// template本身是一个方法,可以提供三个参数,第一个为模板文本,第二个为对应模板数据,第三个为基本配置信息
//模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码、进行HTML转义,使用<%- … %>
_.template = function(text, settings, oldSettings) {
if (!settings && oldSettings) settings = oldSettings;
settings = _.defaults({}, settings, _.templateSettings); // Combine delimiters into one regular expression via alternation.
var matcher = RegExp([
(settings.escape || noMatch).source, (settings.interpolate || noMatch).source, (settings.evaluate || noMatch).source
].join('|') + '|$', 'g'); // Compile the template source, escaping string literals appropriately.
var index = 0;
var source = "__p+='";
//没有设置settings.variable 默认使用对象+. 来取值
var settingObj = !!settings.variable ? '' : '_obj.';
//几个分组
text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
source += text.slice(index, offset).replace(escaper, escapeChar);
index = offset + match.length; if (escape) {
//编码
//_obj.XXX
source += "'+\n((__t=(" + settingObj + escape.trim() + "))==null?'':_.escape(__t))+\n'";
} else if (interpolate) {
//取值
//_obj.XXX
source += "'+\n((__t=(" + settingObj + interpolate.trim() + "))==null?'':__t)+\n'";
} else if (evaluate) {
//任意的Javascript
source += "';\n" + evaluate + "\n__p+='";
}
// Adobe VMs need the match returned to produce the correct offest.
return match;
});
source += "';\n"; // If a variable is not specified, place data values in local scope.
// 据说使用with 性能不咋地,可以使用变量
// with可能会影响性能,并造成难以发现的错误
//if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
//去掉使用with
if (!settings.variable) source = ' var _obj=obj||{};\n' + source + ' \n';
source = "var __t,__p='',__j=Array.prototype.join," +
"print=function(){__p+=__j.call(arguments,'');};\n" +
source + 'return __p;\n'; try {
var render = new Function(settings.variable || 'obj', '_', source);
} catch (e) {
e.source = source;
throw e;
} var template = function(data) {
return render.call(this, data, _);
}; // Provide the compiled source as a convenience for precompilation.
var argument = settings.variable || 'obj';
template.source = 'function(' + argument + '){\n' + source + '}'; return template;
};

改动后的代码,加上使用也改动下,指定variable,测试结构大变,修改后测试结构如下图。不是underscore慢,是没用对。不信自己跑一跑 我提供代码。下载地址:test.zip 里面有一个test-speed.html  跑一下就知道结果了。

这是在chrome38中的测试结果

这是在firefox 34中的测试效果

模板引擎基本上都是模板先预编译 fn = _.template(source),然后调用之前得到的函数fn(data)进行最后的渲染。所以模板引擎的速度应该是模板预编编译时间和数据渲染时间之和才对,但是这里只测试了一个渲染数据的时间,明显不够全面。

我也测试了一下编译速度,发现最快的Handlebars,而artTemplate速度基本上处于垫底水平,不信自己测试。最后得出:模板预编译时间加上渲染的速度其实artTemplate并不是想象中那么快,其实和underscore差不多。不信自己测试下。

引擎渲染速度测试--我js代码写得少你不要骗我的更多相关文章

  1. 如何让你的JS代码写的更漂亮

    感觉这篇文章总结的js的规范写法不错,拿来收藏.转自:https://mp.weixin.qq.com/s/AtR94IL9BW9EXOTnKOilmA 1. 按强类型风格写代码 JS是弱类型的,但是 ...

  2. 为什么要把js代码写到<!--//-->中

    是为了兼容,不支持js的浏览器会把其中的内容当做html注释.

  3. 用最少的JS代码写出贪吃蛇游戏---迷你版

    游戏进行页面展示 GAME  OVER 页面展示  代码如下: <!doctype html> <html>   <body>   <canvas id=&q ...

  4. 试着讲清楚:js代码运行机制

    一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...

  5. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  6. 原始的js代码和jquery对比

    Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

  7. 页面怎么引用外部css+js代码

    外部css样式:把css样式写到一个文件内,方便使用,减少冗余. 如果使用的是外部css样式,页面怎么引用: 使用 <link rel="stylesheet" type=& ...

  8. 程序员面试京东前端,现场JavaScript代码写出魔方特效

    程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...

  9. 浏览器渲染引擎,提高css渲染速度。

    一.渲染引擎渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上.默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 二.各种渲染引擎我 ...

随机推荐

  1. php中的匿名函数(Anonymous functions)和闭包函数(closures)

    一:匿名函数 (在php5.3.0 或以上才能使用) php中的匿名函数(Anonymous functions), 也叫闭包函数(closures), 允许指定一个没有名称的函数.最常用的就是回调函 ...

  2. npm更换淘宝镜像

    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set registry https://regist ...

  3. 《Pro Git》学习笔记

    1.Git远程模型示意图 Remote:远程仓库 Repository:本地仓库 Index:暂存区 workspace:当前工作区 2.取得Git仓库 2.1 初始化新仓库     git init ...

  4. listview使用checkbox批量删除出现的问题

    1.选中前面的checkbox导致后的checkbox被选中 2.选中后下滑listview,再上滑时被选中的checkbox又变成未选中状态. 问题大都是因为对listview进行代码优化重用con ...

  5. oracle里面的时间转字符串to_char(),字符串转时间to_date(),以及substr和instr的使用。

    工作中编写过的一条语句 select * from Bt_Holiday where to_char(Setting_DATE,'YYYY')=Substr('2015-03-00',1,4) AND ...

  6. iOS自学之NSOperation、NSOperationQueue、Background

    iOS中多线程编程主要分为NSThread.NSOperation和GCD,今天主要记录下自己在学习NSOperation中的点滴-如有不对的地方帮忙指出下,PS:人生第一次写blog,各位看官请轻虐 ...

  7. gradle使用国内源

    // 设置 maven 库地址 repositories {     maven { url 'http://maven.oschina.net/content/groups/public/' } } ...

  8. 两种js监听滚轮事件的方式

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...

  9. hdu 1715 大菲波数(高精度数)

    Problem Description Fibonacci数列,定义如下: f(1)=f(2)=1 f(n)=f(n-1)+f(n-2) n>=3. 计算第n项Fibonacci数值. Inpu ...

  10. [翻译][MVC 5 + EF 6] 7:加载相关数据

    原文:Reading Related Data with the Entity Framework in an ASP.NET MVC Application 1.延迟(Lazy)加载.预先(Eage ...