同步加载、异步加载、延迟加载和预加载

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

同步加载

常默认的是同步加载

1

<script src="http://yourdomain.com/script.js"></script>

同步模式又称阻塞模式，会阻止浏览器的后续操作，相当于阻止了后续的文件的解析，执行等。

流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。

通常加载js文件或者放<script>标签都在结构最后面，也是因为它会阻止浏览器后续操作的原因，所以放在后面，当页面结构和样式全部渲染完成再执行js，提升用户体验

异步加载

异步加载又称非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式

async、await

这个是 ES7 中的特性，async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成

详细可以参考这篇文章大佬的文章

onload

把插入script的方法放在一个函数里面，然后放在window.onload方法里面执行，这样就解决了阻塞onload事件触发的问题

H5 async

当浏览器解析到script脚本，没有defer或async时，defer在延迟加载中会说到

1

<script src="main.js"></script>

浏览器会立即加载并执行指定的脚本，“立即”指在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行

当浏览器解析到script脚本，有async时

1

<script async src="main.js"></script>

浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行，这个过程是异步的

延迟加载

有些代码在某种特定情况下才需要，并不是一股脑子都加载出来了，这个时候就需要延迟加载

这里也是 H5 的内容

H5 defer

当浏览器解析到script脚本，有defer时

1
2
3

<script defer="defer" src="main1.js"></script>

<script defer="defer" src="main2.js"></script>

1. 此时单纯看这两个需要被加载的js文件和其他HTML的渲染，CSS的加载，图片的加载等是同时进行的，是异步操作

2. 但是单看main1.js和main2.js又和同步的执行是一样的，当加载main1.js的时候，main2.js会等待main1.js加载完毕再加载

3. 这就是defer的作用了，当有defer的时候，先架加载第一个延迟脚本

async VS defer

相同点：异步加载文件

不同点：

async：虽然是异步加载，但当有多个脚本异步加载的时候，不一定先加载哪一个，加载顺序不一定

defer：加载顺序由第一个延迟脚本到最后一个延迟脚本

预加载

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现