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

写在开头

• 我对拥有信仰，加上对性能优化有很深入的研究，之前从事的是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画的，根据成交数据绘制走势，性能优秀，毋庸置疑

• 频繁更新的点，为了性能优化，也是拆分的比较细，委托订单的每一项也是拆分成了三个组件

这样可以更精细化的根据数据更新，避免不必要的重复渲染

最关键的点

• 在我看来，上面的性能优化都是比较常见的，或许官方还做了一些看不见的性能优化。