refactor: improve rendering performance on low-end hardware (#1825)

refactor: improve rendering perf. on low-end hardware

- Reintroduced MarkdownWorker for asynchronous processing of markdown content.

- Debounce message content updates dynamically based on render time

src/lib/components/chat/MarkdownRenderer.svelte

@@ -1,40 +1,45 @@
 <script lang="ts">
 	import type { WebSearchSource } from "$lib/types/WebSearch";
 	import { processTokens, processTokensSync, type Token } from "$lib/utils/marked";
-	// import MarkdownWorker from "$lib/workers/markdownWorker?worker";
+	import MarkdownWorker from "$lib/workers/markdownWorker?worker";
 	import CodeBlock from "../CodeBlock.svelte";
-	// import type { IncomingMessage, OutgoingMessage } from "$lib/workers/markdownWorker";
+	import type { IncomingMessage, OutgoingMessage } from "$lib/workers/markdownWorker";
 	import { browser } from "$app/environment";
 
 	import DOMPurify from "isomorphic-dompurify";
+	import { onMount } from "svelte";
+	import { updateDebouncer } from "$lib/utils/updates";
 
 	interface Props {
 		content: string;
 		sources?: WebSearchSource[];
 	}
 
-	// const worker = browser && window.Worker ? new MarkdownWorker() : null;
+	let worker: Worker | null = null;
 
 	let { content, sources = [] }: Props = $props();
 
 	let tokens: Token[] = $state(processTokensSync(content, sources));
 
 	async function processContent(content: string, sources: WebSearchSource[]): Promise<Token[]> {
-		// if (worker) {
-		// 	return new Promise((resolve) => {
-		// 		worker.onmessage = (event: MessageEvent<OutgoingMessage>) => {
-		// 			if (event.data.type !== "processed") {
-		// 				throw new Error("Invalid message type");
-		// 			}
-		// 			resolve(event.data.tokens);
-		// 		};
-		// 		worker.postMessage(
-		// 			JSON.parse(JSON.stringify({ content, sources, type: "process" })) as IncomingMessage
-		// 		);
-		// 	});
-		// } else {
-		return processTokens(content, sources);
-		// }
+		if (worker) {
+			return new Promise((resolve) => {
+				if (!worker) {
+					throw new Error("Worker not initialized");
+				}
+				worker.onmessage = (event: MessageEvent<OutgoingMessage>) => {
+					if (event.data.type !== "processed") {
+						throw new Error("Invalid message type");
+					}
+					resolve(event.data.tokens);
+				};
+				worker.postMessage(
+					JSON.parse(JSON.stringify({ content, sources, type: "process" })) as IncomingMessage
+				);
+			});
+		} else {
+			return processTokens(content, sources);
+		}
 	}
 
 	$effect(() => {
@@ -42,25 +47,40 @@
 			tokens = processTokensSync(content, sources);
 		} else {
 			(async () => {
-				tokens = await processContent(content, sources);
+				updateDebouncer.startRender();
+				tokens = await processContent(content, sources).then(
+					async (tokens) =>
+						await Promise.all(
+							tokens.map(async (token) => {
+								if (token.type === "text") {
+									token.html = DOMPurify.sanitize(await token.html);
+								}
+								return token;
+							})
+						)
+				);
+
+				updateDebouncer.endRender();
 			})();
 		}
 	});
 
-	DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-		if (node.tagName === "A") {
-			node.setAttribute("target", "_blank");
-			node.setAttribute("rel", "noreferrer");
-		}
+	onMount(() => {
+		worker = browser && window.Worker ? new MarkdownWorker() : null;
+
+		DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+			if (node.tagName === "A") {
+				node.setAttribute("target", "_blank");
+				node.setAttribute("rel", "noreferrer");
+			}
+		});
 	});
 </script>
 
 {#each tokens as token}
 	{#if token.type === "text"}
-		{#await token.html then html}
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			{@html DOMPurify.sanitize(html)}
-		{/await}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html token.html}
 	{:else if token.type === "code"}
 		<CodeBlock code={token.code} rawCode={token.rawCode} />
 	{/if}

src/lib/utils/updates.ts

@@ -0,0 +1,35 @@
+// This is a debouncer for the updates from the server to the client
+// It is used to prevent the client from being overloaded with too many updates
+// It works by keeping track of the time it takes to render the updates
+// and adding a safety margin to it, to find the debounce time.
+
+class UpdateDebouncer {
+	private renderStartedAt: Date | null = null;
+	private lastRenderTimes: number[] = [];
+
+	get maxUpdateTime() {
+		if (this.lastRenderTimes.length === 0) {
+			return 50;
+		}
+		return Math.max(...this.lastRenderTimes) * 3;
+	}
+
+	public startRender() {
+		this.renderStartedAt = new Date();
+	}
+
+	public endRender() {
+		if (!this.renderStartedAt) {
+			return;
+		}
+
+		const timeSinceRenderStarted = new Date().getTime() - this.renderStartedAt.getTime();
+		this.lastRenderTimes.push(timeSinceRenderStarted);
+		if (this.lastRenderTimes.length > 10) {
+			this.lastRenderTimes.shift();
+		}
+		this.renderStartedAt = null;
+	}
+}
+
+export const updateDebouncer = new UpdateDebouncer();

src/routes/conversation/[id]/+page.svelte

@@ -26,6 +26,7 @@
 	import { browser } from "$app/environment";
 
 	import "katex/dist/katex.min.css";
+	import { updateDebouncer } from "$lib/utils/updates.js";
 
 	let { data = $bindable() } = $props();
 
@@ -270,6 +271,12 @@
 			if (messageUpdatesIterator === undefined) return;
 
 			files = [];
+			let buffer = "";
+			// Initialize lastUpdateTime outside the loop to persist between updates
+			let lastUpdateTime = new Date();
+
+			let reasoningBuffer = "";
+			let reasoningLastUpdate = new Date();
 
 			for await (const update of messageUpdatesIterator) {
 				if ($isAborted) {
@@ -283,10 +290,6 @@
 					update.token = update.token.replaceAll("\0", "");
 				}
 
-				// dont write updates for reasoning stream and normal stream to reduce render load
-				// but handle the rest
-
-				// Skip storing high-frequency updates to reduce render load
 				const isHighFrequencyUpdate =
 					(update.type === MessageUpdateType.Reasoning &&
 						update.subtype === MessageReasoningUpdateType.Stream) ||
@@ -297,9 +300,16 @@
 				if (!isHighFrequencyUpdate) {
 					messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
 				}
+				const currentTime = new Date();
 
 				if (update.type === MessageUpdateType.Stream && !$settings.disableStream) {
-					messageToWriteTo.content += update.token;
+					buffer += update.token;
+					// Check if this is the first update or if enough time has passed
+					if (currentTime.getTime() - lastUpdateTime.getTime() > updateDebouncer.maxUpdateTime) {
+						messageToWriteTo.content += buffer;
+						buffer = "";
+						lastUpdateTime = currentTime;
+					}
 					pending = false;
 				} else if (
 					update.type === MessageUpdateType.Status &&
@@ -326,7 +336,15 @@
 						messageToWriteTo.reasoning = "";
 					}
 					if (update.subtype === MessageReasoningUpdateType.Stream) {
-						messageToWriteTo.reasoning += update.token;
+						reasoningBuffer += update.token;
+						if (
+							currentTime.getTime() - reasoningLastUpdate.getTime() >
+							updateDebouncer.maxUpdateTime
+						) {
+							messageToWriteTo.reasoning += reasoningBuffer;
+							reasoningBuffer = "";
+							reasoningLastUpdate = currentTime;
+						}
 					}
 				}
 			}