优先砍掉阻塞渲染的script和link rel="stylesheet"，尤其未设media的样式表及无async/defer的脚本；删除非首屏语义标签、空容器、picture/srcset及冗余meta，控制HTML体积在8KB内。
弱网下首屏加载卡顿，优先砍掉什么？
移动端弱网最直接的体感是白屏时间长，核心矛盾在 HTML 解析阻塞渲染。关键不是“压缩体积”，而是“切断阻塞链”。script 和 link rel="stylesheet" 是头号杀手，尤其内联 CSS 超过 2KB 或未标记 media 的样式表，会强制浏览器等待解析完才开始绘制。
- 非关键 CSS 提取为异步加载：用
rel="preload"+onload注入，或改用rel="stylesheet" media="print"后 JS 切换 media - 所有
script标签必须带async或defer，内联脚本超过 1KB 拆出成外部文件 - 删除所有
document.write()、eval()、同步 XHR，这些在弱网下极易触发超时中断 -
<img>必须带loading="lazy"，且src不要写占位图 base64（增加 HTML 体积），改用data-src+ JS 懒加载
HTML 结构里哪些标签能删就删？
弱网环境不拼功能完整，拼首屏可交互速度。很多语义化标签在首屏无实际作用，纯增解析开销。
- 去掉
<header>、<footer>、<aside>等非首屏容器，用<div class="header">替代（语义由 class 控制，不依赖标签） - 移除所有空
<span>、<div>，特别是 CMS 自动生成的冗余 wrapper - 禁用
<picture>和srcset：弱网下多图请求易失败，统一用单<img src="x.jpg">+ 后端响应式图片服务降级 - 删除
<meta name="viewport">以外的所有<meta>，社交分享等 meta 在首屏无用
如何验证 HTML 是否真“精炼”了？
别信 gzip 后大小，要看浏览器实际解析行为。重点观察 Network 面板中 DOMContentLoaded 时间和主线程阻塞长度。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在 Chrome DevTools → Network → 右键表头勾选 “Waterfall”，找蓝色条（HTML 解析）是否被黄色条（JS/CSS 解析）打断
- 用 Lighthouse 跑 “Performance” 时关闭缓存，勾选 “Slow 3G” 模拟，重点关注 “Eliminate render-blocking resources” 报告项
- 手动检查 HTML 源码：搜索
<script>，确认每个都有async或defer；搜索<link rel="stylesheet">，确认没有未设media的外链 - 用 curl 测原始 HTML 体积：
curl -s <a href="https://www.php.cn/link/dc2eb29b2e1b6e0f36ceedc12cb00032">https://www.php.cn/link/dc2eb29b2e1b6e0f36ceedc12cb00032</a> | wc -c，目标控制在 8KB 以内（含空格换行）
弱网优化不是堆技巧，是持续剔除“默认假设”——比如默认需要完整 DOM、默认样式必须立刻生效、默认图片必须原图加载。真正卡住用户的，往往是你觉得“应该有”的那部分。
立即学习“前端免费学习笔记（深入）”；
