從幣圈頂級交易所來看前端的性能優化

寫在開頭

  • 我對幣圈擁有信仰,加上對性能優化有很深刻的研究,以前從事的是IM行業,桌面端跨平臺軟件研發,有20萬的人超級羣功能
  • 心血來潮,寫上一篇對於目前幣圈頂級交易所的交易界面性能優化的分析(注意,若是沒有開放白名單,請不要未經受權轉載個人文章,特別是一些機構,不然我會舉報鬥爭到底)

正式開始

  • 幣圈的頂級交易所,必然擁有不少業內大佬,特別是交易界面,是重中之重。
  • 因而今天我對binance的交易界面進行了一個性能優化分析前端

     開始了,小本本記下來

binance是如何部署的

  • 經過右上角谷歌瀏覽器插件亮起,能夠看到binance的交易界面是由React編寫的,這符合個人口味,我喜歡React,就像窈窕淑女,君子好逑同樣。

  • 在禁掉瀏覽器緩存狀況下,DOMCONTENTLOAD事件觸發只要1S,LOAD事件觸發爲3S左右。顯然作過優化,這裏講講細節

  • 首先是爲何禁掉緩存這麼快,能夠看到,部署的域名和JS的引用域名不同,由於使用了CDN加速


* 再一個DOMCONTENTLOAD事件觸發早,緣由是一些GIF圖片放在了DOMCONTENTLOAD以後再請求的canvas

這裏能夠明確看到,在接口返回數據後,纔會開始請求圖片,能夠說是作了一個首屏的請求任務調度

 接下來作了什麼

  • 在首屏分析完了之後,咱們能夠看看接下來作了什麼
  • 衆所周知,幣圈一天,人間三年,幣圈的波動和同一時間幅度是會很大的,特別是像一些空氣幣,他們的數量又大,行情來了,分分鐘搞掛交易所。(這個CZ在最近的採訪中表示,併發量大致使宕機,並非像你們想的那樣,說加機器就能解決這種事情,至關於說一輛飛機原本是坐幾百人,可是花錢就能造一個能坐幾百萬人的飛機是很難的

經過 network模塊能夠看到,交易界面啓動了兩個 wss連接,第一個是展現幣價以及提供給 canvas繪製 K線圖的,第二個是爲了展現最近的價格檔位,這塊是行情來了波動最快的一個點

  • K線圖容許存在延遲,由於它的秒、分、時等走勢是須要最終結果才能計算出來,可是檔位價格委託數量很重要,頻繁波動,可能一秒會更新好屢次,因此他們分開了兩個接口,這樣能保證,行情來了的時候,起碼要麼你能看到大概的圖形,要麼你能夠看到大概的委託檔位數量(最新成交的數據應該也是跟K線圖是一塊兒的,經過最新成交繪製K線圖

K線圖

  • 展現走勢的K線圖,也確定是canvas畫的,根據成交數據繪製走勢,性能優秀,毋庸置疑
  • 頻繁更新的點,爲了性能優化,也是拆分的比較細,委託訂單的每一項也是拆分紅了三個組件

這樣能夠更精細化的根據數據更新,避免沒必要要的重複渲染

最關鍵的點

  • 在我看來,上面的性能優化都是比較常見的,或許官方還作了一些看不見的性能優化,我這裏可能沒發現,若是你是官方工做人員,或者其餘人有什麼建議,能夠在下方留言
  • 若是感受寫得不錯,幫我點個在看/贊/關注前端巔峯,有你的關注更精彩
相關文章
相關標籤/搜索