上一篇主要说了FST的获取方法，这篇就看看其他的几个性能指标。
- 首字节时间
- Dom构建完成时间
- Dom Readly时间
- 页面完全加载时间
- 首屏时间
| 问题表象 | 问题分析 | 排查方向 |
|---|---|---|
| 首字节时间过长 | 该阶段耗时过长代表着服务器响应和返回的时间长。可以借助首字节时间之前的几个指标进行更具体的分析，包括redirectStart、domainLookupStart等。 | 重定向过多DNS 查询时间长TCP 连接时间长服务器性能差 |
| DOM构建时间过长 | 浏览器解析 HTML 构建 DOM 树的过程中，会遇到 JavaScript、CSS 等关键资源，而 JavaScript 资源默认会阻塞 DOM 树的构建，直接影响了该阶段的性能。 | 未对非关键的 JavaScript 脚本使用异步标记，或是在空闲时异步加载非关键脚本未对代码进行合理拆分，导致单个 JavaScript 脚本过大未优先加载当前页面所需的关键 JavaScript 资源未合理配置缓存策略 |
| DOM Ready时间过长 | 该阶段内要完成 DOM 和 CSSOM 的构建，因此还需考虑 CSS 资源的阻塞因素。 | 未尽早引入关键 CSS 资源未对 CSS 内容进行合理拆分，导致关键内容和非关键内容混合在一起未合理配置缓存策略未合理使用 CSS import 指令未对非关键的 CSS 资源使用媒体查询等方式消除阻塞 |
| 首屏时间过长 | 首屏时间由首屏内容加载完成的时间决定。 | 未使用资源提示尽早下载首屏内容相关的资源未优先发送首屏内容相关的请求未对首屏外的内容使用异步加载或懒加载 |
| 完全加载时间过长 | 该阶段内要完成页面上所有资源的加载，资源加载的方式和资源的数据量都会影响该阶段的性能。 | 未对资源进行合理压缩未合理配置缓存策略未对图片等资源进行合理优化 |
依据上表，Web性能优化的关键在于尽快下载处理关键资源，同时消除非关键资源的阻塞，让用户花在网站上的大多数时间是在使用时等待响应，而不是等待资源的加载。
文章评论