JavaScript加载 - defer与async

简介: 默认模式,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之后的所有文档内容之前,也就是说不等待后续载入的文档元素,读取到就加载并执行。async加载模式,加载和渲染后续文档元素的过程, script.

页面的解析过程是单线程的,但是单线程亦可有同步与异步之分,script标签的解释方式分为3种,默认、defer和async三种

<script src="script.js"></script>
默认模式,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之后的所有文档内容之前,也就是说不等待后续载入的文档元素,读取到就加载并执行。
<script async src="script.js"></script>
async加载模式,加载和渲染后续文档元素的过程, script.js 异步加载,并且在script.js加载完成之后同步执行script.js(可能在后续文档元素解析完成的过程中)
<script defer src="script.js"></script>
defer加载模式,加载和渲染后续文档元素的过程, script.js 异步加载,并且在script.js加载完成和后续文档元素解析完成之后同步执行script.js


script 标签解析时间图

只有以src属性链接的script标签这2个属性才起作用。
<script defer type="text/javascript" src=""></script>
不带src属性script标签在文档加载时顺序加载,这两个属性无效。

<script type="text/javascript">
    let idEle = document.getElementById("app");
</script>
目录
相关文章
|
1月前
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
279 109
|
1月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
369 204
|
2月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await
JavaScript异步编程:从回调地狱到Async/Await
|
2月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await优雅进化
JavaScript异步编程:从回调地狱到Async/Await优雅进化
|
2月前
|
前端开发 JavaScript
JavaScript异步编程:从Callback到Async/Await的进化
JavaScript异步编程:从Callback到Async/Await的进化
|
4月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
872 58
|
10月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
183 56
|
10月前
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。