Back to Snippets
Performance
Complex

Measure Expensive Work with Performance API (mark/measure) and Display Results

Make optimizations measurable by timing real execution with performance.mark/measure. The snippet displays the last run duration, and clears marks/measures to prevent accumulating entries. Use cases: Validating memoization wins, regression checks during refactors, tuning algorithms.

Vue 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Related Snippets

Performance
Complex

Performance Optimization with Memoization

Implement memoization for expensive computations to optimize component performance in enterprise applications. ...

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  
  // Typed data type
  interface Product {
    id: number;
    name: string;
    price: number;
Performance
Complex

Offload CPU Work to a Web Worker (Progress + Cancel)

Keep the UI responsive by moving CPU-heavy work off the main thread using a Web Worker. This snippet creates an inli...

<script setup lang="ts">
  import { computed, onUnmounted, ref } from 'vue';
  
  type WorkerInMessage =
    | { type: 'start'; n: number; chunkSize: number }
    | { type: 'cancel' };
  
  type WorkerOutMessage =
Performance
Complex

Reduce Tracking Overhead for Large Data (Vue shallowRef/markRaw + React useRef)

Improve runtime performance by avoiding unnecessary deep tracking of large immutable datasets and by keeping third-p...

<script setup lang="ts">
  import { computed, markRaw, shallowRef } from 'vue';
  
  interface Row {
    id: number;
    name: string;
    amount: number;
  }