开头写到我对币圈有信心，对性能优化有深入的研究。20万人一时兴起搞了个超级群功能，写了一篇币圈当前顶级交易所交易界面性能优化分析（注意，如果没有开放白名单，请勿转载我的文章未经授权，特别是一些机构，否则我会举报并战斗到底）正式开启币圈的顶级交易所，肯定有很多行业龙头，尤其是交易接口，这是重中之重。所以今天我对Binance的交易界面进行了性能优化分析 开始，把Binance是如何部署在一个小笔记本上写下来的。通过右上角的谷歌浏览器插件，可以看到币安的交易界面是用React写的不错，这很符合我的口味，我喜欢React，就像窈窕淑女一样。在关闭浏览器缓存的情况下，DOMCONTENTLOAD事件的触发只需要1S，LOAD事件的触发大约需要3S。很明显，它已经被优化了。这是详细信息。首先是为什么缓存被禁用得如此之快。可以看到部署的域名和JS引用的域名不一样，因为使用了CDN加速* ，提前触发了一个DOMCONTENTLOAD事件。原因有些GIF图片在DOMCONTENTLOAD中被请求后。这里可以清楚的看到，只有在接口返回数据后，才会开始对图片的请求。可以说做了一个首屏的请求任务调度 下一步做什么分析完首屏之后，我们就可以看到接下来要做什么了。众所周知，币圈一日，天下三年，币圈和同一时间的波动会非常大，尤其是像一些空气币，它的量很大，行情来了，而且交易所每分钟列出一次。（这个CZ在最近的采访中说，并发量大导致的宕机并不是大家想的那样，相当于说加一台机器就可以解决这种事情，很难造出一台可以拿百万人带钱）通过网络模块，可以看到交易界面开启了两个wss链接，第一个是显示币价和提供绘制K线图的画布，第二个是显示最近的价格水平。这是市场波动最快的点。K线图是允许延迟的，因为它的秒、分、时等趋势需要计算最后的结果。但是档价单的数量很重要，波动比较频繁，一秒钟可能更新很多次，所以他们把两个界面分开，保证行情来的时候，至少能看到大概的图形，或者你可以看到大概的委托档位数量（最新的成交数据应该也是带K线图的，K线图是通过最新的成交画出来的）。显示趋势的K线图也必须用canvas绘制，根据交易数据绘制趋势，性能极佳，毫无疑问是更新频繁。为了优化性能，也拆分得比较细。委托订单的每一项也被拆分成三个组件，以便更精细地根据数据进行更新。最关键的一点，避免不必要的重复渲染上面的性能优化我觉得比较常见，可能官方也做了一些看不见的性能优化，我这里可能找不到，如果你是官方人员，或者其他大家有什么建议，可以在下方留言。如果觉得写的不错，请帮我看看/点赞/关注我。前端巅峰有你的关注更精彩。
