例子

百度翻译页面

图示顺序为: FP(first paint) -> FCP(first contentful paint) -> FMP(first meaningful paint) -> DCL -> L -> LCP(largest contenful paint)

本地服务器某页面

图示顺序为：FP -> FCP -> FMP -> LCP -> DCL

没有L ！！！

没有ui的页面

图示顺序为：L -> DCL

nextjs

图示顺序为：DCL -> FP -> FCP -> LCP -> L

猜测

由上述实际结果可知，并无固定顺序。笔者之前一直有，认为dcl 和 l 有确定顺序这种错误认知。

由于部分界面为自己的项目，知道项目大概情况。猜测，影响timing顺序的可能原因之一是渲染方式。

笔者不懂这方面就仅做简单介绍。

ssr 服务端渲染
csr 客户端渲染
rehydration 在服务端渲染DOM树和数据的基础上，浏览器端利用js再渲染。next.js prerendring 在构建时生成静态HTML和页面初始状态。gatsby。 static 静态化。需要对url生成单独的html。

如果遇到这方面课题再深究。

perfomace下方的 jsheap,document,nodes,listeners也是指标参数，可以帮助优化哦。