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

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

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

同步加载

常默认的是同步加载

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.jsmain2.js又和同步的执行是一样的,当加载main1.js的时候,main2.js会等待main1.js加载完毕再加载

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

async VS defer

相同点:异步加载文件

不同点

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

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

预加载

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

    原文作者:这里王工头
    原文地址: https://blog.csdn.net/weixin_43307658/article/details/88845820
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞