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的成本 |
网友评论