性能优化 - 你能说一说，为什么做了骨架屏，FCP的指标还是没有提升吗

难度级别：中高级及以上                               提问概率：80% 

---

FCP的全程是First Contentful Paint，是衡量网页性能的一个重要指标，很多人把FCP理解为元素内容首次渲染到浏览器上的时间。但由于现在比较流行的Vue或是React项目中，HTML文档最初只有一个id为app的DIV元素，只有把CSS和Javascript文件加载、解析、执行完成之后，才能讲最终的真实DOM内容填充到最初的DIV元素中。所以，但从前端角度来说的话，往DIV元素中填充真实DOM这一过程时间越久，导致网页的白屏时间就会越长，用户在这一等待的过程中非常容易跳出页面，这无疑带来了非常差的用户体验。

为了解决长时间的白屏问题，很多网站采用了提前加载骨架屏的方式。骨架屏就是采用DIV+CSS的方式，模拟首屏整体元素结构的轮廓，将这些内容提前放置于id为app的DIV元素中，在用户真正看到首屏内容之前，可以更快的看到骨架屏，所以可以把骨架屏更通俗的理解为非白屏等待页。不过虽然解决了长时间的白屏问题，而且骨架屏也是早于真正用户所需网页元素被渲染的，但其实FCP这个指标并没有得到提升。

究其原因，FCP指的是页面从开始加载到文本、图片或非空白canvas元素渲染完成的时间，所以如果是采用DIV+CSS的方式制作骨架屏的话，是无法满足测量条件的。基于这一条件，我们可以把骨架屏生成图片，如果图片体积比较大，再进行压缩处理，只要不是特别模糊不清即可。但考虑到下载和渲染图片仍然需要一定的时间，我们继续优化，将图片转换为base64图片的格式。还需要注意的是，base64图片编码后的字符串会很长，很可能造成HTML文档体积过大，所以一定要保证base64图片转换前的骨架屏图片体积尽量的小。

---

刷题思考

    这一小节涉及到了骨架屏、白屏以及FCP这个性能指标的知识点，这些知识点求职者一定要掌握好，在前端面试中考察频率非常高。除了FCP之外，还有个考察频次非常高的性能指标是LCP，这两个指标要结合着来整理记忆。

    需要注意的是，不管在日常工作中做了多少有关性能优化的工作，最终都需要落地到性能指标的提升上，如果没有指标数据的支撑，那么很可能所做的一些工作是徒劳的而自己却不知道。

---

类似考点

    在前端面试中，几个重要性能指标的理解以及如何优化是重中之重，面试官很可能还会提出以下问题，例如你能举例说明，网站的哪些行为会严重影响LCP的指标吗？例如你能说一说，项目中该如何使用performance来检测网站性能吗？例如你知道提升FCP指标的手段都有哪些吗？