מפגש של מפתחי Chrome – סיכום ביצועים

#perfmatters: טכניקות שונות לנינג'ה בתחום הביצועים

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

Google Slides

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

#perfmatters: אופטימיזציה של ביצועי הרשת

בדרך כלל, האתר וזמן האחזור הוא 70% מזמן הטעינה הכולל של דף. זהו אחוז גדול, אבל משמעות הדבר היא גם שכל שיפור שיתבצע שם יזכה את המשתמשים שלך בהטבות אדירות. בהרצאה הזו, Ilya ביצע את השינויים האחרונים ב-Chrome שישפרו את זמן הטעינה, כמו גם כמה שינויים שאפשר לבצע בסביבה שלכם כדי לצמצם ככל האפשר את עומס הרשת.

Slides

  • ב-Chrome M27 יש מתזמן משאבים חדש ומשופר.
  • דפדפן Chrome M28 הפך אתרי SPDY למהיר יותר (אפילו) יותר.
  • המטמון הפשוט של Chrome עבר שיפוץ.
  • SPDY / HTTP/2.0 מציעים שיפורים עצומים במהירות ההעברה. קיימים מודולי SPDY למבוגרים עבור nginx, Apache ו-Jetty (כלומר, שלושה בלבד).
  • QUIC הוא פרוטוקול חדש וניסיוני המבוסס על UDP. אלה הימים הראשונים, אבל נראה שהמשתמשים ינצחו.

#perfmatters: פריסה ורינדור של 60fps

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

Slides

  • אורך מסגרת הוא 16 אלפיות השנייה. הוא מכיל JavaScript, חישובי סגנונות, ציור והרכבת.
  • ציור יקר מאוד. סופת צבע היא מצב שבו חוזרים על עבודות צביעה יקרות שלא לצורך.
  • שכבות משמשות לשמירה במטמון של רכיבים צבועים.
  • גורמים המטפלים בקלט (מאזינים במגע ובגלגל העכבר) יכולים לבטל את הרספונסיביות; להימנע מהן, אם אפשר. איפה לא ניתן להגביל אותם למינימום.

#perfmatters: אפליקציות אינטרנט לנייד ללא התקנה

נתיב העיבוד הקריטי מתייחס לכל דבר (JavaScript, HTML, CSS, תמונות) שהדפדפן דורש לפני שהוא יכול להתחיל לצבוע את הדף. חובה לתעדף נכסים בנתיב העיבוד הקריטי, במיוחד למשתמשים במכשירים עם הגבלת רשת, כמו סמארטפונים ברשתות סלולריות. בריאן סיפר איך הצוות ב-Google עבר תהליך של זיהוי הנכסים באתר PageSpeed Insights וקביעת סדר עדיפויות בנכסים האלה, ונמשך זמן טעינה של 20 שניות עד קצת יותר משנייה!

Google Slides

  • להסיר JavaScript ו-CSS שחוסמים עיבוד.
  • לתת עדיפות לתוכן גלוי.
  • טעינת סקריפטים באופן אסינכרוני.
  • עיבוד התצוגה הראשונית בצד השרת כ-HTML ושיפור באמצעות JavaScript.
  • לצמצם CSS החוסם עיבוד; לספק רק את הסגנונות שנדרשים כדי להציג את אזור התצוגה הראשוני, ואחר כך לספק את השאר.
  • מזהי URI גדולים של נתונים המוטבעים ב-CSS חוסם עיבודים מזיקים לביצועי עיבוד; הם חוסמים משאבים שבהם כתובות URL של תמונות לא חוסמות.