我要评论没有defer或async，在head
解析将暂停，直到获取并执行脚本为止。完成此操作后，解析将继续。
没有defer或async，在body末尾
解析是在没有任何停顿的情况下完成的，当它完成时，脚本会被fetched并执行。 解析是在脚本下载之前完成的，因此页面显示早于前面的示例。
使用async，在head
脚本是异步获取的，当它下载完，html解析会暂停以执行脚本，脚本执行完，再接着解析html。
使用defer，在head
脚本是异步获取的，当html解析完，再执行脚本。
“在head使用defer”和“在body末尾”都是在html解析完再执行脚本， 但“在head使用defer”比“在body末尾”执行脚本的时间要早，因为“在head使用defer”脚本是在html解析的同时下载的，而“在body末尾”脚本是在html解析完再下载的。
因此，就速度而言，这个是最优的方式。
阻塞解析
async会阻止页面的解析， defer不会。
阻塞渲染
async和defer都不能保证不阻塞渲染。这取决于你和你的脚本（例如，确保你的脚本在onload事件之后运行）。
dominteractive
标记为defer的脚本在dominteractive事件之后立即执行，该事件发生在加载、解析html和构建dom之后。
此时，css和图像仍有待加载和解析。
完成此操作后，浏览器将发出domcomplete事件，然后发出onload。
dominteractive之所以重要，是因为它的事件被认为是感知加载速度的衡量标准。
考虑到延迟的优点，在各种场景下，它似乎是比异步更好的选择。
另一个赞成用defer的原因
标记为async的脚本在可用时会按随意顺序执行。标记为defer的脚本将按标记中定义的顺序执行（在解析完成后）。
如下，有一个index.html文件，引入3个标记async的js文件和3个标记defer的js文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<script src="./1.js" async></script>
<script src="./2.js" async></script>
<script src="./3.js" async></script>
<script src="./11.js" defer></script>
<script src="./12.js" defer></script>
<script src="./13.js" defer></script>
</body>
</html>
2.js 和 12.js文件比较大，下载会慢一些
最终的执行顺序如下：
async和defer的区别
async和defer都是异步加载脚本，但async是加载完脚本后立即执行，而defer是在html解析完成后再执行脚本，也就是async会阻塞html的解析，defer不会阻塞。async和defer都不能保证不阻塞html的渲染。
标记为async的脚本在可用时会按随意顺序执行。标记为defer的脚本将按标记中定义的顺序执行（在解析完成后）。
以上就是使用defer和async高效加载javascript的详细内容，更多关于defer和async加载javascript的资料请关注代码网其它相关文章！
发表评论