חדש ב-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

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

הממשק החדש של Local Font Access 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() נתמך ב-Chrome 103, וכבר נתמך ב-Firefox וב-Safari.

ועוד.

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

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

קריאה נוספת

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

להרשמה

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

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