אנחנו שמחים מאוד לראות שחלק מהפעולות הנפוצות של 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 by 4x (V8/Mac) - הגישה של נכס CSS השתפרה ב-35% (JavaScriptCore)
- הביצועים של
div.classList,div.datasetו-div.attributesהשתפרו עד פי 10.9 (V8) - הביצועים של
div.firstElementChild,lastElementChild,previousElementSiblingו-nextElementSiblingהשתפרו ב-7.1x (V8) - הגישה למאפייני DOM של V8 השתפרה ב-4% בערך 5% (V8)
בהמשך, קנטרו הארה מספק פרטים על כמה מהתיקונים שהוא ביצע. הקישורים מפנים לבאגים של 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, ומנתחים באופן מצטבר את עץ ה-DOM.
1. החזרת S בתור innerHTML.
בקצרה, במקום ליצור הרבה מחרוזות ואז לשרשר אותן, התיקון יוצר מחרוזת אחת ואז פשוט מוסיפים מחרוזות באופן הדרגתי.
שיפור הביצועים של div.innerText ושל div.outerText ב-Chromium/Mac לפי 4x (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.
תעמיס!
מזל טוב להארקן ולשאר חברי הצוות.