默认情况javascript是同步加载的,javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载,如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实现方案,感兴趣的你可以参考下哈

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

(1) defer，只支持IE defer属性的定义和用法（我摘自w3school网站） defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。 有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。 示例：

复制代码 代码如下:
<script type="text/javascript" defer="defer"> alert(document.getElementById("p1").firstChild.nodeValue); </script>
 
(2) async： async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。 示例：

复制代码 代码如下:
<script type="text/javascript" src="demo_async.js" async="async"></script>

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。 注释：有多种执行外部脚本的方法： •如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行） •如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行 •如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

 

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：*/

function loadScript(url, callback){

var script = document.createElement("script")

script.type = "text/javascript";

if (script.readyState){ //IE

script.onreadystatechange = function(){

if (script.readyState == "loaded" ||

script.readyState == "complete"){

script.onreadystatechange = null;

callback();

}

};

} else { //Others: Firefox, Safari, Chrome, and Opera

script.onload = function(){

callback();

};

}

script.src = url;

document.body.appendChild(script);

}

异步加载JS的五种方式（详解）

方案一：<script>标签的async="async"属性（详细参见：script标签的async属性）

点评：HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。

方案二：<script>标签的defer="defer"属性

点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。

方案三：动态创建<script>标签

示例：

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

(function(){

var s = document.createElement('script');

s.type = 'text/javascript';

s.src = "http://code.jquery.com/jquery-1.7.2.min.js";

var tmp = document.getElementsByTagName('script')[0];

tmp.parentNode.insertBefore(s, tmp);

})();

</script>

</head>

<body>

<img src="http://xybtv.com/uploads/allimg/100601/48-100601162913.jpg" />

</body>

</html>

点评：兼容所有浏览器。

方案四：AJAX eval（使用AJAX得到脚本内容，然后通过eval(xmlhttp.responseText)来运行脚本）

点评：兼容所有浏览器。

方案五：iframe方式（这里可以参照：iframe异步加载技术及性能 中关于Meboo的部分）

点评：兼容所有浏览器。

 
 

js异步加载的解决方案的更多相关文章

  1. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  2. 关于JS异步加载方案

    javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...

  3. 点评js异步加载的4种方式

    主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...

  4. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  5. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  6. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  7. js 异步加载的方式

    js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...

  8. JS -- 异步加载进度条

    今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...

  9. js异步加载的5种方式

    方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...

随机推荐

  1. POJ2226

    题意:给定一个矩阵,当中有一些地方有水,如今有一些长度随意,宽为1的木板,要求在全部板不跨越不论什么坑的前提下,用一些木板盖住这些有水的地方,问至少须要几块板子? 思路: watermark/2/te ...

  2. Redis学习（1）--环境配置，安装JDK，MySQL，tomcat

    Linux上安装jdk,mysql,tomcat安装 rpm命令: 相当于Windows的安装/卸载程序.可以进行程序的安装,更新,卸载,查看. 本地程序安装:rpm -ivh 程序名 本地程序查看: ...

  3. 21、java中和日期相关的类

    一.Data及其常用API 1.简介 Java中的时间使用标准类库的java.util.Date,其表示特定的瞬间,精确到毫秒.是用距离一个固定时间点的毫秒数(可正可负,long类型)表达一个特定的时 ...

  4. 流动的推荐系统——兴趣Feed技术架构与实现

    流动的推荐系统 我们经常谈论的推荐系统(Recommender System),从形式上看是比较“静态”的推荐,通常位于网页主要信息的周边,比如电商网站的“看了又看”.“买了又买”.这种推荐系统在大多 ...

  5. Chrome禁用缓存

    Chrome默认对JS和CSS等静态资源进行缓存,对HTML不启用缓存. 在开发阶段,我们想要更改之后马上看到效果,那就必须禁用JS和CSS. 快捷键是F12+F1,F12相当于打开dev-tool, ...

  6. PyCharm 默认运行 unittest

    若文件里面有某个函数名称或模块名称以test为前缀,Pycharm的话,就会自动认为是单元测试: 报错信息:test_file() missing 1 required positional argu ...

  7. 使用Windbg调试.Net应用程序 [转]

    Windbg+Procdump解决w3wp.exe CPU过百问题[转] High CPU Dump收集工具 - ProcDump使用方法[转] ProcDump v9.0[官方] windbg查找c ...

  8. SDL 2.0 API by Category

    Basics View information and functions related to... View the header Initialization and Shutdown SDL. ...

  9. VC++字符串的使用及转换

    CString ,BSTR ,LPCTSTR之间关系和区别 CString是一个动态TCHAR数组,BSTR是一种专有格式的字符串(需要用系统提供的函数来操纵,LPCTSTR只是一个常量的TCHAR指 ...

  10. 线程模型、pthread 系列函数 和 简单多线程服务器端程序

    一.线程有3种模型,分别是N:1用户线程模型,1:1核心线程模型和N:M混合线程模型,posix thread属于1:1模型. (一).N:1用户线程模型 “线程实现”建立在“进程控制”机制之上,由用 ...