מאת: לינדזי סיימון, מפתחת חוויית משתמש
ידע מומלץ: HTML בסיסי, JavaScript בסיסי, ידע מעשי ב-CSS
Reflow הוא השם של תהליך דפדפן האינטרנט לחישוב מחדש המיקומים והגאומטריות של רכיבים במסמך, למטרת עיבוד מחדש של חלק מהמסמך או של כולו. הזרמה חוזרת היא פעולה שחוסמת משתמשים בדפדפן, ולכן כדאי למפתחים להבין איך לשפר את זמן ההזרמה מחדש ולהבין את ההשפעה של מאפייני מסמכים שונים (עומק DOM, יעילות כללי CSS, סוגים שונים של שינויי סגנון) על זמן ההזרמה. לפעמים, הזרמה מחדש של רכיב אחד במסמך מחייבת הזרמה מחדש של רכיבי ההורה ושל הרכיבים שאחריהם הוא מופיע.
יש מגוון נהדר של פעולות משתמש ושינויי DHTML אפשריים שיכולים לגרום להזרמה חוזרת. שינוי גודל חלון הדפדפן, באמצעות שיטות JavaScript שכוללות סגנונות מחושבים, הוספה או הסרה של רכיבים מה-DOM ושינוי סיווגים של רכיב הם כמה מהגורמים שיכולים לגרום להזרמה חוזרת. חשוב גם לציין שפעולות מסוימות עשויות לגרום לזמן ארוך יותר מכפי שציפיתם – מתוך הדיבור של סטיב Souders על "Even Faster Web Sites":
מהטבלה שלמעלה ניתן לראות שלא כל השינויים בסגנון ב-JavaScript גורמים לזרימה חוזרת בכל הדפדפנים, ושהזמן שנדרש להזרמה חוזרת משתנה. כמו כן, ניתן לומר שדפדפנים מודרניים משתפרים בזמנים של הזרמה חוזרת.
אנחנו ב-Google בודקים את המהירות של דפי האינטרנט והאפליקציות שלנו במגוון דרכים, והזרמה חוזרת היא גורם מפתח שאנחנו מביאים בחשבון כשאנחנו מוסיפים תכונות לממשקי המשתמש. אנחנו שואפים לספק חוויות משתמש תוססות, אינטראקטיביות ומהנות.
הנחיות
הנה כמה הנחיות פשוטות שיעזרו לכם לצמצם את ההזרמה החוזרת בדפי האינטרנט:
- יש להקטין את עומק ה-DOM המיותר. שינויים ברמה אחת בעץ ה-DOM יכולים לגרום לשינויים בכל רמה בעץ – עד לשורש ועד לרמת הצאצאים של הצומת שהשתנה. כך ניתן לבזבז זמן רב יותר על ביצוע הזרמה חוזרת.
- מזעור כללי CSS והסרת כללי CSS שאינם בשימוש.
- אם אתם מבצעים שינויי רינדור מורכבים כמו אנימציות, כדאי לעשות זאת בלי שתצטרכו לעשות זאת. לשם כך, צריך להשתמש בערך 'מיקום מוחלט' או 'קבוע מיקום'.
- כדאי להימנע מסלקטורים מורכבים ב-CSS – במיוחד בוררי צאצאים – שכדי לבצע התאמה של הסלקטורים צריך יותר כוח במעבד.
בסרטון הזה, לינדזי מסבירה כמה דרכים פשוטות לצמצום ההזרמה החוזרת בדפים:
משאבים נוספים
- צביעה מחדש והזרמה מחדש של האופרה
- הדגמות ההזרמה החוזרת של Satoshi Ueyama ב-Firefox וניפוי באגים:
- ניקול סאליבן על זרימה מחדש וצביעה מחדש
משוב
האם הדף הזה הועיל לך?