מבוא
חלק גדול מה-HTML5 נועד לספק תמיכה בדפדפנים מקוריים עבור רכיבים וטכניקות שהשגנו עד כה באמצעות ספריות JavaScript. אם תשתמשו בתכונות האלה, תוכלו לספק למשתמשים חוויה מהירה יותר. במדריך הזה לא אציג שוב את המחקר המצוין על ביצועים שראיתם באתר הביצועים יוצאי הדופן של Yahoo או במסמכי Google בנושא מהירות דף של Google, וגם באתר בואו נשפר את מהירות האינטרנט. במקום זאת, אתמקד באופן השימוש ב-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: השתמשו במסדי נתונים בצד הלקוח במקום בפעולות דו-כיווניות בשרת
מסד נתונים Web SQL ו-IndexedDB מציגים מסדי נתונים בצד הלקוח. במקום הדפוס הנפוץ של פרסום נתונים בשרת דרך XMLHttpRequest או שליחת טופס, אפשר להשתמש במסדי הנתונים בצד הלקוח. צמצום בקשות HTTP הוא היעד העיקרי של כל מהנדסי הביצועים, לכן השימוש בהן כמאגר נתונים יכול לחסוך נסיעות רבות באמצעות XHR או שליחת פוסטים חזרה לשרת. אפשר להשתמש ב-localStorage וב-sessionStorage במקרים מסוימים, למשל תיעוד ההתקדמות של שליחת טפסים, וראינו שהם פועלים מהר יותר באופן משמעותי מממשקי ה-API של מסד הנתונים בצד הלקוח.
לדוגמה, אם יש לכם רכיב של רשת נתונים או תיבת דואר נכנס שמכילה מאות הודעות, אחסון הנתונים באופן מקומי במסד הנתונים יחסוך לכם בקשות HTTP דו-כיווניות כשהמשתמש ירצה לחפש, לסנן או למיין. בכל הקשה אפשר לסנן את רשימת החברים או את ההשלמה האוטומטית של קלט טקסט, וכך לשפר את חוויית המשתמש.
טיפ 4: שיפורים ב-JavaScript מעניקים יתרונות משמעותיים לביצועים
הרבה שיטות נוספות נוספו ל-protoype של המערך ב-JavaScript 1.6. הדפדפן זמין כרגע ברוב הדפדפנים, מלבד 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> הרגילה, כמו: 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 Gear כדי להוסיף תכונה בשם Wordpress Turbo. הוא למעשה שומר במטמון רבים מהמשאבים שמשמשים בלוח הניהול באופן מקומי, וכך מאיץ את הגישה לקבצים. אפשר לשכפל את ההתנהגות הזו באמצעות ה-ApplicationCache של HTML5 וה-cache.manifest.
למטמון האפליקציה יש יתרון קל על פני הגדרת כותרות של Expires. מאחר שיצרתם קובץ הצהרתי שמציין את המשאבים הסטטיים שניתן לשמור במטמון, דפדפנים יכולים לבצע אופטימיזציה משמעותית לכך, ואולי אפילו להקדים אותם מראש לפני השימוש.
התייחס למבנה הבסיסי של האתר שלך כתבנית. הנתונים עשויים להשתנות, אבל ה-HTML שמסביב נשאר די עקבי. באמצעות מטמון האפליקציה, תוכלו להתייחס ל-HTML כאל סדרה של תבניות טהורים, לשמור במטמון את תגי העיצוב דרך הקובץcache.manifest, ולאחר מכן להעביר קובץ JSON כדי לעדכן את התוכן. המודל הזה דומה מאוד לאופן הפעולה של אפליקציית חדשות מקורית במכשירי iPhone או Android.
טיפ 6: כדאי להפעיל את שיפור המהירות באמצעות חומרה כדי לשפר את החוויה החזותית
בדפדפנים מובילים, פעולות ויזואליות רבות יכולות למנף האצה ברמת ה-GPU, וכך לבצע פעולות ויזואליות דינמיות מאוד בצורה חלקה יותר. הושקה האצת חומרה בגרסאות 5 של Firefox Minefield ו-IE9 ו-Safari ו-Safari הוסיפו שיפור ברמת החומרה בגרסה 5. (הגרסה החדשה הגיעה ל-Mobile Safari הרבה יותר מוקדם.) Chromium הוסיף לאחרונה שינויי תלת-ממד והאצת חומרה עבור Windows, ושתי הפלטפורמות האחרות יגיעו בקרוב.
ההאצה של ה-GPU מתבצעת רק בקבוצת תנאים מוגבלת למדי, אך המרות בתלת-ממד ושקיפות מונפשת הן הדרכים הנפוצות ביותר לעבור את המתג. דרך קצת מגניבה אבל לא פולשנית להפעלת התכונה:
.hwaccel { -webkit-transform: translateZ(0); }
אבל אין כל ערובה. :) כאשר האצת חומרה נתמכת ומופעלת, תרגום אנימציה, סיבוב, שינוי קנה מידה ושקיפות יהיו ללא ספק חלקים יותר עם איחוד GPU. היתרון בכך שהם יטופלו ישירות ב-GPU ולא יחייב שרטוט מחדש של תוכן השכבה. עם זאת, כל נכס שמשפיע על פריסת הדף עדיין יהיה איטי יחסית.
טיפ 7: בפעולות כבדות מעבד (CPU), Web Workers מספקות
לעובדי אינטרנט יש שני יתרונות משמעותיים: 1) הם מהירים. 2) בזמן שהם עובדים על המשימות, הדפדפן מגיב לבקשות. הצצה למשטח השקף HTML5 לעובדים בפעולה. הנה כמה מצבים אפשריים שבהם ניתן להשתמש ב-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 Slides.
טיפ 9: השתמשו באפקטים של CSS3 במקום לבקש שילובים כבדים של תמונות
CSS3 מציע אפשרויות עיצוב חדשות שמחליפות את השימוש שלנו בתמונות כדי לייצג את העיצוב החזותי באופן מדויק. החלפת תמונה בגודל 2k ב-100 בייטים של CSS היא ניצחון עצום, שלא לדבר על הסרת עוד בקשת HTTP. כמה מהנכסים שכדאי להכיר הם:
- הדרגה ליניארית ורדיאלית
- רדיוס גבול לפינות מעוגלות
- צללית תיבה להטלת צלליות וזוהר
- RGBA לאטימות אלפא
- טרנספורמציות לסיבוב
- מסכות CSS
לדוגמה, ניתן ליצור לחצנים מלוטשים מאוד באמצעות צבעים מדורגים ולשכפל אפקטים רבים אחרים ללא תמונות. ברוב הגרסאות האלה הדפדפן תומך ברוב הדפדפנים, וניתן להשתמש בספרייה כמו Modernizr כדי לאתר דפדפנים שלא תומכים בתכונות האלו ולהשתמש בתמונות במקרה החלופי.
טיפ 10: WebSockets, למסירה מהירה יותר עם רוחב פס קטן יותר מ-XHR
WebSockets תוכנן בתגובה לפופולריות הגוברת של Comet. כיום יש יתרונות לשימוש ב-WebSockets, במקום במודל Comet על פני XHR.
ל-WebSockets יש פריים קל מאוד, ולכן רוחב הפס שהוא צורף בדרך כלל קל יותר מזה של XHR. דוחות מסוימים מציינים ירידה של 35% במספר הבייטים שנשלחים לאורך החוט. בנוסף, בנפח גדול יותר, ההבדל בביצועים בכל הנוגע להעברת הודעות ברור יותר. XHR תועד בבדיקה הזו, עם זמן מצטבר של 3,500% יותר זמן בהשוואה ל-WebSockets. לבסוף, Ericcson Labs בחנו את הביצועים של WebSockets וגילינו שזמני הפינג ב-HTTP היו גדולים פי 3-5 מ-WebSockets, בגלל דרישות עיבוד משמעותיות יותר. הם הגיעו למסקנה שפרוטוקול WebSocket מתאים יותר בבירור לאפליקציות בזמן אמת.
מקורות נוספים
לקבלת המלצות למדידה ולביצועים, מומלץ להשתמש בתוספים מהירות דף ו-YSlow של Firefox. בנוסף, Speed Tracer ל-Chrome ו-DynaTrace Ajax ל-IE מספקים רמה מפורטת יותר של רישום ניתוח ביומן.