页面首屏渲染优化

性能优化的核心思想

• 减少加载时间
• 减少渲染时间

减少加载时间

最短的时间就是不加载

减少请求数量

• 合并请求
• http2
• lazy-load 暂时不用的延时请求
• 减少非首屏的资源，webpack 拆包，组件异步加载
• css

缓存

• 静态资源缓存，CDN
• 本地缓存时效：304 等

提前请求使用的时候立马呈现

• rel=’preload’ rel=’prefetch’

  <link rel="prefetch" href="/prefetch.js" as="script">
  <link rel="preload" href="./nextpage.js" as="script">

• 提前下发资源

  –cdn预热 App自建下发通道等

• 业务接口数据预请求

什么是链接预取
Preload，Prefetch 和它们在 Chrome 之中的优先级

减少渲染时间

最快的渲染时间就是不需要渲染，使用的时候就已经ready

• SSR 服务端渲染
• 预渲染 rel=prerender –使用不多, App容器内可以自己控制
• 首屏加载资源优化

减少重绘&重排

参考文档

• 前端性能优化

本文作者：番茄炒蛋
本文地址： https://www.noway.pub/2023/09/10/first-screen-speed/
版权声明：转载请注明出处！