يسعدنا أن نرى أن سرعة بعض عمليات DOM الشائعة قد ارتفعت بشكل كبير. جرت التغييرات على مستوى WebKit، ما أدى إلى تحسين أداء كل من Safari (JavaScriptCore) وChrome (V8).
أجرى مهندس Chrome كينتارو هارا سبعة تحسينات للرموز البرمجية في WebKit. وفي ما يلي النتائج التي توضح مدى سرعة الوصول إلى JavaScript DOM:
ملخّص تحسينات أداء DOM
- تم تحسين أداء
div.innerHTMLوdiv.outerHTMLبمقدار 2.4 ضعف (V8 وJavaScriptCore) - أداء
div.innerTextوdiv.outerTextفي Chromium/Mac by 4x (V8/Mac) - تم تحسين وصول موقع CSS الإلكتروني بنسبة 35% (JavaScriptCore)
- تم تحسين أداء
div.classListوdiv.datasetوdiv.attributesبنسبة تصل إلى 10.9 مرات (الإصدار 8). - تحسّن أداء
div.firstElementChildوlastElementChildوpreviousElementSiblingوnextElementSiblingبمقدار 7.1 مرة (الإصدار 8). - تم تحسين الوصول إلى سمات الإصدار 8 DOM بنسبة %4 إلى %5 (الإصدار 8)
في ما يلي، يقدم كينتارو هارا تفاصيل عن بعض التصحيحات التي رسمها. وتكون الروابط إلى أخطاء WebKit مع حالات الاختبار، بحيث يمكنك تجربة الاختبارات بنفسك. تم إجراء التغييرات بين WebKit r109829 وr111133: تحتوي Chrome 17 على هذه التغييرات، بينما يتضمن Chrome 19 التغييرات.
تحسين أداء div.innerHTML وdiv.outerHTML بمقدار 2.4 مرّة (V8 وJavaScriptCore)
السلوك السابق في WebKit:
- أنشئ سلسلة لكل علامة.
- إلحاق سلسلة تم إنشاؤها بـ
Vector<string>، تحليل شجرة نموذج العناصر في المستند (DOM). - بعد التحليل، خصِّص سلسلة يكون حجمها مجموع كل السلاسل في
Vector<string>. - تسلسل كل السلاسل في
Vector<string>وعرضها في شكلinnerHTML.
سلوك جديد في WebKit:
1- خصِّص سلسلة واحدة، على سبيل المثال S.
1- تسلسل سلسلة لكل علامة إلى S، مع تحليل شجرة نموذج العناصر في المستند بشكل تزايدي.
1- يجب عرض S على النحو innerHTML.
باختصار، بدلاً من إنشاء عدد كبير من السلاسل ثم إجراء تسلسل لها، تُنشئ التصحيح سلسلة واحدة ثم تُلحق السلاسل بشكلٍ تدريجي.
تحسين أداء div.innerText وdiv.outerText في Chromium/Mac بنسبة 4x (V8/Mac)
غيّرت حزمة التصحيح للتو حجم المخزن المؤقت الأولي لإنشاء innerText. أدى تغيير الحجم المؤقت الأولي من 2^16 إلى 2^15 إلى تحسين أداء Chromium/Mac بمقدار 4 مرات. يعتمد هذا الاختلاف على نظام التبديل الاستراتيجي الأساسي.
تحسين أداء عمليات الوصول إلى موقع CSS في JavaScriptCore بنسبة%35
يتم تحويل سلسلة خصائص CSS (على سبيل المثال .fontWeight، .backgroundColor) إلى رقم تعريف عدد صحيح في WebKit. هذه الإحالة الناجحة كبيرة. تخزِّن حزمة التصحيح نتائج الإحالة الناجحة مؤقتًا في الخريطة (أي سلسلة الموقع => رقم تعريف عدد صحيح)، حتى لا يتم إجراء الإحالة الناجحة عدة مرات.
كيف تعمل الاختبارات؟
ويقيس وقت الوصول إلى الموقع. في حال استخدام innerHTML (اختبار الأداء في bugs.webkit.org/show_bug.cgi?id=81214)، يقيس الاختبار فقط وقت تنفيذ الرمز التالي:
for (var i = 0; i < 1000000; i++)
document.body.innerHTML;
يستخدم اختبار الأداء نصًا كبيرًا منسوخًا من مواصفات HTML.
وبالمثل، يقيس اختبار الوصول إلى موقع CSS وقت الرمز التالي:
var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
spanStyle.invalidFontWeight;
spanStyle.invalidColor;
spanStyle.invalidBackgroundColor;
spanStyle.invalidDisplay;
}
والخبر السار هو أن كينتارو هارا يعتقد أنه سيكون من الممكن إجراء المزيد من التحسينات على الأداء لسمات وطرق DOM المهمة الأخرى.
هيا بنا!
تهانينا لـ "هاراكن" وباقي أعضاء الفريق.