如何优化从FP到FCP再到FMP产生的影响

前情提要

• 首页空白的问题想必作为Vue开发者应该并不陌生。在面试中这也是时常会被问到的问题以及解决方案是什么？
• 针对chrome浏览器的开发者工具中的Performance(性能)功能，应该有一部分小伙伴并不知道吧，也没有想过怎么去利用它。

如何查看网站的性能？

为什么会提到首屏加载的时间问题

• 其实关于首屏加载的时间所产生的问题之所以被搬到桌面上说，主要是因为当前三大主流前端框架均采用的单页面应用。也就是说一整个项目的文件都在一个页面里，加载的时候自然也就需要全部加载进来才行。
• 这不同于以前的一个页面就是一个html文件，那会的html内容基本上都很少，基本上谈不上什么首屏加载的时间问题，都是嗖的一下就搞定了。
• 这就是这个问题为什么会出现的原因。

什么是FP

• FP的全称是：First Point。意为首次绘制。
• 此时html已经加载完毕，开始首次绘制

什么是FCP

• FCP的全称是：First Contentful Point。意为首次内容绘制。
• 此时css和js已经加载完毕，开始进行内容绘制

什么是FMP

• FMP的全称是：First Meaningful Paint。意为首次有效绘制。
• 理论上此时是ajax请求获取数据之后，进行有效的绘制。但实际上是通过一种算法来猜测某个时间点可能是 FMP。与LCP（Largest Contentful Paint ）类似，甚至会出现重合，即为同一节点。
• 补充：LCP是最大文件的内容加载

扩展

• 在图中我们可以看到还有LCP, DCL, L。而对于LCP可以认为是FMP，也就是最大元素的开始绘制时间点。
• DCL，全称是DOMContentLoading，当HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，不用等待样式表、图像和子框架的完成加载.
• L是onLoading，意识是页面所有的资源加载完成，此时触发页面的onloading事件。

首屏加载的时间

• 在最后一张图中，整个时间轴的时长是浏览器性能分析模块的在对页面进行性能分析的时候的总耗时。
• 而首屏加载时间便是从FP到FMP或者DCL的时间

如何优化？

• 有的项目可能因为接口请求，或者文件大小等问题导致页面加载时间较长，那么我们该怎么优化呢？毕竟用户体验永远是第一位的。
• 优化方法：
  • 对于脚手架项目开启GZIP压缩。压缩后的文件大概是原文件的四分之一，不同的文件压缩效率有所不同。
    • 注意事项：除了要在webpack中开启GZIP压缩之外，还在要nginx的配置文件中开启该配置，否则无效
  • 启用骨架屏，在等待屏幕的首次加载时，先展示几乎不需要额外资源的骨架屏，等页面渲染成功后再进行替换成真正的内容。
  • 增加loading框，告诉用户正在加载中，有限的提升用户体验。
  • 老生常谈的采用路由懒加载，这样可以减少首屏加载的文件大小，进而减少首屏渲染完成的时间。
  • 采用SSR，也就是服务端渲染，后端直接返回解析好的文件供浏览器直接使用，减少了浏览器的解析时间
  • 对于单页面应用，默认都是通过牺牲首次页面加载的时间，来换取之后操作所需要耗费的加载文档的时间。除了上面的采用路由懒加载之后，还可以通过删除webpack中的预加载配置来实现首屏加载耗时的减少。但是通用的首屏加载快了，后面的页面加载就会慢了。页面加载的时间肯定是要耗费的，就是看开发者怎么根据实际情况来做一个前后的平衡。

总结

本次的重点主要是讲如何优化首屏加载慢的问题，其中涉及到的关于浏览器的Performance模块讲解的不是很详细，之后会单独写篇文章进行讲解。