导航

style 标签写在 body 后面与 body 前面（head）有什么区别？

style 标签放在 body 后，会导致当加载到此样式时，页面将停止之前的渲染。此样式表被解析后，将重新渲染页面，也就出现了短暂的花屏现象。

所以不要写在 body 后，要把样式放在 head 中。

以下是一个示例，说明在<body>后定义样式的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    
    <!-- Styles defined after body content -->
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
        p {
            color: green;
        }
    </style>
</body>
</html>

在这个示例中，浏览器会按以下顺序处理：

解析并渲染<body>部分内容：
- 渲染出<h1>和<p>标签的内容，但此时它们没有应用在<style>中定义的样式。
遇到<style>标签：
- 立即应用这些样式，页面内容会重新渲染，以反映新的样式规则。
最终渲染效果：
- 页面背景颜色会变为浅蓝色，<h1>标签文本颜色会变为海军蓝，<p>标签文本颜色会变为绿色。

浏览器将 CSS 生成 CSSOM，再将 DOM 和 CSSOM 整合成 RenderTree ，然后针对 RenderTree 即可进行渲染了。大家可以想一下，有 DOM 结构、有样式，此时就能满足渲染的条件了。另外，这里也可以解释一个问题 —— 为何要将 CSS 放在 HTML 头部？—— 这样会让浏览器尽早拿到 CSS 尽早生成 CSSOM，然后在解析 HTML 之后可一次性生成最终的 RenderTree，渲染一次即可。如果 CSS 放在 HTML 底部，会出现渲染卡顿的情况，影响性能和体验。

放在 head 中的好处：

提高加载性能：在页面内容渲染之前应用样式，减少页面重绘和重排。
改善用户体验：避免用户在页面加载时看到未样式化的内容，防止“闪烁”效果。

为何要将 JS 放在 HTML 底部？

JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。
另外，JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行，JS 放在底部执行时，HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部，JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。
渲染过程中，如果遇到 <script> 就停止渲染，执行 JS 代码。因为浏览器渲染和 JS 执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染 DOM 冲突。待<script>内容执行完之后，浏览器继续渲染。