[AngularJS] 5 simple ways to speed up your AngularJS application
Nowdays, Single page apps are becoming increasingly popular among the fornt-end developers. It is the time to say goodbye with refreshing the whole page due to clicking on a single link. It helps to speed up out web application and improve our use experience. Today we'd talk about how to speed up your AngularJS application. This article is based on AngularJS 1.3.x version.
1. Disabling the debug info
When you use directive, Angular adds some additional debug information to the DOM.
Javascript:
app.controller('AppController', function () {
this.appCtrl = this; appCtrl.message = "Hello World!";
});
HTML:
<p>{{appCtrl.message}}</p>
Once compiled, we get something like this:
<p class="ng-binding">Hello World!</p>
This debug info is super useful when you debuggin because the tools like Protractor and Batarang which can rely on this information. However, great things always come with cost. When our project comes to production, those information is useless to users. And additional properties and classes that are added to the DOM also come with a performance cost depending on how much is stored on the scope and DOM operations are expensive anyway.
AngularJS 1.3 enables us to switch those debug information, what you need to do to disable the debug info:
app.config(function( $compileProvider ) { $compileProvider.debugInfoEnabled(false);
});
To enable it again, you can do in console:
angular.reloadWithDebugInfo();
2. Use $applyAsync
Configure $http service to combine processing of multiple http responses received at around the same time via $rootScope.$applyAsync. This can result in significant performance improvement for bigger applications that make many HTTP requests concurrently (common during application bootstrap) [1].
Sinlge $http request triggers $digest() which can help to update application model and DOM. If you have many $http requests triggered almost at the same time and each request will run $digest() which cost a lot.
The idea to use $applyAsync is to compile multiple $http requets into one $digest. We show how to use this here:
app.config(function($httpProvider) { $httpProvider.useApplyAsync(true);
});
3. Using one time binding
AngularJS comes up with two way binding which is cool because you don't need to set up any event listen, it helps you to update the model automaticlly. But, as we said, great thing comes with cost. In order to make databinding possible, Angular uses $watch APIs to observe model mutations on the scope. Imaging if there is too many watcher, your application become heavy and slow. This is why we need one-time binding. One-time expressions will stop recalculating once they are stable, which happens after the first digest.
You can see the demo here: http://jsbin.com/dijeno/9/edit?html,css,js,output
The way to use one time binding is quite simple, from our first simple of AppController, we know that everytime appCtrl.message changes, {{appCtrl.message}} will also change. So if we apply the one-time expression to our example above, we change this:
<p>{{::appCtrl.message}}</p>
4. Using lazy loading
Lazy loading is very useful when you have a large application which needs to load hundred files. And among those hundred files, there is only 10% files whcih are needed to bootstrap your applcation and the other 90% are only useful in the running time. So, in order to speed up, you don't want those 90% files loaded when the boostrap time. That is the place where lazy loading comes in to handy.
There are many ways to do lazy loading, for example RequireJS, the one which I often use is called ocLazyLoad. It is quite easy to use with AngularJS.
What you need to do first is install ocLazyLoad:
bower install oclazyload
Then inject into the application dependency:
var app = angular.module("demo", ["oc.lazyLoad"])
Javascript: When you click on the AppCtrl, we want to load everything related to the store module.
app.controller("AppCtrl", function($ocLazyLoad) { var app = this;
app.click = function() {
$ocLazyLoad.load({
name: "store",
files: [
"app/store/store.js",
"app/store/store.tpl.html",
"app/css/store.css"
]
})
}
})
5. Resolve data beforehand
Let see two parts of code first, then talk about why resolve is good.
Controller Way:
function MainCtrl(SomeService) { var mainCtrl= this; // unresolved
mainCtrl.something; // resolved asynchronously
SomeService.doSomething().then(function(response) {
mainCtrl.something = response;
}); } angular.module('app', [])
.controller('MainCtrl', MainCtrl);
Route Resolve:
// config with resolve pointing to relevant controller
function config ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main',
resolve: MainCtrl.resolve
});
}
// controller as usual
function MainCtrl (SomeService) {
// resolved!
this.something = SomeService.something;
}
// create the resolved property
MainCtrl.resolve = {
doSomething: function (SomeService) {
return SomeService.doSomething();
}
}; angular
.module('app')
.controller('MainCtrl', MainCtrl)
.config(config);
For controller activate:
- Views load right away
- The Service code executes after the controller code
- Animation can be shown during the view transition
For route resolve
- The code executes before the route via a promise
- Resolve makes the new view wait for the route to resolve
- Animation can be shown before the resolve and through the view transition
Resolve happens before your controller will instantiate, and your template will load and everything will set up. It gives users a felling that they can wait less time to get the interface updated, because all the data are already resolved (parpared) for interface to use.
[AngularJS] 5 simple ways to speed up your AngularJS application的更多相关文章
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...
- 我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
- angularJS 报错: [ngModel:numfmt] http://errors.angularjs.org/1.4.1/ngModel/numfmt?p0=333
<!doctype html> <html ng-app="a10086"> <head> <meta charset="utf ...
- angularjs工程流程走不通的原因以及使用angularjs流程注意点
1 入口index.html 在这个页面中要引入一些js,也就是说无论哪个模块下的js以及css都是在index.html下引入的,而在其他非index.html的html页面中,只有div模块代码, ...
- AngularJs中Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/
我在使用angularjs的时候报出来这个错误: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/ 当时 ...
- Five ways to maximize Java NIO and NIO.2--reference
Java NIO -- the New Input/Output API package-- was introduced with J2SE 1.4 in 2002. Java NIO's purp ...
- Five ways to maximize Java NIO and NIO.2--转
原文地址:http://www.javaworld.com/article/2078654/java-se/java-se-five-ways-to-maximize-java-nio-and-nio ...
- AngularJS从构建项目开始
AngularJS从构建项目开始 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框 ...
- 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
随机推荐
- 生成器模式(Builder)
1.本质:分离整体构建算法和部分构造 2.示意图: 3.功能: 构建复杂的产品,而且是细化的.分步骤的构建产品 分离构建算法和具体的构建实现 具体的构造实现可以方便的切换和扩展 4.优点: 1.松散耦 ...
- JQuery jsonp使用小记
在一个不支持PHP的主机上,需要对某些页面做访问统计.我的方案是在静态的HTML页面上,用JSONP向能够执行PHP的主机进行跨域请求,从而使用PHP解决这个访问量统计问题. 在服务器端,PHP页面返 ...
- 解决m2eclipse之Unable to update index for central |
maven 不能更新,真烦人,转载他人的 maven是个好东西,eclipse上的maven插件m2eclipse也非常方便,但是最近这个东西经常无法连接到maven index的更新网站,然后ecl ...
- ios中关于delegate(委托)的使用心得
ios中关于delegate(委托)的使用心得 分类: iOS开发2012-05-15 10:54 34793人阅读 评论(9) 收藏 举报 iosuiviewtimerinterfaceprinti ...
- 关于win8.1“连接被远程计算机关闭”的一种解决方案
我就是连接的时候出现"连接被远程计算机关闭",然后想着可能是win8更新之后网络协议 出问题了,后来无意中发现e信在第一次启动的时候会在网络适配器中会多出很多网卡,其中三个是带感叹 ...
- windows phone 8学习 - 选择器
1照相机 CameraCaptureTask cct=new CameraCaptureTask(); cct.Completed+=new EventHandler<PhotoResult&g ...
- xamarin fivechess
网上的五子棋项目是java开发,先转为xamarin,有需要的请下载. FiveChess.7z
- Expert Shell Scripting
Expert Shell Scripting 好好学习这本书
- java中的string字符串中的trim函数的作用
去掉字符串首尾空格 防止不必要的空格导致错误public class test{ public static void main(String[] args) { String str = " ...
- Linux 统计文件夹下文件个数
查看统计当前目录下文件的个数,包括子目录里的. ls -lR| grep "^-" | wc -l Linux下查看某个目录下的文件.或文件夹个数用到3个命令:ls列目录.用gre ...