perf(edgeless): optimize selection frame rate (#8751)

toeverything · Nov 18, 2024 · 9e2af17 · 9e2af17
1 parent 03fd5bb
commit 9e2af17
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/packages/blocks/src/root-block/widgets/format-bar/format-bar.ts b/packages/blocks/src/root-block/widgets/format-bar/format-bar.ts
@@ -16,7 +16,11 @@ import {
 } from '@blocksuite/affine-components/toolbar';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
-import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
+import {
+  assertExists,
+  DisposableGroup,
+  nextTick,
+} from '@blocksuite/global/utils';
 import {
   autoUpdate,
   computePosition,
@@ -146,7 +150,9 @@ export class AffineFormatBarWidget extends WidgetComponent {
             }
           }
 
-          await this.host.getUpdateComplete();
+          // We cannot use `host.getUpdateComplete()` here
+          // because it would cause excessive DOM queries, leading to UI jamming.
+          await nextTick();
 
           if (textSelection) {
             const block = this.host.view.getBlock(textSelection.blockId);
@@ -178,7 +184,7 @@ export class AffineFormatBarWidget extends WidgetComponent {
             return;
           }
 
-          if (blockSelections.length > 0) {
+          if (this.block && blockSelections.length > 0) {
             this._displayType = 'block';
             const selectedBlocks = blockSelections
               .map(selection => {

diff --git a/packages/framework/global/src/utils/function.ts b/packages/framework/global/src/utils/function.ts
@@ -112,3 +112,15 @@ export const debounce = <T extends (...args: any[]) => void>(
     timer = setTimeout(setTimer, limit);
   } as T;
 };
+
+export async function nextTick() {
+  // @ts-ignore
+  if ('scheduler' in window && 'yield' in window.scheduler) {
+    // @ts-ignore
+    return window.scheduler.yield();
+  } else if (typeof requestIdleCallback !== 'undefined') {
+    return new Promise(resolve => requestIdleCallback(resolve));
+  } else {
+    return new Promise(resolve => setTimeout(resolve, 0));
+  }
+}
diff --git a/packages/framework/store/src/transformer/job.ts b/packages/framework/store/src/transformer/job.ts
@@ -1,5 +1,5 @@
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-import { Slot } from '@blocksuite/global/utils';
+import { nextTick, Slot } from '@blocksuite/global/utils';
 
 import type { BlockModel, BlockSchemaType } from '../schema/index.js';
 import type { Doc, DocCollection, DocMeta } from '../store/index.js';
@@ -45,18 +45,6 @@ interface DraftBlockTreeNode {
   children: Array<DraftBlockTreeNode>;
 }
 
-async function nextTick() {
-  // @ts-ignore
-  if ('scheduler' in window && 'yield' in window.scheduler) {
-    // @ts-ignore
-    return window.scheduler.yield();
-  } else if (typeof requestIdleCallback !== 'undefined') {
-    return new Promise(resolve => requestIdleCallback(resolve));
-  } else {
-    return new Promise(resolve => setTimeout(resolve, 0));
-  }
-}
-
 // The number of blocks to insert in one batch
 const BATCH_SIZE = 100;