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