【转】前端黑科技：美团网页首帧优化实践

前端黑科技：美团网页首帧优化实践

浏览器渲染

Dev tools

• 等待 HTML 文档返回，此时处于白屏状态。

• 对 HTML 文档解析完成后进行首屏渲染，因为项目中对 id="app 加了灰色的背景色，因此呈现出灰屏。
  进行文件加载、JS 解析等过程，导致界面长时间出于灰屏中。

• 当 Vue 实例触发了 mounted 后，界面显示出大体框架。

• 调用 API 获取到时机业务数据后才能展示出最终的页面内容。

4 个页面渲染的关键指标

FP

FCP

FMP

• FP：仅有一个 div 根节点。

• FCP：包含页面的基本框架，但没有数据内容。

• FMP：包含页面所有元素及数据。

仍然以 Vue 为例， 在其生命周期中，mounted 对应的是 FCP，updated 对应的是 FMP。那么具体应该使用哪个生命周期的 HTML 结构呢？