浏览器渲染
Dev tools
等待 HTML 文档返回，此时处于白屏状态。
对 HTML 文档解析完成后进行首屏渲染，因为项目中对 id="app 加了灰色的背景色，因此呈现出灰屏。
进行文件加载、JS 解析等过程，导致界面长时间出于灰屏中。当 Vue 实例触发了 mounted 后，界面显示出大体框架。
调用 API 获取到时机业务数据后才能展示出最终的页面内容。
4 个页面渲染的关键指标
FP
FCP
FMP
FP：仅有一个 div 根节点。
FCP：包含页面的基本框架，但没有数据内容。
FMP：包含页面所有元素及数据。
仍然以 Vue 为例， 在其生命周期中，mounted 对应的是 FCP，updated 对应的是 FMP。那么具体应该使用哪个生命周期的 HTML 结构呢？
