应将关键HTML结构提前渲染：把组件JS移至</body>前或加defer/async，用骨架屏占位，服务端渲染首屏静态结构，图片加loading="lazy"，字体用font-display:swap，容器设固定宽高或aspect-ratio，非首屏组件动态导入。
组件加载慢时首屏白屏，怎么让关键HTML结构先出来
浏览器解析 HTML 是单线程顺序执行的，只要遇到未加修饰的 <script src="xxx.js"> 就会暂停，等下载、执行完才继续。很多“组件”本质是 JS 驱动的 DOM 插入（比如自定义 <my-card>），如果脚本卡在头部或体积大，整个页面就挂住。
解决思路不是等组件“加载完”，而是让骨架先渲染出来：
- 把组件初始化逻辑从
<head>移到</body>前；非关键组件脚本一律加defer（保证顺序）或async（无依赖时更优） - 用原生 HTML 写出组件占位结构（比如
<div class="card skeleton"></div>），CSS 控制 loading 状态，JS 加载后再替换内容 - 对服务端渲染（SSR）组件，确保首屏 HTML 已含可渲染的静态结构，JS 只负责绑定交互，而非构造 DOM
网速差时图片和字体拖慢组件，怎么不等它们就显示
图片和字体是典型阻塞资源：浏览器默认等 <img> 下载完才触发 DOMContentLoaded，Web Font 甚至会阻塞文本渲染。组件里若含这些，低网速下直接卡住。
关键不是“禁用”，而是“解耦加载时机”：
立即学习“前端免费学习笔记（深入）”；
-
<img>必须加loading="lazy"；首屏图用srcset+sizes提供适配分辨率，避免移动端下拉 2x 图 - 字体用
@font-face的font-display: swap，确保文本先用系统字体撑开布局，字体加载后再切换 - 组件内嵌图标优先用 SVG 内联（
<svg>...</svg>），零请求、无阻塞、可 CSS 控制颜色大小 - 绝对不要在组件模板里写
<link rel="stylesheet" href="font.css">这类同步加载链路——改用rel="preload"+as="font"，且只 preload 首屏必需字重
移动端弱网下组件反复重排重绘，怎么稳住布局
很多组件用 JS 动态计算高度、插入节点、修改 style.left/top，这些操作会强制触发同步 layout（重排），在低端 Android 或 3G 网下极易掉帧、抖动。
真正影响体验的是“不可预测的尺寸变化”，而不是“没动画”：
- 给组件容器设固定宽高或
aspect-ratio，用contain: layout paint隔离重排范围 - 动画属性只用
transform和opacity，禁用width、height、margin等触发布局的属性 - 读取布局信息（如
offsetHeight）前先缓存，避免在循环或 scroll 回调里反复调用getBoundingClientRect() - 用
IntersectionObserver替代scroll事件监听可见性，减少主线程压力
组件打包后体积膨胀，怎么按网速动态加载
一个 button 组件引入整套 UI 库，或一个轮播图组件带 300KB 的 JS，网速差时下载耗时远超交互等待阈值（500ms）。这不是“优化加载”，而是“不该这么打包”。
核心判断标准：这个组件是否真需要全部能力？
- 用
type="module"+nomodule分流：现代浏览器加载 ES 模块版（支持 tree-shaking），旧浏览器 fallback 到精简版 - 对非首屏组件（如页脚工具栏、弹窗表单），用
import()动态导入，配合loading="eager"或fetchpriority="low"控制优先级 - 服务端根据
NetInfo.effectiveType（需配合 Service Worker）或 UA 特征，返回不同粒度的组件 HTML —— 比如 2G 下只返回纯文本链接，4G+ 才注入富交互版本 - 警惕“组件化”陷阱：把
<input>包一层再封装成<fancy-input>，却带了 80KB 的验证逻辑和动画——这种该删，不是该优化
