冷启动性能瓶颈常源于低质量HTML，必须通过编译时静态分析（如htmlhint）在构建流程中强制校验doctype-first、meta-charset-require、tag-pair等关键规则，确保浏览器快速进入标准模式并正确解析。
冷启动性能瓶颈往往藏在 HTML 解析阶段，而问题根源常是低质量 HTML：缺失 DOCTYPE、错位的 <meta charset>、未闭合标签、内联脚本阻塞等。单纯靠运行时优化收效有限，必须把检测左移到编译时——用静态分析工具在构建流程中卡住问题。
htmlhint 必须在构建 pipeline 里跑，不能只靠本地手动执行
很多人装了 htmlhint 就以为万事大吉，其实它只有嵌入 CI/CD 或本地构建脚本才真正起作用。否则开发者很容易跳过检查，或只查自己改的文件，漏掉历史债务。
- 推荐在
package.json的"scripts"中加入："lint:html": "htmlhint \"src/**/*.html\"" - Webpack 用户可加
html-webpack-plugin配合htmlhint-webpack-plugin，在每次生成 HTML 时自动校验 - CI 流程（如 GitHub Actions）中应在
build步骤前强制运行htmlhint，失败即中断 - 注意通配符写法：
"src/**/*.html"要加英文双引号，否则 shell 可能提前展开导致漏文件
关键规则必须启用：doctype-first、meta-charset-require、tag-pair
这三条规则直接决定浏览器是否能快速进入「标准模式」并正确解码。冷启动慢，80% 源于解析器反复纠错或降级到怪异模式。
-
doctype-first：确保<!DOCTYPE html>是文件第一行，否则触发怪异模式，重排重绘代价飙升 -
meta-charset-require：强制<meta charset="UTF-8">出现在<head>开头 1024 字节内，避免编码探测延迟 -
tag-pair：捕获未闭合的<p>、<div>等，这类错误会让 HTML 解析器不断回溯，显著拖慢首屏时间 - 配置示例（
.htmlhintrc）：{ "doctype-first": true, "meta-charset-require": true, "tag-pair": true, "attr-value-double-quotes": true }
别忽略 inline script 和 style 对 parser blocking 的影响
静态分析不能只看结构合规，还得识别会阻塞 HTML 解析的内联内容。浏览器遇到 <script> 会暂停 DOM 构建，直到 JS 执行完——这对冷启动是硬伤。
立即学习“前端免费学习笔记（深入）”；
- 启用
script-disabled规则（需自定义或插件），或用正则扫描：<script[^>]*>[\s\S]*?</script>并告警 - 对
<style>建议加style-disabled提示：内联样式虽不阻塞解析，但会延迟 CSSOM 构建，影响渲染流 - 更实用的做法：用
htmlhint+ 自定义 rule 检查<script>是否含defer或async，否则标记为高风险 - 注意：Webpack/Vite 的 HTML 插件可能自动注入脚本，这些动态插入的内容 htmlhint 不会看到，得配合构建日志做二次校验
真正卡住冷启动问题的，不是某条规则开或关，而是让 htmlhint 成为构建不可绕过的门禁——任何违反 doctype-first 或 meta-charset-require 的提交，都不该进主干。解析器没那么聪明，它只认字节顺序和标签位置，差一个换行，就可能多花几十毫秒。
