延迟脚本和异步脚本
Nowadays scripts can be heavier than HTML and their download size is larger, and processing time is longer too.
如今，脚本可能比HTML重，并且下载大小更大，并且处理时间也更长。
When the browser loads HTML and comes across a <script>...</script> tag, it can’t continue building the DOM. It must execute the script right now. The same happens for external scripts <script src="..."></script>: the browser must wait until the script downloads, execute it, and only after process the rest of the page.
当浏览器加载HTML并遇到<script>...</script>标记时，它将无法继续构建DOM。 它必须立即执行脚本。 外部脚本<script src="..."></script>发生同样的情况：浏览器必须等待脚本下载，执行并仅在处理页面的其余部分之后再执行。
But there can be some important issues such as:
但是可能存在一些重要问题，例如：
Scripts can’t see DOM elements below them 脚本在其下方看不到DOM元素 If there’s a bulky script at the top of the page, it “blocks the page”. Users can’t see the page content till it downloads and runs. 如果页面顶部有一个笨拙的脚本，则它“阻塞了页面”。 在页面内容下载并运行之前，用户无法看到页面内容。We can solve this issue with placing script at the end (after html), but that solution will force the script to load after html loads. For long HTML documents, that may be a noticeable delay if people have slow internet.
我们可以通过将脚本放在末尾(在html之后)来解决此问题，但是该解决方案将强制在html加载后加载脚本。 对于较长HTML文档，如果人们的上网速度较慢，这可能会明显延迟。
Luckily, there are two <script> attributes that solve the problem for us: defer and async.
幸运的是，有两个<script>属性可以为我们解决问题： defer和async 。
With defer attribute browser loads script in ‘background’ mode and runs it when it loads.
具有defer属性的浏览器以“后台”模式加载脚本，并在加载时运行脚本。
So defer mode prevents blocking the page and scripts with defer always execute when the DOM is ready, but before DOMContentLoaded event.
因此，延迟模式可防止阻塞页面，并且在DOM准备就绪时(但在DOMContentLoaded事件之前)，始终执行具有延迟的脚本。
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
当初始HTML文档已完全加载并解析，而无需等待样式表，图像和子帧完成加载时，将触发DOMContentLoaded事件。
Deferred scripts keep their relative order, just like regular scripts. So, if we have a long script first, and then a smaller one, then the latter one waits.
延迟脚本保持其相对顺序，就像常规脚本一样。 因此，如果我们首先有一个较长的脚本，然后是一个较小的脚本，则后者等待。
But the defer attribute is ignored if the <script> tag has no src.
但是，如果<script>标签没有src则将忽略defer属性。
The async attribute means that it helps script to load in ‘independent’ mode.
async属性意味着它可以帮助脚本以“独立”模式加载。
The browser loads pages without waiting for async scripts to load. DOMContentLoaded and async scripts don’t wait for each other (“load-first” order).
浏览器加载页面时无需等待异步脚本加载。 DOMContentLoaded和异步脚本不会彼此等待(“加载优先”顺序)。
Other scripts don’t wait for async scripts, and async scripts don’t wait for them. Async mode (like defer mode) doesn’t block the page.
其他脚本不等待async脚本， async脚本也不等待它们。 异步模式(如延迟模式)不会阻止页面。
Async scripts are great when we integrate an independent third-party script into the page: counters, ads, analytic tools and so on, as they don’t depend on our scripts, and our scripts shouldn’t wait for them.
当我们将独立的第三方脚本集成到页面中时，异步脚本非常有用：计数器，广告，分析工具等，因为它们不依赖于我们的脚本，我们的脚本不应该等待它们。
We can also add a script dynamically using JavaScript:
我们还可以使用JavaScript动态添加脚本：
The script starts loading as soon as it’s appended to the document and behaves as “async” scripts by default.
该脚本在添加到文档后立即开始加载，并且默认情况下表现为“异步”脚本。
It means:
它的意思是：
They don’t wait for anything, nothing waits for them. 他们什么都没有等待，没有什么等待他们。 The script that loads first — runs first (“load-first” order). 首先加载的脚本-首先运行(“加载优先”顺序)。But we can turn off async mode for dynamic scripts by setting script.async = false before appending it to html.
但是我们可以通过设置script.async = false来关闭动态脚本的异步模式。 在将其附加到html之前。
Both async and defer have one common thing: downloading of such scripts doesn’t block page rendering. So the user can read page content and get acquainted with the page immediately.
async和defer都有一个共同之处：下载此类脚本不会阻止页面呈现。 因此，用户可以阅读页面内容并立即熟悉该页面。
Thank you for reading. I hope you liked it 😎
感谢您的阅读。 我希望你喜欢它😎
翻译自: https://medium.com/swlh/async-defer-and-dynamic-scripts-9a2c43a92be1
延迟脚本和异步脚本
相关资源：四史答题软件安装包exe