欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~
文章目录
- 1 同步加载
- 2 异步加载
- 3 延迟加载
- 4 预加载
1 同步加载
常默认的是同步加载
<script src="http://yourdomain.com/script.js"></script>
同步模式又称阻塞模式，会阻止浏览器的后续操作，相当于阻止了后续的文件的解析，执行等。
流览器之所以会采用同步模式，是因为加载的
js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常加载
js文件或者放<script>标签都在结构最后面，也是因为它会阻止浏览器后续操作的原因，所以放在后面，当页面结构和样式全部渲染完成再执行js，提升用户体验
2 异步加载
异步加载又称非阻塞加载，浏览器在下载执行
js的同时，还会继续进行后续页面的处理。主要有三种方式
2.1 async、await
这个是
ES7中的特性，async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成详细可以参考这篇文章大佬的文章
2.2 onload
把插入
script的方法放在一个函数里面，然后放在window.onload方法里面执行，这样就解决了阻塞onload事件触发的问题
2.3 H5 async
当浏览器解析到script脚本，没有defer或async时，defer在延迟加载中会说到
<script src="main.js"></script>
浏览器会立即加载并执行指定的脚本，“立即”指在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行
当浏览器解析到script脚本，有async时
<script async src="main.js"></script>
浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和
main.js的加载与执行并行进行，这个过程是异步的
3 延迟加载
有些代码在某种特定情况下才需要，并不是一股脑子都加载出来了，这个时候就需要延迟加载
这里也是
H5的内容
3.1 H5 defer
当浏览器解析到script脚本，有defer时
<script defer="defer" src="main1.js"></script>
<script defer="defer" src="main2.js"></script>
此时单纯看这两个需要被加载的
js文件和其他HTML的渲染，CSS的加载，图片的加载等是同时进行的，是异步操作但是单看
main1.js和main2.js又和同步的执行是一样的，当加载main1.js的时候，main2.js会等待main1.js加载完毕再加载这就是
defer的作用了，当有defer的时候，先架加载第一个延迟脚本
3.2 async VS defer
相同点：异步加载文件
不同点：
async：虽然是异步加载，但当有多个脚本异步加载的时候，不一定先加载哪一个，加载顺序不一定
defer：加载顺序由第一个延迟脚本到最后一个延迟脚本
4 预加载
预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现
网友评论