前端性能:股票交易APP频繁更新怎么破
写本文的原因
有几位小伙伴最近又来问这个问题,之前帮人解答过一次,今天写下来
以后有时间会多写一些解决方案,例如oom了,不用esbuild怎么解决之类的等..
正式开始
主题:股票交易APP(IM场景前端交互高频更新卡顿)
一个正常的股票交易APP,是很复杂的,大都用原生写,但是有的公司没钱啊,只能做一套web app或者用RN这些写,也有用Flutter的(这就是没钱又要玩,那怎么办呢?那就玩
乞丐版
呀)
一个股票交易APP的界面长这样
首先金融交易类产品是IM产品的一种,大都使用私有基于TCP长链接私有协议或者wss协议,这里推荐两篇我之前写的文章,这样你来看本文效果会比较好。
深度:手写一个WebSocket协议 [7000字]
精读:手写React框架 解析Hooks源码
问题重现
用户收藏了1000只自选股(国内国外+期货+指数等),技术栈是web app ,基于react或React-native,很卡顿
由于是双工通讯,而且高频推送,触发更新,而且交易类APP对消息送达的效率/低延迟要求非常高,例如你准备买这只股票,此时大户砸盘,你还没收到更新的信息,下单,发现趋势已经走坏,然后接盘被套。
还有一种情况,你买入的时候出了大利好,你下单价格是10块钱,但是此时已经涨到10.05,这个价格成成交不了,然后你错过了一波大涨。这时候客户就惨了
需求简单&技术的剖析
理论上用户可以添加的自选股票,是无限的
每个自选股/股票的都有对应的事件触发
高频更新,此时要区分react/react-native环境,因为react-native组件在挂载后就不会卸载了,不像web app.
原则
性能优化最好是简单的手段
所见即所得,简单高校,不触碰底层逻辑,例如网络层前后端可能都要做粘包的处理
...不做可能诱发P0级别事故的技术方向选择
解决问题
react/react-native渲染上有区别,对于长列表,react-native是有组件对应只渲染可视区域,react则不会,需要虚拟列表,推荐
react-peter-window
这个库,而且可以支持自动高宽
源码demo地址:https://github.com/JinJieTan/react-keepAlive-dynamic
这样react也可以跟react-native的组件一样,只渲染可视区域了
长列表问题解决了,但是事件同时也很麻烦,理论上用户可以添加无限的自选股,这个列表可能就有无限长(不要说不可能,世界在发展,这就是高可用的APP),传统的事件需要每个item去绑定,然后切换组件时候再remove掉,但是频繁对事件挂载、移除其实也很损耗性能,这里换成事件冒泡,就可以了,把需要的数据挂载到dom的属性上获取即可~
上面说的,不要小看,能解决相当一部分性能问题
最重要的高频更新的问题
不同金融交易类公司,后端架构设计不一样,消息推送也是,例如大智慧的后端架构就比较特殊.
前端网络层可能要处理粘包,后端的消息推送频率我们不管
借鉴PReact、Redis、kafka的思想,自己在前端实现一个
消息队列
,定期消费,更新界面.参考我之前手写React的代码:
https://github.com/JinJieTan/mini-react/tree/hooksimport { _render } from '../reactDom/index';import { enqueueSetState } from './setState';export class Component {constuctor(props = {}) {this.state = {};this.props = props;}setState(stateChange) {const newState = Object.assign(this.state || {}, stateChange);console.log(newState,'newState')this.newState = newState;enqueueSetState(newState, this);}}
当setState后,先进入队列中,首次进入,队列为空,进入判断,下一帧渲染前调用defer(flush)
export function enqueueSetState(stateChange, component) {//第一次进来肯定会先调用defer函数if (setStateQueue.length === 0) {//清空队列的办法是异步执行,下面都是同步执行的一些计算defer(flush);}//向队列中添加对象 key:stateChange value:componentsetStateQueue.push({stateChange,component,});//如果渲染队列中没有这个组件 那么添加进去if (!renderQueue.some((item) => item === component)) {renderQueue.push(component);}
}
defer函数
function defer(fn) {//高优先级任务 异步的 先挂起return requestAnimationFrame(fn);
}
此时消息再次推送,再次触发enqueueSetState,数据此时被推送到队列中,一帧统一合并消费。
❝
其实浏览器也是有渲染队列的,例如你在一个for循环里面频繁操作dom,并不会每次操作dom都会导致浏览器渲染,达到一个阀值,就会触发渲染,当然你也可以手动控制清空队列(这里不写太深,有兴趣的可以关注后面的文章)
❞
推荐阅读
张一鸣:为什么 BAT 挖不走我们的人才?
微信号 可以改了 !!!真事 !!
再见!杭州!再见!阿里巴巴!
2020年北京,上海摆摊夜市分布
牛!月入2w,95后送外卖的程序员,送餐途中改bug
5 种将死的编程语言
扫码加我微信进群,内推和技术交流,大佬们零距离
前端性能:股票交易APP频繁更新怎么破相关推荐
- 解决app频繁更新方案
目前由于我们项目的特定场景,app的主要问题在于如何做到可以频繁更新而不需要频繁发布,尤其是ios,发布app store的周期基本上是2周左右,虽然可以通过企业号解决,但是后期的打包,分发给用户仍较 ...
- 如何合理的规避移动端App的频繁更新
app频繁更新莫过于以下两点: 修复线上bug: 敏捷开发.频繁迭代: 那么要解决频繁更新的问题,我们就从这两点进行分析: 首先,频繁修复线上bug,反映出两个问题.第一.发版前测试环节是否充分考虑各 ...
- 深度讲解:web前端性能优化
一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...
- dll文件懒加载_前端性能优化
# 前端性能优化 写在最前面:下面都是我对webpack的一些性能优化,想系统的学习性能优化方面的知识 推荐大家看看这本书 很系统 感觉面试也能如鱼得水 ## 构建优化 ### webpack优化 ( ...
- 1.5W+字的全链路前端性能优化送给你
点击上方"前端开发博客",选择"星标" 回复"加群",加入我们一起学习 通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现 ...
- 如何全链路进行前端性能优化
" 如果对性能优化很有兴趣的可以参加文末的送书活动 " 1. 概述 通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页 ...
- 全链路前端性能优化方案
通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页面加载的更快,让用户的操作响应更及时,给用户更好的使用体验. 这里我们介绍的是前端性能优 ...
- 【干货】1.5W+字的全链路前端性能优化送给你
通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页面加载的更快,让用户的操作响应更及时,给用户更好的使用体验. 这里我们介绍的是前端性能优 ...
- 【Web技术】985- 当聊到前端性能优化时,我们会关注什么?
大前端 前端知识宝库 坚持日更 关于这期分享内容 性能优化一直是前端领域老生常谈的问题,系统的性能以及稳定性很大程度上决定着产品的用户体验以及产品所能达到的高度.而tob和toc系统又有着不同的业 ...
- 一零四、前端性能优化详解
1 前端性能优化 介绍 页面性能优化 浏览器 浏览器的主要作用 浏览器的组成结构 浏览器是多进程的 浏览器的渲染机制 重排reflow与重绘repaint 页面加载缓慢的原因 浏览器部分 代码部分 优 ...
最新文章
- Windows10家庭版的功能中没有Hyper-V的解决方法
- java字符串排序_对字符串排序持一种宽容的心态
- C# Winform 窗体美化(十、自定义窗体)
- 神经网络不收敛的查缺补漏
- 一文透析 Spring Boot、微服务架构和大数据治理三者之间的故事
- 基于JAVA+SpringMVC+Mybatis+MYSQL的健身管理系统
- 机器学习8/100天-Logistic回归原理与实现
- 从C#到Swift原来这么简单,So Easy!
- 用C#在Visual Studio写Javascript单元测试
- 【企业了解】巨量引擎(飞鱼CRM)
- pert图java_甘特图和PERT图
- 2019年大学计算机二级考试报名,南通职业大学2019年秋季计算机二级考试报名通知...
- 安卓模拟PC浏览器发送http请求
- 《青玉案·元夕》——辛弃疾
- 29. 尚融宝借款申请
- 几何结构因子(Geometrical structure factor)和原子形状因子(atomic form factor)
- ffmpeg缩放视频尺寸
- 单片机-结构体函数指针高级使用方法
- JAVA开发与运维(docker运维常规操作)
- Java Entry类详解