用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. Android停止运行问题1_layout布局xml问题
			
    好好的写了300多行布局文件代码,写完之后运行结果,停止运行了.我当时就奇怪,xml有错误应该会提示啊,我就一个一个的缩小错误的代码范围,先直接换成一个简单的TextView ,运行一下没有错误.再慢 ...
    
			
    2. 
						
  2. 关于MySQL的CRUD操作
			
    一.清除mysql表中数据 delete from 表名; truncate table 表名; 不带where参数的delete语句可以删除mysql表中所有内容,使用truncate table也 ...
    
			
    3. 
						
  3. JS之函数表达式
			
    度过一个愉快短暂的周末,又可以开始学习了!我爱学习,学习使人进步.今天学习函数表达式,着重学习下闭包函数. 函数表达式 可以在定义的函数声明之前调用它,但是不能在定义函数表达式之前调用它 /** *  ...
    
			
    4. 
						
  4. Java 中extends与implements使用方法
			
    Java 中extends与implements使用方法 标签: javaclassinterfacestring语言c 2011-04-14 14:57 33314人阅读 评论(7) 收藏 举报 分 ...
    
			
    5. 
						
  5. (原创)通用查询实现方案(可用于DDD)[附源码] -- 简介
			
    [声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3985353.html).   [系列文章] 通用查询实现方案(可用于DDD)[附源码] --  ...
    
			
    6. 
						
  6. [Note] changing building platform from vs 2013 to vs community 2015
			
    The error turned out as "undefined linkage"(The same as you haven't use some function that ...
    
			
    7. 
						
  7. 性能：CPU、Memory、耗电量
			
    1.自动 APP 性能测试需求讨论:https://testerhome.com/topics/3172 2.Android Studio中怎么使用DDMS工具?:http://www.cnblogs ...
    
			
    8. 
						
  8. ready与onload的性能
			
    <!DOCTYPE html> <html> <head> <title>ready与onload的性能</title> <meta  ...
    
			
    9. 
						
  9. iOS多线程 NSOperation的用法
			
    上一篇写了 GCD 的使用,接下来就了解一下 NSOperation ,NSOperation是苹果对 GCD 的 OC 版的一个封装,但是相对于GCD来说可控性更强,并且可以加入操作依赖. NSOp ...
    
			
    10. 
						
  10. <转>浅析长度为0的数组
			
    前面在看Xen的源码时,遇到了一段代码,如下所示: 注意上面最后一行的代码,这里定义了一个长度为的数组,这种用法可以吗?为什么可以使用长度为0 的数组?长度为的数组到底怎么使用?……这篇文章主要针对该 ...
    
			
    11.