perf: address PR comments and remove bolt persona references
This commit is contained in:
@@ -1,4 +0,0 @@
|
|||||||
## 2024-06-02 - Eliminate Layout Thrashing in Theme Sync
|
|
||||||
|
|
||||||
**Learning:** Interleaving `window.getComputedStyle().getPropertyValue()` and `element.style.setProperty()` inside a loop causes layout thrashing (forced synchronous layout) multiple times per animation frame during drawing.
|
|
||||||
**Action:** When synchronizing many DOM styles based on computed styles, always collect the computed values in a first pass, and only then apply `setProperty` updates in a separate second pass, preferably also skipping updates where the value hasn't actually changed.
|
|
||||||
@@ -28,7 +28,7 @@ function sceneFromEditor(
|
|||||||
files: BinaryFiles,
|
files: BinaryFiles,
|
||||||
): ScenePayload {
|
): ScenePayload {
|
||||||
return {
|
return {
|
||||||
// ⚡ Bolt: Excalidraw passes immutable arrays, avoid copying it on every onChange event
|
// Excalidraw passes immutable arrays, avoid copying it on every onChange event
|
||||||
elements: elements as unknown[],
|
elements: elements as unknown[],
|
||||||
appState: appState as unknown as Record<string, unknown>,
|
appState: appState as unknown as Record<string, unknown>,
|
||||||
files: files as unknown as Record<string, unknown>,
|
files: files as unknown as Record<string, unknown>,
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export function useThemeTokenSync(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ⚡ Bolt: Read all tokens first to avoid layout thrashing
|
// Read all tokens first to avoid layout thrashing
|
||||||
const computedStyles = window.getComputedStyle(excalidrawRoot);
|
const computedStyles = window.getComputedStyle(excalidrawRoot);
|
||||||
const updates: Array<[string, string]> = [];
|
const updates: Array<[string, string]> = [];
|
||||||
|
|
||||||
@@ -44,7 +44,7 @@ export function useThemeTokenSync(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ⚡ Bolt: Write in a separate pass, skipping unchanged values
|
// Write in a separate pass, skipping unchanged values
|
||||||
for (const [targetToken, value] of updates) {
|
for (const [targetToken, value] of updates) {
|
||||||
if (appShell.style.getPropertyValue(targetToken) !== value) {
|
if (appShell.style.getPropertyValue(targetToken) !== value) {
|
||||||
appShell.style.setProperty(targetToken, value);
|
appShell.style.setProperty(targetToken, value);
|
||||||
|
|||||||
Reference in New Issue
Block a user