默认情况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. exeption ORA-00907: missing right parenthesis

      exeption ORA-00907: missing right parenthesis CreationTime--2018年8月16日11点11分 Author:Marydon 1.情景展示 ...

  2. vs2010支持html5+css3

    第一步. 先到微软官方下载一个 Microsoft Visual Studio 2010 sp1 . 给传送门:下载 下载到这个东东 ---

  3. 18、Java中可变参数

    从JDK 1.5之后,Java允许定义形参可变的参数 例如: public void test(int a,String ... books){ for(String book:books){ Sys ...

  4. springmvc ModelAndView 和 Model

    @RequestMapping("") public ModelAndView index(HttpSession session) { Object data = session ...

  5. 原创：微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  6. JDK 生成数字证书

    JDK(keytool.exe)生成数字证书 2010-11-21 15:52 QUOTE: keytool JAVA是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数 ...

  7. python函数中把列表(list)当参数时的"入坑"与"出坑"

    在Python函数中,传递的参数如果默认有一个为 列表(list),那么就要注意了,此处有坑!! 入坑 def f(x,li=[]): for i in range(x): li.append(i*i ...

  8. HDUOJ----Good Luck in CET-4 Everybody!

    Good Luck in CET-4 Everybody! Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (J ...

  9. 【Linux】X window与文本模式的切换

    Linux默认的情况下会提供六个Terminal来让使用者登陆,切换的方式为:[Ctrl] + [Alt] + [F1]~[F6]的组合按钮.那这六个终端接口如何命名呢,系统会将[F1] ~ [F6] ...

  10. Android：GridView中实现点击Item变色，再点击还原。

    使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...