Looking at the performance optimization of the front-end from the top exchanges in the currency circle

Write at the beginning

• I have faith in the currency circle, coupled with in-depth research on performance optimization, I was previously engaged in the IM industry, desktop cross-platform software research and development, and 200,000 people super group functions
• On a whim, write an analysis of the optimization of the trading interface performance of the current top exchanges in the currency circle ( Note, if there is no open whitelist, please do not reprint my articles without authorization, especially some institutions, otherwise I will report the struggle In the end)

Officially begin

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

• So today I performed a performance optimization analysis binance

  Let's start, write it down in a small book

binance is deployed

• Through the Google Chrome plug-in on the upper right corner, you can see binance the trading interface of React written by 060b97b2469383, which is in line with my taste. I like React , just and a gentleman.

• When browser caching is disabled, the DOMCONTENTLOAD event triggers only 1S , and the LOAD event triggers about 3S . Obviously optimized, here are the details

• The first is why the ban cache so fast, you can see that the deployment of domain and JS cited the domain name is not the same, because of the use CDN acceleration


* Another DOMCONTENTLOAD event was triggered early, because some GIF pictures were DOMCONTENTLOAD after 060b97b246948f

It can be clearly seen here that after the interface returns the data, the image will be requested, which can be said to be a request task scheduling for the first screen

What did next

• After analyzing the first screen, we can see what we did next
• As we all know, one day in the currency circle, three years in the world, the fluctuation of the currency circle and the same time range will be very large, especially like some air coins, their number is large, the market is coming, and the exchange is set up every minute. ( said in a recent interview that the large amount of concurrency leads to downtime. It’s not like everyone thinks that adding machines can solve this kind of thing. It’s equivalent to saying that an airplane would have taken a few hundred people, but It’s difficult to spend money to build an airplane that can seat millions of people)

Through the network module, you can see that the trading interface has launched two wss links. The first is to display the currency price and provide canvas draw the K-line chart. The second is to show the latest price gear. This is the market. Here comes the most volatile point

• K-line chart allows delay, because its second, minute, hour and other trends require the final result to be calculated, but the number of stall price orders is very important and fluctuates frequently, and may be updated many times per second, so they are separated Two interfaces, so as to ensure that when the market comes, at least you can see the approximate graph, or you can see the approximate number of orders ( latest transaction data should also be the same as the K-line chart , Draw a K-line chart based on the latest transaction)

candlestick chart

• The K-line chart showing the trend must also be canvas . The trend is drawn based on the transaction data, with excellent performance, no doubt

• Frequently updated points, in order to optimize performance, the split is also finer, each item of the entrusted order is also split into three components

This can be more refined according to the data update, avoid unnecessary re-rendering

The most critical point

• In my opinion, the above performance optimizations are relatively common. Perhaps the official has made some invisible performance optimizations. I may not find them here. If you are an official staff member, or if someone else has any suggestions, you can go below leave a message
• If it feels well written, me a 160b97b24696a1 watching/like/following, front-end peak, it will be more exciting with your attention