`
jiangzhenghua
  • 浏览: 602758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript异步加载方案

阅读更多

javascript延迟加载的解决方案:

1.使用defer标签

<script type="text/javascript" src="load.js" defer></script>

 2.使用XMLHttpRequest对象加载

var xhr = new XMLHttpRequest();
xhr.open("get","load.js",true);
xhr.onreadystatechange=function(){
    if(readyState==4){
        if(status>=200&&status<300||status==304){
           var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = xhr.responseText;
            document.body.appendChild(script);
        }
    }
}
xhr.send(null);

 

3.使用推荐的无阻塞模式:

function loadScript(url , callback){   
  
     var script = document.createElement("script");   
  
     script.type="text/javascript";   
  
     if(script.readyState){   
 
         script.onreadystatechange = function(){   
 
             if(script.readyState=="loaded"||script.readyState=="complete"){   
  
                  script.onreadystatechange=null;   
  
                  callback();   
  
            }   
  
         }   
  
     }else{   
  
        script.onload = function(){   
  
            callback();   
  
        }   
  
     }   
  
     script.src = url;   
  
     document.getElementsByName("head")[0].appendChild(script);   
  
}  

 4.HTML5中可以使用async方式设置异步加载js

 

 

<script type="text/javascript" src="load.js" async="true"></script>

 

 

关于JS异步加载的测试

对IE8和Firefox3.6测试结果:
1.常规的在head里面使用Script标签引用js,不再是堵塞模式加载(也就是说脚本文件不再是一个一个被加载,加载完成一个才开始加载另一个),而是最

大6个JS同时开始加载(并发限制为6个),但是script的执行顺序还是按照Script标签顺序,而且会阻碍页面的呈现。
2.由于1的原因,所以使用document.write("<script>...</script>")(此方式对Firefox无效)的方式和head.append(script)(此方式兼容IE和Firefox)的方式

使用异步加载意义不大
3.但是使用head.append(script)的方式,不会阻碍界面的呈现,但是要注意:
(1)如果对于window.onload事件的触发有所影响:在 IE中,window.onload事件会在页面其它元素被加载完毕之后立即触发(即不必等所有脚本加载完,而

是html页面加载完),而FireFox里的window.onload事件会等待动态添加的那些脚本文件也被加载完毕后才触发。
(2)虽然我们动态加载的script元素是有严格顺序的,但是浏览器可不一定这样认为。在FireFox中,脚本文件会按照它动态加载的script元素的顺序执

行,而IE会根据脚本文件下载完毕的顺序执行。

注意:
1.在IE6和IE7中,常规的在head里面使用Script标签引用js,是堵塞模式加载,也就是说必须加载完一个JS,才能去加载下一个JS
2.在IE6和IE7中,并发限制是2个。也就是即使使用head.append(script)的方式异步加载3个JS,也会等前两个JS加载完成以后才会加载第三个JS。

 

 

分享到:
评论
1 楼 caizz520 2013-07-04  
第三个,loadScript(url , callback)。
该方法如何调用,第二个参数是回调方法吗?

相关推荐

    js异步加载代码

    在"asyLoad.js"这个文件中,我们可以预期它包含了一段用于实现JavaScript异步加载的代码。下面将详细介绍异步加载的原理和常见实现方法。 1. **异步加载的原理**: - 使用`&lt;script&gt;`标签的`async`属性:当`async`...

    javascript异步加载

    下面将详细介绍三种常见的异步加载JavaScript的实现方案。 1. **动态`&lt;script&gt;`标签插入**: 这是最常见的异步加载方法。我们可以在JavaScript代码中动态创建`&lt;script&gt;`标签,并设置其`async`属性为`true`。例如:...

    Javascript异步编程(英文版)

    《JavaScript异步编程》这本书深入探讨了现代JavaScript开发中的关键主题——如何在不陷入混乱的情况下处理并发和并发任务。本书作者Trevor Burnham通过精确平衡的浏览器端和服务器端示例,为读者提供了一份简洁的...

    ztree异步加载

    "ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件,它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时,一次性加载所有节点会导致页面响应变慢,用户体验下降,...

    手机移动端Tab选项卡切换带下拉数据异步加载js插件

    总结,手机移动端Tab选项卡切换带下拉数据异步加载js插件是一种高效的页面交互解决方案,它通过结合Tab选项卡、下拉加载和异步加载技术,提升了移动应用的性能和用户体验。开发者可以通过理解这些核心概念和技巧,...

    图片异步加载

    在网页开发中,图片异步加载通常通过JavaScript库来实现,如jQuery及其插件`jquery.lazyload.js`。这个插件是专门为延迟加载图片设计的,它监听用户的滚动事件,只有当图片进入视口(即用户可以看到的区域)时,才会...

    使用Webbrowser获取异步加载的网民跟帖数据的程序

    在现代网络应用中,许多网页的内容,特别是用户交互数据如网民跟帖,是通过JavaScript等客户端技术异步加载的。这些数据通常不会在原始HTML源码中直接显示,而是由Ajax请求获取并动态插入到页面上。针对这种情况,...

    上拉滚动条 异步加载组件

    上拉滚动条异步加载组件,也称为无限滚动或滚动加载,是现代Web应用和移动应用中常见的一种设计模式。这种技术允许用户在滚动到页面底部时动态加载更多内容,而不是一次性加载所有数据,从而提高了页面性能并减少了...

    javascript图片随滚动条异步加载

    JavaScript图片随滚动条异步加载是一种优化网页性能的常见技术,尤其在处理大量图片或大容量内容时。这种技术能够显著提升网页加载速度,改善用户体验,因为它只在用户实际需要时才加载图片,而不是一次性加载整个...

    scriptjs异步JavaScript加载器和依赖管理器

    在Web开发中,JavaScript的异步加载和依赖管理是优化页面性能的关键因素。`script.js`是一个轻量级且功能强大的工具,它允许开发者实现异步加载JavaScript文件,并有效地管理它们之间的依赖关系,从而提升网页的加载...

    treeview的异步加载

    在实际项目中,有许多JavaScript库和框架支持异步加载的TreeView,比如jQuery UI的TreeView、Angular的ngTreeview、React的react-treeview等。开发者可以根据自己的技术栈选择合适的解决方案。同时,需要注意的是,...

    使用jQuery异步加载 JavaScript脚本解决方案

    JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。 如果你正在使用 jQuery,有一个...

    关于javaWeb(S2SH)中使用zTree异步加载树节点问题

    zTree支持异步加载,这意味着当用户展开一个节点时,它会通过Ajax请求获取该节点的子节点数据,而不是一次性加载所有数据,这有助于优化性能,尤其是在处理大量数据时。 在上述问题中,开发者遇到了在S2SH项目中...

    js异步加载的三种解决方案

    为了解决这个问题,JavaScript提供了三种主要的异步加载解决方案: 1. **`defer`属性**: `defer`属性是为了解决JavaScript阻塞HTML解析的问题而设计的。当`defer`属性被添加到`&lt;script&gt;`标签中,浏览器会等待HTML...

    异步加载树例子 xoadtree做的

    异步加载树是一种在网页或...总的来说,异步加载树是提高大型数据集展现效率的关键技术,而XoadTree提供了一个简便的解决方案。通过合理的设计和配置,我们可以构建出高效、响应式的树形视图,让数据管理变得更加轻松。

    jquery 异步treeTable树形插件

    《jQuery异步treeTable...3. 灵活的数据源:可以对接各种后端数据接口,如JSON、Ajax等,实现异步加载。 二、基本使用步骤 1. 引入依赖库:在HTML文件中引入jQuery库和treeTable插件的JavaScript及CSS文件。 ```html ...

    zTree异步加载简单示例VS2008项目完整源码

    而`zTree`可能是一个包含JavaScript、CSS和HTML文件的文件夹,用于实现zTree的基本功能和异步加载逻辑。 在实际使用中,开发者需要了解以下关键点: 1. 数据结构:zTree需要特定格式的数据来构建树形结构,通常包括...

    详解vue-router的Import异步加载模块问题的解决方案

    然而,在实际开发过程中,可能会遇到 Import 语句异步加载模块时的问题,本文将深入探讨这个问题及其解决方案。 1、问题现象: 当使用 `import()` 动态导入 Vue 组件时,可能会在编译阶段遇到警告,提示 `require` ...

    浅析JavaScript异步代码优化

    JavaScript异步代码优化是开发过程中不可或缺的一环,尤其是在前端开发中,由于JavaScript的单线程特性,异步处理显得尤为重要。本文将深入探讨JavaScript异步编程的问题及其优化策略。 首先,我们来关注最常见的一...

Global site tag (gtag.js) - Google Analytics