`
yiheng
  • 浏览: 156785 次
社区版块
存档分类

js 异步加载 延迟执行 插件

js 异步加载 
阅读更多

最近因工作的需要主要做web前段的优化，其中之一就是js的优化，在项目中的js代码相对比较规范的，都是$(function(){})这种格式。但是大家都知道js的下载比较耗时的，它的解析和执行是阻塞式的。我们是否可以先让js下载下来，在windows的load事件中在去解析和执行了。答案是肯定的，其中ControlJS .js就实现了这种方式。个人觉得它比LAB的延迟加载要优秀的一点，减少了js的加载时间。但是该js功能相对比较强大，同时也没有解决js依赖关系的加载。个人自己写了一个小插件 来实现js异步加载延迟执行。

代码如下：

 

Javascript代码 
  1. (function () {  
  2.     var document = window.document;  
  3.     var getAttribute = function (elem, name) {  
  4.         var attrs = elem.attributes;  
  5.         var len = attrs.length;  
  6.         for (var i = 0; i < len; i++) {  
  7.             var attr = attrs[i];  
  8.             if (name === attr.nodeName) {  
  9.                 return attr.nodeValue;  
  10.             }  
  11.         }  
  12.   
  13.         return undefined;  
  14.     };  
  15.   
  16.     var scriptsData;  
  17.     var orders = [];  
  18.     var findScripts = function () {  
  19.         var aScripts = document.getElementsByTagName('script');  
  20.         var len = aScripts.length;  
  21.         var scriptsArr = [];  
  22.         var scriptsSrc = [];  
  23.   
  24.         for (var i = 0; i < len; i++) {  
  25.             var script = aScripts[i];  
  26.             if ("text/asynjs" === getAttribute(script, "type") && "undefined" === typeof (script.founded)) {  
  27.                 script.founded = true;  
  28.                 var order = getAttribute(script, "order") || getAttribute(script, "data-order") || 0;  
  29.                 script.order = order;  
  30.                 if (orders.indexOf(order) < 0) {  
  31.                     orders.push(order);  
  32.                 }  
  33.                 var src = getAttribute(script, "asynsrc") || getAttribute(script, "data-asynsrc");  
  34.                 script.src = src;  
  35.                 if (src && scriptsSrc.indexOf(src) < 0) {  
  36.                     scriptsArr.push(script);  
  37.                 }  
  38.             }  
  39.   
  40.         }  
  41.         orders.sort(function compare(a, b) { return a - b; });  
  42.         return scriptsData = scriptsArr;  
  43.     };  
  44.     var downloadScripts = function (scriptArr) {  
  45.         var scripts = scriptArr || findScripts();  
  46.         var len = scripts.length;  
  47.   
  48.         for (var i = 0; i < len; i++) {  
  49.             var img = new Image();  
  50.             img.src = scripts[i].src;  
  51.             img.style.display = "none";  
  52.         }  
  53.     };  
  54.   
  55.     var processScripts = function (scriptArr) {  
  56.         var scripts = (scriptArr && scriptArr.constructor === Array) ? scriptArr : scriptsData;  
  57.         var len = scripts.length;  
  58.         var failscripts = [];  
  59.         var wdata = [];  
  60.         for (var i = orders.length - 1; i >= 0; i--) {  
  61.             var order = orders[i];  
  62.             var urls = [];  
  63.             var fns = [];  
  64.             for (var j = 0, len = scripts.length; j < len; j++) {  
  65.                 var script = scripts[j];  
  66.                 if (script.order == order) {  
  67.                     urls.push(script.src);  
  68.                 }  
  69.             }  
  70.             if (i == orders.length - 1) {  
  71.                 wdata[order] = processScript(urls)  
  72.             }  
  73.             else {  
  74.                 var nextorder = orders[i + 1];  
  75.                 fns.push(wdata[nextorder]);  
  76.                 wdata[order] = processScript(urls, fns);  
  77.             }  
  78.         }  
  79.         var exorder = orders[0]  
  80.         wdata[orders[0]]();  
  81.     };  
  82.     var processScript = function (urls, fn) {  
  83.         return function () {  
  84.             for (var i = 0; i < urls.length; i++) {  
  85.                 var se = document.createElement('script');  
  86.                 if (fn && fn[i]) {  
  87.                     se.onload = se.onreadystatechange = fn[i];  
  88.                 }  
  89.                 se.src = urls[i];  
  90.                 var s1 = document.getElementsByTagName('script')[0];  
  91.                 s1.parentNode.insertBefore(se, s1);  
  92.             }  
  93.         }  
  94.     }  
  95.   
  96.     if (document.addEventListener) {  
  97.         document.addEventListener("DOMContentLoaded", function () { downloadScripts(); }, false);  
  98.         window.addEventListener("load", function () { setTimeout(processScripts, 0); }, false);  
  99.   
  100.     } else if (document.attachEvent) {  
  101.   
  102.         document.attachEvent("onreadystatechange", function () { downloadScripts(); });  
  103.         window.attachEvent("onload", function () { setTimeout(processScripts, 0); });  
  104.     }  
  105.   
  106. })();  
调用代码：

 

 

Html代码 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.  <title>test</title>  
  5.  <script type="text/javascript" src="Scripts/asynload.js"></script>  
  6. </head>  
  7. <body>  
  8.  <div id="container">  
  9.  <img src="images/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">  
  10.   
  11.  <script type="text/asynjs" order="3" asynsrc="test.js"></script>  
  12.  <script type="text/asynjs" order="1" asynsrc="Scripts/jquery-1.7.2.js"></script>  
  13.  <script type="text/asynjs" order="2" asynsrc="Scripts/jquery.lazyload.js"></script>  
  14.   
  15.  <img src="images/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side" />  
  16.  <img data-original="images/viper_1.jpg" width="765" height="574" alt="Viper 1" />  
  17.  <img data-original="images/viper_corner.jpg" width="765" height="574" alt="Viper Corner" />  
  18.  <img data-original="images/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT" />  
  19.  <img data-original="images/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop" />  
  20.  </div>  
  21. </body>  
  22. </html>  


其中jquery.lazyload.js是图片延迟加载的jquery插件。test.js的代码$(function () {$("img[data-original]").lazyload();});。

13
顶
5
踩
分享到：
| JS对象序列化为JSON对象
评论
3 楼 zhengbinglucky 2012-07-29  
领教了，最近我也正在做前端开发，谢谢你的分享~
2 楼 化蝶自在飞 2012-07-09  
js如果延迟下载,会不会影响到功能?
1 楼 hehebaiy 2012-07-06  
写的不错，学习了！！！  
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 图片延迟加载插件制作tab选项卡图片异步加载

    本教程将深入讲解如何使用jQuery创建一个图片延迟加载插件，特别是针对tab选项卡中的图片进行异步加载。 首先，我们需要理解为什么要进行图片延迟加载。当用户打开一个页面时，如果页面中包含大量图片，这些图片会...

    Angular 异步加载Controller

    `$ocLazyLoad`是一个优秀的Angular插件，它提供了强大的异步加载功能。通过配置，我们可以在运行时动态加载模块、控制器、服务等。例如，我们可以定义一个状态，当导航到该状态时，`$ocLazyLoad`会加载对应的...

    原生无依赖预加载插件

    5. **使用Script标签异步加载**：对于JavaScript文件，预加载插件可以创建`&lt;script&gt;`标签并设置`async`或`defer`属性，使其异步加载，不影响页面渲染。 6. **防止重复加载**：预加载插件会检查资源是否已经存在于...

    浅析js预加载/延迟加载

    动态插入节点是最为简单也最为广泛的一种异步加载方式，然后使用动态插入节点方法加载的文件都会 在加载后立即执行，javascript的执行一方面会占用浏览器js执行进程，另一方面也可能改变页面结构，而css 的执行更有...

    JS动态加载库

    3. **异步加载（Asynchronous Loading）**：避免阻塞主线程，使脚本并行加载，提升页面加载效率。 二、API介绍 根据描述，这个JS动态加载库提供了三个API，虽然具体名称未知，但常见的动态加载库的API可能包括： 1....

    javascript仿QQ图片游览插件

    另外，使用图片懒加载和异步加载技术，可以进一步提高网页的加载速度。 以上就是“javascript仿QQ图片游览插件”涉及的主要技术点，通过这些技术，我们可以创建一个功能丰富、用户体验良好的网页图片查看工具。

    js 简单的信息提示插件

    从标签来看，"JavaScript加载插件"意味着这个插件可能涉及到延迟加载或异步加载技术，这样可以优化网页性能，减少页面初次加载时的资源消耗。"加载插件"可能指的是该插件能够帮助监控或管理其他组件或资源的加载状态...

    js加载页面

    1. **异步加载**（async）：设置`async`属性后，浏览器会并行下载JS文件，但不保证执行顺序。一旦文件下载完成，就会立即执行，不影响其他资源的加载。 2. **延迟加载**（defer）：设置`defer`属性时，浏览器会在...

    js图片预加载

    这里我们将深入探讨JavaScript图片预加载的基本原理、实现方式以及jQuery插件的应用。 **一、图片预加载的基本原理** 图片预加载的核心思想是利用JavaScript动态创建`&lt;img&gt;`元素，设置其`src`属性为待加载图片的...

    数据延迟加载

    在KISSY框架中，延迟加载的实现可能涉及到模块管理、异步加载机制、模块依赖解析等技术。开发者可以通过阅读源码理解这些技术，以便在自己的项目中进行定制或优化。 “工具”标签则提示我们，可能存在一些辅助工具...

    JSTree(js写的树形菜单，支持加载10000节点以上)

    1. **高性能**：JSTree通过延迟加载和分页策略，确保在处理大数据集时保持流畅的用户体验。它仅在需要时加载节点，降低了内存占用和计算需求。 2. **交互性**：提供了丰富的API和事件系统，允许开发者自定义各种...

    LightningJS安全快速异步嵌入代码用于第三方Javascript交付

    LightningJS是一个专门为高效、安全地异步加载第三方JavaScript代码而设计的库。在Web开发中，优化页面加载速度和用户体验至关重要，而LightningJS正为此提供了解决方案。它通过智能加载策略，使得网页中的第三方...

    zencart css_js_loader插件

    3. **异步加载**：通过异步加载JS文件，可以防止页面渲染因等待脚本执行而阻塞，提高用户体验。 4. **缓存利用**：优化缓存策略，使重复访问的用户能更快地获取资源，降低服务器压力。 5. **代码压缩**：对CSS和JS...

    jQuery图片预加载插件源码.zip

    "使用须知.txt"可能包含了关于如何使用这个预加载插件的说明，而"132689888767216383"很可能是压缩包内插件的JavaScript源代码文件，通常以.js为扩展名。由于无法直接查看文件内容，以下是对一般预加载插件的源码...

    jquery图片延迟加载

    **jQuery图片延迟加载技术详解** ...综上所述，jQuery图片延迟加载是一种有效的优化策略，通过结合`ImageScrollLoad.js`插件，可以轻松地在项目中实施这一技术，提升网页性能，为用户提供更流畅的浏览体验。

    一个Webpack插件使用linkrelpreload自动连接异步

    本篇文章将详细介绍一个Webpack插件，该插件用于自动添加 `link rel="preload"` 标签来预加载异步模块。 1. **Webpack 插件的理解**： Webpack 插件是扩展其功能的一种机制，它们在 Webpack 的生命周期中执行特定...

    scrollLoad_MingGe2.53滚动加载插件 基于minggejs1.9.1

    5. **优化性能**：通过缓存已加载的资源，避免重复加载，同时利用异步加载技术，保证页面流畅性。 在实际应用中，"scrollLoad_MingGe2.53滚动加载插件"可以广泛应用于新闻网站、电商页面、社交平台等需要大量内容...

    seajs js 模块加载器

    **正文** ...通过异步加载、动态配置和丰富的插件系统，SeaJS 使得浏览器端的代码组织变得更加有序，提高了开发效率和代码质量。对于大型Web项目而言，使用SeaJS进行模块化开发无疑是一个明智的选择。

    SeaJS(Javascript 模块加载框架) v1.0.2

    6. **延迟加载与异步加载**：SeaJS 支持模块的延迟加载和异步加载，这意味着只有当模块实际被使用时，才会去加载，从而优化页面加载速度。 7. **版本管理和调试**：通过 `sea-debug.js` 文件，开发者可以在调试模式...

    jQuery焦点图效果图片延迟加载

    4. **加载图片**：如果图片在视口内，就替换占位符为真实的图片源，使用`$.ajax`或`$.getScript`等方法异步加载图片，避免阻塞页面的其他操作。 5. **添加动画效果**：为了提升用户体验，加载图片时可以添加一些...

Magicbox
Global site tag (gtag.js) - Google Analytics