בעוד כשבועיים אעביר סמינר בכנס DevGeek Week בנושא שיפור ביצועים ב JavaScript. אם ייצא לכם להגיע תרוויחו כמה הדגמות חיות של שימוש בכלי הפיתוח כדי למצוא בעיות ביצועים וזכרון בקוד, ולטובת הקוראים שלא יצליחו להגיע אסכם כאן בקצרה כמה נקודות שיעזרו לכם לכתוב JavaScript מהיר וחלק יותר.

1. צמצמו גישות ל DOM

אי אפשר באמת לדבר על שיפור ביצועים ב JavaScript בלי להתחיל בצוואר הבקבוק מספר 1 של יישומי ווב. רוצים דוגמא? הקוד הבא מציע שתי גרסאות לשינוי צבע באוסף של אלמנטים. מה מסתבר? שינוי קלאס של ההורה מהיר מעל פי 10 מאשר שינוי קלאסים בכל הילדים. מוזמנים לנסות להריץ את שני הקטעים בעמוד ה JSPerf הזה או להמשיך לקוד:

2. צמצמו חישובי Layout

הדבר הגרוע השני בעבודה עם ה DOM הוא שיש ערכים שקריאה שלהם גורמת לעבודה מאוד קשה מהצד של הדפדפן. קחו את offsetLeft לדוגמא — בשביל לחשב ערך זה על הדפדפן לחשב איפה נמצא כל אלמנט על המסך. אם במהלך ריצת ה JS שלכם אתם משנים מאפייני מיקום וגם קוראים את התוצאות ועל בסיסן משנים מאפיינים נוספים, הדפדפן שלכם יצטרך לעבוד מאוד קשה כדי לחשב שוב ושוב את כל המיקומים.

הקוד הבא מגיע גם הוא בשתי גרסאות — האחת קובעת את המיקום של כל div לפי זה שלפניו, והשניה פשוט מחשבת את כל המיקומים בקוד JS. נחשו מי מהגרסאות רצה מהר יותר, ואחרי זה אמתו את תשובתכם בעמוד ה jSPerf המשווה:

3. העדיפו משתנים מקומיים על משתנים גלובליים

אני מקוה שאתם זוכרים שגישה למשתנה מקומי מהירה בהרבה מגישה למשתנה גלובלי. כמה יותר מהיר? המבחן שכאן טוען לפער של פי 7 לפחות בין הפונקציה x ל w:

var a, b = 0;

function x() {
    for (a = 0; a < 20; a++)
        b += a;
}

function w() {
    var c, d = 0;
    for (c = 0; c < 20; c++)
        d += c;
}

 

4. העדיפו Prototypes על Closures

ובדיוק מאותה הסיבה בניית פונקציה יוצרת עם Prototypes עדיפה בהרבה מבחינת ביצועים על פני שימוש ב Closures. המבחן שכאן מראה פער ביצועים של קרוב לפי 10 בין שני קטעי הקוד הבאים:

// Version 1 - Fast
function Person(name) {
  this.name = name;
}

Person.prototype.get_name = function() {
  return this.name;
};

Person.prototype.set_name = function(name) {
  this.name = name;
};

// Version 2 - Slow
var person = function(name) {
  return {
    'get_name': function() {
      return name;
    },
    'set_name': function(newName) {
      name = newName;
    }
  };
};

הדבר החשוב לזכור לגבי שיפור ביצועים הוא לצמצם עבודה: כמה שהקוד שלנו עושה פחות כך הכל יעבוד מהר וחלק יותר. כלי הפיתוח בדפדפנים היום מעולים בלתת לכם תמונת מצב מדויקת של מה שקורה בקוד ומה מאט את הקוד שלכם בכל רגע נתון. 

ואם לכם יש סיפורי אופטימיזציית JavaScript מפתיעים מוזמנים בחום לשתף בתגובות.