默认情况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. 解决"libc.so.6: version `GLIBC_2.14' not found",系统的glibc版本太低 {强行安装！！}

     原创,转载请注明出处,谢谢!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 首先查看系统glibc支持的版本: strings /lib64/libc.so.6 |grep G ...

  2. eclipse git提交代码

    1.安装git 2.安装好后,进行,一个简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configuration 设置自定义仓库 3.登 ...

  3. org.dom4j.DocumentException:对实体 "virtual_card_id" 的引用必须以 ';' 分隔符结尾

      Error on line 1 of document  : 对实体 "virtual_card_id" 的引用必须以 ';' 分隔符结尾. CreateTime--2018年 ...

  4. [Done]ftp使用小结

    基本命令: put 本地文件名 ftp文件名 get ftp文件名 本地文件名 mget ftp文件多个文件  注意使用该命令时先用 lcd切换本地路径 还有一些常用的  ls mkdir 等,参考 ...

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

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

  6. servlet 服务器HTTP请求头说明

    Accept:用于告诉服务器,客户机支持的数据类型. Accept-Charset:用于告诉服务器,客户机采用的编码. Accept-Language:客户机的语言环境. Host:客户机通过该头告诉 ...

  7. C# 的Timer 在javascript中的实现--基于Typescript

    class Timer { //js 内置的timer对象 private _jsInnerTimerObj: any; private _enable: boolean; private _hand ...

  8. （二）Linux Shell编程——运算符、注释

    2.7 Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符.原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...

  9. function声明的深刻含义和jquery属性注入区别

    在js中有两类对象 1.json对象,仅仅代表对象而已 2.function声明的对象 (1) 它定义了构造器  可以用new 对象 来初始化 数据对象 (2) 它指明对象是一个函数对象  通过后面加 ...

  10. useradd或者userdel相关用户管理命令不好用

    前言 有时使用useradd或者userdel会出现如下报错: userdel: cannot open /etc/passwd 很明显是/etc/passwd文件导致的 一.查看以及改变文件状态 [ ...