极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

# 如何提高首屏渲染时间?

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 688 (opens new window)

TODO

  1. 对于 pv 量比较高的页面,比如 b 站等流量图也比较大的,采用 ssr 采用 ssr 如何优化性能
    • 性能瓶颈在于 react-dom render/hydrate 和 server 端的 renderToString
    • 尽量减少 dom 结构, 采用流式渲染,jsonString 一个对象,而不是 literal 对象
    • server 去获取数据
    • 不同情况不同分析,减少主线程阻塞时间
    • 减少不必要的应用逻辑在服务端运行
  2. 减少依赖和包的体积
    • 利用 webpack 的 contenthash 缓存
    • 重复依赖包处理,可以采用 pnpm
    • 采用 code splitting,减少首次请求体积
    • 减少第三方依赖的体积
  3. FP (First Paint) 首次绘制 FCP (First Contentful Paint) 首次内容绘制 LCP (Largest Contentful Paint) 最大内容渲染 DCL (DomContentloaded) FMP(First Meaningful Paint) 首次有效绘制 L (onLoad) TTI (Time to Interactive) 可交互时间 TBT (Total Blocking Time) 页面阻塞总时长 FID (First Input Delay) 首次输入延迟 CLS (Cumulative Layout Shift) 累积布局偏移 SI (Speed Index) 一些性能指标可以监控性能

4.网络 prefetch cdn

Last Updated: 11/27/2021, 6:11:48 PM