हमें यह देखकर बहुत खुशी हुई कि कुछ सामान्य DOM ऑपरेशन अब भी तेज़ी से बढ़ गए हैं. ये बदलाव WebKit के स्तर पर किए गए, जिससे Safari (JavaScriptCore) और Chrome (V8), दोनों की परफ़ॉर्मेंस बेहतर हुई.
Chrome इंजीनियर केंटारो हारा ने WebKit में सात कोड ऑप्टिमाइज़ेशन किए; नीचे परिणाम दिए गए हैं, जो दिखाते हैं कि JavaScript DOM ऐक्सेस अब कितनी तेज़ हो गया है:
DOM परफ़ॉर्मेंस बूस्ट की खास जानकारी
div.innerHTMLऔरdiv.outerHTMLपरफ़ॉर्मेंस में 2.4 गुना सुधार हुआ (V8, JavaScriptCore)- Chromium/Mac में
div.innerTextऔरdiv.outerTextकी परफ़ॉर्मेंस 4x के हिसाब से (V8/Mac) - सीएसएस प्रॉपर्टी के ऐक्सेस में 35%की बढ़ोतरी हुई (JavaScriptCore)
div.classList,div.dataset, औरdiv.attributesके परफ़ॉर्मेंस में 10.9x तक की बढ़ोतरी (V8) की गईdiv.firstElementChild,lastElementChild,previousElementSibling, औरnextElementSiblingके परफ़ॉर्मेंस में 7.1x की बढ़ोतरी हुई (V8)- V8 DOM एट्रिब्यूट के ऐक्सेस में 4 ~ 5% की बढ़ोतरी हुई (V8)
यहां, केंटारो हारा ने कुछ पैच के बारे में बताया है. ये लिंक टेस्ट केस वाली WebKit गड़बड़ियों के होते हैं, इसलिए आप खुद ही जांच को आज़मा सकते हैं. ये बदलाव WebKit r109829 और r111133 के बीच किए गए हैं: ये बदलाव Chrome 17 में शामिल नहीं हैं और Chrome 19 में शामिल हैं.
div.innerHTML और div.outerHTML की परफ़ॉर्मेंस को 2.4x तक बेहतर बनाएं (V8, JavaScriptCore)
WebKit में पिछला व्यवहार:
- हर टैग के लिए एक स्ट्रिंग बनाएं.
- बनाई गई स्ट्रिंग को
Vector<string>में जोड़ें और डीओएम ट्री को पार्स करें. - पार्स करने के बाद, एक ऐसी स्ट्रिंग तय करें जिसका साइज़,
Vector<string>की सभी स्ट्रिंग का योग हो. Vector<string>में सभी स्ट्रिंग को जोड़ें और इसेinnerHTMLके तौर पर दिखाएं.
WebKit में नई सुविधा:
1. एक स्ट्रिंग तय करें, जैसे कि S.
1. हर टैग के लिए एक स्ट्रिंग जोड़ें और एसओएम ट्री को धीरे-धीरे पार्स करें.
1. S को innerHTML के तौर पर लौटाएं.
कम शब्दों में कहें, तो बहुत सारी स्ट्रिंग बनाने और उन्हें जोड़ने के बजाय, पैच एक स्ट्रिंग बनाता है और फिर स्ट्रिंग को धीरे-धीरे जोड़ता है.
Chromium/Mac में div.innerText और div.outerText की परफ़ॉर्मेंस को 4x तक बेहतर बनाएं (V8/Mac)
पैच ने अभी-अभी innerText बनाने के लिए शुरुआती बफ़र साइज़ को बदला है. शुरुआती बफ़र साइज़ को 2^16 से 2^15 में बदलने से, Chromium/Mac की परफ़ॉर्मेंस 4 गुना बेहतर हो जाती है. यह अंतर मौजूद मैलोक सिस्टम पर निर्भर करता है.
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 एट्रिब्यूट और तरीकों की मदद से, परफ़ॉर्मेंस में ज़्यादा सुधार किए जा सकते हैं.
इसे पेश करें!
हराकन और टीम के बाकी सदस्यों को बधाई.