שיטות מומלצות ליישום אינטרנט מהיר יותר עם HTML5

Paul Irish

מבוא

מטרת הרבה מהתכונות של HTML5 היא לספק תמיכה בדפדפנים מקומיים ברכיבים ובשיטות שעד כה השגנו באמצעות ספריות JavaScript. אם התכונות האלה זמינות, כדאי להשתמש בהן כדי לספק למשתמשים חוויה מהירה יותר. במדריך הזה לא אציג סיכום של מחקרי הביצועים המעולים שאפשר למצוא באתר של Yahoo בנושא ביצועים יוצאי דופן, במסמכים של Google בנושא מהירות דפים ובאתר Let's make the web faster. במקום זאת, אתמקד בדרכים שבהן שימוש ב-HTML5 וב-CSS3 כיום יכול לשפר את הרספונסיביות של אפליקציות האינטרנט שלכם.

טיפ 1: שימוש באחסון באינטרנט במקום בקובצי cookie

קובצי cookie משמשים למעקב אחרי נתוני משתמשים ייחודיים כבר שנים, אבל יש להם חסרונות חמורים. הנקודה הבעייתית ביותר היא שכל נתוני קובצי ה-cookie מתווספים לכל כותרת של בקשת HTTP. כתוצאה מכך, יכולה להיות השפעה נמדדת על זמן התגובה, במיוחד במהלך קריאות XHR. לכן, השיטה המומלצת היא להקטין את גודל קובצי ה-Cookie. ב-HTML5 אפשר לעשות יותר מזה: להשתמש ב-sessionStorage וב-localStorage במקום בקובצי cookie.

אפשר להשתמש בשני אובייקטים האלה של אחסון באינטרנט כדי לשמור נתוני משתמשים בצד הלקוח למשך הסשן או ללא הגבלת זמן. הנתונים שלהם לא מועברים לשרת בכל בקשת HTTP. יש להם ממשק API שיעזור לכם להיפטר מקובצי cookie. כאן מופיעים שני ממשקי ה-API, עם שימוש בקובצי cookie כגיבוי.

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

טיפ 2: שימוש במעברים של CSS במקום באנימציה של JavaScript

מעברים ב-CSS מאפשרים ליצור מעבר חזותי אטרקטיבי בין שני מצבים. אפשר להעביר את רוב מאפייני הסגנון, כמו מניפולציה על צללית הטקסט, המיקום, הרקע או הצבע. אפשר להשתמש במעברים למצבים של בורר מדומה כמו :hover או מטפסים של HTML5, :invalid ו-:valid (דוגמה עם מצבי אימות של טפסים). אבל הן הרבה יותר חזקות וניתן להפעיל אותן כשמוסיפים כל סוג של כיתה לאלמנט.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

כדי להזיז את התיבה, אפשר להוסיף את האפשרויות totheleft ו-totheright. אפשר להשוות את כמות הקוד הזו לכמות הקוד של ספריית אנימציה ב-JavaScript. ברור שמספר הבייטים שנשלחים לדפדפן נמוך בהרבה כשמשתמשים באנימציה מבוססת-CSS. בנוסף, בעזרת האצת GPU, המעברים החזותיים האלה יהיו חלקים ככל האפשר.

טיפ 3: שימוש במסדי נתונים בצד הלקוח במקום בנסיעות הלוך ושוב לשרת

מסד נתוני SQL באינטרנט ו-IndexedDB מאפשרים להשתמש במסדי נתונים בצד הלקוח. במקום התבנית הנפוצה של פרסום נתונים בשרת באמצעות XMLHttpRequest או שליחת טופס, אפשר להשתמש במסדי הנתונים האלה בצד הלקוח. צמצום מספר הבקשות ל-HTTP הוא יעד ראשי של כל מהנדסי הביצועים, ולכן שימוש בהן כמאגר נתונים יכול לחסוך הרבה נסיעות חזרה לשרת באמצעות XHR או שליחת טפסים. אפשר להשתמש ב-localStorage וב-sessionStorage במקרים מסוימים, למשל כדי לתעד את התקדמות שליחת הטופס, והם מהירים יותר באופן משמעותי מ-API של מסדי נתונים בצד הלקוח. לדוגמה, אם יש לכם רכיב של רשת נתונים או תיבת דואר נכנס עם מאות הודעות, אחסון הנתונים באופן מקומי במסד נתונים יחסוך לכם נסיעות הלוך ושוב ב-HTTP כשהמשתמש ירצה לחפש, לסנן או למיין. אפשר לסנן רשימת חברים או השלמה אוטומטית של קלט טקסט בכל הקשה על מקש, וכך לשפר את חוויית המשתמש.

טיפ 4: שיפורים ב-JavaScript מספקים יתרונות משמעותיים בביצועים

ב-JavaScript 1.6 נוספו שיטות נוספות לתבנית Array. התכונות האלה זמינות עכשיו ברוב הדפדפנים, מלבד IE. לדוגמה:

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

ברוב המקרים, שימוש בשיטות האלה יניב מהירויות גבוהות יותר בהשוואה ל-for loop הרגילה, כמו: for (var i = 0, len = arr.length; i < len; i++). ניתוח JSON מקורי (דרך JSON.parse()) מחליף את קובץ json2.js שהיינו רגילים לכלול במשך זמן מה. JSON מקורי מהיר ובטוח בהרבה מאשר שימוש בסקריפט חיצוני, והוא כבר נתמך ב-IE8, ב-Opera 10.50, ב-Firefox 3.5, ב-Safari 4.0.3 וב-Chrome. String.trim מקורי הוא דוגמה טובה נוספת לכך שהקוד לא רק מהיר יותר מהקודים המקבילים ב-JS, אלא גם מדויק יותר. אף אחת מהתוספות האלה של JavaScript לא נחשבת טכנית ל-HTML5, אבל הן נכללות בקטגוריה של הטכנולוגיות שזמינות לאחרונה.

טיפ 5: שימוש במניפסט של מטמון לאתרים פעילים, ולא רק לאפליקציות אופליין

לפני שנתיים, ב-WordPress השתמשו ב-Google Gears כדי להוסיף תכונה שנקראת WordPress Turbo. בעצם, המערכת שמרה במטמון באופן מקומי הרבה מהמשאבים שבהם נעשה שימוש בחלונית האדמין, וכך זרזה את הגישה של הקבצים אליהם. אפשר לשחזר את ההתנהגות הזו באמצעות applicationCache של HTML5 ו-cache.manifest. למטמון האפליקציה יש יתרון קל על פני הגדרת כותרות Expires. מכיוון שאתם יוצרים קובץ דקלרטיבי שמציין את המשאבים הסטטיים שאפשר לשמור במטמון, הדפדפנים יכולים לבצע אופטימיזציה משמעותית שלהם, ואולי אפילו להוסיף אותם למטמון מראש לפני השימוש. כדאי להתייחס למבנה הבסיסי של האתר כאל תבנית. יש לכם נתונים שעשויים להשתנות, אבל ה-HTML שמסביב להם בדרך כלל נשאר עקבי למדי. בעזרת מטמון האפליקציה אפשר להתייחס ל-HTML כסדרה של תבניות טהורות, לשמור את הרכיבים הוויזואליים במטמון באמצעות cache.manifest ואז לשלוח JSON דרך החיבור כדי לעדכן את התוכן. המודל הזה דומה מאוד לאופן שבו פועלת אפליקציית חדשות מקורית ל-iPhone או ל-Android.

טיפ 6: הפעלת שיפור המהירות באמצעות חומרה כדי לשפר את חוויית הצפייה

בדפדפנים מובילים, פעולות חזותיות רבות יכולות להיעזר בהאצה ברמת ה-GPU, וכך לשפר את הביצועים של פעולות חזותיות דינמיות מאוד. הודענו על שיפור מהירות באמצעות חומרה ב-Firefox Minefield וב-IE9, ובגרסה 5 של Safari נוספה אפשרות לשיפור מהירות ברמת החומרה. (היא הגיעה ל-Safari לנייד הרבה קודם). נוספו לאחרונה ל-Chromium טרנספורמציות תלת-ממדיות ושיפור מהירות באמצעות חומרה ל-Windows, והן יתווספו לשתי הפלטפורמות האחרות בקרוב.

מאיץ ה-GPU מופעל רק בקבוצה מוגבלת למדי של תנאים, אבל טרנספורמציות תלת-ממדיות ואופקטים של שקיפיות באנימציה הן הדרכים הנפוצות ביותר להפעלת המאיץ. דרך קצת 'פריצה' אבל לא פולשנית להפעיל את התכונה היא:

.hwaccel {  -webkit-transform: translateZ(0); }

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

טיפ 7: לפעולות שמשתמשות הרבה ב-CPU, כדאי להשתמש ב-Web Workers

ל-Web Workers יש שני יתרונות משמעותיים: 1) הם מהירים. 2) בזמן שהם מבצעים את המשימות, הדפדפן נשאר תגובתי. כדאי לעיין במצגת בנושא HTML5 בנושא Workers בפעולה. אלה כמה מצבים אפשריים שבהם אפשר להשתמש ב-Web Workers:

• עיצוב טקסט של מסמך ארוך
• הדגשת תחביר
• עיבוד תמונה
• סינתזת תמונות
• עיבוד מערכי נתונים גדולים

טיפ 8: מאפיינים וסוגי קלט של טפסים ב-HTML5

ב-HTML5 יש קבוצה חדשה של סוגי קלט, שמשדרגת את הקבוצה שלנו של text,‏ password ו-file כך שתכלול את search,‏ tel,‏ url,‏ email,‏ datetime,‏ date,‏ month,‏ week,‏ time,‏ datetime-local,‏ number,‏ range ו-color. התמיכה בדפדפנים משתנה, וכרגע Opera מטמיע את רוב התכונות האלה. בעזרת זיהוי התכונות תוכלו לקבוע אם לדפדפן יש תמיכה מקורית (והוא יציע ממשק משתמש כמו חלון לבחירת תאריך או חלון לבחירת צבע). אם לא, תוכלו להמשיך להשתמש בווידג'טים של JS כדי לבצע את המשימות הנפוצות האלה. בנוסף לסוגי השדות, נוספו כמה תכונות שימושיות לשדות הקלט הרגילים שלנו. הקלט placeholder מציע טקסט ברירת מחדל שנמחק כשמקישים עליו, והקלט autofocus מתמקד בסמן ההזזה בזמן טעינת הדף כדי שתוכלו לבצע פעולות בשדה הזה באופן מיידי. אימות קלט הוא נושא נוסף שנעשה בו שימוש ב-HTML5. הוספת המאפיין required תגרום לכך שהדפדפן לא יאפשר שליחת הטופס עד שהשדה הזה יתמלא. בנוסף, המאפיין pattern מאפשר לציין ביטוי רגולרי בהתאמה אישית שצריך לבדוק מול הקלט. ערכים לא חוקיים ימנעו שליחת טופס. התחביר הדקלרטיבי הזה הוא שדרוג משמעותי לא רק מבחינת הקריאוּת של המקור, אלא גם מבחינת הפחתת כמות ה-JavaScript הנדרשת. שוב, אפשר להשתמש בזיהוי תכונות כדי להציג פתרון חלופי אם אין תמיכה מקורית בתכונות האלה. השימוש בווידג'טים המקוריים כאן מאפשר לכם לא לשלוח את הקוד הכבד של JavaScript ו-CSS שנדרש להפעלת הווידג'טים האלה, וכך לזרז את טעינת הדף ולשפר את הרספונסיביות של הווידג'טים. כדי לנסות חלק מהשיפורים האלה בקלט, כדאי לעיין במצגת HTML5.

טיפ 9: שימוש באפקטים של CSS3 במקום לבקש ספריות של תמונות כבדות

ב-CSS3 יש הרבה אפשרויות חדשות לעיצוב, שמחליפות את השימוש שלנו בתמונות כדי לייצג את העיצוב החזותי בצורה מדויקת. החלפת תמונה בגודל 2K ב-100 בייטים של CSS היא יתרון עצום, שלא לדבר על כך שהסרתם בקשת HTTP נוספת. אלה כמה מהמאפיינים שכדאי להכיר:

• מעברים לינאריים ומוקדי
• Border-radius לפינות מעוגלות
• Box-shadow להטלת צללית ולזוהר
• RGBA לאטימות אלפא
• טרנספורמציות לסיבוב
• מסכות CSS

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

טיפ 10: שימוש ב-WebSockets כדי לספק את התוכן מהר יותר עם פחות רוחב פס בהשוואה ל-XHR

WebSockets תוכנן בתגובה לפופולריות ההולכת וגדלה של Comet. אכן יש יתרונות לשימוש ב-WebSockets עכשיו, במקום במודל Comet over XHR.

ל-WebSockets יש מסגרת קלה מאוד, ולכן רוחב הפס שהוא צורך הוא לרוב קטן יותר מזה של XHR. בדוחות מסוימים מצוין על הפחתה של 35% במספר הבייטים שנשלחים דרך החיבור. בנוסף, ככל שהנפח גדול יותר, ההבדל בביצועים בנושא העברת הודעות בולט יותר. בבדיקה הזו, זמן האיסוף המצטבר של XHR ארוך ב-3,500% מזה של WebSockets. לבסוף, ב-Ericsson Labs בדקו את הביצועים של WebSockets ומצאו שזמני ה-ping ב-HTTP ארוכים פי 3-5 מאשר ב-WebSockets, בגלל דרישות עיבוד משמעותיות יותר. הם הגיעו למסקנה שפרוטוקול WebSocket מתאים יותר לאפליקציות בזמן אמת.

מקורות מידע נוספים

כדי לקבל המלצות למדידות ולביצועים, מומלץ להשתמש בתוספים של Firefox‏ Page Speed ו-YSlow. בנוסף, Speed Tracer ל-Chrome ו-DynaTrace Ajax ל-IE מספקים רמה מפורטת יותר של רישום ביומן של ניתוח.