优化相关

html 加载优化

浏览器渲染页面的流程：DOM → CSSOM → Render Tree → Layout → Paint

<!-- ❌ 阻塞渲染的写法 -->
<link
    rel="stylesheet"
    href="large.css"
/>
<script src="app.js"></script>
<!-- 阻塞后续内容 -->

<!-- ✅ 优化写法 -->
<!-- 内联关键 CSS -->
<style>
    /* 首屏必需的样式 */
    .header {
        height: 60px;
        background: #333;
    }
</style>

<!-- 非关键样式异步加载 -->
<link
    rel="preload"
    href="non-critical.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript
    ><link
        rel="stylesheet"
        href="non-critical.css"
/></noscript>

<!-- JS 放到底部或异步加载 -->
<script
    src="app.js"
    defer
></script>
<script
    src="analytics.js"
    async
></script>