0
# Performance and Optimization
1

2
Performance optimization utilities including task scheduling, memoization, and configuration options for controlling Knockout.js runtime behavior. These APIs provide fine-grained control over when and how updates are processed.
3

4
## Capabilities
5

6
### Task Scheduling
7

8
Asynchronous task scheduling system for controlling the timing of updates and computations.
9

10
```javascript { .api }
11
/**
12
 * Task scheduling utilities
13
 */
14
const tasks: {
15
    /** Function used to schedule tasks (can be customized) */
16
    scheduler: (callback: () => any) => void;
17
    
18
    /** Schedule a callback to run asynchronously */
19
    schedule(callback: () => any): number;
20
    
21
    /** Cancel a scheduled task */
22
    cancel(handle: number): void;
23
    
24
    /** Run all scheduled tasks immediately */
25
    runEarly(): void;
26
};
27
```
28

29
**Usage Examples:**
30

31
```javascript
32
import ko from "knockout";
33

34
// Schedule a task
35
const taskHandle = ko.tasks.schedule(() => {
36
    console.log("This runs asynchronously");
37
});
38

39
// Cancel the task if needed
40
ko.tasks.cancel(taskHandle);
41

42
// Force all scheduled tasks to run immediately
43
ko.tasks.runEarly();
44

45
// Customize the task scheduler
46
ko.tasks.scheduler = (callback) => {
47
    setTimeout(callback, 16); // Use requestAnimationFrame timing
48
};
49
```
50

51
### Memoization
52

53
DOM node memoization system for caching and reusing rendered template content to improve performance.
54

55
```javascript { .api }
56
/**
57
 * Memoization utilities for template rendering
58
 */
59
const memoization: {
60
    /** Create memoized nodes for reuse */
61
    memoize(callback: (val: any) => void): Node[];
62
    
63
    /** Remove memoized nodes from cache */
64
    unmemoize(memoId: string, callbackParams: any[]): void;
65
    
66
    /** Clean up memoization for DOM node and descendants */
67
    unmemoizeDomNodeAndDescendants(domNode: Node, extraCallbackParamsArray: any[]): void;
68
    
69
    /** Parse memo text from comment nodes */
70
    parseMemoText(memoText: string): string;
71
};
72
```
73

74
**Usage Examples:**
75

76
```javascript
77
import ko from "knockout";
78

79
// Memoization is typically used internally by template engines
80
// but can be used for custom template optimization
81

82
// Create memoized nodes
83
const memoizedNodes = ko.memoization.memoize((params) => {
84
    // Create expensive DOM structure
85
    const div = document.createElement("div");
86
    div.innerHTML = generateComplexContent(params);
87
    return div.childNodes;
88
});
89

90
// Clean up memoization when removing nodes
91
const container = document.getElementById("container");
92
ko.memoization.unmemoizeDomNodeAndDescendants(container, []);
93

94
// Parse memo comments (used internally)
95
const memoText = ko.memoization.parseMemoText("ko_memo_123");
96
```
97

98
### Configuration Options
99

100
Global configuration options that control Knockout.js runtime behavior and performance characteristics.
101

102
```javascript { .api }
103
/**
104
 * Global configuration options
105
 */
106
const options: {
107
    /** Defer observable updates until end of current task */
108
    deferUpdates: boolean;
109
    
110
    /** Use only native DOM events instead of jQuery events */
111
    useOnlyNativeEvents: boolean;
112
    
113
    /** Create child binding contexts with 'as' property */
114
    createChildContextWithAs: boolean;
115
    
116
    /** Hide destroyed items in foreach bindings */
117
    foreachHidesDestroyed: boolean;
118
};
119
```
120

121
**Usage Examples:**
122

123
```javascript
124
import ko from "knockout";
125

126
// Enable deferred updates for better performance
127
ko.options.deferUpdates = true;
128

129
// Use only native events (better performance if no jQuery)
130
ko.options.useOnlyNativeEvents = true;
131

132
// Control foreach behavior for destroyed items
133
ko.options.foreachHidesDestroyed = false;
134

135
// Enable 'as' binding context creation
136
ko.options.createChildContextWithAs = true;
137

138
// Check current configuration
139
console.log("Deferred updates:", ko.options.deferUpdates);
140
```
141

142
### Performance Best Practices
143

144
Optimization strategies for improving Knockout.js application performance.
145

146
**Observable Management:**
147

148
```javascript
149
// Use pure computeds for read-only derived values
150
const fullName = ko.pureComputed(() => {
151
    return firstName() + " " + lastName();
152
});
153

154
// Rate limit expensive operations
155
const expensiveComputed = ko.computed(() => {
156
    return performExpensiveCalculation();
157
}).extend({ rateLimit: { timeout: 100, method: "notifyWhenChangesStop" } });
158

159
// Use peek() to read without creating dependencies
160
const currentValue = someObservable.peek();
161
```
162

163
**Template Optimization:**
164

165
```javascript
166
// Use virtual elements for control flow to reduce DOM nodes
167
<!-- ko if: isVisible -->
168
    <div>Content</div>
169
<!-- /ko -->
170

171
// Avoid complex expressions in bindings
172
// Bad: data-bind="text: firstName() + ' ' + lastName()"
173
// Good: data-bind="text: fullName"
174

175
// Use template caching for repeated content
176
const templateElement = document.getElementById("itemTemplate");
177
ko.templates.registerTemplate("item", templateElement);
178
```
179

180
**Array Performance:**
181

182
```javascript
183
// Batch array operations
184
const items = ko.observableArray();
185
items.valueWillMutate();
186
items.push(item1, item2, item3);
187
items.valueHasMutated();
188

189
// Use destroyAll() instead of removeAll() for temporary removal
190
items.destroyAll(); // Marks as destroyed but keeps in array
191
items.removeAll(); // Actually removes from array
192
```
193

194
**Memory Management:**
195

196
```javascript
197
// Dispose computeds when no longer needed
198
const computed = ko.computed(() => /* ... */);
199
// Later...
200
computed.dispose();
201

202
// Clean up bindings before removing DOM nodes
203
const element = document.getElementById("myElement");
204
ko.cleanNode(element);
205
element.parentNode.removeChild(element);
206

207
// Use disposeWhenNodeIsRemoved for automatic cleanup
208
const computed = ko.computed(() => /* ... */, {
209
    disposeWhenNodeIsRemoved: someElement
210
});
211
```