用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此:

问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了.

 <!DOCTYPE html>

 <html lang="en" ng-app="myApp">

 <head>

     <meta charset="UTF-8">

     <title>ui-router-lazyload</title>

     <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">

     <script src="../angular/angular.min.js"></script>

     <script src="../angular-ui-router/release/angular-ui-router.min.js"></script>

     <script src="../oclazyload/dist/ocLazyLoad.min.js"></script>

     <script src="index.js"></script>

 </head>

 <style>

     body{

         font-family: "Microsoft JhengHei UI";

     }

     .navigator{

         width: 500px;margin: 0 auto

     }

     .navigator li{

        color: #000;font-size: 14px;

     }

 </style>

 <body ng-controller="myController">

 <ul class="navigator nav nav-pills">

     <li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">主页</a></li>

     <li role="presentation" class="active"><a href="#child">子页面</a></li>

     <li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三级页面</a></li>

 </ul>

 <div ui-view style="width: 500px;margin: 50px auto 0"></div>

 </body>

 </html>


　　js代码:


 1 /**

  * Created by admin on 2016/7/15.

  */

 var myApp=angular.module("myApp",["ui.router","oc.lazyLoad"]);

 myApp.config(function ($stateProvider,$urlRouterProvider) {

     $urlRouterProvider.when("","/home");

     $stateProvider.state('home',{

         url:"/home",

         templateUrl: 'homepage.html',

         resolve:{

             loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {

                 return $ocLazyLoad.load({

                     name:"homeApp",

                     files:["homepage.js"]

                 })

             }]

         }

     });

     $stateProvider.state('index',{

         url:"/home",

         templateUrl:'index.html'

     });

     $stateProvider.state('child',{

         url:"/child",

         templateUrl:'child.html',

         resolve:{

             loadMyCtrl:function ($ocLazyLoad) {

                 return $ocLazyLoad.load({

                     name:'childApp',

                     files:["child.js"]

                 })

             }

         }

     })

     $stateProvider.state('third',{

         url:"/third",

         templateUrl:'third.html',

         resolve:{

             loadMyCtrl:function ($ocLazyLoad) {

                 return $ocLazyLoad.load({

                     name:'grandApp',

                     files:["third.js"]

                 })

             }

         }

     })

 });

 myApp.controller("myController",function ($state,$scope,$location) {

     $scope.turnPage=function () {

         // $state.go('home');

         $location.path('/home')

     }

 });




页面初始效果如下图,打开浏览器控制台,可以看到child.js以及third.js在页面载入时并没有加载:


页面初始化:




当点击子页面和三级页面时,会依次加载所依赖的js文件.实现分步加载.


点击子页面:




三级页面:




填坑:网上关于angular按需加载的文章也蛮多的,也有人使用的是requireJS来进行这个操作,而且ocLazyLoad的使用方法也有很多.之前按照一些文档的方法,在配置路由时,加了下面的蓝色代码,页面是能跳转,但是homepage.html的js代码却执行了两次,难道是控制器加载了两次么.对于这个坑,我还在探索中,也希望大家能够发表意见或者建议.


$stateProvider.state('home',{

 8         url:"/home",
　　　　　　 controller:'homeController',

 9         templateUrl: 'homepage.html',

10         resolve:{

11             loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {

12                 return $ocLazyLoad.load({

13                     name:"homeApp",

14                     files:["homepage.js"]

15                 })

16             }]

17         }

18     });
												


											
angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js的更多相关文章
	

    
								
  1. win7,vs2010,asp.net项目中修改外部js文件，在调试时加载的还是旧文件
		
    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...
    
		
    2. 
						
  2. 如何调试异步加载的js文件（浏览器调试动态加载js）
		
    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...
    
		
    3. 
						
  3. 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
		
    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
    
		
    4. 
						
  4. ASP.NET MVC 5 访问在views文件夹中的JS文件。 ASP.NET MVC html与JS分离
		
    修改VIEWS文件夹下的web.config文件, 加入下面红色字标识的内容:    <system.webServer>     <handlers>       <r ...
    
		
    5. 
						
  5. JQuery 加载 CSS、JS 文件
		
    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
    
		
    6. 
						
  6. JS文件加载：比较async和DOM Script
		
    async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { re ...
    
		
    7. 
						
  7. 前端设计中关于外部js文件加载的速度优化
		
    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
    
		
    8. 
						
  8. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
		
    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
    
		
    9. 
						
  9. 通过本地加载ga.js文件提高Google Anlytics性能
		
    Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 去除inline-block元素间间距的N种方法
			
    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...
    
			
    2. 
						
  2. h5弹框去掉ip地址
			
    <script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...
    
			
    3. 
						
  3. 根据UIColor对象,获取对应的RGBA值
			
    - (NSArray *)getRGBWithColor:(UIColor *)color { CGFloat red = 0.0; CGFloat green = 0.0; CGFloat blue ...
    
			
    4. 
						
  4. 利用Kinect将投影变得可直接用手操控
			
    Finally 总算是到了这一天了!假期里算法想不出来,或者被BUG折磨得死去活来的时候,总是YY着什么时候能心情愉快地坐在电脑前写一篇项目总结,今天总算是抽出时间来总结一下这神奇的几个月. 现在回过 ...
    
			
    5. 
						
  5. 从tomcat启动到springIoC容器初始化（编辑中）
			
    tomcat的启动一般是从startup.bat/startup.sh开始,然后启动catalina.bat/catalina.sh,然后启动bootstrap.jar包 那么它们启动的时候都做了哪些 ...
    
			
    6. 
						
  6. MySQL binlog基本操作
			
    常用操作: 1. 设置启用binlog log-bin = binlog 2. 设置全备和增量备份 #crontab -e * 0 * * 7 /usr/bin/mysqldump mybinlog  ...
    
			
    7. 
						
  7. 用c和c++的方式实现栈
			
    #include <stdio.h> #include <stdlib.h> #include <assert.h> struct LinkNode { int d ...
    
			
    8. 
						
  8. U盘启动盘 安装双系统 详细教程
			
    U盘启动盘 安装win7+linux双系统 最近在看鸟哥的linux 私房菜 ,看到多重系统那部分,自然的安装多重系统的激情由此而燃.在网上看了很多资料,感觉都不全.经过艰辛的摸索,终于被我发现了一个 ...
    
			
    9. 
						
  9. JAVA多线程 问题  转载
			
    参考:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-answers/ http://www.cn ...
    
			
    10. 
						
  10. python 类变量 在多线程下的共享与释放问题
			
    最近被多线程给坑了下,没意识到类变量在多线程下是共享的,还有一个就是没意识到 内存释放问题,导致越累越大 1.python 类变量 在多线程情况 下的 是共享的 2.python 类变量 在多线程情况 ...
    
			
    11.