דברים שעליך לדעת:
- כדי לשפר את הביצועים, אפשר להשתמש באפשרות yield במשימות ארוכות.
- אנימציה של רכיבים עם גדלים מובְנים.
- בוצעו כמה שינויים בתחביר של מיקום עוגן.
- ויש עוד הרבה.
קוראים לי פיט לייפאג (Pete LePage). נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 129.
פיצול משימות ארוכות באמצעות scheduler.yield()
משימות ארוכות מעכבות את היכולת של הדפדפן להגיב לקלט של המשתמשים, יוצרות תחושה שהאתר איטי ומשפיעות על מדדי ביצועים קריטיים כמו INP. בעזרת scheduler.yield()
אפשר לפצל משימות ארוכות למקטעים קטנים יותר, וכך לשפר את היענות המערכת על ידי העברה מפורשת חזרה לשרשור הראשי.
היא מאפשרת לכם להורות לדפדפן:
"היי! העבודה שאעשה עשויה להימשך זמן מה. אם יש לך צורך לצבוע מסגרת, להגיב לקלט של משתמש או לבצע משימות חשובות אחרות, אין בעיה, אוכל להמתין"
מוסיפים את השורה הבאה לקוד ה-JavaScript לעיתים קרובות כדי לתת לדפדפן מרווח נשימה, וכדי למנוע בעיות INP.
await scheduler.yield();
חשוב לציין שהיא מאפשרת לתת עדיפות להמשך הקוד, כך שלא תפסידו זמן על ידי הענקת עדיפות לקוד אחר. מומלץ להשתמש ב-scheduler.yield()
בפונקציות בין קטעי קוד גדולים יותר.
לפרטים נוספים, ראו אופטימיזציה של משימות ארוכות.
אנימציות עם מידות מובנות
אנימציות CSS הן נהדרות, אבל בדרך כלל הן דורשות גדלים מפורשים. לא ניתן להשתמש במילות המפתח של הגדרת הגודל המובנית, כמו auto
, min-content
או fit-content
.
בעזרת מאפיין ה-CSS interpolate-size
אפשר ליצור קבוצה חדשה של אנימציות שלא היו אפשריות כשהשתמשתם במילות מפתח לבחירת גודל מובנה.
בלי interpolate-size
, אין לחצנים בסרטון הבא עם מעבר.
אחרי שמוסיפים את interpolate-size: allow-keywords
, הלחצנים בסרטון מקבלים אפקט אנימציה יפה של מעבר.
ציון הערך interpolate-size: allow-keywords
ברכיב root
מגדיר את ההתנהגות החדשה לכל הדף. מומלץ לעשות זאת בכל מקרה שבו אין בעיה של תאימות.
:root {
interpolate-size: allow-keywords;
}
.item {
height: auto;
@starting-style {
height: 0;
}
}
כדי לשלוט בצורה מדויקת יותר, הפונקציה calc-size()
ב-CSS, בדומה לפונקציה calc()
, תומכת גם בפעולות על אחת בלבד ממילת המפתחות הנתמכות של התאמה אישית מובנית. כשמבצעים חישובים של פריסה, מילת המפתח size
מוערכת לפי הגודל המקורי של calc-size-basis
.
nav a {
width: 80px;
overflow-x: clip;
transition: width 0.35s ease;
&:hover {
width: calc-size(auto, size);
}
}
פרטים מלאים זמינים במאמר Animation to height: auto; (ועוד מילות מפתח פנימיות לקביעת גודל) ב-CSS.
שינויים במיקום של עוגנים ב-CSS
היכולת למקם עוגנים ב-CSS נוספה ל-Chrome בגרסה 125, אבל אחרי דיון נוסף בקבוצת העבודה של CSS, בוצעו כמה שינויים במפרט ובהטמעה. אם אתם כבר משתמשים במיקום עוגן ב-CSS, תצטרכו לעדכן את הקוד בהקדם האפשרי.
קודם כול, השם של inset-area
השתנה ל-position-area
. האפשרות הזו נבחרה כי הניסוח position-
עוזר לזכור שהמאפיין הזה חל על הרכיב הממוקם, ולא על רכיב העוגן.
בשלב השני, השם של position-try-options
משתנה ל-position-try-fallbacks
. הסימון הזה עוזר לזכור שאלה רק חלופות למיקום הראשי, שנקבע על ידי סגנונות הבסיס.
לבסוף, התחביר הפונקציוני של inset-area()
יוסר מ-position-try
. לכן, צריך להשתמש ב-position-try-fallbacks: top
במקום ב-position-try-fallbacks: inset-area(top)
.
ועוד.
כמובן שיש עוד הרבה.
יש שיטה חדשה Intl
לפורמט של משכי זמן, עם תמיכה במספר אזורי זמן.
const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"
עכשיו אפשר להשתמש במלוא טווח התצוגה של Web GPU canvas לתמונות HDR.
בנוסף, יש כמה תכונות שאנחנו מוציאים משימוש ומסירים, ויכול להיות שהן ישפיעו על חלק מהמפתחים.
קריאה נוספת
הרשימה הזו כוללת רק כמה נקודות עיקריות. בקישורים הבאים מפורטים שינויים נוספים בגרסה 129 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (גרסה 129)
- עדכונים ב-ChromeStatus.com לגבי Chrome 129
- רשימת השינויים במאגר המקור של Chromium
- לוח הזמנים של הגרסאות החדשות של Chrome
להרשמה
כדי להתעדכן, כדאי להירשם לערוץ YouTube למפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.
אני מחליף את Adriana. שמי Pete LePage, וברגע שגרסת Chrome 130 תפורסם, נהיה כאן כדי לספר לכם מה חדש ב-Chrome!