#perfmatters: טכניקות כלים לנינג'ה
הכרת כלי הפיתוח שלכם היא המפתח למומחיות בביצועים. קולט עבר דרך שלושת עמודי התווך של הביצועים: רשת, מחשוב ורינדור, שסיפק סיור בנושא הבעיה העיקרית בכל תחום והכלים הזמינים לאיתור ולמיחזור.
- עכשיו אפשר להוסיף לפרופיל Chrome ב-Android את כלי הפיתוח המוכרים והאהובים מהמחשב.
- לולאת האיטרציה של עבודת הביצועים היא: איסוף נתונים, השגת תובנות, נקיטת פעולה.
- כדאי לתת עדיפות לנכסים שנמצאים בנתיב העיבוד הקריטי של הדפים.
- עדיף לא לצייר, כי זה ממש יקר.
- כדאי להימנע מנטישה של זיכרון ומביצוע קוד ברגעים קריטיים באפליקציה.
#perfmatters: אופטימיזציה של ביצועי רשת
לרוב, הרשת וזמן האחזור אחראים ל-70% מזמן הטעינה הכולל של הדפים באתר. זה אחוז גדול, אבל המשמעות היא גם שכל שיפור שתבצעו בו יפיק תועלת עצומה עבור המשתמשים שלכם. בהרצאה זו, ליאת הסבר על השינויים האחרונים ב-Chrome שישפרו את זמן הטעינה, וכן כמה שינויים שתוכל לבצע בסביבה שלך כדי לשמור על מינימום מוחלט של עומס הרשת.
- ב-Chrome M27 יש מתזמן משאבים חדש ומשופר.
- Chrome M28 הפך אתרי SPDY למהירים יותר (אפילו).
- המטמון הפשוט של Chrome עבר מהפך.
- SPDY / HTTP/2.0 מציעים שיפורים עצומים במהירות ההעברה. יש מודולים של SPDY למבוגרים שזמינים ל-nginx, Apache ו-Jetty (כלומר, שלושה בלבד).
- QUIC הוא פרוטוקול חדש וניסיוני המבוסס על UDP. אמנם הדבר נעשה בראשיתי, אבל הוא יצליח שהמשתמשים ינצחו.
#perfmatters: פריסה ועיבוד של 60fps
צילום של 60 פריימים לשנייה בפרויקטים קשור ישירות למעורבות המשתמשים, והוא חיוני להצלחתו. בהרצאה זו, נט וטום דיברו על צינור עיבוד הנתונים של Chrome, על כמה סיבות נפוצות לירידה בפריימים וכיצד להימנע מהן.
- משך המסגרת הוא 16 אלפיות השנייה. הוא כולל JavaScript, חישובי סגנון, ציור וחיבור.
- ציור הוא יקר extremely. סערת צבע היא מצב שבו אין צורך לחזור על עבודת צביעה יקרה.
- שכבות משמשות לשמירה של רכיבים צבועים במטמון.
- רכיבי ה-handler של הקלט (מקשי המגע וגלגלי העכבר) יכולים להפסיק את התגובה; עדיף להימנע מהם אם אפשר. במקומות שבהם אי אפשר לצמצם אותן למינימום.
#perfmatters: אפליקציות אינטרנט ללא התקנה לנייד
נתיב העיבוד הקריטי מתייחס לכל דבר (JavaScript, HTML, CSS, תמונות) שהדפדפן דורש כדי שניתן יהיה להתחיל בצביעה של הדף. חובה לתת עדיפות למסירת נכסים בנתיב העיבוד הקריטי, במיוחד עבור משתמשים במכשירים עם מגבלות רשת, כגון סמארטפונים ברשתות סלולריות. בריאן דיבר על האופן שבו הצוות ב-Google עבר את תהליך הזיהוי והתעדוף של הנכסים באתר PageSpeed Insights. הוא לקח מזמן טעינה של 20 שניות לקצת יותר משנייה!
- מסירים JavaScript ו-CSS שחוסמים עיבוד.
- לתת עדיפות לתוכן גלוי.
- יש לטעון סקריפטים באופן אסינכרוני.
- עבדו את התצוגה הראשונית בצד השרת כ-HTML, והרחיבו אותה באמצעות JavaScript.
- מזער את ה-CSS שחוסם עיבוד. ספק רק את הסגנונות הנדרשים להצגת אזור התצוגה הראשוני, ולאחר מכן ספק את השאר.
- מזהי URI של נתונים גדולים מוטמעים ב-CSS שחוסם עיבוד מזיקים לביצועי העיבוד. הם חוסמים משאבים שבהם כתובות ה-URL של התמונות לא חוסמות.