דף זה תורגם על ידי Cloud Translation API.

חדש בגרסה 123 של Chrome

Adriana Jara

דברים שעליך לדעת:

אפשר להתאים את ערכת הצבעים בעזרת הפונקציה החדשה light-dark().
מאבחנים את מהירות התגובה באתר שלכם בעזרת Long Animation Frames API.
למנוע סנקציות על ביצועי הפעלת Service Worker באמצעות Service Worker Static Routing API.
ויש הרבה עוד.

שמי אדריאנה ג'ארה. בואו נראה מה חדש למפתחים ב-Chrome 123.

`light-dark()` פונקציית CSS.

הפונקציה light-dark() ב-CSS מאפשרת ליצור צבעים שמותאמים להעדפות המשתמש במצב בהיר או כהה. הפונקציה light-dark() מאפשרת לציין שני ערכי צבעים שונים בנכס CSS אחד.

הדפדפן יבחר באופן אוטומטי את הצבע המתאים על סמך הערך של color-scheme שמחושב מהאלמנט. לדוגמה, באמצעות ה-CSS הבא:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

אם המשתמש בחר עיצוב בהיר, לרכיב יהיה רקע בצבע ליים.
אם המשתמש בחר עיצוב כהה, לרכיב יהיה רקע ירוק.

ממשק API של מסגרת אנימציה ארוכה.

אפשר להשתמש ב-Long Animation Frames API כדי לאתר את הגורמים לעומס ב-thread הראשי. לעיתים קרובות, זו הסיבה לעומס ב-INP (אינטראקציה ישירה (First-Party)) – מדד ליבה לבדיקת חוויית המשתמש באתר שמודד את הרספונסיביות של האתר.

ה-API החדש הוא גרסה משופרת של More Tasks API, שמספקת הבנה טובה יותר לגבי עדכונים איטיים בממשק המשתמש. אפשר להשתמש ב-Long Animation Frames API כדי למדוד פעולות חסומות. היא מודדת את המשימות יחד עם עדכון הרינדור הבא ומוסיפה מידע, כמו סקריפטים ארוכי טווח, זמן עיבוד והזמן שדורש פריסה וסגנון מאולצים, שנקרא פריסה של פריסות.

איסוף וניתוח של המידע הזה יאפשר לכם לזהות צווארי בקבוק בביצועים ולפתור אותם. ניתן לצלם פריימים ארוכים באמצעות הקוד הבא.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API של Service Worker Static Routing.

באמצעות Service Workers אפשר להפעיל אתרים אופליין וליצור אסטרטגיות שמירה במטמון שיכולות לשפר את הביצועים.

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

ב-Service Worker Static Routing API בזמן ההתקנה אפשר להצהיר על נתיבים שיוגשו תמיד מהרשת. כאשר כתובת URL מבוקרת נטענת מאוחר יותר, הדפדפן יכול להתחיל לאחזר משאבים מהנתיבים האלה לפני שה-Service Worker מסיים את הפעלתו. הפעולה הזו מסירה את ה-Service Worker מכתובות ה-URL שידוע לכם שאינן נחוצות ל-Service Worker.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

ופעולות נוספות.

כמובן שיש עוד המון אפשרויות.

אתם יכולים להציע דפים בהתאמה אישית על סמך המיקום שממנו המשתמש עבר עם הממשק של NavigationActivation.
Chrome כולל עכשיו תמיכה ב-Zstandard (zstd). הContent-Encoding הזה עוזר לטעון דפים מהר יותר ולהשתמש בפחות רוחב פס. הוא מבזבז פחות זמן, מעבדים ואנרגיה על דחיסה בשרתים. כתוצאה מכך, העלויות של השרת יורדות.
אנחנו משיקים את ה-API של notRestoredReasons למטמון לדף הקודם/הבא ב-Chrome 123. כך בעלי האתרים יכולים לאסוף בשדה הסיבות שבגללן לא ניתן היה להשתמש ב-bfcache. בעלי האתרים יכולים להשתמש בהגדרה הזו כדי לשפר את השימוש במטמון לדף הקודם/הבא, וכך מאפשר ניווט מהיר יותר דרך ההיסטוריה.
הערך picture-in-picture של display-mode מאפשר לכתוב כללי CSS ספציפיים שיחולו רק כשאפליקציית האינטרנט מוצגת במצב 'תמונה בתוך תמונה'. למשל:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשות העיקריות. בקישורים הבאים תוכלו למצוא שינויים נוספים ב-Chrome 123.

כדי להתעדכן, הירשמו לערוץ YouTube של מפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.

יו סויה אדריאנה ג'ארה, ומיד כש-Chrome 124 יושק, אהיה כאן כדי לספר לך מה חדש ב-Chrome!