Hallo! זו Kayce שוב, כותבת טכנולוגיה ב-DevTools. בתקציר הזה של כלי הפיתוח, חשבתי שאעדכן קצת ואערוך סיכום של כמה שיפורים בכלים לביצוע ב-DevTools במהלך הגרסאות האחרונות של Chrome.
אלא אם צוין אחרת, כל התכונות כבר נכללות בגרסה היציבה של Chrome.
ויסות נתונים של מעבד (CPU) בעידן הניידים
זמינה ב-Chrome 54, שהגרסה הנוכחית שלו היא Canary.
התוכנה אוכלת את העולם, והניידים אוכלים תוכנות. כלי הפיתוח מתפתחים בהתמדה כדי לענות טוב יותר על הצרכים של עולם פיתוח שמתמקד בניידים. הפיתוח האחרון בכלים שמותאמים לניידים של כלי הפיתוח הוא ויסות נתונים (CPU) למעבד (CPU). כדאי להשתמש בתכונה הזו כדי להגביר את המוּדעוּת לביצועי האתר במכשירים שמוגבלים במשאבים.
כדי לנצל את יכולות המחשוב של מכונת הפיתוח, בוחרים באחת מהאפשרויות בתפריט הנפתח ויסות נתונים (CPU) בחלונית ציר הזמן.
כמה הערות על ויסות נתונים (throttle) של המעבד (CPU):
- ויסות הנתונים מופעל באופן מיידי ונמשך עד שתשבית אותו, בדיוק כמו ויסות רשת.
- התכונה הזו מיועדת כדי שתהיה לכם מודעות כללית לגבי הביצועים הצפויים של האתר שלכם במכשיר בהגבלת משאבים. לכלי הפיתוח אין אפשרות לחקות באמת את מאפייני הביצועים של מערכת ניידת על שבב.
- ויסות נתונים הוא יחסי למכונת הפיתוח. במילים אחרות, ויסות נתונים פי 5 במחשב שולחני ברמה גבוהה יניב תוצאות שונות מאשר ויסות נתונים פי 5 במחשב נייד זול בן חמש שנים.
עם זאת, ניתן לשלב את ויסות המעבד (CPU) עם ויסות רשת (Throttling) ומצב מכשיר, וניתן להתחיל לקבל תמונה הרבה יותר טובה על המראה והביצועים של האתר במכשירים ניידים, הנוחות של הדפדפן במכונות הפיתוח.
תצוגת רשת בהקלטות של ציר הזמן
מפעילים את תיבת הסימון רשת בפעם הבאה שמצלמים הקלטה של ציר הזמן, כדי לנתח את אופן ההורדה של המשאבים בדף. לוחצים על משאב כדי להציג מידע נוסף עליו בחלונית 'סיכום'.
השדה יוזם בסיכום שימושי במיוחד. השדה הזה מציין את המיקום המבוקש למשאב.
פונקציות event listener פסיביות
פונקציות event listener פסיביות הם תקן מתפתח לשיפור ביצועי הגלילה. כדי לקבל מידע נוסף, כדאי לקרוא את המאמר הזה באמת:
שיפור ביצועי הגלילה באמצעות פונקציות event listener פסיביות
DevTools שלח שתי פיצ'רים כדי לעזור לך למצוא מאזינים שיכולים להפיק תועלת מקצת אהבה ב-{passive: true}.
קודם כל, המסוף משמיע אזהרה כשמאזין סינכרוני חוסם את הגלילה בדף למשך זמן בלתי סביר.
תוכלו לבדוק זאת בעצמכם בהדגמה הבאה:
מצב jank בגלילה בגלל הדגמה של רכיבי ה-handler של המגע/הגלגלים
בשלב הבא אפשר להשתמש בתפריט הנפתח הקטן בחלונית Event Listeners כדי לסנן לפי מאזינים פסיביים או חוסמים.
לבסוף, אפשר להחליף את המצב הסביל או החסימה של ה-listener על ידי העברת העכבר מעליו ולחיצה על Toggle Passive. התכונה הזו מוגבלת כרגע לפונקציות event listener של touchstart, touchmove, mousewheel ו-wheel.
אני אסיים את הקטע הזה עם טיפ קטן. מפעילים את תיבת הסימון בעיות בביצועים בגלילה בחלונית ההזזה לעיבוד כדי לראות תצוגה חזותית של בעיות אפשריות בגלילה. כשקטע מסוים בדף מודגש, המשמעות היא שיש האזנה שמקושרת לקטע הזה בדף ועשויה להיות לכך השפעה שלילית על ביצועי הגלילה.
קיבוץ לפי פעילות
באמצע יוני, בחלונית עץ שיחות שבחלונית ציר הזמן נוספה קטגוריית מיון חדשה: קיבוץ לפי פעילות. הקיבוץ הזה מאפשר לכם לראות כמה זמן הדף הקדיש לניתוח HTML, להערכת סקריפטים, לציור וכו'.
נתונים סטטיסטיים של ציר הזמן בחלונית המקורות
כשאתם יוצרים תיעוד של ציר זמן כשהאפשרות פרופיל JS מופעלת, ניתן לראות פירוט של זמני הביצוע בחלונית 'מקורות', לפי פונקציה.
שיתוף נקודת המבט שלך
כמו תמיד, נשמח לקבל משוב או רעיונות בכל נושא שקשור לכלי הפיתוח.
- תוכלו לשלוח לנו משוב ב-ChromeDevTools ב-Twitter כדי לקבל שאלות קצרות או לקבל משוב, או כדי לשתף רעיונות חדשים.
- לדיונים ארוכים יותר, כדאי לך להשתמש ברשימת הדיוור או ב-Stack Overflow.
- אם יש לכם מסמכים הקשורים למסמכים, צרו בעיה במאגר המסמכים שלנו.
עד לחודש הבא!