从币圈顶级交易所来看前端的性能优化

写在开头

• 我对币圈拥有信仰，加上对性能优化有很深刻的研究，以前从事的是IM行业，桌面端跨平台软件研发，有20万的人超级群功能
• 心血来潮，写上一篇对于目前币圈顶级交易所的交易界面性能优化的分析(注意，若是没有开放白名单，请不要未经受权转载个人文章，特别是一些机构，不然我会举报斗争到底)

正式开始

• 币圈的顶级交易所，必然拥有不少业内大佬，特别是交易界面，是重中之重。

• 因而今天我对binance的交易界面进行了一个性能优化分析

  　开始了，小本本记下来

binance是如何部署的

• 经过右上角谷歌浏览器插件亮起，能够看到binance的交易界面是由React编写的，这符合个人口味，我喜欢React,就像窈窕淑女，君子好逑同样。

• 在禁掉浏览器缓存状况下，DOMCONTENTLOAD事件触发只要1S,LOAD事件触发为3S左右。显然作过优化，这里讲讲细节

• 首先是为何禁掉缓存这么快，能够看到，部署的域名和JS的引用域名不同，由于使用了CDN加速

*　再一个DOMCONTENTLOAD事件触发早，缘由是一些GIF图片放在了DOMCONTENTLOAD以后再请求的

这里能够明确看到，在接口返回数据后，才会开始请求图片，能够说是作了一个首屏的请求任务调度

　接下来作了什么

• 在首屏分析完了之后，咱们能够看看接下来作了什么
• 众所周知，币圈一天，人间三年，币圈的波动和同一时间幅度是会很大的，特别是像一些空气币，他们的数量又大，行情来了，分分钟搞挂交易所。（这个CZ在最近的采访中表示，并发量大致使宕机，并非像你们想的那样，说加机器就能解决这种事情，至关于说一辆飞机原本是坐几百人，可是花钱就能造一个能坐几百万人的飞机是很难的）

经过 network模块能够看到，交易界面启动了两个 wss连接,第一个是展现币价以及提供给 canvas绘制 K线图的,第二个是为了展现最近的价格档位，这块是行情来了波动最快的一个点

• K线图容许存在延迟，由于它的秒、分、时等走势是须要最终结果才能计算出来，可是档位价格委托数量很重要，频繁波动，可能一秒会更新好屡次，因此他们分开了两个接口，这样能保证，行情来了的时候，起码要么你能看到大概的图形，要么你能够看到大概的委托档位数量（最新成交的数据应该也是跟K线图是一块儿的，经过最新成交绘制K线图）

K线图

• 展现走势的K线图，也确定是canvas画的，根据成交数据绘制走势，性能优秀，毋庸置疑
  
• 频繁更新的点，为了性能优化，也是拆分的比较细，委托订单的每一项也是拆分红了三个组件

这样能够更精细化的根据数据更新，避免没必要要的重复渲染

最关键的点

• 在我看来，上面的性能优化都是比较常见的，或许官方还作了一些看不见的性能优化，我这里可能没发现，若是你是官方工做人员，或者其余人有什么建议，能够在下方留言
• 若是感受写得不错，帮我点个在看/赞/关注，前端巅峰，有你的关注更精彩