相关名词解释
1.TTFB:timeforFirstByte首字节时间
2.FP:FirstPaint首次绘制
3.FCP:FirstContentfulPaint首次有内容的渲染
4.FMP:FirstMeaningfulPaint首次有意义的绘制
5.TTI:TimeTointeractive可交互时间
6.Longtasks:超过50ms的任务
7.SSRCSR:服务端渲染和客户端渲染
8.IsomorphicJS:同构化
简单理解
FP:仅有一个div根节点FCP:包含页面的基本框架，但没有数据内容FMP:包含页面所有元素及数据
先后顺序如图
首屏渲染相关性能度量数据
FP、FCP、FMP、TTI可以用下面的图直观的表现出来
注意
FP:”首次绘制“（FirstPaint）不包括默认背景绘制（例如浏览器默认的白色背景），但是包含非默认的背景绘制，与iframe。FCP:”首次内容绘制“（FirstContentfulPaint）包含文本，图片（包含背景图），非白色canvas与SVG。iframe:父级浏览上下文不应该知道子浏览上下文的绘制事件，反之亦然。这就意味着如果一个浏览上下文只包含一个iframe，那么将只有“首次绘制”，但没有“首次内容绘制”。
可以通过下面这行代码获得首屏渲染性能指标数据：
通过这行代码可以得到一个列表。列表中包含一个或两个PerformancePaintTiming对象。这取决于“首次内容绘制”是否存在。如图2所示：
从图3可以看到PerformancePaintTiming对象包含四个属性，这四个属性的值为：
name:如果是首次绘制则name为“first-paint”，如果是“首次内容绘制”则name为“first-contentful-paint”entryType:“paint”startTime:绘制发生的时间，该时间是相对于timeorigin的duration:0
可以使用下面的代码注册一个绘制观察器:
//性能度量结果对象数组constmetrics=[];if(PerformanceLongTaskTiminginwindow){constobserver=newPerformanceObserver(list={for(constentryoflist.getEntries()){constmetricName=entry.name;consttime=Math.round(entry.startTime+entry.duration);metrics.push({eventCategory:PerformanceMetrics,eventAction:metricName,eventValue:time,nonInteraction:true,})}})observer.observe({entryTypes:[paint]});}
几种常见web页面渲染方式对比
CSR客户端渲染
1.最近几年流行的SPA，webapp都是CSR模式，页面只有一个空div2.优点：（1）不依赖数据（2）FP时间最块；就是留了一个div挂载组件嘛（3）客户端用户体验好（4）内存数据共享3.缺点（1）SEO不友好（2）FCP、FMP慢；要各种发请求嘛；
预渲染
使用puppeteer或者rize.js提前渲染一遍，另存起来；这种方式太傻了，就不详细介绍了；具体可以看他们的官方文档；
SSR和同构
1.服务端渲染，服务器把内容全都拼好直接输出类似早些年的JSP,服务端用一套模板引擎2.服务器和客户端使用一套代码就是同构3.优点：（1）SEO友好（2）首屏性能高，FMP比CSR和预渲染都要快4.缺点：（1）客户端数据共享成本高（2）模板维护成本高
总结如下图
最优的渲染方式
1.SSR和CSR共存的模式，发挥两者的优势(1)刷新页面是SSR渲染，nodejs配合bigpipe(2)站内点击是CSR，不用vuerouter、reactrouter等等，直接用原生的a链接
补充知识点：Bigpipe
1.什么是bigpipe
存在很久的一种技术Facebook首创首屏快速加载的的异步加载页面方案前端性能优化的一个方向适合比较大型的，需要大量服务器运算的站点有效减少HTTP请求兼容多浏览器
2.能解决的问题
下载阻塞服务器与浏览器算力浪费
3.与传统Ajax相比，优点
减少HTTP请求数：多个模块更新合成一个请求请求数减少：多个chunk合成一个请求减少开发成本：前端无需多写JavaScript代码降低管理成本：模块更新由后端程序控制URL优雅降级：页面链接使用真实地址代码一致性：页面加载不劢态刷新模块代码相同
一句话总结：分块加载技术
4.判断的标志ResponseHeaders中Transfer-Encoding:chunked
5.koa-bigpipe阿里巴巴狼叔写的koa包
最后，查阅资料中看到一个大佬说的话，现在随便搜搜nodejs比较好的包，基本全都是两三年前的，侧面说明nodejs已经相对比较稳定了。而web端经过这几年野蛮生长，也逐渐能看出统一稳定的趋势。对我们来说实在是一件好事情！
参考文献：你应该知道的web性能信息采集指南科普NodejsBigpipeHTTP协议中的Transfer-Encoding:chunked