يسرّنا جدًا أن نرى أنّ بعض عمليات DOM الشائعة قد شهدت ارتفاعًا كبيرًا في السرعة. تم إجراء التغييرات على مستوى WebKit، ما أدى إلى تحسين أداء كلّ من Safari (JavaScriptCore) وChrome (V8).
أجرى مهندس Chrome "كينتارو هارا" سبع عمليات تحسين للرمز البرمجي في WebKit. في ما يلي النتائج التي تُظهر مدى سرعة الوصول إلى DOM في JavaScript:
ملخّص تحسينات أداء نموذج DOM
- تحسين أداء
div.innerHTMLوdiv.outerHTMLبمقدار 2.4 مرة (V8 وJavaScriptCore) - تحسين أداء
div.innerTextوdiv.outerTextفي Chromium/Mac بأربعة أضعاف (V8/Mac) - تحسين عمليات الوصول إلى خصائص CSS بنسبة%35 (JavaScriptCore)
- تحسين أداء
div.classListوdiv.datasetوdiv.attributesبنسبة تصل إلى 10.9 مرة (الإصدار 8) - تحسين أداء
div.firstElementChildوlastElementChildوpreviousElementSiblingوnextElementSiblingبمقدار 7.1 مرة (الإصدار 8) - تحسين الوصول إلى سمات DOM في V8 بنسبة %4 إلى %5 (V8)
في ما يلي تفاصيل عن بعض الإصلاحات التي أجراها "كينتارو هارا". تؤدي الروابط إلى أخطاء WebKit مع حالات الاختبار، حتى تتمكّن من تجربة الاختبارات بنفسك. تم إجراء التغييرات بين الإصدار 109829 من WebKit والإصدار 111133: لا يتضمّن الإصدار 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، مع تحليل شجرة نموذج DOM بشكل تدريجي.
1. أدخِل S على أنّه innerHTML.
باختصار، بدلاً من إنشاء الكثير من السلاسل ثم تسلسلها، ينشئ التصحيح سلسلة واحدة ثم يُلحق السلاسل تدريجيًا.
تحسين أداء div.innerText وdiv.outerText في Chromium/Mac بمقدار 4 مرات (V8/Mac)
غيّر التصحيح للتو حجم ذاكرة التخزين المؤقت الأولي لإنشاء innerText. أدى تغيير حجم المخزن المؤقت الأوّلي من 2^16 إلى 2^15 إلى تحسين أداء Chromium/Mac بمقدار 4 مرّات. ويعتمد هذا الاختلاف على نظام malloc الأساسي.
تحسين أداء عمليات الوصول إلى سمات 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 وطُرقه المهمة الأخرى.
يسرّنا ذلك.
أشكر "هارون" وبقية أعضاء الفريق.