性能优化方案

爱生活张
210 阅读2分钟

首屏

  1. 接口调整

    • 定位接口返回大小-去除冗余
    • 首屏仅返回首屏相关的内容、拆分接口
    • 列表优化，触底请求更多

  2. 图片加载策略

    • 首屏图片-客户端存入gecko缓存-从缓存中获取。

      • 优化体积大小、压缩
      • 部署在CDN服务器上

    • 非首屏涉及到的关键图片可以采用预加载策略

            ```js
      const img = new Image();
       img.src=url;
      //或者用一个看不到的css backgroundImage=url
      
      小程序采用wx.preloadAssets预加载
      ```

    • 列表中图片 懒加载

      • 三种方式实现

  3. 骨架屏

  4. 代码级别

    • useMemo 配合 react.memo 减少子组件重新渲染 像个保协议等等
    • useCallback 缓存function
    • shouldComponentUpdate、PureComponent
    • diff - key

  5. SSR

    • React.lazy 和 Suspense 按需加载组件
    • NoSSR
      • 在服务端渲染时-将noSSR包裹的内容替换为一个空的span标签，等到服务端渲染时通过querySelectorAll（‘【data-nossr】’） 进行替换
      <span data-nossr></span>

  • 脱水 dehydrate

    • 在服务端渲染时将组建的状态和数据（jS）等转化为字符串，将其嵌入到Html中。
    • 脱水时机是 服务端渲染完成后，将渲染结果返回客户端之前。

  • 注水 hydrate

    • 注水时机 是在客户端渲染完成之后，将HTML中嵌入的状态和数据提取出来并注入到组件中

  • uesr-agent

  • 流式渲染

    • 通过框架提供的 方法 异步获取数据
    <Suspense fallback={<div id="loading">loading  ...</div>}>
        <Await reslove={data}>
            <div>...</div>
        </Await>
    </Suspense>

React.lazy

  • toStringSSR 页面其他的接口请求需要等到文档获取到之后再执行
  • StreamingSSR 可以按chunked 一块一块的拿到文档，拿到对应的部分就去执行注水操作，将状态和数据嵌入进去。
  • 更快的FCP、 更快的TTI、更快的LC
    • 页面内容是一块一块展现出来的，不会说等HTML返回太长时间

HTTP/1.1中的 分块传输编码（Chunked transfer encoding）机制

image.png

// 待办--- https://zh-hans.react.dev/reference/react-dom/server/renderToReadableStream

image.png 需要最开加载的，放在suspense外侧，这样服务器返回时，会先返回fallback中的内容，之后等包裹的子组件html加载完成，再进行替换操作。

使用lazy 懒加载组件、 使用usestate、useEffect 等读取promise,不要直接在文档流中读取 image.png

image.png shell Suspense 之外的任何内容都叫做shell 包括外部的和fallback的内容

image.png

  1. 异常 -服务端触发 onShellError
  • shell --发送一个不依赖服务端渲染的组件-- h1 出错了 h1

  • suspense包裹的组件失败，服务端会放弃渲染内部的组件，会返回 fallback中的内容，并在客户端重试渲染内部的组件

image.png

//马走日例题
avatar
文章
阅读
粉丝