资讯频道 → Web前端
阅读更多

2顶
2踩

Web前端

转载新闻 artTemplate：高性能 JavaScript 模板引擎

2012-06-15 17:34 by 副主编 MnouW 评论(10) 有19907人浏览
artTemplate JavaScript 模板引擎 开源
随着 web 发展，前端应用变得越来越复杂，基于后端的 JavaScript(Node.js) 也开始崭露头角，此时 JavaScript 被寄予了更大的期望，与此同时 JavaScript MVC 思想也开始流行起来。JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。

本文将用最简单的示例代码描述现有的 JavaScript 模板引擎的原理，包括新一代 JavaScript 模板引擎 artTemplate 的特性实现原理，欢迎共同探讨。

artTemplate 介绍

artTemplate 是新一代 JavaScript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 JavaScript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。



除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

artTemplate 这一切都在 1.7kb(gzip) 中实现！

JavaScript 模板引擎基本原理

虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 JavaScript 字符串。

关于动态执行 JavaScript 字符串，本文以一段模板代码举例：



这是一段非常朴素的模板写法，其中，”" 为 closeTag (逻辑语句闭合标签)，若 openTag 后面紧跟 “=” 则会输出变量的内容。

HTML语句与变量输出语句被直接输出，解析后的字符串类似：



语法分析完毕一般还会返回渲染方法：



渲染测试：



在上面 render 方法中，模板变量赋值采用了 with 语句，字符串拼接采用数组的 push 方法以提升在 IE6、7 下的性能，jQuery 作者 john 开发的微型模板引擎 tmpl 是这种方式的典型代表，参见： http://ejohn.org/blog/JavaScript-micro-templating/

由原理实现可见，传统 JavaScript 模板引擎中留下两个待解决的问题：

1、性能：模板引擎渲染的时候依赖 Function 构造器实现，Function 与 eval、setTimeout、setInterval 一样，提供了使用文本访问 JavaScript 解析引擎的方法，但这样执行 JavaScript 的性能非常低下。

2、调试：由于是动态执行字符串，若遇到错误调试器无法捕获错误源，导致模板 BUG 调试变得异常痛苦。在没有进行容错的引擎中，局部模板若因为数据异常甚至可以导致整个应用崩溃，随着模板的数目增加，维护成本将剧增。

artTemplate 高效的秘密

1、预编译

在上述模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 JavaScript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。artTemplate 模板编译器会根据一些简单的规则提取好所有模板变量，声明在渲染函数头部，这个函数类似：



这个自动生成的函数就如同一个手工编写的 JavaScript 函数一样，同等的执行次数下无论 CPU 还是内存占用都有显著减少，性能近乎极限。

值得一提的是：artTemplate 很多特性都基于预编译实现，如沙箱规范与自定义语法等。

2、更快的字符串相加方式

很多人误以为数组 push 方法拼接字符串会比 += 快，要知道这仅仅是 IE6-8 的浏览器下。实测表明现代浏览器使用 += 会比数组 push 方法快，而在 v8 引擎中，使用 += 方式比数组拼接快 4.7 倍。所以 artTemplate 根据 JavaScript 引擎特性采用了两种不同的字符串拼接方式。

artTemplate 调试模式原理

前端模板引擎不像后端模板引擎，它是动态解析，所以调试器无法定位到错误行号，而 artTemplate 通过巧妙的方式让模板调试器可以精确定位到引发渲染错误的模板语句，例如：



artTemplate 支持两种类型的错误捕获，一是渲染错误(Render Error)与编译错误(Syntax Error)。

1、渲染错误

渲染错误一般是因为模板数据错误或者变量错误产生的，渲染的时候只有遇到错误才会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，编译后的函数类似：



当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。

2、编译错误

编译错误一般是模板语法错误，如不合格的套嵌、未知语法等。由于 artTemplate 没有进行完整的词法分析，故无法确定错误源所在的位置，只能对错误信息与源码进行原文输出，供开发者判断。

开源节流

artTemplate 基于开源协议发布，无论是商业公司还是个人都可以免费在项目中使用，欢迎共同完善。

下载地址：https://github.com/aui/artTemplate

在线预览：http://aui.github.com/artTemplate/

  • 大小: 10.1 KB
  • 大小: 2.4 KB
  • 大小: 2.6 KB
  • 大小: 5.5 KB
  • 大小: 1.9 KB
  • 大小: 3.5 KB
  • 大小: 16.3 KB
  • 大小: 5.4 KB
2
顶
2
踩
评论 共 10 条 请登录后发表评论
10 楼 kjj 2013-05-04 20:24
gengyousheng 写道
artTemplate是否支持分页？

与分页啥关系！
9 楼 gengyousheng 2013-05-03 17:13
artTemplate是否支持分页？
8 楼 APieceOfRedCloth 2012-06-18 11:52
kjj 写道
[img url=http://dl.iteye.com/upload/attachment/0069/6041/8ef5877e-0809-3db8-9d2e-ccee4062773a.png][/img]

<%%>  模版语法只有送到浏览器才可以被解析吧,你这个语法会不会和jsp冲突!!!

可以定制模版定界符是必备功能，否则前后台无法配合。
7 楼 ren008598 2012-06-17 00:44
js作后台，这后台是说数据交互生成的后台吗？还是神马意思呢？
6 楼 achun 2012-06-16 19:48
http://achun.github.com/jCT/
jCT优化字符串拼接完成,托管于github了
5 楼 ninthbar 2012-06-16 18:05
蛋疼，一看这语法就已经没兴趣了，知道jsp->jstl->el的进化吗？
4 楼 achun 2012-06-16 14:16
哈哈哈哈,前台模版又被关注了啊,artTemplate也采用了原生js语法,这个好,降低了学习成本,话说俺也写的有啊,这激起了我优化jCT的念头了,稍后优化放出,不知道是否能与artTemplate 的速度一比.
3 楼 railway 2012-06-16 14:09
软贱攻城湿，这叫法。。。

如果是JSP页面，“<%= content%>”的写法个人感觉会冲突，具体没试过。
2 楼 ini_always 2012-06-15 19:23
这个模板忘了jsp的痛了么，在静态页面中嵌入可执行代码，不管是java代码，还是js，都是大忌啊！
不管是前台FED，还是后台软贱攻城湿，都很讨厌这种方式的。
像Mustache就好很多，模板就是模板，是给FED做设计用的，没有逻辑，你需要逻辑就自己去code中处理。
1 楼 kjj 2012-06-15 18:38
[img url=http://dl.iteye.com/upload/attachment/0069/6041/8ef5877e-0809-3db8-9d2e-ccee4062773a.png][/img]

<%%>  模版语法只有送到浏览器才可以被解析吧,你这个语法会不会和jsp冲突!!!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • art-template：高性能JavaScript模板引擎

    艺术模板 |art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。 同时，它支持NodeJS和浏览器。 。 art-template是一个简约，超快的...

  • 第四节：高性能 JavaScript 模板引擎 之 art-template

    art-template - 高性能 JavaScript 模板引擎。

  • arttemplate高性能javascript模板引擎.docx

    arttemplate高性能javascript模板引擎.docx

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

    随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) ...本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理，包括新一代 javascript 模板引擎 artTemplate 的特性实现原理，欢迎共同

  • art-template——高性能JavaScript模板引擎原理解析

    转载：Tencent CDC（https://cdc.tencent.com/2012/06/15/高性能javascript模板引擎原理解析/） 随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予...

  • 详解js模板引擎art template数组渲染的方法

    JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，模板引擎种类也是五花八门，我就说几个安全性高、错误处理调试优，执行速度快的有artTemplate(腾讯 14k)、juicer(国外 12k)这俩个，...

  • 前端模板引擎artTemplate---高性能JavaScript模板引擎

    前端模板引擎artTemplate—高性能JavaScript模板引擎关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析，本文只探讨如何使用。初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接...

  • 高性能JavaScript模板引擎artTemplate介绍

    新一代 javascript 模板引擎 目录 特性 快速上手 模板语法 方法 NodeJS 使用预编译 更新日志 授权协议 特性 性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试） 支持运行时调试，...

  • 高性能JavaScript模板引擎原理解析（artTemplate ）

    高性能JavaScript模板引擎原理解析 随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始...

  • 高性能JavaScript模板引擎 artTemplate

    下载地址 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt;...script src="js/template.js"&gt;&lt;/script&gt; &lt;/head&...

  • 高性能JavaScript模板引擎-artTemplate快速上手

    artTemplate 简洁语法（标准语法） 引用简洁语法的引擎版本，例如： &lt;script src="dist/template.js"&gt; 输出表达式 对内容编码输出： {{content}} 不编码输出： {{#content}} ...

  • 高性能js模板引擎（artTemplate ）

    本人在平台根据需要灵活运用js模板引擎以及后端模板

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

    通过测试artTemplate、juicer与doT引擎模板整体性能要有绝对优势； js模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，从而出现在各大型网站 Twitter、淘宝网、新浪浪...

  • 模板引擎 ajax 比较,第115天：Ajax 中artTemplate模板引擎（一）

    一、不分离与分离的比较1、前后端不分离，以freemarker模板引擎为例，看一下不分离的前后端请求的流程是什么样的？从上图可以看出，前后端开发人员的工作耦合主要在(3)Template的使用。后端程序员和前端程序员会出现...

  • JavaScript模板引擎-artTemplate

    JavaScript模板引擎一、为什么使用JavaScript模板引擎项目中，部分模块（filter、toolbar）业务复杂，过多依赖jQuery去铺数据，导致整体性能不高，且使用jQuery操作导致代码量和冗余度增大，后期维护不变。...

  • 12. 前端基础--模板引擎art-template

    文章目录模板引擎art-template1. 简洁语法结构2. 原生JS语法结构3. 核心方法☆ 模板引擎art-template 模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定...

  • 前端开发--art-template模板引擎及实现原理

    #博学谷IT学习技术支持#目录简介安装使用步骤​编辑 art-template标准语法值输出原文输出条件输出 循环输出 过滤器模板引擎的实现原理1.基本语法2.分组3.字符串的replace函数4.多次replace5.使用while循环replace6....

  • 基于SSM+JSP+HTML的东风锻造有限公司重大停管理系统(Java毕业设计，附源码，数据库，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 ssm 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

  • 数据库系统课程设计报告-体育项目比赛管理系统设计与开发

    一、系统需求分析 1 （一）需求概述 1 （二）业务流分析 1 从运动员角度分析 1 （三）数据流分析 4 （四）数据字典 5 二、数据库概念结构设计 6 （一）实体分析 6 （二）属性分析 6 （三）联系分析 8 （四）概念模型分析（.PDM图） 9 三、数据库逻辑结构设计 9 （一）概念模型转化为逻辑模型 9 1.一对一关系的转化 9 2.一对多关系的转化 9 3.多对多关系的转化 10 （二）逻辑模型设计（.PDM图） 10 四、 数据库物理实现（一）表设计 10 （一）表设计 10 （二）创建表和完整性约束代码设计 11 五、数据库功能调试 15 （一）运动员管理模块 15 （二）负责人管理模块 16 （三）系统管理员管理模块 17 六、设计系统前台软件 21 （一）开发软件选择 21 （二）软件功能要求与设计 22 （三）软件功能实现 22 （四）系统测试 24 七、设计总结 27

  • 基于SSM+JSP的文物管理系统+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

Global site tag (gtag.js) - Google Analytics