AngularJS 性能优化二三事 【已翻译100%】

在过去的两年中,angularjs 的使用率有了很大的提升。简单的双向绑定是促使其流行的主要原因之一,但与此同时,它导致了在一个应用中出现了大量的 watcher。在后台,angularJS 会执行所谓的 “脏值检查”。之所以要做脏值检查目的是为了检查在 “scope” 中的数据是否发生了变化;框架必须周期性的检测数据是否发生了变化… 脏值检查会每 40ms 更新一次.. 想想看.. 如果它需要检查超多数据的时候; Crap!!

让我们来看看如何改善 angularJS 的性能..

减少 watcher 数量

可能很多人都会抱怨 angular js 应用的性能; 特别是当他们用了 ng-repeat 的时候;为什么会这样? Watcher 应该是这背后的主要原因。一个 angular 指令会产生一个 watcher (比如 ng-src;ng-href;)
下面的例子很详细的解释了这种情况
http://plnkr.co/edit/jwrHVb?p=preview
看看上面的例子,你加载的数据越多; 产生的 watchers 就越多;

解决方案
通过使用 bindonce 指令来避免使用双向绑定; 当你不需要双向绑定的时候,试试看用 bindonce 指令,比如 bo-if; bo-show; 看看下面这个精简过 watcher 数量的例子

http://plnkr.co/edit/0DGOrk?p=preview
文档和源码放在这里
https://github.com/Pasvaz/bindonce

延迟加载 angular controller

在初始化的时候加载控制器对小应用来说很合适;但是如果应用的 scope 很大怎么办?
如果我们在特定页面初始化的时候,把控制器动态的加载到我们的 DOM 上会怎样? 很赞,对不对?

如果这些控制器是在特定页面加载之后,动态的加载到 DOM 上的话; 不单应用的初始化会很快; 而且也会降低在 DOM 中生成的对象数量;

下面例子是如何动态加载控制器到 DOM
https://github.com/ifyio/angularjs-lazy-loading-with-requirejs

删除那些不在你 viewport 中的,多余的 html 对象

对于不定长列表最常见的问题…. 尤其是在用 ng-repeat 的时候; 就是你必须把所有数据都加载进来,即使你只需要显示其中一部分数据; 每次重复会生成至少同样数量的 watcher;
所以为什么不只加载显示所必要的那部分数据呢。是不是很 Crazyyyyyyyyyy?试试这个
https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md

这个指令只加载那些在 viewport 中的对象,并清除那些看不到的;
这不仅仅削减了watcher数量,同时也降低了浏览器中 DOM 的大小。是不是超酷?

你觉得呢?告诉我呗。

时间: 2024-09-06 06:39:20

AngularJS 性能优化二三事 【已翻译100%】的相关文章

8 种提升 ASP.NET Web API 性能的方法 【已翻译100%】

ASP.NET Web API 是非常棒的技术.编写 Web API 十分容易,以致于很多开发者没有在应用程序结构设计上花时间来获得很好的执行性能. 在本文中,我将介绍8项提高 ASP.NET Web API 性能的技术. 1) 使用最快的 JSON 序列化工具 JSON 的序列化对整个 ASP.NET Web API 的性能有着关键性的影响. 在我的一个项目里,我从 JSON.NET 序列化工具转到了 ServiceStack.Text 有一年半了. 我测量过,Web API 的性能提升了20

AngularJS 的 IE 兼容性 【已翻译100%】

备注:AngularJS 1.3抛弃了对IE8的支持.可以在我们的博客上了解更多内容.AngularJS 1.2将继续支持IE8,但核心团队已经不打算在解决IE8及之前版本的问题上花时间. 本文档介绍了互联网浏览器(IE)在处理自定义HTML标签及属性时的特点.如果你正计划在IE8或更早的浏览器上部署Angular应用请阅读本文. 项目目前支持且将尝试修复IE9以上的bug .持续集成服务器在IE9,IE10和IE11上运行所有的测试.详细内容参加Travis CI及ci.angularjs.o

利用 View State 缓存优化 ASP.NET 性能 【已翻译100%】

简介 ASP.NET的视图浏览机制提供了客户端的管理方式.它能够保存请求过程中的所有数据. 这对于无状态显示的协议编程如HTTP提供了方便. ASP.NET的 View State被保存在页面上隐藏的Base64字符串中, 它记录了客户端到服务器的请求以及服务端到客户端的回应信息. <input id="__VIEWSTATE" type="hidden" name="__VIEWSTATE" value="/wEPDwUJNzg

AngularJS 提交表单的方式 【已翻译100%】(2/2)

简洁语法 这个例子是以字符串的方式发送数据,并且发送你的头信息.如果你不需要这些,并且希望Angular 的$http POST尽可能的简洁,我们可以使用简写方法: ... $http.post('process.php', $scope.formData) .success(function(data) { ... }); ... 绝对更简洁更容易记住方法. $http 内部控制器: 理想的,你可以将$http请求从controller移除到 service.这只是为了演示目的,我们将会尽快在

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 【已翻译100%】

本文为开发者呈现了一些概念和相关的示例代码,介绍了用ngResource($resource)服务POST方式提交数据到和服务器端SpringMVC环境下的RESTFul APIs.示例代码可以在如下页面找到:http://hello-angularjs.appspot.com/angularjs-restful-apis-post-method-code-example.相对于使用$http服务,我更喜欢这种方法的主要理由是ngResource允许你使用抽象方式(例如$resource类),你

AngularJS 提交表单的方式 【已翻译100%】(1/2)

在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

通过添加一些 gems 来提升 Rails 应用的性能 【已翻译100%】

使用Rails一段时间之后,你可能就会开始吹毛求疵的想要提高它性能.这是一系列文章中第一次考虑如何提高(即使微不足道的)Rails的性能. 我将会关注在一些gem的提速上面,在某些情况下,可能是一小部分的Rails,如html转义,String.blank?和JSON工具类. 基准原则 原则,对于仅仅在控制台wrk运行几次来讲,是一个与其过强的词语,但是我这里不是来寻找"圣杯"的,而是提供一些初始的想法. 我将从旧的apache ab切换到wrk. wrk是现代的 HTTP 基准工具,

通过终端调试 AngularJS 应用 【已翻译100%】

当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难.下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用: 1: 访问作用域 通过一行简单的JS程序访问页面中任何作用域(甚至是隔离的作用域!): > angular.element(targetNode).scope()

AngularJS —— 使用模块组织你的代码 【已翻译100%】(2/3)

函数是一个对象:它创建了范围 这是因为现在你已经把isDoingWork这个变量创建在了一个函数里面 -- 也就是我们们的匿名 IIFE 中 -- 而如此这个变量就只能通过这个函数才能访问到. 有趣的是Javascript中的所有函数都是第一类对象. 那很简明的意味着函数是一个对象,它可能通过一个变量被访问到. 或者说,另外一种描述的方式是你存储了指向 函数的一个引用,并在稍后的某个时间获取其变量. 在我们第一个示例中,我们的问题是并没有保存一个指向我们匿名函数的引用,所以我们永远也不能再获取到