LABJS按需动态加载js文件.pdfVIP

为了提高页面的打开和加载速度， 我们经常把 JS 文件放在页面的尾部， 但是有些 JS 必 须放在页面前面，这样就会增加页面的加载时间 ;于是出现了按需动态加载的概念，这个概 念就是当页面需要用到这个 JS 文件或者 CSS 渲染文件的时候，在去请求这些文件，这样就 节省了页面的加载时间 LABjs 是一个很小的 JavaScript 工具，用来根据需要加载 JavaScript 文件，通过使用 该工具可以提升页面的性能，避免加载不需用到的 JavaScript 文件，可以实现动态并行加 载脚本文件，以及管理加载脚本文件的执行顺序。 简单示例 $LAB .script(script1.js, script2.js, script3.js) .block(function(){ // wait for all to load, then do something script1Func(); script2Func(); script3Func(); }); 介绍下 LABJS 的几个实例： 实例 1： $LAB .script(script1.js) .script(script2.js) .script(script3.js) .wait(function(){ // 等待所有 script 加载完再执行这个代码块 script1Func(); script2Func(); script3Func(); }); 实例 2： $LAB .script({ src: script1.js, type: text/javascript }) .script(script2.js) .script(script3.js) .wait(function(){ // 等待所有 script 加载完再执行这个代码块 script1Func(); script2Func(); script3Func(); }); 实例 3： $LAB .script(script1.js, script2.js, script3.js) .wait(function(){ // 等待所有 script 加载完再执行这个代码块 script1Func(); script2Func(); script3Func(); }); 实例 4： $LAB .script( [ script1.js, script2.js ], script3.js) .wait(function(){ // 等待所有 script 加载完再执行这个代码块 script1Func(); script2Func(); script3Func(); }); 实例 5： $LAB .script(script1.js).wait() // 空的 wait() 只是确保 script1 在其他代码之前被执行 .script(script2.js) // script2 和 script3 依赖于 script1 .script(script3.js).wait() // 但是 script2 和 script3 并不互相依赖 ,可以并行下载 .script(script4.js) // script4 依赖于 script1, script2 及 script3 .wait(function(){script4Func();}); 实例 6： $LAB .script(script1.js) // script1, script2, and scri