افزایش بزرگ عملکرد DOM - HTML داخلی WebKit 240٪ سریعتر است

سام داتون

ما بسیار خوشحالیم که می‌بینیم برخی از عملیات‌های معمول DOM به تازگی سرعت خود را افزایش داده‌اند. تغییرات در سطح WebKit بود و عملکرد را برای سافاری (JavaScriptCore) و Chrome (V8) افزایش داد.

مهندس کروم کنتارو هارا هفت کد بهینه سازی را در WebKit انجام داد. در زیر نتایجی وجود دارد که نشان می‌دهد دسترسی جاوا اسکریپت DOM چقدر سریع‌تر شده است:

عملکرد DOM خلاصه را افزایش می دهد

کنتارو هارا در زیر جزئیات برخی از وصله‌هایی که ساخته است را ارائه می‌کند. پیوندها مربوط به اشکالات WebKit با موارد آزمایشی هستند، بنابراین می‌توانید آزمایش‌ها را خودتان امتحان کنید. تغییرات بین WebKit r109829 و r111133 انجام شد: Chrome 17 شامل آنها نمی شود. کروم 19 انجام می دهد.

بهبود عملکرد div.innerHTML و div.outerHTML 2.4 برابر (V8، JavaScriptCore)

رفتار قبلی در WebKit:

  • برای هر تگ یک رشته ایجاد کنید.
  • یک رشته ایجاد شده را به Vector<string> اضافه کنید و درخت DOM را تجزیه کنید.
  • پس از تجزیه، رشته ای را اختصاص دهید که اندازه آن مجموع تمام رشته ها در Vector<string> باشد.
  • تمام رشته ها را در Vector<string> به هم متصل کنید و آن را به عنوان innerHTML برگردانید.

رفتار جدید در WebKit: 1. یک رشته را اختصاص دهید، مثلاً S. 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;
}

خبر خوب این است که Kentaro Hara معتقد است که بهبود عملکرد بیشتر برای سایر ویژگی ها و روش های مهم DOM امکان پذیر خواهد بود.

آن را بیاور!

آفرین به هاراکن و بقیه اعضای تیم.