Skip to content

perf: batch update attributes #2001

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

perf: batch update attributes #2001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c88d1c
perf: batch update attributes
Alexzjt Sep 8, 2025
e0b5eaa
perf: batch update attributes
Alexzjt Sep 8, 2025
86a892a
Merge branch 'perf/skipDispatchEvent' into perf/setAttributes
Alexzjt Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/g-lite/src/css/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export interface PropertyParseOptions {
forceUpdateGeometry: boolean;
usedAttributes: string[];
memoize: boolean;
skipDispatchAttrModifiedEvent?: boolean;
}

export interface StyleValueRegistry {
Expand Down
45 changes: 45 additions & 0 deletions packages/g-lite/src/display-objects/DisplayObject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,42 @@ export class DisplayObject<
}
}

/**
* batch update attributes without attributeChangedCallback, for performance
* use with caution
* @param attributes
* @param parseOptions
*/
setAttributes(
attributes: Partial<StyleProps>,
parseOptions: Partial<PropertyParseOptions> = {},
) {
const { skipDispatchAttrModifiedEvent = false } = parseOptions;
let oldAttributes;
let oldParsedValues;
if (!skipDispatchAttrModifiedEvent) {
oldAttributes = { ...this.attributes };
oldParsedValues = { ...this.parsedStyle };
}
runtime.styleValueRegistry.processProperties(
this as unknown as DisplayObject,
attributes,
parseOptions,
);
Comment on lines +295 to +299
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Sep 8, 2025

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,
    );

// redraw at next frame
this.dirty();
if (!skipDispatchAttrModifiedEvent) {
for (const key in attributes) {
this.dispatchAttrModifiedEvent(
key,
oldAttributes[key],
attributes[key],
oldParsedValues[key as string],
);
}
}
}

/**
* called when attributes get changed or initialized
*/
Expand All @@ -299,6 +335,15 @@ export class DisplayObject<

// return;

this.dispatchAttrModifiedEvent(name, oldValue, value, oldParsedValue);
}

private dispatchAttrModifiedEvent<Key extends keyof StyleProps>(
name: Key,
oldValue: StyleProps[Key],
value: StyleProps[Key],
oldParsedValue: ParsedStyleProps[keyof ParsedStyleProps],
) {
const newParsedValue = this.parsedStyle[name as string];
if (this.isConnected) {
attrModifiedEvent.relatedNode = this as IElement;
Expand Down
Loading