内联样式超15KB会拖慢DOM构建，因浏览器需逐字扫描HTML；meta charset须在前1024字节；SSR/SSG标记勿加深嵌套；万级表格禁用style属性；脚本须defer/async；组件化HTML应提取公共样式与脚本；图标改用SVG外链；内联资源临界点受设备、嵌套深度等多因素影响。
内联样式超过15KB会拖慢DOM构建起点
HTML体积极大时，内联
- 查响应头
Content-Length，若HTML超15KB，优先检查内联资源是否可外链 -
<meta charset="utf-8">必须出现在前1024字节内，否则浏览器可能先按latin1解析再重载，引发闪动或乱码 - SSR/SSG输出的HTML若含
data-reactroot或_next标记，要确认其父容器没无意中加深嵌套层级，否则DOM节点数+解析时间双倍恶化
万级表格用style属性内存暴涨32MB以上
每行
CSSStyleDeclaration对象，6万行实测多占32–45MB内存。这不是样式本身重，而是对象实例无法复用。
- 禁止在循环里拼接
tr.style = 'background:' + color，改用el.style.setProperty('background-color', color)复用已有对象 - 批量操作前先收集所有目标元素，统一调用
setProperty，避免反复触发样式计算 - 若只控
opacity或filter，优先加transform或will-change进GPU层，减主线程压力
<script>放<head>里默认同步阻塞HTML解析
哪怕只有1KB的vendor.js，只要没加defer或async，浏览器就必须暂停HTML解析、下载并执行完才能继续——首屏白屏就可能发生。
- 非关键脚本（统计、错误监控、第三方SDK）必须加
defer：保序且不阻塞HTML流式解析 - 纯交互逻辑（如按钮绑定）可用
async，但注意它不保序，且可能在DOMContentLoaded前运行；若操作DOM，大概率报Cannot read property 'addEventListener' of null - 真要操作首屏DOM的脚本（比如初始化轮播、表单校验），放
<head>里，别信“DOMContentLoaded比load快”的模糊说法——实测晚100ms加载，LCP就晚100ms
组件化HTML里<style>和<script>内联是体积膨胀主因
一个含5个<my-card>的页面，HTML从8KB涨到120KB，问题不在组件逻辑，而在每个都copy-paste了相同的<style>和初始化<script>。
立即学习“前端免费学习笔记（深入）”；
- 所有公共样式提取为外链
<link rel="stylesheet" href="/shared.css">，禁止在每个组件里写<style> - 组件脚本统一由一个
<script type="module">加载，用import拆分逻辑，而非反复<script>customElements.define()</script> - 图标全部改用
<svg>外链或系统字体图标，禁用base64内联 - 对必须内联的模板片段（如
<template id="card-tpl">），用ID唯一标识，JS运行时只克隆一次
FCP延迟突破200ms往往不是因为某处写了style，而是depth超6层+内联CSS超15KB+脚本没defer三者叠加的结果。
