חדש ב-Chrome 103

Pete LePage

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

  • יש קוד מצב HTTP 103 חדש שעוזר לדפדפן להחליט איזה תוכן לטעון מראש עוד לפני שהדף מתחיל להגיע.
  • Local Font Access API מאפשר לאפליקציות אינטרנט למנות גופנים שמותקנים במחשב של המשתמש ולהשתמש בהם.
  • AbortSignal.timeout() היא דרך קלה יותר להטמיע זמן קצוב לתפוגה בממשקי API אסינכרונים.
  • ויש עוד הרבה.

קוראים לי Pete LePage. נצלול פנימה ונראה מה חדש למפתחים בגרסה 103 של Chrome.

קוד מצב HTTP 103 103 – רמזים מוקדמים

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

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

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

נניח שהדפדפן מבקש דף, אבל נדרשות לשרת כמה מאות אלפיות שנייה כדי ליצור אותו. עד שהדפדפן מתחיל לקבל את הדף, הוא פשוט מחכה. עם זאת, אם השרת יודע שהדף תמיד יצטרך קבוצה מסוימת של משאבי משנה, למשל קובץ CSS, קצת JavaScript וכמה תמונות, הוא יכול להגיב באופן מיידי עם קוד הסטטוס החדש HTTP 103 Early Hints ולבקש מהדפדפן לטעון מראש את משאבי המשנה האלה.

לאחר מכן, אחרי שהשרת יוצר את הדף, הוא יכול לשלוח אותו עם התגובה הרגילה HTTP 200. כשהדף מגיע, הדפדפן כבר התחיל לטעון את המשאבים הנדרשים.

מכיוון שזהו קוד מצב HTTP חדש, כדי להשתמש בו צריך לבצע עדכונים בשרת.

תחילת העבודה עם HTTP 103 טיפים מוקדמים:

Local Font Access API

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

ממשק ה-API החדש לגישה לגופנים מקומיים מאפשר לאפליקציות אינטרנט למנות את הגופנים המקומיים במכשיר של המשתמש, ומספק גישה לנתונים של טבלת הגופנים.

כדי לקבל רשימה של הגופנים שמותקנים במכשיר, קודם צריך לבקש הרשאה.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

לאחר מכן, מתקשרים למספר window.queryLocalFonts(). הפונקציה מחזירה מערך של כל הגופנים שמותקנים במכשיר של המשתמש.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

אם אתם מעוניינים רק בקבוצת משנה של גופנים, תוכלו לסנן אותם על ידי הוספת פרמטר postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

פרטים מלאים זמינים במאמר של Tom בנושא שימוש בטיפוגרפיה מתקדמת עם גופנים מקומיים ב-web.dev.

יצירת זמן קצוב קל יותר באמצעות AbortSignal.timeout()‎

ב-JavaScript, משתמשים ב-AbortController וב-AbortSignal כדי לבטל קריאה אסינכרונית.

לדוגמה, כששולחים בקשת fetch(), אפשר ליצור AbortSignal ולהעביר אותו אל fetch(). אם רוצים לבטל את ה-fetch() לפני שהוא חוזר, צריך להפעיל את abort() במכונה של ה-AbortSignal. עד עכשיו, אם רצית לבטל את הפעולה אחרי פרק זמן מסוים, היה עליך לעטוף אותה ב-setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

למרבה המזל, עכשיו קל יותר לעשות זאת באמצעות שיטה סטטית חדשה של timeout() ב-AbortSignal. הפונקציה מחזירה אובייקט AbortSignal שמבוטל באופן אוטומטי אחרי מספר אלפיות השנייה שצוין. מה שהיה בעבר קומץ שורות קוד הוא עכשיו רק שורה אחת.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() התמיכה ב-AbortSignal.timeout() מופיעה ב-Chrome 103, והיא כבר קיימת ב-Firefox וב-Safari.

ועוד.

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

  • עכשיו אפשר לשתף קבצים בפורמט avif באמצעות 'שיתוף באינטרנט'
  • מעכשיו, Chromium תואם ל-Firefox על ידי הפעלת popstate מיד אחרי שינויים בכתובת ה-URL. הסדר של האירועים הוא עכשיו: popstate ואז hashchange בשתי הפלטפורמות.
  • והערך Element.isVisible() מציין אם הרכיב גלוי או לא.

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 104 תפורסם, אספר לכם מה חדש ב-Chrome.