ไฮไลต์ใน Chrome 124 มีดังนี้
- มี API ใหม่ 2 รายการที่อนุญาตให้ใช้ shadow DOM จาก JavaScript
- คุณสามารถใช้สตรีมใน Web Socket
- ดูการเปลี่ยนภาพจะดียิ่งขึ้นเล็กน้อย
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
อยากดูเวอร์ชันทั้งหมดใช่ไหม โปรดดูบันทึกประจำรุ่นของ 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 ทั้ง 2 รายการนี้รองรับใน Firefox และ Safari เวอร์ชันล่าสุดอยู่แล้ว
API สตรีม WebSocket
WebSocket เป็นวิธีที่ดีในการส่งข้อมูลระหว่างเบราว์เซอร์ของผู้ใช้กับเซิร์ฟเวอร์โดยไม่ต้องพึ่งแบบสำรวจ การทำเช่นนี้เหมาะมากกับสิ่งต่างๆ อย่างแอปแชท ซึ่งคุณจะต้องจัดการข้อมูลทันทีที่ได้รับ
แล้วถ้าข้อมูลมาถึงเร็วกว่าที่คุณสามารถจัดการได้ล่ะ
ซึ่งนั่นเรียกว่าความกดดันย้อนกลับและอาจทำให้คุณปวดหัวรุนแรงได้ ขออภัย 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()
ข้อมูลจนกว่าสตรีมจะเสร็จสิ้น
ในการเขียนข้อมูล ให้เรียกใช้เมธอด WritableStream.getWriter()
ซึ่งจะให้ข้อมูล WritableStreamDefaultWriter
ซึ่งคุณสามารถ write()
ข้อมูลไปแล้วหลังจากนั้น
ดูการปรับปรุงการเปลี่ยน
เราตื่นเต้นกับฟีเจอร์การเปลี่ยนมุมมอง แต่ Chrome 124 มีฟีเจอร์ใหม่ 2 รายการซึ่งออกแบบมาเพื่อช่วยให้การเปลี่ยนมุมมองง่ายขึ้น
เหตุการณ์ pageswap
จะเริ่มทำงานในออบเจ็กต์หน้าต่างของเอกสารเมื่อการนำทางจะแทนที่เอกสารด้วยเอกสารใหม่
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
และการบล็อกการแสดงผลเอกสาร ซึ่งช่วยให้คุณบล็อกการแสดงผลเอกสารจนกว่าจะมีการแยกวิเคราะห์เนื้อหาสำคัญ เพื่อให้แน่ใจว่าการแสดงผลครั้งแรกสอดคล้องกันในทุกเบราว์เซอร์
และอีกมากมาย
แน่นอน ยังมีคำถามอีกมากมาย
disallowReturnToOpener
บอกเบราว์เซอร์ว่าไม่ควรแสดงปุ่มในหน้าต่างการแสดงภาพซ้อนภาพซึ่งจะให้ผู้ใช้กลับไปที่แท็บที่เปิดอยู่คอนเทนเนอร์แบบเลื่อนที่โฟกัสได้ด้วยแป้นพิมพ์ ปรับปรุงการช่วยเหลือพิเศษโดยทำให้คอนเทนเนอร์แบบเลื่อนโฟกัสได้โดยใช้การนำทางด้วยโฟกัสตามลำดับ
ส่วนการติดตั้งส่วนกลางจะช่วยให้ผู้ใช้ติดตั้งหน้าใดก็ได้ แม้ว่าหน้าที่ไม่เป็นไปตามเกณฑ์ PWA ปัจจุบันก็ตาม
อ่านเพิ่มเติม
ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ต่อไปนี้เพื่อดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 124
- บันทึกประจำรุ่นของ Chrome 124
- มีอะไรใหม่ใน Chrome DevTools (124)
- การอัปเดต ChromeStatus.com สำหรับ Chrome 124
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 125 เราก็จะแจ้งให้คุณทราบถึงสิ่งใหม่ๆ ใน Chrome!