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

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

文章目录

• 1 同步加载
• 2 异步加载
• 3 延迟加载
• 4 预加载

1 同步加载

常默认的是同步加载

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

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

通常加载js文件或者放

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

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

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

3 延迟加载

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

这里也是 H5 的内容

3.1 H5 defer

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

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

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

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

3.2 async VS defer

相同点：异步加载文件

不同点：

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

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

4 预加载

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