Project Sharing

BitMEX optimization

[{
  type: "Sell",
  price: 4124.5,
  size: 319304
}, {
  type: "Sell",
  price: 4124,
  size: 704067
}, {
  ...
}, {
  type: "Buy",
  price: 4117,
  size: 1980767,
}, {
  ...
}]

[{
  type: "Sell",
  price: 4123,
  size: 842951
}, {
  type: "Buy",
  price: 4116.5,
  size: 815622
}]

action: Update

action: Partial

Optimization

use PureComponent instead of Component

import React, { PureComponent } from 'react';

import React, { Component } from 'react';

tradeChannels: {
  orderbookL2_25:XBTUSD: {
    socket,
    data: [/* ... */],
  },
  trade:XBTUSD: { /* channel */ },
}

Optimization

Flatten array data into hash table as possible

tradeChannels: [{
  channelName: "orderbookL2_25:XBTUSD",
  socket,
  data: [/* ... */],
}, {
  channelName: "trade:XBTUSD",
  /* ... */
}]

const reduxHook = connect(
  (state, props) => ({
    orderbook: state.Trade.tradeChannels[`orderBookL2_25:${props.tradeType}`] || null,
  }),
);

import uniqBy from 'lodash/uniqBy';

export function uniqById(list, prevList = []) {
  if (!list.length) return prevList;
  if (!prevList.length) return uniqBy(list, 'id');

  const newList = uniqById(list.filter(l => !prevList.find(pl => pl.id === l.id)));

  return [
    ...newList,
    ...prevList,
  ];
}

Optimization

Reduce calculate time complexity

[action.channelName]: { // type: INSERT
  ...channel,
  data: uniqById(newDataList, prevDataList),
},

const sellData = orderDataSorted(
  data.filter(d => d.side === 'Sell'),
  true,
);
const buyData = orderDataSorted(
  data.filter(d => d.side === 'Buy')
);

Optimization

Apply method only when you need it

Optimization

Destructure object keys / Component minimize

<Component
  record={record} />

<Component
  recordSize={record.size}
  recordPrice={record.price} />

OrderSellList

OrderItem

OrderItemSize (size only)

OrderItemPrice (price only)

OrderItemCumsize (cumsize only)

1. Destructure

2. Component minimize

Optimization

Use requestAnimationFrame

Javascript
Style: css 匹配
Layout: 計算要佔用多少空間，以及它在螢幕上的位置。
Paint: 以像素為單位填入的過程。基本上是元素的每個視覺化部分。
Composite(合成): 因為網頁的部分被描繪至可能多個層，因此它們需要按正確的順序描繪至螢幕，讓網頁能正確轉譯。

Event loop(JSConf): https://youtu.be/cCOL7MC4Pl0

Optimization

Use requestAnimationFrame

setInterval(() => {
  const { value } = this.state;
  this.setState({
    value: value + 1,
  }); 
}, 8);

without animationFrame

with animationFrame

Project sharing

By Travor Lee

Project Sharing

Project sharing

More from Travor Lee