58

vue和react的性能优化

vue

按需加载引入

加载

避免深度监听

使用key保持组件唯一性

减少计算属性的依赖

keep-alive

react

react.memo：高阶组件

useCallback和useMemo：缓存函数和计算结果

分片渲染(Code-Splitting）：通过 React.lazy 和 Suspense 实现按需加载，减少主包大小，加快首屏加载速度。

使用pureComponent

**适当使用 shouldComponentUpdate**：在类组件中手动控制组件是否需要更新，避免不必要的重新渲染。

避免不必要的 Reconciliation：确保组件中不进行无意义的状态更新，避免影响 React 的虚拟 DOM 对比性能。

vue和react的更新机制

vue

proxy机制

虚拟DOM在数据更新后重新渲染节点，比较新旧虚拟DOM树（diff)

异步更新队列

react

使用虚拟DOM，每次state或者props变化都会重新渲染DOM

React 的 Diffing 算法 能够高效地找到新旧虚拟 DOM 树的差异，确保只更新必要的部分。

React 的更新是基于 自上而下 的方式，意味着父组件更新会导致子组件重新渲染。为了避免不必要的子组件渲染，可以使用 shouldComponentUpdate、React.memo 等机制。

react的hooks

useState：状态

useCallback：缓存函数

useMemo：缓存复杂计算结果

useEffect：处理副作用

项目的流式输出是怎么做的

使用@microsoft/fetch-event-source 库，结合了 fetchEventSource 方法来实现流式请求。fetchEventSource 是一种处理服务端发送事件（SSE，Server-Sent Events）的方法，可以用于实现流式响应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
request.stream = (url: string, data: any, callback: (val: any) => void, close?: () => void, token = store.user.token) => {
  return fetchEventSource(`${process.env.baseUrl}${url}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify(data),
    openWhenHidden: true,
    onmessage(e) {
      callback(e) // 每当服务器发送消息时调用 callback 处理数据
    },
    onclose() {
      close && close() // 连接关闭时调用 close 回调
    }
  })
}

关键点：

  1. **fetchEventSource**：用于发起一个持续的请求，并处理服务器端的流式响应。
  2. 流式输出：服务器会持续发送数据，通过 onmessage 事件监听每次收到的数据流，客户端每接收到一条信息就会调用 callback 函数处理这条信息。
  3. 请求头：在请求中加入了 Authorization 和 Content-Type 头，用于身份验证和数据格式声明。
  4. 关闭连接：通过 onclose 回调，在流式连接关闭时执行一些操作（如清理资源）。

这个方法非常适合用来处理长时间持续的数据流，比如聊天应用、股票行情等实时更新的场景。

防抖和节流

防抖

无论触发多少次，只执行最后一次

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

应用场景

  1. 输入框实时搜索（输入建议）：用户在输入框输入文本时，为了减少请求服务器的次数，使用防抖技术延迟发送请求，只在用户停止输入后才进行搜索请求。
  2. 窗口大小调整（resize）：在浏览器窗口大小调整时，调整操作可能会频繁触发，使用防抖可以避免过多计算和DOM操作，只在用户完成窗口调整一段时间后才执行相关的更新操作。
  3. 按钮提交（防止多次提交）：防抖可以用于防止用户因多次点击提交按钮而发送多次表单请求。设置防抖可以确保只在最后一次点击后执行提交操作。
  4. 滚动事件处理：在滚动事件中使用防抖技术，可以避免滚动时过多地执行逻辑处理或DOM操作，提高页面性能。
  5. 搜索优化：在实时搜索或筛选数据时，防抖技术可以减少执行次数，优化性能和服务器资源利用。

节流

  • 节流是确保函数以固定的频率执行，适用于事件持续触发过程中，我们需要间隔一定时间执行一次函数。
1
2
3
4
5
6
7
8
9
10
11
function throllte(fn,delay){
let timer=null;
    return function(...args){
        if(timer){
            timer=setTimeout(()=>{
                fn.apply(this,args)
                timer=null;
            },delay)
        }
    }
}

this输出