Skip to content

Conversation

@Alexzjt
Copy link
Contributor

@Alexzjt Alexzjt commented Sep 8, 2025

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / Document optimization
  • TypeScript definition update
  • Refactoring
  • Performance improvement
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

在S2百万数据交叉表滚动场景下(1649个元素),S2花费了巨量的时间在创建、计算和渲染单元格上,伴随着大量单元格、line、rect、text等Destroy与new。大量的对象在短时间内被创建然后又被废弃,会导致频繁的垃圾回收和较高的性能开销。所以有必要采取复用已有DisplayObject这样性能友好的写法来提高性能。在复用DisplayObject过程中,就会有大量的对象属性更改的操作。如果以当前版本的G的API为准,写法如下:
假设某obj有10个属性需要更改,则需要遍历10次setAttribute走同样的解析流程,在对象数量较多的情况下,每一帧都要做不必要的重复解析。

export function batchSetStyle<
  T extends DisplayObject,
  S extends BaseStyleProps,
>(obj: T, style: S) {
  for (const styleKey in style) {
    obj.style[styleKey] = style[styleKey];
  }
}

引入setAttributes后,一个对象的属性只需要一次就修改好。

export function batchSetStyle<
  T extends DisplayObject,
  S extends BaseStyleProps,
>(obj: T, style: S) {
  obj.setAttributes(style, {skipDispatchAttrModifiedEvent: true});
}

引入了skipDispatchAttrModifiedEvent,可以看到去掉更新事件的触发之后,本次更改可以带来 > 4%的性能提升

Before After
image image

📝 Changelog

Language Changelog
🇺🇸 English batch update attributes without attributeChangedCallback, for performance
🇨🇳 Chinese 批量更新DisplayObject属性

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@changeset-bot
Copy link

changeset-bot bot commented Sep 8, 2025

⚠️ No Changeset found

Latest commit: 86a892a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @Alexzjt, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a critical performance enhancement by implementing a mechanism for batch updating attributes of display objects. The primary goal is to minimize the overhead associated with individual attribute modifications, leading to improved rendering efficiency and reduced garbage collection frequency in environments with high data volumes or dynamic rendering requirements.

Highlights

  • New setAttributes Method: Introduced a new setAttributes method to the DisplayObject class, allowing for the batch updating of multiple attributes simultaneously.
  • Performance Optimization: This new method significantly improves performance by avoiding redundant parsing and attributeChangedCallback calls when numerous attributes of a DisplayObject are updated at once. This is particularly beneficial in scenarios involving frequent changes to many objects, such as large-scale data visualizations.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in issue comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

这个 PR 为 DisplayObject 引入了一个新的 setAttributes 方法,用于批量更新属性,旨在通过绕过单独的 setAttribute 调用及其相关的开销(如事件派发)来提高性能。实现方式直接明了,符合其性能优化的目标。我的审查包含一个建议,以确保 API 在处理 undefined 值时与 setAttribute 保持一致性。

Comment on lines +288 to +292
runtime.styleValueRegistry.processProperties(
this as unknown as DisplayObject,
attributes,
parseOptions,
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

setAttribute 方法会显式忽略 undefined 值,但新添加的 setAttributes 方法没有这样做,这可能导致行为不一致。例如,setAttribute('x', undefined) 是一个空操作,但 setAttributes({ x: undefined }) 会将 attributes.x 设置为 undefined。为了保持 API 的一致性并防止潜在的 bug,建议 setAttributes 也忽略 undefined 值。

    const filteredAttributes: Partial<StyleProps> = {};
    for (const key in attributes) {
      const value = attributes[key as keyof StyleProps];
      if (value !== undefined) {
        filteredAttributes[key as keyof StyleProps] = value;
      }
    }

    runtime.styleValueRegistry.processProperties(
      this as unknown as DisplayObject,
      filteredAttributes,
      parseOptions,
    );

@wang1212
Copy link
Member

wang1212 commented Sep 8, 2025

setAttributessetAttribute 逻辑不一致,缺少 dirty() 后续的逻辑处理。

# Conflicts:
#	packages/g-lite/src/display-objects/DisplayObject.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants