同步加载、异步加载、延迟加载、预加载的区别

简介: 同步加载、异步加载、延迟加载、预加载的区别
<link rel="preload" href="script1.js" as="script">
<link rel="preload" href="script2.js" as="script">
  1. 同步加载:浏览器在遇到<script>标签时,会立即停止解析HTML,并执行JavaScript代码,这样会阻塞后续代码的执行。如果页面中存在多个同步加载的脚本,那么后面的脚本需要等待前面的脚本加载和执行完成后才能继续执行。
<script src="script1.js"></script>
<script src="script2.js"></script>
  1. 第一个<script>标签加载和执行完script1.js后才会继续加载和执行第二个<script>标签中的script2.js
  2. 异步加载:浏览器在遇到带有async属性的<script>标签时,会异步加载JavaScript文件,并继续解析HTML,在JavaScript文件下载完成后才执行。如果同时存在多个async属性的<script>标签,它们的加载和执行顺序是不确定的。
html
<script async src="script1.js"></script>
<script async src="script2.js"></script>
  1. 浏览器会异步加载script1.jsscript2.js,不会阻塞后续代码的执行,它们的加载和执行顺序是不确定的。
  2. 延迟加载:浏览器在遇到带有defer属性的<script>标签时,会异步加载JavaScript文件,并继续解析HTML,在HTML文档解析完成后再执行JavaScript文件。如果同时存在多个defer属性的<script>标签,它们的加载顺序是按照在文档中出现的顺序依次加载,但不会影响后续的DOM操作。
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
  1. 浏览器会异步加载script1.jsscript2.js,并且等到HTML文档解析完成后再依次执行这两个脚本。延迟加载不会阻塞后续代码的执行,但会保持脚本的加载顺序
  2. 预加载:浏览器在遇到带有rel="preload"属性的<link>标签或使用JavaScript动态加载资源时,会提前下载指定的资源,在需要使用时直接从缓存中读取,从而提升页面性能和用户体验。

总结来说,同步加载会阻塞后续代码的执行,异步加载不会阻塞后续代码的执行,但是加载和执行顺序不确定,延迟加载会在HTML文档解析完成后再执行JavaScript文件,预加载可以提前加载资源,从而提升页面性能和用户体验。需要根据实际情况选择合适的加载方式。

相关文章
|
1月前
|
缓存 JavaScript 前端开发
延迟加载JS的方式
【10月更文挑战第5天】
62 2
|
5月前
|
JavaScript 前端开发
JS中延迟加载的方式有哪些
JS中延迟加载的方式有哪些
30 0
|
6月前
|
JavaScript 前端开发
如何实现网页的懒加载?图片懒加载的原理
如何实现网页的懒加载?图片懒加载的原理
48 0
|
6月前
|
前端开发 JavaScript UED
同步加载、异步加载、延迟加载、预加载的区别
同步加载、异步加载、延迟加载、预加载的区别
245 0
|
JavaScript 前端开发 API
js延迟加载的方式有哪些
js延迟加载的方式有哪些
88 0
|
JavaScript 前端开发
JavaScript判断各种资源是否加载完成的方法汇总,资源预加载问题
JavaScript判断各种资源是否加载完成的方法汇总,资源预加载问题
977 0
|
移动开发 前端开发 UED
前端加载之懒加载
懒加载就是延时加载,也被称为按需加载。
483 0
|
缓存 JavaScript 前端开发
图片预加载与懒加载
前面做了个招聘页面,里面有大量的图片需要加载。 一开始都是全部写在页面中,在测试环境还看不出很慢,一放到正式环境就不对了。
图片预加载与懒加载
|
SQL 缓存 Java
多次缓存和懒加载你都懂了吗?(下)
一级缓存的作用域是SQLSession,同一个SqlSession中执行相同的SQL查询(相同的SQL和参数),第一次会去查询数据库并写在缓存中,第二次会直接从缓存中取,且在mybatis中式默认开启默认开启一级缓存
371 0
多次缓存和懒加载你都懂了吗?(下)