BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Ember改进渲染性能

| 作者 Roopesh Shenoy 关注 0 他的粉丝 ,译者 王振峰 关注 0 他的粉丝 发布于 2014年12月12日. 估计阅读时间: 4 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

Ember社区发布了Ember 1.8版本。该版本最显著的更新是使用了“金属视图”,改善了渲染性能。该特性也为进一步改善性能打好了基础,将来作为“HTMLBars”的一部分。

在Ember以前的版本中,页面的HTML以字符串形式创建(通过Handlebars),然后通过字符串拼接进行组装。现在,页面片段还是以字符串形式创建(通过Handlebars),但会解析为DOM,然后组装为DOM树。

此种方式的优势如下:

  • Ember再也不用使用<script>标签来标记数据绑定内容区域(为了跟踪DOM中哪些地方需要更新绑定值)。现在可以使用独立的DOM对象进行跟踪;
  • 在内嵌SVG文档中,提供组件、数据绑定、逻辑支持;
  • 移除渲染层的递归,既降低GC压力又可以在渲染时重用对象。

但是与Ember 1.6相比,新版本看似性能有所降低,尤其在IE和Android的浏览器上。该问题可能是因为引入了额外的中间步骤(首先将Handlbars转换为字符串,然后解析为DOM),但尚未得到证实。将来的版本会移除多余的步骤。

Matthew Beale在HackerNews上发表了评论,对重构渲染过程的目前状态和未来计划做了说明:

我们开始使用HTMLBars这个术语的目的是为了对Ember的渲染流水线进行一系列改善。在当前的版本(1.8)上我们增加了金属视图(渲染引擎重构),在下一版本(1.9)中我们计划增加流(数据绑定重构),在1.10版本我们希望能够采用新语法和基于DOM的模板引擎。

我们尽力以渐进方式发布HTMLBars特性,而不是完全重写,部分原因是该计划的落地比预期要花更长的时间。但是我个人还是很高兴看到该变化目前进行得很顺利,如果您是Ember.js用户,应该有同感。

Matthew 提到的“流”是一种崭新的Ember.js内部实现,用于替换Ember渲染[z5] [zw6] 流水线底层的数据绑定。该特性会简化模板助手的实现。与Ember 1.8版本同时发布的Ember 1.9 beta版本提供了该特性。

Ember社区欢迎HTMLBars特性的原因有如下几点:无需修改语法,现有应用即可获得显著的速度提升——完全是因为渲染过程的改变(解析为DOM而不是操作字符串);还有就是支持很多新特性,如组件的HTML语法。这些计划变更在“Ember 2.0 RFC路线方案”一文中有详尽的描述。

然而这些修改需要的时间远远超出预期,特别是因为需要大量的测试。

Ember 1.8还带来了其他方面的性能提升:

  • 在对字符串标准化(查找类或路由)的若干操作中(命名方式转换、单复数转换)引入了缓存策略;
  • MANDATORY_SETTER从运行期标识改为构建期的特性标识,使得getter和setter中的代码路径在构建后的生产版本中更短;
  • 重写Ember.Map,使其更快也更接近ES6的实现。

该版本还弃用了很多功能,发布在Ember官网的过期功能指南中。欲知新版本变更和bug修复的全部内容请参考Ember的修改日志。

查看英文原文:Ember Gets Rendering Improvements, More Slated


感谢臧秀涛对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT