异步加载的方式有哪些？
问题
异步加载的方式有哪些？
答案
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。
延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。
-
onload时的异步加载 ； -
DOMContentLoaded异步加载；也就是$(document).ready；需要引用jquery，兼容所有浏览器。
DOMContentLoaded 与 onload 事件
DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
onload ：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的timeline分成了三个阶段。
- 动态创建
<script>标签；
<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>
- 定时器；延迟加载js代码
<script id=”my”></script>
<script>
setTimeout(document.getElementById('my').src='include/index.js',3000);//延时3秒
</script>
-
AJAX eval（使用AJAX得到脚本内容，然后通过
eval_r(xmlhttp.responseText)来运行脚本）；兼容所有浏览器。 -
iframe方式，兼容所有浏览器。
-
<script>标签的async="async"属性；async的定义和用法(是HTML5的属性)；async属性规定一旦脚本可用，则会异步执行。-
<script type="text/javascript" src="CSS CSS XXXXXXX.js" async="async"></script> -
HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。
-
async 属性仅适用于外部脚本（只有在使用 src 属性时）。
-
-
<script>标签的defer="defer"属性；defer属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。
因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
