HTML5 Performance API 不提供内存指标，专注测量 DNS 查询、TCP 连接、资源加载、DOM 解析、首次渲染等时间维度节点；需拆解加载链路，结合 timing、Resource Timing 定位瓶颈，并通过预连接、预加载、缓存、异步化、监控真实体验优化核心业务。
HTML5 Performance API 本身不提供内存指标，它专注测量时间维度上的关键节点——比如 DNS 查询、TCP 连接、资源加载、DOM 解析、首次渲染等。要优化核心业务加载链路，关键是把整个加载过程拆解成可量化、可干预的阶段，再结合浏览器行为和用户感知做针对性改进。
看清加载链路：用 performance.timing 和 Resource Timing 定位瓶颈
通过 window.performance.timing 可获取页面级时间戳，例如：
-
DNS 查询耗时：
domainLookupEnd - domainLookupStart，超过 100ms 值得关注，说明域名解析慢或跨域过多； -
TCP 连接与 SSL 握手：
connectEnd - connectStart，若 > 300ms，可能是服务端响应慢、未启用 HTTP/2 或证书链过长； -
首字节时间（TTFB）：
responseStart - requestStart，反映后端处理能力，持续高于 500ms 需查服务逻辑或 CDN 配置； -
白屏到首屏渲染（FP/FCP）：现代浏览器支持
performance.getEntriesByType('navigation')[0]获取更精确的firstPaint和firstContentfulPaint。
对核心业务资源（如订单接口、商品列表 JS、关键 CSS），用 performance.getEntriesByType('resource') 查看其 duration、transferSize 和 decodedBodySize，识别是否因体积大、未压缩或缓存失效导致加载拖慢整条链路。
加速关键资源加载：预连接 + 预加载 + 缓存策略协同
核心业务往往依赖特定域名（如 api.example.com）和关键脚本（如 checkout.js）。光靠 async 不够，需主动引导浏览器：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中添加<link rel="preconnect" href="https://api.example.com">，提前建立 DNS、TCP、TLS 连接； - 对立即执行的 JS/CSS，用
<link rel="preload" as="script" href="checkout.js">，避免发现资源晚、下载滞后； - 对非首屏但业务强相关的资源（如支付 SDK），用
<link rel="prefetch">，利用空闲带宽提前获取； - 确保所有静态资源返回合理的
Cache-Control: public, max-age=31536000，并配合内容哈希命名，实现长期强缓存。
减少主线程阻塞：异步化 + 拆分 + 启动即用
核心业务逻辑常集中在初始化阶段，容易因 JS 执行过长造成 TTI（可交互时间）延迟。应避免“一股脑加载+同步执行”：
- 将非首屏、非关键的业务模块（如客服浮窗、分享组件）改为动态
import()，按需加载； - 对体积大的工具库（如日期处理、加密模块），提取为独立 chunk，不混入主包；
- 使用
type="module"加载主逻辑，天然支持defer行为，并便于构建工具做 tree-shaking； - 核心接口调用尽量在 DOMContentLoaded 后立即发起，而非等待所有 JS 下载完成——可通过内联轻量初始化脚本触发。
监控真实体验：不只是数字，更是用户感知
Performance API 提供的是实验室数据，而真实用户受设备、网络、后台进程影响更大。需结合以下信号判断链路是否健康：
- 若 FCP > 3s 或 TTI > 5s，优先检查是否有未压缩的大图、未拆分的巨型 JS 包；
- 滚动卡顿、动画掉帧，大概率是主线程被长任务占用，可用
performance.getEntriesByType('longtask')定位 JS 执行块； - 用户点击“立即购买”后无响应，可能是事件监听器绑定晚于用户操作，建议用事件委托或确保核心交互逻辑早于 DOM 构建完成；
- 重复访问仍慢，检查 Service Worker 是否错误缓存了动态接口响应，或 Cache API 未正确排除 API 请求。
