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

[g] 多余的事件传递需要精简 #1120

Closed
xiaoiver opened this issue Aug 12, 2022 · 3 comments
Closed

[g] 多余的事件传递需要精简 #1120

xiaoiver opened this issue Aug 12, 2022 · 3 comments
Assignees
Labels

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Aug 12, 2022

目前通过 appendChild 将图形添加到画布时,首先会在子节点上触发 ElementEvent.INSERT,在画布根节点监听到后,会触发 MOUNTED 事件,该过程可以精简。

截屏2022-08-12 下午5 30 34

@xiaoiver xiaoiver self-assigned this Aug 12, 2022
@xiaoiver xiaoiver added the bug label Aug 12, 2022
@xiaoiver
Copy link
Contributor Author

暂时去掉 CHILD_INSERTED / REMOVED 事件,同时取消在 document 上对它们的监听。

@xiaoiver
Copy link
Contributor Author

xiaoiver commented Oct 24, 2022

在首屏渲染阶段,每个图形都需要触发 MOUNTED 事件,如果还需要冒泡,将造成大量性能损耗。
一个可行的优化方式是 MOUNTED 事件仅在根节点出发,MOUNTED ATTR_MODIFIED 同理,这样可以省略事件传播的开销。

mountEvent.detail.target = child;
this.context.renderingContext.root.dispatchEvent(mountEvent);

@xiaoiver
Copy link
Contributor Author

xiaoiver commented Oct 25, 2022

取消这些内置事件的冒泡过程,会导致 MutationObserver 不可用:
https://g-next.antv.vision/zh/docs/api/builtin-objects/mutation-observer

因此需要在 DisplayObject 上新增一个状态,用于标识这些内置变更事件是否需要和交互事件一样进行传播:

if (!child.isMutationObserved) {
  // skip event propagation
  mountedEvent.target = child;
  this.dispatchEvent(mountedEvent, true);
} else {
  child.dispatchEvent(mountEvent);
}

当使用 MutationObserver 开启监听时,设置 isMutationObservedtrue

// 创建一个 MutationObserver
const observer = new MutationObserver(() => {});

// 开始监听 group1 上的变更
observer.observe(group1, { childList: true });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant