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

Pete LePage

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

רוצה לקבל את כל הפרטים? הערות המוצר של Chrome 124

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

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

setHTMLUnsafe() דומה ל-innerHTML ומאפשר להגדיר את ה-HTML הפנימי של רכיב מסוים למחרוזת שצוינה. האפשרות הזו שימושית כשיש לכם קוד HTML שכולל Declarative Shadow 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, ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

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