हमें यह देखकर खुशी हो रही है कि कुछ सामान्य DOM ऑपरेशन की स्पीड बहुत बढ़ गई है. ये बदलाव WebKit लेवल पर किए गए थे. इनसे Safari (JavaScriptCore) और Chrome (V8), दोनों की परफ़ॉर्मेंस बेहतर हुई है.
Chrome इंजीनियर केंटारो हारा ने WebKit में सात कोड ऑप्टिमाइज़ेशन किए हैं. इनके नतीजे यहां दिए गए हैं. इनसे पता चलता है कि JavaScript DOM को ऐक्सेस करने में अब कितना कम समय लगता है:
डीओएम की परफ़ॉर्मेंस को बेहतर बनाने के बारे में खास जानकारी
div.innerHTMLऔरdiv.outerHTMLपरफ़ॉर्मेंस 2.4 गुना बेहतर हुई (V8, JavaScriptCore)- Chromium/Mac में
div.innerTextऔरdiv.outerTextकी परफ़ॉर्मेंस चार गुना बेहतर हुई (V8/Mac) - JavaScriptCore की मदद से, सीएसएस प्रॉपर्टी को 35% ज़्यादा तेज़ी से ऐक्सेस किया जा सकता है
div.classList,div.dataset, औरdiv.attributesकी परफ़ॉर्मेंस 10.9 गुना तक बेहतर हुई (V8)div.firstElementChild,lastElementChild,previousElementSibling, औरnextElementSiblingकी परफ़ॉर्मेंस 7.1 गुना बेहतर हुई (V8)- V8 डीओएम एट्रिब्यूट ऐक्सेस करने की सुविधा 4 ~ 5% बेहतर हुई (V8)
यहां केंटारो हारा ने अपने बनाए गए कुछ पैच के बारे में जानकारी दी है. ये लिंक, टेस्ट केस के साथ WebKit बग के लिंक हैं, ताकि आप खुद इन टेस्ट को आज़मा सकें. ये बदलाव, WebKit r109829 और r111133 के बीच किए गए थे: Chrome 17 में ये बदलाव नहीं हैं, जबकि Chrome 19 में ये बदलाव हैं.
div.innerHTML और div.outerHTML की परफ़ॉर्मेंस को 2.4 गुना बेहतर बनाएं (V8, JavaScriptCore)
WebKit में पिछला व्यवहार:
- हर टैग के लिए एक स्ट्रिंग बनाएं.
- डीओएम ट्री को पार्स करके, बनाई गई स्ट्रिंग को
Vector<string>में जोड़ें. - पार्स करने के बाद, एक ऐसी स्ट्रिंग असाइन करें जिसका साइज़,
Vector<string>में मौजूद सभी स्ट्रिंग का कुल साइज़ हो. Vector<string>में मौजूद सभी स्ट्रिंग को जोड़ें और उसेinnerHTMLके तौर पर दिखाएं.
WebKit में नई सुविधा:
1. एक स्ट्रिंग असाइन करें, जैसे कि S.
1. डीओएम ट्री को धीरे-धीरे पार्स करते हुए, हर टैग के लिए एक स्ट्रिंग को S से जोड़ें.
1. S को innerHTML के तौर पर दिखाएं.
कम शब्दों में कहें, तो पैच कई स्ट्रिंग बनाने और फिर उन्हें जोड़ने के बजाय, एक स्ट्रिंग बनाता है और फिर स्ट्रिंग को क्रम से जोड़ता है.
Chromium/Mac में div.innerText और div.outerText की परफ़ॉर्मेंस को चार गुना बेहतर बनाएं (V8/Mac)
पैच ने सिर्फ़ innerText बनाने के लिए, शुरुआती बफ़र साइज़ में बदलाव किया है. शुरुआती बफ़र साइज़ को 2^16 से 2^15 पर सेट करने से, Chromium/Mac की परफ़ॉर्मेंस चार गुना बेहतर हुई. यह अंतर, malloc सिस्टम पर निर्भर करता है.
JavaScriptCore में सीएसएस प्रॉपर्टी ऐक्सेस करने की परफ़ॉर्मेंस को 35%तक बेहतर बनाना
WebKit में, सीएसएस प्रॉपर्टी स्ट्रिंग (जैसे, .fontWeight, .backgroundColor) को पूर्णांक आईडी में बदल दिया जाता है. यह कन्वर्ज़न भारी है. पैच, कन्वर्ज़न के नतीजों को मैप में कैश मेमोरी में सेव करता है.जैसे, प्रॉपर्टी स्ट्रिंग => कोई पूर्णांक आईडी. इससे कन्वर्ज़न एक से ज़्यादा बार नहीं होगा.
टेस्ट कैसे काम करते हैं?
ये प्रॉपर्टी के ऐक्सेस का समय मेज़र करते हैं. innerHTML (bugs.webkit.org/show_bug.cgi?id=81214 में मौजूद परफ़ॉर्मेंस टेस्ट) के मामले में, टेस्ट सिर्फ़ इस कोड को चलाने में लगने वाले समय को मेज़र करता है:
for (var i = 0; i < 1000000; i++)
document.body.innerHTML;
परफ़ॉर्मेंस टेस्ट में, एचटीएमएल स्पेसिफ़िकेशन से कॉपी किए गए बड़े बॉडी का इस्तेमाल किया जाता है.
इसी तरह, सीएसएस प्रॉपर्टी-ऐक्सेस टेस्ट, नीचे दिए गए कोड के समय को मेज़र करता है:
var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
spanStyle.invalidFontWeight;
spanStyle.invalidColor;
spanStyle.invalidBackgroundColor;
spanStyle.invalidDisplay;
}
अच्छी बात यह है कि केंटारो हारा का मानना है कि अन्य ज़रूरी DOM एट्रिब्यूट और तरीकों के लिए, परफ़ॉर्मेंस में और भी सुधार किए जा सकते हैं.
करके दिखाओ!
हाराकन और टीम के बाकी सदस्यों को बधाई.