每日一博 | 用 Chrome devTools performance 分析页面如何渲染
页面是如何渲染的?通常会得到“解析 HTML、css 合成 Render Tree,就可以渲染了”的回答。但是具体都做了些什么,却很少有人细说,我们今天就从 Chrome 的性能工具开始,具体看看一个页面是如何进行渲染的,以及进行页面优化时需要关注哪些指标。 以“老二次元”网站 bilibili 为例,我们将通过分析 performance 面板,串联起 Chrome 页面渲染流程,以及页面的部分量化指标的含义,来看页面具体是如何渲染的。 获取performance数据 首先,打开Chrome devTools, 选择 performace面板,点击录制按钮开始录制。 之后为了防止我们分析页面时出现无关的干扰,我们通过以下步骤降低干扰项: 1、打开 Chrome 无痕模式。 2、关闭所有在 Chrome 无痕模式下启用的拓展(如果有的话)。 3、在地址栏输入 www.bilibili.com 前,先打开 devTools,选择 performance 面板,点击录制按钮。 4、在已经录制的情况下,地址栏回车,请求 B 站,大概 10s 后,停止录制。 我们从上到下,将图分成以下几块,如...
