שיפור משמעותי לביצועי DOM - WebKit'sinnerHTML מהיר יותר ב-240%

Sam Dutton

אנחנו שמחים מאוד לראות שחלק מהפעולות הנפוצות ב-DOM השתפרו משמעותית מבחינת המהירות. השינויים בוצעו ברמת WebKit, והם שיפרו את הביצועים גם ב-Safari‏ (JavaScriptCore) וגם ב-Chrome‏ (V8).

מהנדס Chrome Kentaro Hara ביצע שבע אופטימיזציות של קוד ב-WebKit. בהמשך מפורטות התוצאות, שממחישות עד כמה גישה ל-DOM של JavaScript הפכה להיות מהירה יותר:

סיכום של שיפורי הביצועים ב-DOM

בהמשך, 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 ולשאר הצוות.