前端相关名词解释
1.TTFB:time for First Byte 首字节时间
2.FP:First Paint 首次绘制
3.FCP:First Contentful Paint 首次有内容的渲染
4.FMP:First Meaningful Paint 首次有意义的绘制
5.TTI:Time To interactive 可交互时间
6.Long tasks:超过50ms的任务
7.SSR && CSR:服务端渲染和客户端渲染
8.Isomorphic JS:同构化
9. LCP（全称“Largest Contentful Paint”） 表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
简单理解
FP: 仅有一个div根节点
FCP: 包含页面的基本框架，但没有数据内容
FMP: 包含页面所有元素及数据
相关顺序如下
首屏渲染相关性能度量数据
FP、FCP、FMP、TTI可以用下面的图直观的表现出来
FP: ”首次绘制“（First Paint）不包括默认背景绘制（例如浏览器默认的白色背景），但是包含非默认的背景绘制，与iframe。
FCP:”首次内容绘制“（First Contentful Paint）包含文本，图片（包含背景图），非白色canvas与SVG。
iframe:父级浏览上下文不应该知道子浏览上下文的绘制事件，反之亦然。这就意味着如果一个浏览上下文只包含一个iframe，那么将只有“首次绘制”，但没有“首次内容绘制”。
First Paint 到 Largest Contentful Paint
如果实现Nginx,懒加载/代码分片,CDN后，light house评分基本都能到90以上
First Paint - First Contentful Paint
要处理这一部分，就需要理解一个前置背景知识
无论是Vue还是React，在脚手架搭建起来后，都是mount在html某个DOM上，以React 为例子：
create-react-app构建的项目public目录里的index.html会是这样的
<body>
<div id="root"></div>
</body>实际上项目里的index.js也是挂载在这个root元素上，也就意味着当该页面正确挂载所有js之前，都是渲染的空
<div id="root"></div>html页面
有了上述的前置知识，是不是有想法了大家，其实说来也简单，就是在FP之前的事情我们决定不了（一定程度上，就是服务器加载基本html的速度）而FP之后到FCP之间这段时间，我们可以通过一些方法来展示内容给用户
数据说话
如上图，约224ms左右，完成html资源的加载，相当于用户只等待了0.224s就看到页面有反应了，且此时的样子，是可以作为一个挺好的“广告时间”，比如加上自己家的logo等
如果有杠精说这个0.224s优化，那我就只能说：是不是值得投入人力物力去优化这个0.224s了，毕竟这涉及到DNS解析，网站服务器响应，网络路由等问题了
First Contentful Paint - Largest Contentful Paint
接下来就是FCP到LCP部分了，有一些聪明又爱偷懒的小伙伴肯定会想：其实就保持FP的预加载动画直到LCP就好啦。
说实话是可以的哈，但既然是在谈优化，就看“感知上”能怎么优化到最好吧。
之前有提到“代码分片/懒加载"，其实可以做到：
预加载动画 --> 分片加载的suspend动画 --> LCP
此时当首屏加载的时候，会先加载预加载动画，然后加载代码分片的suspend动画，最后渲染真实需要的DOM
- 优势在于，在弱网环境下，用户可以感知得到页面在加载中而不是一个动画一直在load，安抚用户
分片加载的suspend动画一般可以用骨架屏来实现
即：0.2s白屏 -> 0.6s预加载动画 -> 0.2s代码分片骨架屏动画，就完成了LCP
转载链接：https://www.jianshu.com/p/d13bb9939c90
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
