用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. 同时打开两个excel工作窗口
			
    先打开你想要同时打开的两个excel文件,有两个方法可以同时打开两个窗口:首先选取任意一个文件,1. 点击“窗口”菜单==>"重排窗口"==>选择你想同时打开的样式== ...
    
			
    2. 
						
  2. KMP匹配算法
			
    先来说一下回溯法匹配字符串: 对于主字符串有一个target_index,以target_index(不动)为起点,匹配字符串pattern的长度+target_index为终点,逐个进行比较,当发现 ...
    
			
    3. 
						
  3. Coursera Machine Learning : Regression  简单回归
			
    简单回归 这里以房价预测作为例子来说明:这里有一批关于房屋销售记录的历史数据,知道房价和房子的大小.接下来就根据房子的大小来预测下房价. 简单线性回归,如下图所示,找到一条线,大体描述了历史数据的走势 ...
    
			
    4. 
						
  4. slim框架中防止crsf攻击时，用到的函数hash_equals
			
    1．防止crsf攻击的最多解决方案就是 为每个请求生成一个唯一 token ,验证来源于客户端 HTML 表单产生的 POST等请求 ． 2．这个token默认放在session中． slim框架源码 ...
    
			
    5. 
						
  5. 使用re-sign.jar对apk进行重签名
			
    准备: ① re-sign.jar重签名工具:(下载地址为:http://troido.de/downloads/category/1): ② 待重签名的apk:      重签名步骤: ① 右键re ...
    
			
    6. 
						
  6. 利用Kinect将投影变得可直接用手操控
			
    Finally 总算是到了这一天了!假期里算法想不出来,或者被BUG折磨得死去活来的时候,总是YY着什么时候能心情愉快地坐在电脑前写一篇项目总结,今天总算是抽出时间来总结一下这神奇的几个月. 现在回过 ...
    
			
    7. 
						
  7. 部署war包后，新增tomcat服务器，启动tomcat服务器报错解决方法
			
    导入Maven工程后,新增tomcat服务器,启动服务器后,报如下错误: 使用http访问页面的时候报如下错误: 经过百度后,有一种方法可以解决: 在eclipse tomcat无法启动,无法访问to ...
    
			
    8. 
						
  8. NOIp蒟蒻的爆零记——HA-0132
			
    考前: 从十一月开始的听课集训,连考六场:考前的最后两天写(da)着(zhe)各种各样的奇(C)葩(S)模板:一周的疯狂,已经过去: 考前的一晚:第二批高二的六个人聚在一起(还有滑稽大师),愉快的玩( ...
    
			
    9. 
						
  9. 怎么将oracle数据库的数据迁移
			
    打开要导出数据的PC,进入cmd界面 先进入数据库输入sqlplus,账号system密码508956.有权限的账户密码 2. create directory dir_555 as 'd:/asd1 ...
    
			
    10. 
						
  10. 对于cookie和session的形象解释
			
    生活中的场景: 一群人,买豆浆,也不排队,乱哄哄的 豆浆现磨. 先交钱,交完钱蹲在一边等. 这个老板非常健忘! 记忆时间:转脸就忘. 李四给老板钱<--->"大杯黄豆!" ...
    
			
    11.