项目中首屏时间优化方式

更新时间: 12/6/2023字数: 0 字

首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页的不一定全部渲染完成，但需要展示当前视窗需要的内容，首屏加载时用户体验的重要环节。

window.performance

是 W3C 性能小组引入的新的 API

页面加载完成后在控制台输入：

;(performance.timing.domComplete - performance.timing.navigationStart) / 1000

performance.timing.navigationStart: 这个属性表示浏览器开始处理导航请求的时间，即开始加载页面的时刻。
performance.timing.domComplete: 表示整个 DOM 树构建完成的时间点，这意味着所有资源已加载完毕，DOM 结构已经准备就绪，但不一定所有的子资源如图片、样式表等已完成加载。

路由懒加载 router v6

使用 React.lazy 函数

const Home = lazy(() => import('./Home'))

{
    path: '/',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Home />
      </Suspense>
    )
  },

使用 router 自带的 lazy 能力。注意：自带的无 fallback 能力，需要单独实现。

{
  path: '/white_time',
  lazy: async () => ({
      Component: (await import('./WhiteTime')).default
 })
}

组件懒加载
1. 使用 React.lazy 函数异步导入组件即可。不需要额外的配置。是否成功看请求资源中有没有组件文件名的 chunks。 const LazyCopm = React.lazy(() => import('./BigPage'))
  ts
```
// WhiteTime.jsx
const LazyCopm = React.lazy(() => import('./BigPage'))
```
  页面中多请求一个组件资源，/src_BigPage_jsx.chunk.js。
2. 如果组件很大，提高用户体验可增加 fallback
  ts
```
<Suspense fallback={<>loading</>}>
    <LazyCopm/>
<Suspense fallback={<>loading</>}>
```
图片懒加载
1. react-lazy-load 组件库

项目中首屏时间优化方式 ​

项目中首屏时间优化方式