各种JS模板引擎对比数据(高性能JavaScript模板引擎)

时间:2022-09-02 10:30:20

最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据;通过测试artTemplatejuicerdoT引擎模板整体性能要有绝对优势;

js模板引擎

JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,从而出现在各大型网站 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等。那么他们各自性能怎么样?请看下面。
 

通常模板引擎

 

各模板测试数据

引擎渲染速度竞赛

100 条数据 × 10000 次渲染测试 [isEscape:false, isCache:true]

ie8浏览器(8.0.6001.18702)

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

chrome浏览器(版本 26.0.1410.64 m)

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

Apple safari浏览器(5.1.7(7534.57.2))

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

firefox浏览器(19.0.2)

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

奇虎360浏览器(版本号6.1.0.356,内核版本:21.0.1180.89)

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

测试结果

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

通过对各模板引擎测试结果,可以看出
artTemplate,juicer与doT引擎模板整体性能要有绝对优势;
其中doT引擎模板在IE与safari浏览器表现非常优越;
tmpl模板引擎在IE中运行能完美胜出,但在其它浏览器中表现就差很多;

延伸
通过对模板引擎的熟知,不同浏览器渲染能力也不一样;渲染快的打开网页速度就快;chrome与360浏览器打开速是最快的;ie浏览器的速度是最慢;

各个模板引擎下载地址

baiduTemplate:  http://baidufe.github.io/BaiduTemplate/

artTemplate: https://github.com/aui/artTemplate

juicer: http://juicer.name/https://github.com/PaulGuo/Juicer/zipball/master#download

doTdoT source:https://github.com/olado/doT   Docs:http://olado.github.com/doT/

tmplhttps://github.com/BorisMoore/jquery-tmpl

handlebars:http://handlebarsjs.com/或https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js

easyTemplatehttps://github.com/qitupstudios/easyTemplate

underscoretemplate: http://documentcloud.github.io/underscore/

mustache:https://github.com/janl/mustache.js

kissytemplate:https://github.com/ktmud/kissy

相关引擎资料

浅析js模板引擎

高性能JavaScript模板引擎原理解析

在前端开发中应用JS模板引擎 -- 事半功倍!

转载自:http://blog.csdn.net/wuchengzhi82/article/details/8938122

各种JS模板引擎对比数据(高性能JavaScript模板引擎)的更多相关文章

  1. 移动端基于HTML模板和JSON数据的JavaScript交互

    写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 +  连接符连接多个html内容: var html = ''; htm ...

  2. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

  3. 高性能JavaScript模板引擎实现原理详解

    这篇文章主要介绍了JavaScript模板引擎实现原理详解,本文着重讲解artTemplate模板的实现原理,它采用预编译方式让性能有了质的飞跃,是其它知名模板引擎的25.32 倍,需要的朋友可以参考 ...

  4. 高性能JavaScript模板引擎 artTemplate

    下载地址 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. Javascript模板引擎mustache&period;js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  6. 探究Javascript模板引擎mustache&period;js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  7. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  8. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  9. Javascript模板及其中的数据逻辑分离思想(MVC)

    #Javascript模板及其中的数据逻辑分离思想 ##需求描述 项目数据库的题目表描述了70-120道题目,并且是会变化的,要根据数据库中的数据描述,比如,选择还是填空题,是不是重点题,题目总分是多 ...

随机推荐

  1. NopCommerce 在Category 显示 Store List列表

    实现效果如下: 1.在前台Web的Category Menu显示 Store; 2.点击 Store 显示 Store List列表: 3.点击 列表Store 的 Company Name 进入该S ...

  2. 第三章 --- 关于Javascript 设计模式 之 代理模式

    第一.定义: 代理模式是为一个对象提供代用品或者占位符,以便控制对它的访问. 比如说,某男生小明想向他的女神 A 表白,刚好小明认识的一个女生B 和 女神A 是好朋友,那么小明就想让 女生B 帮忙送花 ...

  3. UIStackView

    既要温故又要知新...温故而知新,我懂. 在Cocoachina上看到了,UIStackView. 没用过额,试iOS9的新特性.一研究,妈的还挺眼熟.一想,这不和Android上的线性布局一样么.. ...

  4. maven创建web工程,并导入到eclipse中

    maven版本:3.1.0,eclipse版本:4.3 JDK:1.7 创建工程名是sa的maven工程 mvn archetype:create -DgroupId=com.bing-Dartifa ...

  5. ASP&period;NET的SEO:HTTP报头状态码---内容重定向

    本系列目录 我们经常说"404错误",你知道他指的是什么意思么? 404其实是Http报头所包含的一个"状态码",表明该Http请求失败.那么除此之外,还有哪些 ...

  6. python 字符串格式化 输出

    1. 需要输出3列,为了输出好看,需要制定每一列的宽度: ‘%6.2f’ % 1.235 # 长度为6,保留2为小数 print '{0:20} {1:<20} {1:<20}\r\n'. ...

  7. &OpenCurlyDoubleQuote;typedef int &lpar;init&lowbar;fnc&lowbar;t&rpar; &lpar;void&rpar;&semi;&OpenCurlyDoubleQuote;的含义

    在读uboot的lib_arm/board.c中的start_armboot ()函数遇到了"init_fnc_t **init_fnc_ptr;”一句话,后来查看init_fnt_t数据类 ...

  8. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  9. Storm具体解释一、Storm 概述

    一.Storm概述      Storm是一个分布式的.可靠的.零失误的流式数据处理系统. 它的工作就是委派各种组件分别独立的处理一些简单任务.在Storm集群中处理输入流的是Spout组件,而Spo ...

  10. servlet自动获取前端页面提交数据

    servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...