URL到渲染全链路优化清单（工具自动化检测+人工干预拆分版）
第一部分：工具可自动化检测的优化项清单
核心特征：基于代码扫描、构建配置解析、资源特征识别即可完成检测，无需业务上下文，可直接转化为工具检测规则
1. DNS解析阶段
| 优化项 | 责任方 | 核心检测逻辑（工具可实现） | 检测结果判定标准 |
|---|
| DNS预解析配置 | 前端 | 解析所有HTML的<head>标签，检查是否包含目标域名（CDN/接口）的<link rel="dns-prefetch"> | 包含则通过，否则预警 |
| 合并域名数量 | 前端 | 扫描静态资源引用路径，提取域名去重统计（排除业务接口域名） | 静态资源域名≤2个通过，＞3个预警 |
2. HTTP请求阶段
| 优化项 | 责任方 | 核心检测逻辑（工具可实现） | 检测结果判定标准 |
|---|
| 合并JS/CSS小文件 | 前端 | 统计构建产物中＜10KB的JS/CSS数量，检查webpack/vite的splitChunks配置 | 小文件≤3个或拆分配置合理则通过 |
| 移除未使用资源 | 前端 | 调用Coverage API检测JS/CSS覆盖率，识别＜30%覆盖率文件 | 无低覆盖率文件或已Tree Shaking则通过 |
| 图片格式优化与压缩 | 前端 | 读取图片文件头判断格式，计算压缩率，检查<picture>降级标签 | 现代格式+压缩率≥80%+降级兼容则通过 |
| 代码压缩混淆 | 前端 | 检查构建后文件是否有冗余字符，验证Terser、cssnano配置 | 无冗余字符+配置开启则通过 |
| 静态资源加文件指纹 | 前端 | 检查构建产物文件名是否含[hash]/[contenthash]，校验output.filename配置 | 含指纹+配置正确则通过 |
| 非首屏CSS延迟加载 | 前端 | 解析<link rel="stylesheet">，检查是否有media="print"+onload修改逻辑 | 非首屏CSS配置延迟加载则通过 |
| JS使用defer/async | 前端 | 扫描<script>标签属性及位置，统计同步脚本数量 | 仅首屏关键脚本无属性且在<body>末尾则通过 |
| 图片懒加载 | 前端 | 检查<img>的loading="lazy"属性，扫描IntersectionObserver懒加载逻辑 | 非首屏图片含懒加载配置则通过 |
3. 解析与渲染阶段
| 优化项 | 责任方 | 核心检测逻辑（工具可实现） | 检测结果判定标准 |
|---|
| JS脚本位置优化 | 前端 | 定位同步<script>标签，判断是否在<body>闭合标签前 | 在<body>末尾则通过，在<head>中则预警 |
| JS代码分割与动态加载 | 前端 | 扫描import()语法，检查路由懒加载写法及splitChunks配置 | 路由/组件动态加载则通过，全量引入则预警 |
| 避免使用@import引入CSS | 前端 | 解析CSS文件，匹配@import url(xxx)语法（排除第三方库） | 无自定义@import则通过，否则预警 |
| 简化CSS选择器 | 前端 | 用CSS解析器识别含复杂伪类的选择器，统计占比 | 复杂选择器占比＜10%则通过，否则预警 |
| CSS动画替代JS动画 | 前端 | 扫描JS动画逻辑与CSS @keyframes，检查是否操作布局属性 | 用transform实现动画则通过，JS操作布局属性则预警 |
4. 交互就绪阶段
| 优化项 | 责任方 | 核心检测逻辑（工具可实现） | 检测结果判定标准 |
|---|
| 拆分JS长任务 | 前端 | 监控JS函数执行时间，标记＞50ms的长任务及拆分逻辑 | 无未拆分长任务则通过，否则预警 |
| 避免同步阻塞API | 前端 | 扫描JS代码，匹配alert()、同步XHR等阻塞API | 无阻塞API调用则通过，否则预警 |
| 第三方脚本优化加载 | 前端 | 检查第三方脚本的async/defer属性及动态加载方式 | 异步加载则通过，同步引入则预警 |
| 预加载关键资源 | 前端 | 解析<link rel="preload">标签，验证as属性与资源类型匹配度 | 首屏关键资源配置预加载则通过，否则预警 |
5. 工程化落地阶段
| 优化项 | 责任方 | 核心检测逻辑（工具可实现） | 检测结果判定标准 |
|---|
| 构建工具基础配置 | 前端 | 读取webpack/vite配置，检查Tree Shaking、压缩、指纹等核心配置 | 核心配置全开启则通过，缺失则预警 |
| 包体积异常检测 | 前端 | 生成依赖分析图，对比包体积与行业基准值，识别＞500KB冗余依赖 | 无超大冗余依赖则通过，否则预警 |
第二部分：需人工干预的优化项清单
核心特征：依赖业务场景、主观判断、跨端配置，工具仅能提供提示，需人工决策与执行，附明确操作指南与验证方式
1. 依赖后端/服务器配置的优化项
| 优化项 | 责任方 | 人工核心操作 | 验证方式（人工可执行） |
|---|
| DNS缓存TTL配置 | 后端/服务器 | 联系运维将TTL设为5-10分钟，避免过短或过长 | nslookup -type=SOA 域名，查看TTL值 |
| 启用HTTP/2或HTTP/3 | 后端/服务器 | 要求运维在Nginx/Apache配置HTTP/2（需SSL），大流量升HTTP/3 | Chrome Network面板Protocol列显示h2/h3 |
| 配置缓存响应头 | 后端/服务器 | 提供资源清单，要求JS/CSS设max-age=31536000，接口设no-cache | curl -I 域名/资源，查看Cache-Control字段 |
| 缓存跨域预检结果 | 后端/服务器 | 告知后端接口路径，要求配置Access-Control-Max-Age: 86400 | Network面板看OPTIONS请求响应头 |
| 服务器推送关键资源 | 后端/服务器 | 提供首屏资源路径，要求运维配置Nginx http2_push指令 | Network面板资源Initiator列显示Push |
2. 依赖业务场景判断的优化项
| 优化项 | 责任方 | 人工核心操作 | 判断与验收标准 |
|---|
| 内联首屏关键资源 | 前端 | 确定首屏页面，用critical工具提取Critical CSS并内联 | FCP较优化前缩短30%以上 |
| 小图标使用雪碧图 | 前端 | 筛选5个以上静态小图标，用SpriteSmith生成雪碧图并替换引用 | 图标请求数从N减为1，无视觉变形 |
| 第三方脚本必要性判断 | 前后端协同 | 列第三方脚本清单，与产品确认必要性，非必需则延迟/移除 | 移除后核心业务不受影响，加载速度提升 |
| 预加载资源有效性验证 | 前端 | 确认首屏必需资源，配置preload，对比加载完成时间 | 预加载资源完成时间早于首屏渲染时间 |
3. 依赖运行时动态行为的优化项
| 优化项 | 责任方 | 人工核心操作 | 验证方式（人工可执行） |
|---|
| 避免布局抖动 | 前端 | 重构DOM操作代码，先读属性再批量修改，用requestAnimationFrame包裹 | Chrome Performance面板无频繁Layout事件 |
| 动画元素独立图层 | 前端 | 为动画元素加will-change: transform或absolute定位 | Chrome Layers面板显示动画元素为独立图层 |
| 合理控制图层数量 | 前端 | 用Layers面板查图层数，移除非必要will-change属性 | 图层总数＜50个，无冗余图层 |
第三部分：工具与人工协同执行指南
流程协同：工具先扫描输出预警清单 → 人工筛选"需修复/无需修复/需后端配合" → 优先处理工具可验证的修复项
优先级排序：工具预警且影响LCP/FCP的项（图片格式、JS加载）＞后端配置类＞业务判断类
闭环验证：修复后工具复扫自动化项，人工验证业务项与跨端配置项，形成"扫描-修复-验证"闭环