[JavaScript知识库] js_html中script脚本加载/defer/async属性

reference

脚本的加载运行策略可以通过配置script标签的defer&async属性做行为上的控制(都是现代的js加载控制技术)
在这里插入图片描述

前三行的时间线展示了，js脚本的加载和运行是连个相对独立的阶段

defer属性，可以将脚本的加载和运行划分为明显不连续的两个阶段
- (In this case both the script and the HTML will load simultaneously and the code will work.)
- defer only works for external scripts
- Scripts loaded with the defer attribute will load in the order they appear on the page.
- defer is useful if your scripts depend on the DOM being in place (e.g. they modify one or more elements on the page)
- defer是针对js的执行时机
- defer加载脚本的顺序比async更加有序
async 属性：
- 加载脚本时不阻塞其他工作的进行，而一旦某个脚本加载完毕，就开始运行该脚本（同时同时会阻塞其他工作）
- It is best to use async when the scripts in the pagerun independently from each other and depend on no other script on the page.
- async should be used when you have a bunch of background scripts to load in, and you just want to get them in place as soon as possible.
- async的加载和执行比defer要连贯,当你希望尽快加载并执行脚本的时候,使用async(async方式加载脚本的时候不会阻塞HTML Parser)

script 标签可以写在html的head标签内
- 但是为了让代码能够正确的执行(符合预期),往往需要做一些主要逻辑之外的额外的工作
  - 对于internal js,我们可以组织代码,让代码使用时间监听的方式(打包主要逻辑)来避免js在不合适的时间点执行
- 对于external js 我们可以使用defer属性配置script标签
将js放置在html末尾的方式属于过时的方式

async and defer both instruct the browser to download the script(s)in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked during the fetch process.
scripts with an async attribute willexecute as soon as the download is complete. This blocks the page and does not guarantee any specific execution order.
scripts with a defer attribute will load in the order they are in and will only execute once everything has finished loading.
If your scripts should be run immediately and they don’t have any dependencies, then use async.
If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load them using defer and put their corresponding <script> elements in the order you want the browser to execute them.