js
- 对象属性和数组元素的速度都比变量慢
- 也就是对于重复对象访问路径，要进行变量提炼
// 低性能版本
console.log(foo.bar.tap.count);
console.log(foo.bar.tap.count + 1);
// 高性能版本
const count = foo.bar.tap.count;
console.log(count);
console.log(count + 1);
这里的底层逻辑，是将嵌套属性单独提取为局部变量，下次取值时不再需要通过这条链路索引取值，提升性能
易错点：
- 数组的api slice 是不包含末尾序列的。
- Math.min() 默认值返回infinity
- 隐士转换 Number(null) / 100 Number仅仅对于null返回0，其余为NAN
数据缓存
- 常用localsotrage ，项目里面用到了lru-cahce 因为，业务特殊性，调用接口次数受限，同样的请求，没有必要重复去做，
const cache = new LRUCache({
max: 500,
maxAge: 1000 * 60 * 60,
});
cache.set("key", "test");
const tests = cache.get("key"); // "value"
console.log("tests", tests);
webworker
- 项目当时，有存在全屏大量实时数据订阅，并进行大量业务逻辑计算的逻辑，由于本身js是单线程，所以对于较多的实时计算，逻辑本身存在问题。
框架层面
- react.lazy按需加载
- 避免深层次的props传递，因为会引发不必要的子组件渲染，所以这时用readux处理
- 灵活运用useMemo ,useCallback，lru-cache 等缓存数据。
网络层面
- 接口请求并发借助 promise.all，避免某个请求过慢阻塞了后续请求。
- 条件允许，使用http2因为存在多路复用，http1.0版本存在队头阻塞问题，并且浏览器并发限制，单次最多6个数据并发
- 接口请求顺序优化：实际业务中存在很多，耗时多，但是又重要的公共请求，就可以提前到最开始进行加载，避免整体耗时。
缓存层面
- 配合服务端配置,cache-control字段，实现浏览器缓存
- lru-cache
- CDN配置，把一些常用的静态资源存放到cdn服务器，实现资源加载速度的提升
项目层面
- 无限走势图，滚动，借助无限懒加载思路，添加了上下缓冲区实现。
- 静态锁-防止异步接口，并发执行。具体例子待补充
库-echarts
- echarts 存在合并配置 notmerge属性，这个属性对于需要删除某些数据，存在缓存复用的问题
- 可通过关闭动画，针对，实时更新场景，以及较多数量图线
- 采取larger模式，在series 里面进行配置
- 采取svg模式渲染，针对需高清图，以及较大规模数据集进行渲染。
数据状态
- 对于前端业务开发中，其实很多时候就是在和数据流在打交道，并且react 数据驱动视图。所以出现bug后，首先思考这个异常状态是有哪一步设置的，继续不断层层向上排除。
- 配合mvvm设计思路，将数据层，格式化数据（业务数据处理），等相分离。
react
- 依赖变化底层依赖于Object.is。
- less变量作用域，定义的变量仅仅在当前的作用域内起作用，导出无效
