From the perspective of top exchanges in the currency circle, the performance optimization of the front end

Write at the beginning

• I have faith in the coin circle and have a deep research on performance optimization. I was previously engaged in IM industry, desktop cross platform software research and development, with 200000 people super group function
• On a whim, I wrote an analysis on the performance optimization of the trading interface of the top exchanges in the currency circle（Note that if there is no open white list, please do not reprint my article without authorization, especially some institutions, otherwise I will report the struggle to the end)

Official start

• The top exchange in the currency circle must have many industry leaders, especially the trading interface, which is the top priority.

• So today IbinanceA performance optimization analysis of the transaction interface is carried out

  Here we go, little Ben. Write it down

binanceHow is it deployed

• You can see that the Google browser plug-in lights up in the upper right cornerbinanceThe transaction interface is provided byReactIt’s written. It suits my taste. I like itReact, likeA fair lady, a gentlemanSame.

• When the browser cache is disabled,DOMCONTENTLOADEvent triggered as long as1S,LOADEvent triggered as3Sabout. Obviously, it has been optimized. Let’s talk about the details here

• The first is why the cache is disabled so quickly. You can see the deployed domain name andJSThe referenced domain name is different because it is usedCDNaccelerate

*Another oneDOMCONTENTLOADThe event triggered early because of someGIFThe picture is on the leftDOMCONTENTLOADRequest later

It can be clearly seen here that after the interface returns data, it will start to request pictures. It can be said that it has made a first screen request task scheduling

What did you do next

• After the first screen analysis, we can see what we have done next
• As we all know, one day in the coin circle and three years in the world, the fluctuation and range of the coin circle will be very large at the same time, especially like some air coins. They have a large number and the market comes. They hang up the exchange every minute. （The CZ said in a recent interview that a large amount of concurrency leads to downtime. It is not like everyone thinks that adding machines can solve this kind of thing. It is equivalent to saying that a plane originally can seat hundreds of people, but it is difficult to spend money to build a plane that can seat millions of people）

adoptnetworkThe module can see that the transaction interface starts twowssLink, the first is to show the currency price and provide it tocanvasdrawK lineThe second one is to show the latest price range, which is the fastest fluctuating point of the market

• K-line diagramDelay is allowed, because its second, minute, hour and other trends can only be calculated according to the final results. However, the entrusted quantity of gear price is very important and fluctuates frequently. It may be updated many times a second, so they separate two interfaces, which can ensure that when the market comes, at least you can see the approximate graphics, Or you can see the approximate number of entrusted gears（The latest transaction data should also be together with the K-line chart, and the K-line chart should be drawn through the latest transaction）

K-line diagram

• The K-line chart showing the trend must also becanvasDraw, draw the trend according to the transaction data, excellent performance, no doubt
  
• The frequently updated points are also split into three components for performance optimization

In this way, the data can be updated more finely to avoid unnecessary repeated rendering

The most critical point

• In my opinion, the above performance optimization is quite common. Maybe the official has also done some invisible performance optimization. I may not find it here. If you are an official staff member or others have any suggestions, you can leave a message below
• If you think it’s good, order it for meWatching / liking / following，Front peak, it’s better to have your attention