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

Pete LePage

אלו העדכונים העיקריים בגרסה 124 של Chrome:

רוצה עד הסוף? כדאי לעיין נתוני הגרסה של Chrome 124

שימוש ב-DOM הצהרתי של צל ב-JavaScript

יש שני ממשקי API חדשים שמאפשרים להשתמש ב-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!

ממשק API של WebSocket Stream

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. באמצעות קריאה אמצעי תשלום ReadableStream.getReader(), מקבלים ReadableStreamDefaultReader ואז אפשר read() לראות ממנו נתונים עד לסיום הסטרימינג.

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

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

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

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

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

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

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

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

קריאה נוספת

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

להרשמה

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

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