首屏白屏超1秒主因是关键渲染路径阻塞：外部css阻塞dom构建，内联关键css可立即参与渲染树构建；非首屏html应“零渲染”（用template或动态插入）；defer按序执行适合dom依赖脚本，async无序执行仅适用于独立sdk；preload仅用于浏览器无法自动发现的关键资源（如首屏背景图、跨域字体），且需指定as和crossorigin属性。
首屏白屏时间超过1秒，大概率不是网络或后端问题，而是HTML结构和样式加载顺序没理清——关键渲染路径被阻塞了。
为什么内联关键CSS比更有效
浏览器解析到外部 <link rel="stylesheet"> 时会暂停 DOM 构建，直到 CSSOM 完成；而内联 <style></style> 虽然增加 HTML 体积，但能立即参与渲染树构建，避免首次绘制延迟。
- 只内联首屏必需的样式（如 header、hero 区块、按钮基础态），用工具如
critters或mini-css-extract-plugin+critical自动提取 - 避免内联整个
main.css，否则 HTML 变大反而拖慢传输，尤其在弱网下 - 内联样式里不要含
@import或字体声明（@font-face），它们仍会触发额外请求并阻塞 - 如果用了 CSS-in-JS（如 Emotion），确认 SSR 时已将关键样式序列化进
<style data-emotion></style>并注入首屏 HTML
如何识别并分离“非首屏”HTML结构
所谓“非首屏”，是指用户滚动前不可见、且不参与初始布局计算的内容。强行渲染它们会延长 DOM 构建时间、增加内存占用，并可能触发无谓的重排。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用 Chrome DevTools 的
Rendering > FPS Meter和Layers面板观察首屏区域是否包含大量隐藏/折叠节点 - 把轮播图下方的推荐列表、评论区、侧边栏等，改用
<template></template>或纯 JS 动态插入（innerHTML或document.createElement） - 对 tab 切换类内容，初始只保留激活 tab 的 HTML，其余用
data-html属性暂存字符串，切换时再解析挂载 - 慎用
display: none包裹非首屏区块——它仍会参与 CSSOM 计算和 DOM 构建，只是不绘制；真正要的是“不创建”
defer 与 async 在 script 加载中的实际差异
两者都让脚本不阻塞 HTML 解析，但执行时机完全不同，选错会导致 DOM 操作失败或竞态问题。
-
defer：脚本按出现顺序下载，等 DOM 解析完、DOMContentLoaded 前执行；适合依赖 DOM 结构的初始化逻辑（如document.querySelector） -
async：脚本一下载完立刻执行，顺序不确定；只适合完全独立的脚本（如埋点、广告 SDK），且不能假设document.body已存在 - 内联脚本（
<script>...</script>）默认同步执行，若它不操作 DOM，可加defer；若必须同步但又怕阻塞，就把它拆出来成外部文件再加defer - 现代项目中，优先用
type="module"脚本——它天然具有defer行为，且支持import按需加载
预加载（preload）哪些资源才真有用
<link rel="preload"> 不是越多越好，滥用会抢占带宽、挤掉真正关键的资源。
- 只预加载首屏强依赖、且浏览器无法自动发现的资源：比如
<h1></h1>背景图、关键 Web 字体（font-display: optional配合）、核心 icon font 文件 - 不要预加载 CSS 或 JS 入口文件——浏览器已通过 HTML 解析自动发现它们，
preload反而造成重复请求 - 预加载图片时，必须指定
as="image"和fetchpriority="high"（Chrome 109+），否则可能被降级为低优先级 - 跨域字体需搭配
crossorigin属性，否则预加载失败且控制台报 CORS 错误
最容易被忽略的一点：HTML 本身不是瓶颈，但它的组织方式决定了浏览器能否高效地调度后续所有资源。结构扁平、关键样式内联、非首屏内容“零渲染”、脚本加载策略匹配执行依赖——这四点卡准了，首屏性能优化才算真正落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
