前端性能：股票交易APP频繁更新怎么破

写本文的缘由

• 有几位小伙伴最近又来问这个问题，以前帮人解答过一次，今天写下来
• 之后有时间会多写一些解决方案，例如oom了，不用esbuild怎么解决之类的等..

正式开始

主题：股票交易APP（IM场景前端交互高频更新卡顿）

• 一个正常的股票交易APP，是很复杂的，大都用原生写，可是有的公司没钱啊，只能作一套web app或者用RN这些写，也有用Flutter的(这就是没钱又要玩，那怎么办呢？那就玩乞丐版呀)

一个股票交易APP的界面长这样

• 首先金融交易类产品是IM产品的一种，大都使用私有基于TCP长连接私有协议或者wss协议，这里推荐两篇我以前写的文章，这样你来看本文效果会比较好。

  • 手写实现一个websocket协议(基于Node.js)
  • 手写一个React框架

问题重现

• 用户收藏了1000只自选股(国内国外+期货+指数等)，技术栈是web app ，基于react或React-native，很卡顿
• 因为是双工通信，并且高频推送，触发更新，并且交易类APP对消息送达的效率/低延迟要求很是高，例如你准备买这只股票，此时大户砸盘，你还没收到更新的信息，下单，发现趋势已经走坏，而后接盘被套。
• 还有一种状况，你买入的时候出了大利好，你下单价格是10块钱，可是此时已经涨到10.05，这个价格成成交不了，而后你错过了一波大涨。这时候客户就惨了

需求简单&技术的剖析

• 理论上用户能够添加的自选股票，是无限的
• 每一个自选股/股票的都有对应的事件触发

• 高频更新，此时要区分react/react-native环境，由于react-native组件在挂载后就不会卸载了，不像web app.

原则

• 性能优化最好是简单的手段
• 所见即所得，简单高校，不触碰底层逻辑，例如网络层先后端可能都要作粘包的处理
• ...不作可能诱发P0级别事故的技术方向选择

解决问题

• react/react-native渲染上有区别，对于长列表，react-native是有组件对应只渲染可视区域，react则不会，须要虚拟列表，推荐react-peter-window这个库，并且能够支持自动高宽

源码demo地址:https://github.com/JinJieTan/react-keepAlive-dynamic

• 这样react也能够跟react-native的组件同样，只渲染可视区域了
• 长列表问题解决了，可是事件同时也很麻烦，理论上用户能够添加无限的自选股，这个列表可能就有无限长（不要说不可能，世界在发展，这就是高可用的APP），传统的事件须要每一个item去绑定，而后切换组件时候再remove掉，可是频繁对事件挂载、移除其实也很损耗性能，这里换成事件冒泡，就能够了，把须要的数据挂载到dom的属性上获取便可～
• 上面说的，不要小看，能解决至关一部分性能问题

最重要的高频更新的问题

• 不一样金融交易类公司，后端架构设计不同，消息推送也是，例如大智慧的后端架构就比较特殊.
• 前端网络层可能要处理粘包,后端的消息推送频率咱们无论
• 借鉴PReact、Redis、kafka的思想，本身在前端实现一个消息队列,按期消费，更新界面.
• 参考我以前手写React的代码:

`https://github.com/JinJieTan/mini-react/tree/hooks

import { _render } from '../reactDom/index';

import { enqueueSetState } from './setState';

export class Component {

  constuctor(props = {}) {
    this.state = {};
    this.props = props;
  }
  
  setState(stateChange) {
    const newState = Object.assign(this.state || {}, stateChange);
    console.log(newState,'newState')
    this.newState = newState;
    enqueueSetState(newState, this);
  }
  
}`

• 当setState后，先进入队列中,首次进入，队列为空，进入判断，下一帧渲染前调用defer(flush)

`export function enqueueSetState(stateChange, component) {

  //第一次进来确定会先调用defer函数
  if (setStateQueue.length === 0) {
    //清空队列的办法是异步执行,下面都是同步执行的一些计算
    defer(flush);
  }

  //向队列中添加对象 key:stateChange value:component
  setStateQueue.push({
    stateChange,
    component,
  });

  //若是渲染队列中没有这个组件 那么添加进去
  if (!renderQueue.some((item) => item === component)) {
    renderQueue.push(component);
  }
}`

• defer函数

`function defer(fn) {
  //高优先级任务 异步的 先挂起
  return requestAnimationFrame(fn);
}`

• 此时消息再次推送，再次触发enqueueSetState，数据此时被推送到队列中，一帧统一合并消费。

❝

其实浏览器也是有渲染队列的，例如你在一个for循环里面频繁操做dom,并不会每次操做dom都会致使浏览器渲染，达到一个阀值，就会触发渲染，固然你也能够手动控制清空队列(这里不写太深，有兴趣的能够关注后面的文章)

❞

写在最后

• 我是Peter，架构设计过20万人端到端加密超级群功能的桌面IM软件，如今是一名前端架构师。
• 若是你对性能优化有很深的研究，能够跟我一块儿交流交流，今天这里写得比较浅，可是大部分人都够用，以前问个人朋友，我让它写了一个定时器定时消费队列，最后也能用。哈哈
• 另外欢迎收藏个人资料网站:前端生活社区:https://qianduan.life
• 感受对你有帮助，能够右下角点个在看，关注一波公众号:[前端巅峰]