zoukankan      html  css  js  c++  java
  • JS Queue LazyLoad 之一

    前面三篇实现了多个JS并行加载,即各个JS文件相互不依赖。实现时仅顺序将其插入到head中。直至全部插入完毕才进行回调。并行下载的好处是效率较高。

    但有时我们需要加载的JS模块之间存在相互依赖关系。如a,b,c三个JS文件。b.js中代码依赖于a中定义的某些函数或类,c.js又依赖b.js中的函数或类,而c中具有一个入口函数。这时得保证a,b,c顺序加载,否则如果c早于b或a先加载完,则可能会出现xx未定义之类的错误提示。顺序加载的缺点就是效率较低,因为必须一个个的下载。

    Queue LazyLoad 0.1版接口非常之简单,如下传个数组url即可

     QueueLazyLoad.js([
     		{
     			url  // JS路径
     		}
     		...
     ]);
    

    看一个最简单的顺序加载示例,

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>QueueLazyLoad_0.1.js</title>
    		<script src="https://files.cnblogs.com/snandy/QueueLazyLoad_0.1.js"></script>
    		<script type="text/javascript">
    			var libs = [
    				{url:'https://files.cnblogs.com/snandy/a.js'},
    				{url:'https://files.cnblogs.com/snandy/b.js'},
    				{url:'https://files.cnblogs.com/snandy/c.js'}
    			];
    			function start(){
    				QueueLazyLoad.js(libs);
    			}
    		</script>
    	</head>
    	<body>
    		<button onclick="start()">Queue LazyLoad</button>
    	</body>
    </html>

    先引入了QueueLazyLoad_0.1.js,点击按钮后调用QueueLazyLoad.js方法。各个浏览器加载图如下

    Firefox

    Chrome

    IE9

    从各浏览器下载时间线可看到,时间线无重合部分。即a,b,c三个是顺序下载的。这样就保证了它们之间的依赖关系不会打乱。

  • 相关阅读:
    JS---Function
    WebForm(Application,ViewState,Repeater的Command操作)
    WebForm(分页)
    WebForm多页面传值跳转
    WebForm(response内置函数)#转
    WebForm(内置函数)
    webform(复合控件)
    Webform简单控件
    webform之Repeater控件
    IIS编辑器错误信息:CS0016解决方案
  • 原文地址:https://www.cnblogs.com/snandy/p/2033587.html
Copyright © 2011-2022 走看看