为什么脚本位于body标签的末尾

一尘不染

为什么脚本位于body标签的末尾

css

我知道这个问题被问过很多次，但是我没有找到答案。那么，为什么建议在body标签的末尾添加脚本以更好地渲染呢？

从Udacity课程和CSSOM准备就绪后开始渲染。JS是HTML解析阻止程序，并且CSSOM准备好后，任何脚本都会启动。

因此，如果我们得到：

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="script.js"></script>
    </body>
</html>

CRP为：

CSSOM ready > JS execute > DOM ready > Rendering

如果脚本在头：

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

CRP将相同：

CSSOM ready > JS execute > DOM ready > Rendering

这个问题仅与“同步”脚本有关（没有async / defer属性）。

阅读 286

2020-05-16

共1个答案

一尘不染

从历史上看，脚本阻止了其他资源的更快下载。通过将它们放在底部，您的样式，内容和媒体可以更快地下载，从而可以 感觉到 性能有所提高。

2020-05-16