ما بسیار خوشحالیم که میبینیم برخی از عملیاتهای معمول DOM به تازگی سرعت خود را افزایش دادهاند. تغییرات در سطح WebKit بود و عملکرد را برای سافاری (JavaScriptCore) و Chrome (V8) افزایش داد.
مهندس کروم کنتارو هارا هفت کد بهینه سازی را در WebKit انجام داد. در زیر نتایجی وجود دارد که نشان میدهد دسترسی جاوا اسکریپت DOM چقدر سریعتر شده است:
عملکرد DOM خلاصه را افزایش می دهد
- عملکرد
div.innerHTML
وdiv.outerHTML
2.4 برابر بهبود یافته است (V8، JavaScriptCore) - عملکرد
div.innerText
وdiv.outerText
در Chromium/Mac توسط 4x (V8/Mac) - دسترسی به ویژگی CSS 35٪ بهبود یافته است (JavaScriptCore)
-
div.classList
،div.dataset
وdiv.attributes
perf تا 10.9x (V8) بهبود یافته است - عملکرد
div.firstElementChild
،lastElementChild
،previousElementSibling
وnextElementSibling
7.1x (V8) بهبود یافته است. - دسترسی به ویژگی های V8 DOM 4 تا 5٪ بهبود یافته است (V8)
کنتارو هارا در زیر جزئیات برخی از وصلههایی که ساخته است را ارائه میکند. پیوندها مربوط به اشکالات 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 امکان پذیر خواهد بود.
آن را بیاور!
آفرین به هاراکن و بقیه اعضای تیم.