חדש ב-Chrome 103

Pete LePage

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

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

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

קוד מצב 103 HTTP 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 רמזים מוקדמים ולבקש מהדפדפן לטעון מראש את משאבי המשנה האלה.

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

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

תחילת העבודה עם רמזים מוקדמים של HTTP 103:

ממשק 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);

הפרטים המלאים מופיעים במאמר של תום על שימוש בטיפוגרפיה מתקדמת עם גופנים מקומיים באתר 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, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.

אני פיט לפרג', וברגע ש-Chrome 104 יושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!