前端页面优化指南

1.TTFB

• 全称：首字节时间 (Time To First Byte)

是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间（包括DNS、socket连接和请求响应时间），是能够反映服务端响应速度的重要指标，获取在接收到响应的首字节前花费的毫秒数

• 如图 结合chrome DevTools

  
  image.png

• 优化

1.减少DNS查询(减少重定向)
2.使用CDN
3.提早Flush
4.添加周期头（缓存策略，包括浏览器和服务器缓存）

2.TTSR

• 全称：开始渲染时间 (Time To Start Render)

指某些非空元素开始在浏览器显示时的时间，这也是一项重要指标

• 优化（大话题，这里不过多展开）

1.优化TTFB
2.阻塞加载的脚本放页面末尾加载
3.静态资源的size优化

3.TTDC

• 全称：文档完成时间 (Time to Document Complete)

指页面结束加载，可供用户进行操作的时间，等价于浏览器的onload事件触发点。过多的dom操作会增加渲染时间

• 优化（大话题，这里不过多展开）

1.SSR（首屏速度提升）
2.按需加载
3.静态资源的size优化
4.减少过多的dom操作
5.不重要的静态资源放在末尾加载（如js,css）
6.异步加载，提升整体页面响应速度，部分费资源的内容采用异步加载
7.做好页面友好度处理 >3s 添加loading提示 >8s 加进度条