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

Pete LePage

אלה השינויים הבולטים בגרסה 124 של Chrome:

רוצה עד הסוף? הערות המוצר של Chrome 124

שימוש ב-Declarative Shadow DOM ב-JavaScript

יש שני ממשקי API חדשים שמאפשרים להשתמש ב-Declarative Shadow DOM מ-JavaScript.

setHTMLUnsafe() דומה ל-innerHTML ומאפשר להגדיר את ה-HTML הפנימי של רכיב מסוים למחרוזת שצוינה. זה עוזר כשיש קוד HTML שכולל DOM של צללית הצהרתית, כמו בדוגמה הזו.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

אם משתמשים רק ב-innerHTML, הדפדפן לא ינתח אותו כראוי ולא יהיה DOM בצל. אבל עם setHTMLUnsafe(), ה-DOM בצל נוצר והרכיב מנותח כצפוי.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

ה-API השני הוא parseHTMLUnsafe(), והוא פועל באופן דומה ל-DOMParser.parseFromString().

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

לסיום, כבר יש תמיכה בשני ממשקי ה-API האלה בגרסה העדכנית ביותר של Firefox ו-Safari.

WebSocket Stream API

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

אבל מה קורה אם הנתונים מגיעים מהר יותר ממה שאתם יכולים לטפל בהם?

זה נקרא לחץ חזרה, והוא עלול לגרום לכאבי ראש רציניים. לצערנו, ב-WebSocket API אין דרך נוחה להתמודד עם לחץ חוזר.

WebSocket Stream API מאפשר לכם להשתמש ביכולות של סטרימינג ושל שקעי אינטרנט, כך שתוכלו להפעיל לחץ חוזר ללא עלות נוספת.

מתחילים ביצירת WebSocketStream חדש ומעבירים לו את כתובת ה-URL של שרת ה-WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

לאחר מכן, ממתינים לפתיחתו של החיבור, וכתוצאה מכך מתקבלים ReadableStream ו-WritableStream. קריאה ל-method‏ ReadableStream.getReader() מחזירה ReadableStreamDefaultReader, שממנו אפשר read() נתונים עד שהזרם מסתיים.

כדי לכתוב נתונים, צריך להפעיל את השיטה WritableStream.getWriter(), שמחזירה WritableStreamDefaultWriter, ואז אפשר write() נתונים אליו.

הצגת שיפורים במעברים

אני שמח על התכונות של מעבר בין תצוגות, ויש שתי תכונות חדשות ב-Chrome 124 שנועדו להקל על מעבר בין תצוגות.

האירוע pageswap מופעל באובייקט החלון של המסמך כשפעולת ניווט מחליפה את המסמך במסמך חדש.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

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

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

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

קריאה נוספת

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

להרשמה

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

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