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的更多相关文章

  1. AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...

  2. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  3. angularJS 报错: [ngModel:numfmt] http://errors.angularjs.org/1.4.1/ngModel/numfmt?p0=333

    <!doctype html> <html ng-app="a10086"> <head> <meta charset="utf ...

  4. angularjs工程流程走不通的原因以及使用angularjs流程注意点

    1 入口index.html 在这个页面中要引入一些js,也就是说无论哪个模块下的js以及css都是在index.html下引入的,而在其他非index.html的html页面中,只有div模块代码, ...

  5. AngularJs中Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/

    我在使用angularjs的时候报出来这个错误: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/ 当时 ...

  6. 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 ...

  7. 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 ...

  8. AngularJS从构建项目开始

    AngularJS从构建项目开始 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框 ...

  9. 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

随机推荐

  1. PHPCMS(2)PHPCMS V9 环境搭建(转)

    转自:http://www.cnblogs.com/Braveliu/p/5072920.html PHPCMS V9的学习总结分为以下几点: [1]PHPCMS 简介 PHP原始为Personal ...

  2. H5的本地存储

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  3. 移动端版本兼容js

    移动端版本兼容js <!--移动端版本兼容 --> <script type="text/javascript"> var phoneWidth = par ...

  4. Tomcat虚拟主机配置

    3.1.配置虚拟主机 配置虚似主机就是配置一个网站. 在Tomcat服务器配置一个虚拟主机(网站),需要修改conf文件夹下的server.xml这个配置文件,使用Host元素进行配置,打开serve ...

  5. JS和jQuery获取节点的兄弟,父级,子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

  6. php计算时间差/两个时间日期相隔的天数,时,分,秒.

    function timediff( $begin_time, $end_time ) { if ( $begin_time < $end_time ) { $starttime = $begi ...

  7. odoo view field option, action flage 参数

    options JSON object specifying configuration option for the field's widget (including default widget ...

  8. iOS 多线程详解

    iOS开发 多线程 概览 机器码是按顺序执行的,一个复杂的多步操作只能一步步按顺序逐个执行.改变这种状况可以从两个角度出发: 对于单核处理器,可以将多个步骤放到不同的线程,这样一来用户完成UI操作后其 ...

  9. [POJ 1742] Coins 【DP】

    题目链接:POJ - 1742 题目大意 现有 n 种不同的硬币,每种的面值为 Vi ,数量为 Ni ,问使用这些硬币共能凑出 [1,m] 范围内的多少种面值. 题目分析 使用一种 O(nm) 的 D ...

  10. Java中接口与实例化

    一.问题引入         前两天学代理模式的时候想到的,接口可不可以new呢?         接口是特殊的抽象类,接口的方法都默认为  public  abstract  的... 抽象的方法不 ...