首屏渲染优化

其实更具体点，应该是：首次加载首屏渲染优化，原因是某些应用，比如微信有缓存机制，首次加载了，第二次进入都会先加载本地缓存。

言归正传，首屏渲染加载优化，其实通俗说起来就是：“刚进页面加载快点”。其实这话也很笼统，专业点来说，其实是有如下几个指标的：

FP（全称“First Paint”，翻译为“首次绘制”）
FCP（全称“First Contentful Paint”，翻译为“首次内容绘制”）
FMP（全称“First Meaningful Paint”，翻译为“首次有效绘制”）
LCP（全称“Largest Contentful Paint”）表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
TTI（全称“Time to Interactive”，翻译为“可交互时间”）表示网页第一次完全达到可交互状态

有点专业，但其实配合英文也是挺好理解的

优化首屏渲染不外乎几个思考点：

减少首屏渲染的体积大小，尤其是SPA应用，不加处理往往体积都会比较大
减少首屏渲染从开始到可交互的时间
从开始到可交互的时间里，其实dom已经加载了，在这里可以进行一些UI上的渲染，让客户看得到页面变化，让客户感知到确实网站是在加载中的

第一二点在我的其他文章有详细赘述了基本的实现方案，不外乎是：nginx服务器配置、代码级别的优化比如代码分片、懒加载、CDN等

这里想主要讲的是第三点，即实现用户感知上的优化，从空白到有正确元素渲染的时间

现状

一般的SPA，从技术上决定了不加任何处理的情况下，现状是：

FP到LCP，为首屏空白
LCP到TTI，由于基本采用异步交互形式，此时页面基本会已经加载好了页面的所有元素

所以了，优化用户感知上的体验，这里主要是探讨

FP到LCP的这个短短的时间，虽然短，但是优化后，体验感知会更优（起码不是白屏一大段时间了吧，虽然实际上正常情况下，最多也才0.5s左右）

First Paint 到 Largest Contentful Paint

题外话
其实，基本上参考我之前的文章实现Nginx,懒加载/代码分片,CDN后，light house评分基本都能到90以上

Light House评分
而这里要探究的，是即使在这基础上，再次进行体验的优化，也就是所谓的"1s甚至更短时间"之内的事情

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之间这段时间，我们可以通过一些方法来展示内容给用户

比如，京东的H5，淘宝H5，知乎H5，都有对应初次loading的动画，一般是自家的Icon，有兴趣的话，网购的时候自己留意下

数据说话