总结：js延迟加载的方式有哪些？
Posted 小歌谣（公众号同名）
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了总结：js延迟加载的方式有哪些？相关的知识，希望对你有一定的参考价值。
该面试题主要考察的是程序的性能方面。性能优化的核心思想就是快，常见的优化手段有预先准备数据（如缓存），按需获取，分段、异步获取等
由于javascript的阻塞特性（单线程运行），在每一个
<head>
//脚本1
<script defer src="js/vendor/jquery.js"></script>
//脚本2
<script defer src="js/script2.js"></script>
//脚本3
<script defer src="js/script3.js"></script>
</head>
动态添加脚本元素
优点：无论这段脚本是在何时启动下载，它的下载和执行过程都不会阻塞页面的其他进程，我们甚至可以直接添加到头部head标签中，都不会影响其他部分。通过这种方式下载文件后，代码就会自动执行。但是在现代浏览器中，这段脚本会等待所有动态节点加载完成后再执行。这种情况下，为了确保当前代码中包含的别的代码的接口或者方法能够被成功调用，就必须在别的代码加载前完成这段代码的准备
解决的具体操作思路是：现代浏览器会在script标签内容下载完成后接收一个load事件，我们就可以在load事件后再去执行我们想要执行的代码加载和运行，在IE中，它会接收loaded和complete事件，理论上是loaded完成后才会有completed，但实践告诉我们他两似乎并没有个先后，甚至有时候只会拿到其中的一个事件，我们可以单独的封装一个专门的函数来体现这个功能的实践性
function LoadScript(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
// IE浏览器下
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
// 确保执行两次
script.onreadystatechange = null;
// todo 执行要执行的代码
callback()
}
}
} else {
script.onload = function () {
callback();
}
}
script.src = 'file.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
使用setTimeout延迟方法的加载时间
<script type="text/javascript" >
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延迟1秒
})
</script>
XMLHttpRequest脚本注入，动态添加script标签
优点：（1）可以控制脚本是否要立即执行。因为我们知道新创建的script标签只要添加到文档界面中它就会立即执行，因此，在添加到文档界面之前，也就是在appendChild()之前，我们可以根据自己实际的业务逻辑去实现需求，到了想要让它执行的时候，再appendChild()即可（2）它的兼容性很好，所有主流浏览器都支持，它不需要像动态添加脚本的方式那样，我们自己去写特性检测代码。缺点：由于是使用了XHR对象，获取这种资源有“域”的限制。资源必须在同一个域下才可以，不可以跨域操作。
var xhr = new XMLHttpRequest();
xhr.open('get','test.js',true);
xhr.onreadystatachange = function(){
if(xhr.readyState == 4){// 表示响应已经完成，可以获取并使用服务器的响应了
if(xhr.state >= 200 && xhr.state < 300 || xhr.state == 304){//200表示成功/OK
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = xhr.requestText;
document.body.appendChild(script);
}
}
}
补充方法XHR.readyState的五种状态
XHR.readyState == 状态（0，1，2，3，4）
0：请求未初始化，还没有调用 open()
1：请求已经建立，但是还没有发送，还没有调用 send()
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成
4：响应已完成；可以获取并使用服务器的响应了
补充方法XHR.status常见的几种状态
XHR.status == 200，300，404
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误 index.php
总结
JS延迟加载的方式有：
（1）为<script>标签添加defer和async属性
（2）动态添加脚本元素
（3）使用setTimeout延迟方法的加载时间
（4）XMLHttpRequest脚本注入，动态添加script标签
以上是关于总结：js延迟加载的方式有哪些？的主要内容，如果未能解决你的问题，请参考以下文章