New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Excel绘制优化细节记录 #5

Open

bojue opened this issue Sep 9, 2020 · 0 comments

Owner

bojue commented Sep 9, 2020 •

edited

Loading

优化细节

1. 局部渲染

仅仅渲染可视化区域的内容（ok）

2. 节流

位置：拖拽宽高的button使用位置节流，如果拖拽状态和上个状态一致，不触发drag事件的计算和赋值（ok）
坐标：区域选择，当前坐标和上个状态坐标相同，不触发计算和区域绘制（ok）

3. 减少绘制

坐标节流（ok）
拖拽改变宽高，监听drag事件但是不触发重绘canvas,只在mouseUp事件，触发绘制（ok）
设置属性，如果和之前的属性一直，不触发绘制（ok）

4. 拆分计算

对象状态维护，区域选择先计算可视区域，绘制，然后计算不可视区域的对象维护[这个是因为数据结构定义的问题]
数据量巨大可以按需加载渲染数据对象
将excel对象拆分两部分，内容+属性设置

5. 对象缓存

记录当前的状态，比如按照行列选择的状态，如果和上个状态一致，则不需要触发渲染（ok）

6. 模糊处理

~~高清屏幕画板缩小4倍（ok）~~
高清屏幕模糊问题，采用devicePixelRatio 做了缩放适配，减少开发过程中的缩放变量维护
绘制1px线条模糊问题（ok）

7. 双缓存方案

区域选择的时候，使用双缓存方案
撤销，反撤销使用双缓存方案

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment