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

一、defer与async

1.defer是IE独有的一种js异步加载模式,通过src加载的JS会等到文档解析完才会执行(document.readyState="interactive")。在script标签内部也可以写入内部JS代码,但是直接写入的内部JS代码会同步执行。

<script src="https://cdn.staticfile.org//vue/2.2.2//vue.min.js" type="text/javascript" charset="utf-8" defer=""defer">
//写这里的代码是同步执行
</script>

2.asyn是W3C的标准异步加载模式,通过src加载的JS要等所有资源加载完以后执行(例如:img)(docuement.readyState="complete"),通过asyn异步加载的外部JS才会执行,但是asyn模式的script标签内不能写JS代码。

<script src="https://cdn.staticfile.org//vue/2.2.2//vue.min.js" type="text/javascript" charset="utf-8" async="async">
//这里不能写代码
</script>

因为asyn是W3C标准,IE9之前都不兼容,所以还是很鸡肋。

二、通过插入script标签的方式实现兼容模式的JS异步加载

通过插入script标签的方式实现JS异步加载的原理其实很简单,直接来代码:

<script>
function loadScript(url){
var script = document.createElement("script");//新建一个script标签
script.type="text/javascript";//添加type属性
//绑定src,实现异步加载
script.src = url;
//document.head.appendChild(script);切勿这么做,IE7和IE5上document没有head的DOM对象属性。
var head = document.getElementsByTagName("head")[0];
//插入script标签
head.appendChild(script);//把script添加到domTree节点中,并且会触发执行
}
loadScript("xxx.js");
</script>

异步加载的JS会什么时候执行呢?执行会不会阻塞HTML解析呢?基于异步加载方法来一波测试:

<head>
....
//这里是异步加载的代码
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script>
console.log("告诉我什么时候执行的");
</script>
</head>
-----------------------------------------------------------------------------
//这里是异步加载的外部JS文档内容
var n =Number(new Date());
var n2 = Number(new Date());
while((n2 - n) < (10*1000)){
n2 = Number(new Date());
console.log(1);
}

测试执行的结果:

---- 打印39733次1

---- 告诉我什么时候执行的

上面的测试结果告诉了我们,通过插入script异步加载的JS,加载完以后就会立即执行。并且执行的时候会阻塞HTML解析。

先来说说我为什么要在中间加入一行外部CSS代码,我们知道CSS是异步加载,但是CSS的加载会阻塞内部JS的执行,所以足够我测试的外部JS加载了。也就是说在内部JS执行前,外部JS肯定加载完成了,如果外部JS不会阻塞HTML解析也就不会在内部JS之前执行,但是测试的结果是通过添加script标签异步加载的外部JS在内部JS之前执行了,所以就说明了这种异步加载JS的方式加载完以后就会立即执行,并且如果HTML没有解析完就会阻塞HTML解析。

那为什么还需要这样的外部加载方式呢?

我们知道同步加载JS会阻塞HTML解析,而网络因素又是非常不可控的因素,如果某个同步加载的外部JS出现网络不畅通,就会一直阻塞页面。如果是一些工具脚本,不需要修改DOM的话,或者是一些不是一定需要的脚本(比如某个特定事件的JS脚本就可以用这种方式来加载),甚至可以在页面渲染完以后通过某个事件触发来加载它。

既然是异步加载的JS脚本,我们就有必要知道它什么时候加载完了,好方便我们使用,所以下面再来丰富以下这个异步加载JS的方法:

function loadScript(url,callback){
var script = document.createElement("script");//新建一个script标签
script.type="text/javascript";//添加type属性
if(script.readyState){
script.onreadystatechange = function(){
//script.readyState发生改变时触发script.onreadystatechange
if(script.readyState == "complete" || script.readyState == "loaded"){
//script.readyState -->状态码初始值是“loading”,根据文件加载进度,值发生改变
//IE通过script.readyState的状态码监听异步文件加载进度
tools[callback]();//采用对象属性调用需要执行的方法 -- 这里按需要使用
          //看到有前辈说IE7和IE5有时候可能会即有"complete",又有"loaded"状态,为了防止万一可以在这里清除监听事件
         script.onreadystatechange = null;
}
}
}else{
script.onload = function(){//script.onload-->表示加载完成以后执行
//除IE以外 Safari chrome firefox opera都兼容
tools[callback]();
}
}
//异步加载文件,必须放在事件添加后面,要不然出现先加载完了,事件函数没有绑定的的情况就不会触发了
script.src = url;
//document.head.appendChild(script);切勿这么做,IE7和IE5上document没有head的DOM对象属性。
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);//把script添加到domTree节点中,并且会触发执行
}

W3C标准中有onload事件可以监听外部脚本是否加载完成,所以IE就需要兼容。

IE的script元素的DOM对象上有readyState属性记录外部资源的加载状况,与document对象上的readyState属性一样,有四个值:

uninitialized -- 还未开始载入;

loading - 载入中;

interactive - 已加载,文档与用户可以开始交互;

complete - 载入完成;(有些版本是loanded,听说有些版本这两个状态都会出现本人没遇到过)

(tools[callback](),是我测试回调外部脚本的方法,这个不重要,主要看需求,反正这里就是说明外部JS已经加载完毕了,可以处理自己要处理的程序了)

凌晨了,晚安。

JS异步加载的三种方案的更多相关文章

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

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

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

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...

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

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

  4. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

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

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

  6. js异步加载的3种方式(转载)

    1.defer标签 只支持IE    defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...

  7. javascript异步加载的三种解决方案

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...

  8. 关于JS异步加载方案

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

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

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

随机推荐

  1. 如果出现isapi和CGI限制的时候

    将isapi和CGI中对应的不允许改为允许即可

  2. Power Map

    推荐64位版本Office,但会遇到以下问题 建议大多数用户使用 32 位 Office 我们建议使用 32 版本的 Office,因为它与大多数其他应用程序更加兼容,尤其是第三方加载项.这也是默认安 ...

  3. 查看数量linux下查看cpu物理个数和逻辑个数

    首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责 hadoop@chw-desktop3:~$ cat /proc/cpuinfo processor : 0 vendor_id : Gen ...

  4. 自制单片机之八……USB-ISP下载线

    现在的笔记本包括台式机都渐渐地舍弃了并口.串口:很多网友也跟我说,台式没有并口了,下载线没法用了,让我帮他想想办法.看来做个USB-ISP下载线是势在必行了. 在网上搜了下,主要有两种方案,一种是用F ...

  5. 1、 Linux中的root用户切换(转载)

    su和su - 的区别 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户,Linux中切换用户的命令是su或s ...

  6. 彻底领悟javascript中的this

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, function test() { this.x = 1; } 随着函数使用场合 ...

  7. 【js】正则

    复习字符串操作search 查找substring 获取子字符串charAt 获取某个字符split 分割字符串,获得数组 <script> var str="abcdef&qu ...

  8. 前端视频插件Aliplayer播放器简单使用(基于地址播放)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. PHP面试系列 之Linux(三)---- Vi/Vim编辑器

    vi 是 unix 家族下最功能强大的文字编辑器,而 vim 則是 vi 的加强版, 编辑模式   指令 說明 * i 在游標位置進入編輯模式   I 在游標行的第一個非空白字元進入編輯模式 * a ...

  10. 【转】_CrtSetBreakAlloc 内存泄漏

    声明:本内容转载自 https://my.oschina.net/gp8wLHNUeKd2C/blog/110707 在使用VS开发过程中,(今日)遇到内存泄漏的情况.具体表现为: 在输出窗口中,显示 ...