एल्गोरिदम (एनिमेशन)आपके ब्राउज़र में चलता हैसमीक्षा तिथि: 1 अक्तूबर 2026

Virtual DOM Diff (Keys): एनिमेशन

Virtual DOM Diff (Keys): एनिमेशन. फ़्रंट-एंड के लिए एनिमेटेड एल्गोरिदम: सॉर्टिंग, सर्च, डिबाउंस और थ्रॉटल, इवेंट लूप, वर्चुअल DOM, कैश, ट्राई और पाथफ़ाइंडिंग। आपके ब्राउज़र में तेज़, निजी और आसान।

लोकलडिफ़ॉल्ट रूप से निजीतेज़साइन-अप की ज़रूरत नहीं

नीचे टूल के बटन और टेक्स्ट अभी अंग्रेज़ी में हैं।

Browser and DOMTime: O(n)Space: O(n)

List before (keys)List after (keys)Matching strategy

<ul>

DOM operations: 0

empty

Step 1 / 8

Each item has a key. React/Vue use keys to recognise the same item even when it moves, so unchanged DOM nodes are reused.

JavaScript

1function reconcileKeyed(oldList, newList) {
2  const oldPos = new Map(oldList.map((n, i) => [n.key, i]));
3  const newKeys = new Set(newList.map((n) => n.key));
4  let lastIndex = 0;
5  for (const next of newList) {
6    const i = oldPos.get(next.key);
7    if (i === undefined) insert(next);
8    else if (i < lastIndex) move(next);
9    else lastIndex = i;
10  }
11  for (const old of oldList) {
12    if (!newKeys.has(old.key)) remove(old);
13  }
14}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...

सबसे पहले गोपनीयता

टेक्स्ट, इमेज, ऑडियो, वीडियो और जनरेटर टूल, जहाँ ब्राउज़र का API अनुमति देता है, सीधे ब्राउज़र में चलते हैं। इन्हें इस तरह बनाया गया है कि विज्ञापन या बिक्री के दबाव से पहले ये काम आएँ।

इसे क्यों इस्तेमाल करें

गोपनीयता के लिए ब्राउज़र में प्रोसेसिंग
मुफ़्त, खाते की ज़रूरत नहीं
साफ़ प्रीव्यू के साथ तेज़ नतीजा