背景介绍
首屏渲染是非常常见的需要优化的场景，而类似VUE和REACT等SPA设计的框架往往由于把许多的内容都集中在一个页面的特点，导致首页渲染较缓慢，故需要进行渲染的优化，以下主要介绍几种优化的方案，以实现首屏渲染加快的目的。
注意：所谓的性能优化并不是让浏览器运行的更快，而是为了达到让用户更快能与页面进行交互的目的而进行的一系列措施。
渲染关键点简介
FP（First Paint：首次绘制）：表示浏览器首次绘制出像素的时间点
FCP（First Contentful Paint：首次内容绘制）：表示浏览器首次渲染内容，内容可以是文本，图片等，但不算入空白的canvas 或SVG。
FMP（First Meaningful Paint：首次有效绘制）：表示首次渲染有意义的内容的时间，这是一个较为重要的衡量指标，对于什么是有意义并无非常明确的定义， 而从FP到FMP这个过程均为白屏 。
LCP（Largest Contentful Paint：最大内容区域绘制）：指页面中最大的内容模块被渲染出来的时间，一般会是内容最多，占用屏幕比较多的模块渲染出来的时间。（由于FMP的定义是较为复杂的，比如其是求的近似时间点，不一定FMP渲染时就是有用的内容，故LCP往往被认为是较好的一种衡量点【展现出产品主要价值的点】）
TTI（Time to Interactive：可交互时间）：表示用户能与界面进行交互的时间点，是用户真正能与页面交互，产生互动价值的点。（我们认为一款软件如果要产生价值就需要与用户进行互动，而互动的方式多样，如点击，如输入等等，如果只作展示对用户产生的效果是往往不如交互的）
FID（First Input Delay：首次输入延迟） 表示用户首次与软件进行交互时，软件给予反馈的耗时。
优化方法
减少体积
主要目的是减少项目（或者首页）的加载体积，往往在项目打包时进行干预，显而易见的是如果项目需要加载的内容减少时，其渲染时间也会相应的降低。
组件的按需引入：在项目中往往会使用到各种的UI组件，而UI组件往往提供按需引入的引导，如图为antD的按需引入指导。
Tree Shaking：在引入模块时只引入需要的部分，不同与1所介绍的按需引入模块，此处是按需引入模块中所需的部分，例如常常使用工具（util）模块，而工具类中并非所有东西都能被用上，故对不需要的部分进行剔除。
如：工具类中有方法A，B，C；在使用中虽然引入了工具类，不过只要A方法，因此就需要剔除B，C。
对代码进行复用性优化：减少重复代码自然能减少项目的体积，无论是网络传输，还是渲染都有一定的积极作用。
路由懒加载：这是一种常见的做法，把暂时用不到的页面不进行加载，在需要用到时才去引入（在许多打包工具中，如果使用了路由懒加载技术，其会把懒加载部分的内容单独打包为不同的文件，这样子就减少了主线文件的体积，等主线文件需要使用时才把需要的文件引入，能减少主线文件的渲染时间）
加快网络传输
主要通过把一次性大量请求分为在不同时段多次小数据请求，或者把请求的体积减少，或者让请求连接加快等方式，从网络传输的层面加快渲染的速度。
Gzip压缩：对项目进行压缩，使得项目的体积显著减少，这样子能使得请求到响应所需的网络传输时间减少，能更快开始渲染（注意：压缩了项目不会让渲染的时间减少，只是会让网络传输的时间减少，因为渲染的结构与内容没发生根本性的改变）
CDN支持：把项目部分的依赖抽离，变为CDN引入的方式，既让项目的体积减少，又让请求依赖时的时间减少（因为CDN是就近请求的）
资源预加载perload · 资源预读取prefetch：
preload是指提升资源加载的优先级，让部分资源首先加载（认为是重要的资源），加载早的目的是为了渲染早，能让重要的内容得到较快的展示或者使用。
prefetch是让资源处于支线读取（不阻塞主线程），能在浏览器闲时加载所需的内容。
图片优化：图片懒加载，或者对小图片进行base64编码处理，主要是为了减少网络请求的大小。
3. 其他方法
此种方法较多，以下介绍两种最常用的以供参考
骨架屏：让页面的骨架能在FP阶段就进行展示，是一种让用户提前感知到页面存在的一种方法，主要是减少白屏的时间，TTI时间点并不一定会提前。
SSR：这仿佛也不属于优化的范畴了，直接更换了渲染方式，让服务端渲染完成后才返回给页面，主要服务端渲染能使用内网资源，内网请求是比外网要快的，所以其资源的请求时间是远小于客户端的，而且服务器的性能往往较强，渲染时间也会较为理想。