react+node优化方案

Posted on Edited on

React 组件的优化

减少不必要的渲染：

  • 使用 React.memo 或 PureComponent 来避免不必要的组件更新。这些方法通过浅比较 props 或 state 来决定是否重新渲染组件。
  • 利用 useMemo 和 useCallback 缓存昂贵的计算或回调函数，防止在每次渲染时都重新计算或创建新的函数实例。

代码分割和懒加载：

使用 React.lazy 和 Suspense 来实现组件级别的懒加载，按需加载组件代码，减少初始加载时间。

在路由级别使用代码分割，确保只有访问到特定路由时才加载相应组件。

优化长列表渲染：

  • 使用虚拟滚动库（如 react-window 或 react-virtualized）来只渲染可视区域内的元素，减少 DOM 节点数量，提高性能。
  • 实现懒渲染，即组件进入或即将进入可视区域时才渲染组件。

减少 DOM 操作：

  • 利用 React 的虚拟 DOM 机制，减少实际 DOM 操作的次数。
  • 避免在 render 方法中创建函数或绑定事件处理器，这些操作可以在构造函数或 useEffect 中进行。

优化组件结构：

  • 保持组件树的扁平化，减少不必要的组件嵌套和递归深度，有助于减少渲染时间。
    合理使用 Fragment 避免不必要的额外 DOM 节点。

资源优化：

  • 对图片资源进行压缩，并选择合适的格式，如 WebP。
  • 使用 gzip 等工具对资源文件进行压缩，减少传输大小。
  • 将 CSS 放在头部，JS 放在底部或使用异步加载 JS 文件，避免阻塞页面渲染。

错误边界：

使用错误边界（Error Boundaries）来捕获并处理子组件树中的 JavaScript 错误，防止整个应用崩溃。

其他优化技巧：

  • 批量更新状态，减少由多次状态变更触发的多次重绘。
  • 使用稳定的键（key）来优化列表渲染。
  • 调整 Babel 配置，使用多进程编译、缓存编译文件以及通过 tree shaking 删除冗余代码，提升构建速度和减少打包体积。

http 请求并发优化

  • 使用 HTTP/2 协议：HTTP/2 支持多路复用，可以在同一个 TCP 连接上并行多个请求和响应，从而有效突破浏览器的并发限制。
  • 资源分散到不同域名：通过将资源分散到不同的域名下，可以绕过浏览器对同一域名下的并发连接数限制，实现更高的并发数。
  • 使用 CDN 加速资源加载：通过使用 CDN 加速资源加载，可以减少请求等待时间，提高并发性能。
  • 使用 Web Workers：Web Workers 允许运行与主 JavaScript 执行线程分离的代码，从而可以并行处理多个任务，间接提高并发处理能力。
  • 利用 CDN 和预加载技术：通过 CDN 加速资源加载，预加载关键资源，可以减少请求等待时间，间接提高并发性能。

http 数据分块

  • 动态生成内容、大文件传输或者需要逐步处理和发送数据的情况下，可以考虑使用分块传输编码（Chunked Transfer Encoding）来将数据分成小块发送。这样可以避免一次性发送大量数据导致的性能问题。
  • 服务器在响应头中设置 “Transfer-Encoding: chunked” 来表明使用了分块传输编码。
    数据被分成多个块，每个块都有一个十六进制表示的长度值，后面跟着数据内容，最后以一个长度为 0 的块表示数据传输结束。

http 缓存优化

  • 使用强缓存：通过设置合适的 Cache-Control 和 Expires 头部字段，将资源缓存到浏览器本地，避免重复请求。
  • 使用协商缓存：通过设置 Last-Modified 和 ETag 头部字段，服务器可以根据客户端的请求判断资源是否有更新，从而决定是否返回新的资源。

webpack 优化

。。。

node http 响应优化

集群

  • 利用 Node.js 的 cluster 模块来创建多个子进程，每个子进程都运行自己的事件循环和 V8 实例。这样可以充分利用多核 CPU，提高应用的并发处理能力。
  • 负载均衡器（如 Nginx）可以将请求分发到不同的 Node.js 实例上，进一步分散负载。