前言
从网页控制台分析FP，FCP，LCP，DCL，L的触发时间，以及讨论如何优化。
名词解释
| 名词 | 全称 | 解释 |
|---|---|---|
| FP | firstPaint | 首次绘制 |
| FCP | firstContentfulPaint | 首次内容绘制 |
| LCP | largestContentfulPaint | 最大内容绘制 |
| DCL | domContentLoaded | dom内容解析完成 |
| L | loaded | 页面的load事件 |
触发顺序
FP==>FCP==>LCP ，这三个是按照这个顺序来的，其余DCL跟L需要根据实际场景分析才知道的。 对此截图分析了2个页面，分析下触发顺序。
上面主要是分析了www.baidu.com 和一个本地静态的页面（无内容）的performance数据，从图中可以看到共同点：先触发FP，然后FCP，最后LCP。不同点：DCL跟L的触发顺序不一致的。
具体分析
- FP,FCP,LCP三者是指页面的一个状态，所以他们是按顺序触发的。FP之前叫做白屏时间，FP到FCP是dom内容绘制阶段，FCP到LCP是最大的dom元素绘制阶段(一般不做优化的化，两者时间是一致的)。
- DCL和L，一般来说都是DCL在前，极少部分页面是L在前面。
优化FP
FP关键点：
- 网络速度
- html的页面中的js加载位置放到最后
- 使用prefetch，pre-dnsfetch,preconnect 等方式提前操作连接和资源。
- script 使用defer ，sync，不影响dom跟css的解析。
优化FCP
FCP关键点：
- 预加载js
- 资源懒加载。
优化LCP
可以做一个loading图，让用户感知更好点。
优化DCL
dom解析完成，实际上 无优化的点。
优化L
属于页面的整体优化。
- 首页资源分割+懒加载
- 预解析+预连接
- http1.x==>http2.0
- 资源开启gzip压缩，js/css文件压缩
- 使用http缓存或者service worker
总结
想要完整的优化一个网站，需要从各个方面优化，从缓存开始，然后是dns解析，到http的连接+数据传输,还有服务端处理时间（TTFB），然后到html解析。 html解析过程优化，主要分为延迟执行不操作dom的js，高优先级加载操作dom的js。最后还有一个页面的性能优化，减少重绘和重排的过程，同时可以设置passive加快响应速度。
