后续陆续推出大学生解惑系列文章,欢迎把疑惑发给我
答:
一:首先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落地页写一个<div id=”app” />,而不管我们的项目有多少组件,最终都要innerHTML到这个div中去。而我们的业务js+css下载需要时间,下载后解压缩需要时间,然后被浏览器所识别后执行又需要时间,这就造成了大量的白屏时间,甚至说之前的jquery时代白屏时间都要比这时间短
五、我在项目中最早是通过一些空白div元素制作骨架屏,然后在骨架屏块元素内填充大量的灰色块,骨架屏主要是照着首屏的dom内容制作的,希望这样可以让用户看到内容,觉得我们还在努力加载,使用户可以有等待的预期。但我后来通过测速工具发现,这种情况并不理想,想想也是,这些div的dom内容再加css样式要组成dom树,然后再被浏览器所渲染,也挺费时间的。后来通过查资料发现FCP这个指标,浏览器更希望捕捉到的是文字,图片或是非空白的svb canvas图片。后来我通过对比,觉得写一个请等待的文字,或者弄一个loading图效果都挺好的,但从用户体验上讲其实还是不如骨架屏更直观。后来经过摸索,我将骨架屏生成图片,并且降质,最终再生成base64图片再次使其体积减小。不断的降低了FCP指标时间。
结语:其实面试很多时候要讲气场的,所谓气场就是你问的我很懂。怎么证明自己懂呢,面试官问的问题你先回答概念性的东西,然后说一说自己的理解,光理解还不够,因为但凡面试题,其实他不光是一道题,而是开发工作中的某一项痛点或者问题,而被无数人总结出来的一个精炼的问题,所以你最好还是能说一些自己在工作中使用情况。说一说优缺点。
面试是一个3分运气,7分能力的考试,通过大量面试我发现95%的人其实入职后是可以正常工作的,但有95%的人却过不了面试。那么我希望我的团队可以帮助更多的人提升这7分面试能力
而本次的FCP只是前端性能优化指标里的一个点,面试官有的会问前端性能优化整个的问题,也有的会从单方面入手,但面试只是一次考试,不是上手开发,所以我们尽量给大家后续带来更多适合面试讲的东西,尤其是疫情了,线上面试居多,希望大家可以把问题更好的讲出来,讲出你自己的气场。