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