Skip to content
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.

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

perf: 优化100万数据下的滚动性能 #3128

Open
wants to merge 4 commits into
base: next
Choose a base branch
from
Open

perf: 优化100万数据下的滚动性能 #3128

wants to merge 4 commits into from

Conversation

Alexzjt
Copy link
Contributor

@Alexzjt Alexzjt commented Mar 25, 2025

👀 PR includes

✨ Feature

  • New feature

🎨 Enhance

  • Code style optimization
  • Refactoring
  • Change the UI
  • Improve the performance
  • Type optimization

🐛 Bugfix

🔧 Chore

  • Test case
  • Docs / demos update
  • CI / workflow
  • Release version
  • Other ()

📝 Description

🖼️ Screenshot

Before After
image image
iShot_2025-03-25_15 16 06 iShot_2025-03-25_15 17 27

🔗 Related issue link

🔍 Self-Check before the merge

  • Add or update relevant docs.
  • Add or update relevant demos.
  • Add or update test case.
  • Add or update relevant TypeScript definitions.

Sorry, something went wrong.

Copy link
Contributor

你好 @Alexzjt,非常感谢你的贡献.
为了让代码更健壮, 请根据 贡献指南 补充相应单元测试 (文档改动或其他特殊场景除外), 如果有 API 改动, 请修改 相应的文档.
同时请检查 linttest 相关 CI 是否通过, 如果失败, 请点击 [Details] 按钮查看, 并根据日志修复.

Hello, @Alexzjt, Thanks for your contribution. In order to make the code more robust, please add the corresponding unit tests, and update the docs if there are API changes.
At the same time, please check whether the CI related to lint and test passes. If the CI fails, please click [Details] button to check and repair according to the log.

@github-actions github-actions bot added the next 2.0-next 版本的问题 label Mar 25, 2025
Copy link

Walkthrough

此PR通过引入DataCellPool来优化大数据量(100万条数据)下的滚动性能。主要改动包括在base-facet.ts中使用对象池模式管理DataCell的创建和销毁,以及在多个文件中引入batchSetStyle方法以减少重复渲染操作。

Changes

文件 概要
DataCellPool.ts 新增DataCellPool类,用于管理DataCell的对象池。
base-facet.ts 修改createDataCell方法,使用DataCellPool对象池来管理DataCell的创建和销毁。
base-cell.ts, data-cell.ts, g-mini-charts.ts, g-renders.ts 引入batchSetStyle方法,优化样式设置以减少重复渲染。
frozen-facet.ts 优化单元格的父元素检查,减少不必要的DOM操作。
g-mini-charts-spec.ts 更新测试用例以适应新的实现。

Copy link
Contributor

github-actions bot commented Mar 25, 2025

Size Change: +606 B (+0.1%)

Total Size: 625 kB

Filename Size Change
./packages/s2-core/dist/s2-extends.min.js 157 kB +172 B (+0.11%)
./packages/s2-core/dist/s2.min.js 261 kB +434 B (+0.17%)
ℹ️ View Unchanged
Filename Size
./packages/s2-core/dist/s2.min.css 581 B
./packages/s2-react-components/dist/s2-react-components.min.css 2.55 kB
./packages/s2-react-components/dist/s2-react-components.min.js 124 kB
./packages/s2-react/dist/s2-react.min.css 1.74 kB
./packages/s2-react/dist/s2-react.min.js 38.3 kB
./packages/s2-vue/dist/s2-vue.min.css 2.05 kB
./packages/s2-vue/dist/s2-vue.min.js 38.3 kB

compressed-size-action

@codecov-commenter
Copy link

codecov-commenter commented Mar 25, 2025

Codecov Report

Attention: Patch coverage is 70.58824% with 5 lines in your changes missing coverage. Please review.

Project coverage is 79.86%. Comparing base (ecdc9c8) to head (c0fb9a9).
Report is 652 commits behind head on next.

Files with missing lines Patch % Lines
packages/s2-core/src/utils/g-mini-charts.ts 25.00% 2 Missing and 1 partial ⚠️
packages/s2-core/src/cell/base-cell.ts 75.00% 0 Missing and 1 partial ⚠️
...re/src/extends/pivot-chart/cell/chart-data-cell.ts 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             next    #3128      +/-   ##
==========================================
+ Coverage   75.77%   79.86%   +4.09%     
==========================================
  Files         257      218      -39     
  Lines       11994    11939      -55     
  Branches     2464     2673     +209     
==========================================
+ Hits         9088     9535     +447     
+ Misses       1398      790     -608     
- Partials     1508     1614     +106     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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