ใหม่ใน Chrome 124

Pete LePage

ไฮไลต์ใน Chrome 124 มีดังนี้

ต้องการดูข้อมูลที่เหลือทั้งหมดไหม โปรดดู บันทึกประจำรุ่นของ Chrome 124

ใช้ Shadow DOM แบบประกาศใน JavaScript

มี API ใหม่ 2 รายการที่อนุญาตให้ใช้ Shadow DOM ที่ประกาศแล้วจาก JavaScript

setHTMLUnsafe() คล้ายกับ innerHTML และให้คุณตั้งค่า HTML ภายในของ กับสตริงที่ระบุ วิธีนี้จะมีประโยชน์เมื่อคุณมี HTML ที่มี Shadow DOM แบบประกาศ เช่น

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

หากคุณเพิ่งใช้ innerHTML เบราว์เซอร์จะแยกวิเคราะห์ไม่ถูกต้อง และ ไม่มี Shadow DOM แต่ด้วย setHTMLUnsafe() ระบบจะสร้าง Shadow DOM และ ถูกแยกวิเคราะห์ตามที่คุณคาดหวังไว้

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

API อีกรายการคือ parseHTMLUnsafe() และทํางานคล้ายกับ DOMParser.parseFromString()

API ทั้ง 2 รายการนี้ไม่ปลอดภัย ซึ่งหมายความว่าไม่มีการป้อนข้อมูลใดๆ การทำความสะอาดข้อมูล คุณจึงต้องมั่นใจว่าสิ่งที่คุณป้อนฟีดนั้นจะปลอดภัย ในรุ่นที่กำลังจะเปิดตัว เราคาดว่าจะเห็นเวอร์ชันที่มีการทำความสะอาด ของอินพุต

และสุดท้าย API ทั้งสองนี้ได้รับการรองรับในเวอร์ชันล่าสุดของ Firefox และ Safari!

API สตรีม WebSocket

WebSocket เป็นวิธีที่ยอดเยี่ยมในการส่งข้อมูลไปมาระหว่าง เบราว์เซอร์และเซิร์ฟเวอร์ได้โดยไม่ต้องอาศัยการสำรวจ วิธีนี้เหมาะสำหรับ อย่างเช่นแอปแชท ซึ่งคุณอยากจัดการกับข้อมูลในทันที ส่งเข้ามา

แต่หากข้อมูลมาถึงเร็วกว่าที่คุณสามารถจัดการได้

นั่นเรียกว่าการกดดันกลับ ซึ่งอาจก่อให้เกิดอาการปวดศีรษะอย่างรุนแรงให้คุณ น่าเสียดายที่ WebSocket API ไม่มีวิธีที่ดีในการรับมือ ความกดดัน

WebSocket Stream API มอบ ด้วยพลังของสตรีมและ Web Socket โดยไม่เสียค่าใช้จ่ายเพิ่มเติม

เริ่มต้นด้วยการสร้าง 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()ข้อมูลได้จนกว่าสตรีมจะเสร็จสิ้น

ในการเขียนข้อมูล ให้เรียกใช้เมธอด WritableStream.getWriter() ซึ่งจะแสดง WritableStreamDefaultWriter แล้วคุณจะสามารถwrite() เก็บข้อมูลได้

ดูการปรับปรุงการเปลี่ยน

ผมตื่นเต้นกับฟีเจอร์ดูการเปลี่ยนภาพ แล้วก็มีฟีเจอร์ใหม่ 2 อย่าง ใน Chrome 124 ที่ออกแบบมาเพื่อให้การเปลี่ยนมุมมองง่ายขึ้น

เหตุการณ์ pageswap เริ่มทำงานในออบเจ็กต์หน้าต่างของเอกสารเมื่อการนำทาง จะแทนที่เอกสารด้วยเอกสารใหม่

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

และการบล็อกการแสดงผลเอกสารซึ่งให้คุณบล็อกการแสดงผลเอกสาร จนกว่าจะมีการแยกวิเคราะห์เนื้อหาที่สำคัญ ทำให้แน่ใจได้ว่า First Paint มีความสม่ำเสมอ ได้ในทุกเบราว์เซอร์

และอีกมากมาย

แถมยังมีอีกมากมาย

  • disallowReturnToOpener การบอกใบ้เบราว์เซอร์ว่าไม่ควรมีปุ่มแสดงภาพซ้อนภาพ ที่ช่วยให้ผู้ใช้ย้อนกลับไปยังแท็บที่เปิด

  • คอนเทนเนอร์แบบเลื่อนที่โฟกัสได้ด้วยแป้นพิมพ์ ปรับปรุงการช่วยเหลือพิเศษโดยทำให้คอนเทนเนอร์แบบเลื่อนโฟกัสได้ด้วยการใช้ตามลำดับ โฟกัสที่การไปยังส่วนต่างๆ

  • และการติดตั้งแบบสากลจะช่วยให้ผู้ใช้สามารถติดตั้งหน้าเว็บใดๆ แม้แต่หน้าเว็บที่ไม่ เป็นไปตามเกณฑ์ PWA ปัจจุบัน

อ่านเพิ่มเติม

เราพูดถึงไฮไลต์สำคัญเพียงบางส่วนเท่านั้น โปรดตรวจสอบลิงก์ต่อไปนี้สำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 124

สมัครใช้บริการ

หากต้องการติดตามข้อมูลล่าสุด โปรดสมัครรับข้อมูล ช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลเมื่อเราเปิดตัววิดีโอใหม่

ผมชื่อ Pete LePage และทันทีที่ Chrome 125 เปิดตัว เราอยู่ที่นี่ บอกให้ทราบว่ามีอะไรใหม่ใน Chrome