前端

`<script>` 标签的位置确实会影响网站首屏的显示时间。

当浏览器解析到 HTML 文档中的 `<script>` 标签时，它会暂停文档的解析，去加载和执行脚本。这意味着，如果 `<script>` 标签放置在文档的 `head` 部分，浏览器必须先加载并执行完这些脚本，才能继续解析 HTML 文档的剩余部分。如果脚本很大或者需要从慢速服务器加载，这将延迟页面内容的渲染，从而增加首屏显示的时间。

例如，假设我们有一个简单的 HTML 页面，其中在 `head` 部分包含了一个大型的外部 JavaScript 文件：

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script src="big-external-script.js"></script>
</head>
<body>
    
</body>
</html>
```

在上述情况中，用户必须等待 `big-external-script.js` 完全加载并执行后，才能看到页面内容，即首屏的显示会受到影响。

作为对比，如果我们将 `<script>` 标签放在 HTML 文档的 `body` 部分的最后：

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    

    <script src="big-external-script.js"></script>
</body>
</html>
```

在这种结构中，浏览器会先渲染页面内容，用户可以更快地看到首屏，而脚本将在页面内容加载之后异步加载和执行，从而不会阻塞首屏的显示。

为了进一步提高性能，还可以使用 `async` 或 `defer` 属性，这两者都允许浏览器异步加载脚本：

- 使用 `async` 时，脚本会在加载完成后尽快执行，但不保证执行顺序；
- 使用 `defer` 时，脚本会在整个文档解析完成后，但在 `DOMContentLoaded` 事件之前按照它们在文档中出现的顺序执行。

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script src="external-script.js" defer></script>
</head>
<body>
    
</body>
</html>
```

在实际开发中，为了优化首屏显示时间，开发者通常会将非必须的脚本移动到文档底部，或者使用 `async` 或 `defer` 属性，以确保关键渲染路径（Critical Rendering Path）不会因脚本加载和执行而受阻。

HTML 中 script 标签的位置是否会影响网站首屏的显示时间？