时间戳

首页 > 解决方案 > 已位于底部的文件的 defer 属性

javascript - 已位于底部的文件的 defer 属性

问题描述

由于浏览器从上到下读取文件，如果 js 文件位于底部，那么使用 defer 属性有什么意义？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>some title</title>
    
</head>
<body>
    <h1>hello world</h1>
    <img src=">
    <script defer src="defer-script.js"></script>
</body>
</html>

默认情况下，Web浏览器不应该在解析脚本之前解析h1和图像吗？这个例子中的 defer attr 有什么意义，或者浏览器将如何解析 html 文件。

标签： javascripthtml

解决方案

根据文件

具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成评估。

defer 属性对模块脚本没有影响——默认情况下它们会延迟。

具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。

所以解析将与下一个逻辑

defer 属性告诉浏览器不要等待脚本。相反，浏览器会继续处理 HTML，构建 DOM。该脚本“在后台”加载，然后在 DOM 完全构建后运行。

推荐阅读