首屏性能优化

1 前言

首屏的几个时间概念
1.TTFB:time for First Byte 首字节时间
2.FP:First Paint 首次绘制
3.FCP:First Contentful Paint 首次有内容的渲染
4.FMP:First Meaningful Paint 首次有意义的绘制
5.TTI:Time To interactive 可交互时间
6.Long tasks:超过50ms的任务
7.SSR && CSR:服务端渲染和客户端渲染
8.Isomorphic JS:同构化

image.png

2 性能

页面渲染的步骤： 获取资源 -> DOM树-> Render树->Layout->Paint
根据关键路径渲染法，主要有以下几个元素影响页面性能及对应的方案

影响因素	解决方案
请求资源的数量	合并css,png,js等静态资源，减少请求次数； 使用缓存
请求资源的大小	文件压缩； 启用gzip
请求资源的时机	CSS要尽早下载，因为会影响DOM渲染； JS可以使用预加载等异步方式延后加载； 影响首次内容渲染的关键资源尽早加载； 资源文件按需加载
javascript
图片资源	小图片转换成base64，减少网络请求
HTML DOM	减少DOM层级结构，降低绘制DOM树及CSSDOM的成本