Fix: issue #309 编辑器内容过多表格数据容易卡顿 。减少node2Vnode，node2html重复执行#592
Hidden character warning
Conversation
…itor-next into 309-编辑器内容过多表格数据容易卡顿 # Conflicts: # packages/core/src/editor/plugins/with-content.ts # packages/core/src/text-area/update-view.ts # packages/core/src/utils/weak-maps.ts
WalkthroughThis update introduces caching mechanisms to the editor core for improved performance, especially when handling large tables. New weak maps are used to cache virtual nodes and HTML representations of nodes. The editor's content and view update logic now leverage these caches, reducing redundant computations and improving responsiveness with heavy content loads. Changes
Sequence Diagram(s)sequenceDiagram
participant Editor
participant WeakMaps
participant Renderer
Editor->>WeakMaps: Check NODE_TO_VNODE/NODE_TO_HTML cache for node
alt Cache hit
WeakMaps-->>Editor: Return cached vnode/HTML
else Cache miss
Editor->>Renderer: Generate vnode/HTML for node
Renderer-->>Editor: Return vnode/HTML
Editor->>WeakMaps: Store vnode/HTML in cache
end
Editor->>Renderer: Use vnode/HTML for rendering or output
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/core/src/text-area/update-view.ts (2)
20-21: Add missing trailing comma.According to ESLint rules, a trailing comma should be added after
NODE_TO_VNODE.EDITOR_TO_WINDOW, - NODE_TO_VNODE, + NODE_TO_VNODE, NODE_TO_INDEX
79-94: Fix indentation issues in caching logic.The caching implementation is good, but there are indentation inconsistencies that should be fixed to follow the project's coding style.
if (NODE_TO_VNODE.has(node)) { const [index, cached] = NODE_TO_VNODE.get(node as any) as any if (cached) { if (index !== i) { - // 设置相关 weakMap 信息 - NODE_TO_INDEX.set(node, i) - NODE_TO_VNODE.set(node, [i, cached]) + // 设置相关 weakMap 信息 + NODE_TO_INDEX.set(node, i) + NODE_TO_VNODE.set(node, [i, cached]) } return cached - } } + } const vnode = node2Vnode(node, i, editor, editor) normalizeVnodeData(vnode) // 整理 vnode.data 以符合 snabbdom 的要求 NODE_TO_VNODE.set(node as any, [i, vnode])🧰 Tools
🪛 ESLint
[error] 80-80: Expected blank line after variable declarations.
(newline-after-var)
[error] 83-83: Expected indentation of 10 spaces but found 12.
(indent)
[error] 84-84: Expected indentation of 10 spaces but found 12.
(indent)
[error] 85-85: Expected indentation of 10 spaces but found 12.
(indent)
[error] 88-88: Expected indentation of 6 spaces but found 8.
(indent)
[error] 89-89: Expected indentation of 4 spaces but found 6.
(indent)
packages/core/src/editor/plugins/with-content.ts (1)
23-23: Format object import following project style.This import should use multiple lines to match the project's coding style.
-import { EDITOR_TO_SELECTION, NODE_TO_KEY, NODE_TO_VNODE, NODE_TO_HTML } from '../../utils/weak-maps' +import { + EDITOR_TO_SELECTION, + NODE_TO_KEY, + NODE_TO_VNODE, + NODE_TO_HTML +} from '../../utils/weak-maps'🧰 Tools
🪛 ESLint
[error] 23-23: Expected a line break after this opening brace.
(object-curly-newline)
[error] 23-23: Expected a line break before this closing brace.
(object-curly-newline)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.changeset/shy-moose-fly.md(1 hunks)packages/core/src/editor/plugins/with-content.ts(3 hunks)packages/core/src/text-area/update-view.ts(2 hunks)packages/core/src/utils/weak-maps.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/core/src/editor/plugins/with-content.ts (1)
packages/core/src/utils/weak-maps.ts (3)
NODE_TO_KEY(57-57)NODE_TO_VNODE(39-39)NODE_TO_HTML(40-40)
🪛 ESLint
packages/core/src/editor/plugins/with-content.ts
[error] 23-23: Expected a line break after this opening brace.
(object-curly-newline)
[error] 23-23: Expected a line break before this closing brace.
(object-curly-newline)
[error] 186-195: Expected blank line after variable declarations.
(newline-after-var)
packages/core/src/text-area/update-view.ts
[error] 21-22: Missing trailing comma.
(@typescript-eslint/comma-dangle)
[error] 21-22: Missing trailing comma.
(comma-dangle)
[error] 80-80: Expected blank line after variable declarations.
(newline-after-var)
[error] 83-83: Expected indentation of 10 spaces but found 12.
(indent)
[error] 84-84: Expected indentation of 10 spaces but found 12.
(indent)
[error] 85-85: Expected indentation of 10 spaces but found 12.
(indent)
[error] 88-88: Expected indentation of 6 spaces but found 8.
(indent)
[error] 89-89: Expected indentation of 4 spaces but found 6.
(indent)
🔇 Additional comments (7)
packages/core/src/utils/weak-maps.ts (1)
39-40: Added caching for VNodes and HTML rendering.These two new WeakMaps will help cache virtual nodes and HTML representations of DOM nodes, which can significantly improve performance, especially when handling large tables or complex content structures.
.changeset/shy-moose-fly.md (1)
1-5: Approve changeset addition.The changeset correctly describes the purpose of this PR: optimizing editor performance when handling large table data.
packages/core/src/text-area/update-view.ts (1)
77-94: Great performance optimization using VNode caching.The implementation efficiently reuses existing VNodes when possible, reducing unnecessary recreation of virtual DOM nodes. This will have a significant positive impact on performance, especially when dealing with large tables.
Key optimization points:
- Checks if a node already has a cached VNode
- Updates index tracking when node position changes
- Reuses existing VNodes when appropriate
- Only creates new VNodes when necessary
🧰 Tools
🪛 ESLint
[error] 80-80: Expected blank line after variable declarations.
(newline-after-var)
[error] 83-83: Expected indentation of 10 spaces but found 12.
(indent)
[error] 84-84: Expected indentation of 10 spaces but found 12.
(indent)
[error] 85-85: Expected indentation of 10 spaces but found 12.
(indent)
[error] 88-88: Expected indentation of 6 spaces but found 8.
(indent)
[error] 89-89: Expected indentation of 4 spaces but found 6.
(indent)
packages/core/src/editor/plugins/with-content.ts (4)
105-111: Handling selection changes - good addition.Adding support for
set_selectionoperations ensures that nodes affected by selection changes are properly tracked and updated. This helps maintain cache consistency.
121-129: Effective cache invalidation strategy.The implementation properly clears cached VNodes and HTML strings when nodes change, preventing stale data and potential rendering issues. The check for nodes with a type property helps focus on meaningful nodes.
186-195: HTML caching optimization.This implementation significantly improves performance by memoizing HTML serialization per node. For editors with large tables or complex content, this can dramatically reduce processing time.
Consider adding a blank line after the
const html = ...variable declaration to match the project's coding style.🧰 Tools
🪛 ESLint
[error] 186-195: Expected blank line after variable declarations.
(newline-after-var)
186-195:Details
✅ Verification successful
Verify potential memory usage.
While this caching approach will improve performance, it's worth monitoring memory usage in scenarios with extremely large documents to ensure the WeakMap caching doesn't lead to unexpected memory issues.
🏁 Script executed:
#!/bin/bash # Inspect how many nodes might be cached in a typical document # This helps assess the memory footprint of the caching strategy # Look for node creation throughout the codebase rg -A 2 "createNode|createElement" --type ts # Check if there are any memory management or cache clearing mechanisms rg -A 5 "clear.*cache|invalidate.*cache|reset.*cache" --type ts # Look for any existing performance benchmarks rg -A 2 "performance|benchmark" --type tsLength of output: 6267
WeakMap-Based Caching Does Not Require Manual Cache Invalidation
The current implementation uses a WeakMap for
NODE_TO_HTML, so entries are automatically released when their corresponding nodes are garbage-collected. Memory usage will only scale with the number of live DOM nodes in the editor tree, and there’s no unexpected/unbounded growth beyond that. No explicit cache-clearing logic or additional benchmarks are required at this time.🧰 Tools
🪛 ESLint
[error] 186-195: Expected blank line after variable declarations.
(newline-after-var)
2 participants
Changes Overview
Implementation Approach
Testing Done
Verification Steps
Additional Notes
Checklist
Related Issues
Summary by CodeRabbit
Performance Improvements
Bug Fixes