首屏性能优化实战：一次性能故障的排除之路

首屏性能优化实战：一次性能故障的排除之路

缘起

最近在帮一个同事看首屏加载慢的问题。以此文做个小记录。

目录大纲

• 看首屏性能问题简单步骤介绍
• 看资源的加载时间线
• 首先了解一下 HTML页面的生命周期
• 分析首屏的画面，在什么时候应该出现
• 看总共加载了多少资源，多大
• 首屏渲染时间点判断
• 看 HTTP 请求
• 关注资源的加载瀑布图
• 找出罪魁祸首
• 找到罪魁祸首后，优化相关资源
• 分析首屏的画面，在什么时候应出现
• 优化之后再次查看瀑布图
• 最后优化总结

正文

看首屏性能问题简单步骤介绍

• 查看首屏的画面，在什么时候应该出现
• 看总共加载了多少资源，多大
• 看 HTTP 请求
• 关注资源的加载瀑布图
• 找出罪魁祸首
• 找到罪魁祸首后，优化相关资源

看资源的加载时间线

这里我们看下资源的加载时间线，从网络请求开始到资源加载完成，整个过程经历了哪些阶段。

首先了解一下 HTML页面的生命周期

• 浏览器接收 HTML 文档。
• 浏览器开始解析 HTML 文档。
• 浏览器构建 DOM 树。
• 浏览器构建渲染树。
• 浏览器开始布局渲染树。
• 浏览器开始绘制渲染树。

分析首屏的画面，在什么时候应该出现

• 在浏览器开始布局渲染树的时候，首屏应该出现。
• 在浏览器开始绘制渲染树的时候，首屏应该完全出现。

看总共加载了多少资源，多大

• 使用 Chrome DevTools 的 Network 面板查看。
• 总共加载了 30 个资源，大小为 1.2MB。

首屏渲染时间点判断

• 使用 Chrome DevTools 的 Performance 面板查看。
• 首屏渲染时间点为 1.5s。

看 HTTP 请求

• 使用 Chrome DevTools 的 Network 面板查看。
• 总共发起了 10 个 HTTP 请求。
• 其中有 5 个请求是并发的。

关注资源的加载瀑布图

• 使用 Chrome DevTools 的 Network 面板查看。
• 可以看到资源的加载瀑布图。
• 从瀑布图中可以看出，有几个资源的加载时间很长。

找出罪魁祸首

• 从瀑布图中可以看出，有一个资源的加载时间很长，这个资源是一个 JavaScript 文件。
• 这个 JavaScript 文件是第三方库，用于实现页面的某个功能。

找到罪魁祸首后，优化相关资源

• 将这个 JavaScript 文件放到页面底部加载。
• 使用 CDN 加载这个 JavaScript 文件。

分析首屏的画面，在什么时候应出现

• 优化之后，首屏渲染时间点提前了 0.5s。
• 首屏现在在 1s 时出现。

优化之后再次查看瀑布图

• 优化之后，瀑布图中那个 JavaScript 文件的加载时间缩短了。

最后优化总结

• 优化之后，首屏渲染时间点提前了 0.5s。
• 首屏现在在 1s 时出现。
• 页面加载速度提高了 20%。