קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
אנימציות לא מורכבות יכולות להופיע מיוחדות (לא חלקות) בטלפונים פשוטים או כשמשימות שמניבות הרבה ביצועים פועלות ב-thread הראשי. אנימציות לא תקינות יכולות להגדיל את
ה-Cumulative Layout Shift (CLS) של הדף. הפחתת ה-CLS תשפר את ציון הביצועים של Lighthouse.
רקע
האלגוריתמים של הדפדפן להמרת HTML , CSS ו-JavaScript לפיקסלים נקראים צינור עיבוד הנתונים.
אין בעיה אם אתם לא מבינים מה המשמעות של כל שלב בצינור עיבוד הנתונים. הדבר החשוב ביותר להבין עכשיו הוא שבכל שלב בצינור עיבוד הנתונים הדפדפן משתמש בתוצאה של הפעולה הקודמת כדי ליצור נתונים חדשים. לדוגמה, אם הקוד מבצע פעולה שמפעילה את Layout, יש לבצע שוב את השלבים 'צבע' ו'מרוכב'. אנימציה לא מורכבת היא כל אנימציה שמפעילה אחד מהשלבים הקודמים בצינור עיבוד הנתונים (סגנון, פריסה או צבע).
אנימציות לא מורכבות מניבות ביצועים גרועים יותר, מפני שהן מאלצות את הדפדפן לבצע יותר עבודה.
תוכלו לעיין במקורות המידע הבאים כדי לקבל מידע מפורט על צינור עיבוד הנתונים:
במקרים שבהם אי אפשר להרכיב אנימציה, Chrome מדווח על הסיבות לכישלון למעקב של כלי הפיתוח. זהו הטקסט שנקרא ב-Lighthouse. ב-Lighthouse מפורטים צומתי DOM שכוללים אנימציות שלא הורכבו, יחד עם הסיבות לכשל בכל אנימציה.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"חסרים לי מידע או פרטים"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"התוכן מורכב מדי או עם יותר מדי שלבים"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"התוכן לא עדכני"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"בעיה בתרגום"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"בעיה בדוגמאות/בקוד"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"סיבה אחרת"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"התוכן קל להבנה"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"התוכן עזר לי לפתור בעיה"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"סיבה אחרת"
}]
{"lastModified": "\u05e2\u05d3\u05db\u05d5\u05df \u05d0\u05d7\u05e8\u05d5\u05df: 2020-08-12 (\u05e9\u05e2\u05d5\u05df UTC)."}
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2020-08-12 (שעון UTC)."],[],[]]