如何通过 Chrome Dev Tools 进行详细页面性能分析？

本文共计3110个文字，预计阅读时间需要13分钟。

背景：我们经常使用Chrome DevTools进行开发调试，但很少知道如何利用它来分析页面性能。

文章内容：本文将详细说明如何使用Chrome DevTools进行页面性能分析和性能报告数据的解读。

背景

我们经常使用 Chrome Dev Tools 来开发调试，但是很少知道怎么利用它来分析页面性能，这篇文章，我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读。

分析面板介绍

上图是 Chrome Dev Tools 的一个截图，其中，我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能，这里简单介绍一下：

• Network : 页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(wq.jd.com/wxportal/index_v6 ,页面加载回来的 document 就是一个渲染好的 html 页面
• 图片优化，部署在不同的CDN域名下，用webp/dpg等格式图片，图片切割等
• http 协议有部分采用 http2，多路复用，加快资源加载
• 小 logo 使用base42来处理
• 按需加载，菜单先加载第一屏的图标，滑动到第二屏时再加载第二屏的图标

而从图片，个人认为，还可以考虑用上的一些性能优化手段有：

• html 的大小为138kb,Content Download的时间为七百多毫秒，感觉可以拆分一下页面，非一二屏的内容分开加载。