默认情况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. Maven的settings.xml文件结构之mirrors

    Maven的远程库提供大量构件,供Maven项目直接下载使用.对于一个Maven项目,如果没有特别声明,默认使用Maven的central库,url如下: http://repo.maven.apac ...

  2. libevent个人理解

    1.利用了前置声明来在c语言的基础上进行封装操作.即在include目录下防止event.h等头文件,在这些头文件中只暴露struct的声明却不暴露其定义,对于如event_base等结构的操作均使用 ...

  3. java8 map flatmap

    map: 对于Stream中包含的元素使用给定的转换函数进行转换操作,新生成的Stream只包含转换生成的元素.这个方法有三个对于原始类型的变种方法,分别是:mapToInt,mapToLong和ma ...

  4. maven中央仓库

    https://search.maven.org (查看版本和文件列表:http://repo1.maven.org/maven2/) http://mvnrepository.com/ https: ...

  5. 如何在 Linux 下调试动态链接库

    大家都知道在 Linux 可以用 gdb 来调试应用程序,当然前提是用 gcc 编译程序时要加上 -g 参数.我这篇文章里将讨论一下用 gdb 来调试动态链接库的问题. 首先,假设我们准备这样的一个动 ...

  6. 开源大数据技术专场（下午）:Databircks、Intel、阿里、梨视频的技术实践

    摘要: 本论坛第一次聚集阿里Hadoop.Spark.Hbase.Jtorm各领域的技术专家,讲述Hadoop生态的过去现在未来及阿里在Hadoop大生态领域的实践与探索. 开源大数据技术专场下午场在 ...

  7. 在Ubuntu上安装Mono

    在Ubuntu上安装Mono 执行以下代码授权注冊repo源并更新软件列表: sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys ...

  8. 【laravel5.4】自定义公共函数的创建

    原文地址:http://blog.csdn.net/qq_38125058/article/details/76862151 公共函数,简单来说就是在任何地方都可以直接使用这个函数.简单介绍两种实现方 ...

  9. Java compiler level does not match解决方法(转)

    本文转自:https://www.cnblogs.com/lauer0246/p/5740572.html#undefined 从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclips ...

  10. HDUOJ----Safecracker（1015）

    Safecracker Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...