feat: 10% perf improvements in the core lib (#729)

3.27ms → 2.95ms

<img width="639" height="1040" alt="image"
src="https://github.com/user-attachments/assets/4f3adc53-d1f6-4596-ba68-ed5eb84efa5c"
/>

Author: shuding

src/handler/compute.ts

@@ -29,11 +29,12 @@ export default async function compute(
   const Yoga = await getYoga()
 
   // Extend the default style with defined and inherited styles.
-  const style: SerializedStyle = {
-    ...inheritedStyle,
-    ...expand(presets[type], inheritedStyle),
-    ...expand(definedStyle, inheritedStyle),
-  }
+  const style: SerializedStyle = Object.assign(
+    {},
+    inheritedStyle,
+    expand(presets[type], inheritedStyle),
+    expand(definedStyle, inheritedStyle)
+  )
 
   if (type === 'img') {
     let [resolvedSrc, imageWidth, imageHeight] = await resolveImageData(

src/handler/image.ts

@@ -61,17 +61,27 @@ function parsePNG(buf: ArrayBuffer) {
 import { createLRU, parseViewBox } from '../utils.js'
 
 type ResolvedImageData = [string, number?, number?] | readonly []
-export const cache = createLRU<ResolvedImageData>(100)
+export const cache = createLRU<ResolvedImageData>(500)
 export const inflightRequests = new Map<string, Promise<ResolvedImageData>>()
 
 const ALLOWED_IMAGE_TYPES = [PNG, APNG, JPEG, GIF, SVG]
 
+// Pre-compiled regex patterns for SVG parsing
+const SVG_ATTRS_REGEX = /<svg[^>]*>/i
+const VIEWBOX_REGEX = /viewBox=['"]([^'"]+)['"]/
+const WIDTH_REGEX = /width=['"](\d*\.?\d+)['"]/
+const HEIGHT_REGEX = /height=['"](\d*\.?\d+)['"]/
+
 function arrayBufferToBase64(buffer) {
-  let binary = ''
   const bytes = new Uint8Array(buffer)
-  for (let i = 0; i < bytes.byteLength; i++) {
-    binary += String.fromCharCode(bytes[i])
+  const CHUNK_SIZE = 0x8000 // 32KB chunks
+  let binary = ''
+
+  for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+    const chunk = bytes.subarray(i, Math.min(i + CHUNK_SIZE, bytes.length))
+    binary += String.fromCharCode(...chunk)
   }
+
   return btoa(binary)
 }
 
@@ -87,28 +97,32 @@ function base64ToArrayBuffer(base64: string): ArrayBuffer {
 
 function parseSvgImageSize(src: string, data: string) {
   // Parse the SVG image size
-  const svgTag = data.match(/<svg[^>]*>/)[0]
+  const svgMatch = data.match(SVG_ATTRS_REGEX)
+  if (!svgMatch) throw new Error(`Failed to parse SVG from ${src}`)
 
-  const viewBoxStr = svgTag.match(/viewBox=['"](.+)['"]/)
-  let viewBox = viewBoxStr ? parseViewBox(viewBoxStr[1]) : null
+  const svgTag = svgMatch[0]
+  const viewBoxMatch = VIEWBOX_REGEX.exec(svgTag)
+  const widthMatch = WIDTH_REGEX.exec(svgTag)
+  const heightMatch = HEIGHT_REGEX.exec(svgTag)
 
-  const width = svgTag.match(/width=['"](\d*\.\d+|\d+)['"]/)
-  const height = svgTag.match(/height=['"](\d*\.\d+|\d+)['"]/)
+  let viewBox = viewBoxMatch ? parseViewBox(viewBoxMatch[1]) : null
 
-  if (!viewBox && (!width || !height)) {
+  if (!viewBox && (!widthMatch || !heightMatch)) {
     throw new Error(`Failed to parse SVG from ${src}: missing "viewBox"`)
   }
 
-  const size = viewBox ? [viewBox[2], viewBox[3]] : [+width[1], +height[1]]
+  const size = viewBox
+    ? [viewBox[2], viewBox[3]]
+    : [+widthMatch[1], +heightMatch[1]]
 
   const ratio = size[0] / size[1]
   const imageSize: [number, number] =
-    width && height
-      ? [+width[1], +height[1]]
-      : width
-      ? [+width[1], +width[1] / ratio]
-      : height
-      ? [+height[1] * ratio, +height[1]]
+    widthMatch && heightMatch
+      ? [+widthMatch[1], +heightMatch[1]]
+      : widthMatch
+      ? [+widthMatch[1], +widthMatch[1] / ratio]
+      : heightMatch
+      ? [+heightMatch[1] * ratio, +heightMatch[1]]
       : [size[0], size[1]]
 
   return imageSize

src/text/measurer.ts

@@ -18,12 +18,12 @@ export function genMeasurer(
   const cache = new Map<string, number>()
 
   function measureGrapheme(grapheme: string): number {
-    if (cache.has(grapheme)) {
-      return cache.get(grapheme)
-    }
+    let width = cache.get(grapheme)
 
-    const width = engine.measure(grapheme, { fontSize, letterSpacing })
-    cache.set(grapheme, width)
+    if (width === undefined) {
+      width = engine.measure(grapheme, { fontSize, letterSpacing })
+      cache.set(grapheme, width)
+    }
 
     return width
   }

src/utils.ts

@@ -172,11 +172,19 @@ export const wordSeparators = [
   0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091, 0xa,
 ].map((point) => String.fromCodePoint(point))
 
+const segmentCache = new Map<string, string[]>()
+const MAX_SEGMENT_CACHE_SIZE = 500
+
 export function segment(
   content: string,
   granularity: 'word' | 'grapheme',
   locale?: string
 ): string[] {
+  const cacheKey = `${granularity}:${locale || ''}:${content}`
+
+  if (segmentCache.has(cacheKey)) {
+    return segmentCache.get(cacheKey)!
+  }
   if (!wordSegmenter || !graphemeSegmenter) {
     if (!(typeof Intl !== 'undefined' && 'Segmenter' in Intl)) {
       // https://caniuse.com/mdn-javascript_builtins_intl_segments
@@ -191,8 +199,10 @@ export function segment(
     })
   }
 
+  let result: string[]
+
   if (granularity === 'grapheme') {
-    return [...graphemeSegmenter.segment(content)].map((seg) => seg.segment)
+    result = [...graphemeSegmenter.segment(content)].map((seg) => seg.segment)
   } else {
     const segmented = [...wordSegmenter.segment(content)].map(
       (seg) => seg.segment
@@ -218,8 +228,16 @@ export function segment(
       }
     }
 
-    return output
+    result = output
   }
+
+  if (segmentCache.size >= MAX_SEGMENT_CACHE_SIZE) {
+    const firstKey = segmentCache.keys().next().value
+    segmentCache.delete(firstKey)
+  }
+
+  segmentCache.set(cacheKey, result)
+  return result
 }
 
 export function buildXMLString(
@@ -243,21 +261,24 @@ export function buildXMLString(
 
 export function createLRU<T>(max = 20) {
   const store: Map<string, T> = new Map()
-  function set(key: string, value: T) {
-    if (store.size >= max) {
-      const keyToDelete = store.keys().next().value
-      store.delete(keyToDelete)
-    }
-    store.set(key, value)
-  }
   function get(key: string): T | undefined {
-    const hasKey = store.has(key)
-    if (!hasKey) return undefined
+    const value = store.get(key)
+    if (value === undefined) return undefined
 
-    const entry = store.get(key)!
+    // Move to end (most recently used)
     store.delete(key)
-    store.set(key, entry)
-    return entry
+    store.set(key, value)
+    return value
+  }
+  function set(key: string, value: T) {
+    if (store.has(key)) {
+      store.delete(key)
+    } else if (store.size >= max) {
+      const firstKey = store.keys().next().value
+      store.delete(firstKey)
+    }
+
+    store.set(key, value)
   }
   function clear() {
     store.clear()