web前端面试题附答案001-说一说你对FCP这个指标的理解

答：

一：首先FCP指标就是用户从输入url到看到页面内首个图片、文字或非空白svg canvas内容的时间

二：我觉得FCP指标既然是从用户输入url开始，那么其实就包含了1 用户到HTML落地页所在服务器的时间，这里受用户网速影响；包含了2 服务器的nginx路由配置指向我们所要访问页面的时间，这里受路由匹配，限制等影响；包含了3 服务器处理HTML落地页的逻辑时间，比如是否需要在HTML落地页渲染一些变量等；包含了4 服务器返回HTML落地页的时间，这里受用户网速，HTML体积大小的影响（因为HTTP2有gzip压缩，一个200K的HTML落地页，被返回前压缩到了50K，等用户浏览器下载下来后，其实下载传输的是50K，但之后又需要解压缩到200K然后被浏览器所识别）；包含了5 HTML落地页head头内容，我们知道HTML是从上向下被渲染执行的，那么head头里的无用dns预解析代码，多余的css js代码，都会是一个执行的过程。那么一直到body部分，我们设置了骨架屏，然后被用户看到。整个这个过程被认为是FCP。

三、所以抛开服务端那一块单纯的说前端FCP是不现实的，理解起来也不透彻。但用户网速我们很难去改变，做为前端开发人员服务端那一块我们也只能是起到推动的作用，其实我们前端开发人员所能真正掌控的还是从下载了HTML开始这段内容的。

四、FCP这个指标是如何产生的呢？其实如果说前端FCP这块呢，如果只是做一个静态HTML页面，或者是前后端还没有分离的太严重的时候，FCP这个指标值是很小的，因为后来vue和react等框架的盛行后，大家习惯于在HTML落地页写一个

，而不管我们的项目有多少组件，最终都要innerHTML到这个div中去。而我们的业务js+css下载需要时间，下载后解压缩需要时间，然后被浏览器所识别后执行又需要时间，这就造成了大量的白屏时间，甚至说之前的jquery时代白屏时间都要比这时间短

五、我在项目中最早是通过一些空白div元素制作骨架屏，然后在骨架屏块元素内填充大量的灰色块，骨架屏主要是照着首屏的dom内容制作的，希望这样可以让用户看到内容，觉得我们还在努力加载，使用户可以有等待的预期。但我后来通过测速工具发现，这种情况并不理想，想想也是，这些div的dom内容再加css样式要组成dom树，然后再被浏览器所渲染，也挺费时间的。后来通过查资料发现FCP这个指标，浏览器更希望捕捉到的是文字，图片或是非空白的svb canvas图片。后来我通过对比，觉得写一个请等待的文字，或者弄一个loading图效果都挺好的，但从用户体验上讲其实还是不如骨架屏更直观。后来经过摸索，我将骨架屏生成图片，并且降质，最终再生成base64图片再次使其体积减小。不断的降低了FCP指标时间。

结语：其实面试很多时候要讲气场的，所谓气场就是你问的我很懂。怎么证明自己懂呢，面试官问的问题你先回答概念性的东西，然后说一说自己的理解，光理解还不够，因为但凡面试题，其实他不光是一道题，而是开发工作中的某一项痛点或者问题，而被无数人总结出来的一个精炼的问题，所以你最好还是能说一些自己在工作中使用情况。说一说优缺点。

面试是一个3分运气，7分能力的考试，通过大量面试我发现95%的人其实入职后是可以正常工作的，但有95%的人却过不了面试。那么我希望我的团队可以帮助更多的人提升这7分面试能力

而本次的FCP只是前端性能优化指标里的一个点，面试官有的会问前端性能优化整个的问题，也有的会从单方面入手，但面试只是一次考试，不是上手开发，所以我们尽量给大家后续带来更多适合面试讲的东西，尤其是疫情了，线上面试居多，希望大家可以把问题更好的讲出来，讲出你自己的气场。