ใหม่ใน Chrome 97

Pete LePage

สิ่งที่จำเป็นต้องทราบมีดังนี้

สุขสันต์วันปีใหม่! ฉันชื่อ Pete LePage มาเจาะลึกกันเลยและดูว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 97

การรับส่งข้อมูลบนเว็บ

หากคุณกำลังใช้ Web Sockets หรือ WebRTC Data Channel API เพื่อส่งข้อความระหว่างเซิร์ฟเวอร์ของคุณและหน้าเว็บ คุณจะมีตัวเลือกใหม่ให้คุณ WebTransport เป็น API ใหม่ที่เสนอการรับส่งข้อความแบบ 2 ทิศทางแบบไคลเอ็นต์-เซิร์ฟเวอร์ที่มีเวลาในการตอบสนองต่ำ

โดยมีเวลาในการตอบสนองต่ำกว่า WebSockets และ Web Transport API ออกแบบมาโดยเฉพาะสำหรับการรับส่งข้อความแบบไคลเอ็นต์-เซิร์ฟเวอร์ ซึ่งต่างจาก RTC Data Channel API ที่ออกแบบมาเพื่อการรับส่งข้อความแบบเพียร์ทูเพียร์

ซึ่งรองรับการส่งข้อมูลด้วย API ของสตรีมอย่างมีประสิทธิภาพ และน่าเชื่อถือด้วย Datagram API Web Worker รองรับ และเนื่องจากอินเทอร์เฟซนี้แสดงอินเทอร์เฟซ ที่เป็นไปตามข้อกำหนดของสตรีม จึงรองรับการเพิ่มประสิทธิภาพในช่วงที่มีแรงกดดันย้อนกลับ

ในการใช้งาน คุณจะต้องมีเซิร์ฟเวอร์ที่รองรับ HTTP/3 ซึ่งโดยทั่วไปจะง่ายกว่าการตั้งค่าและดูแลรักษาเซิร์ฟเวอร์ WebRTC เปิดอินสแตนซ์ WebTransport ใหม่ รอให้อินสแตนซ์เชื่อมต่อ จากนั้นคุณจะเริ่มส่งข้อมูลได้

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

ดูรายละเอียดทั้งหมดในบทความการทดสอบกับ WebTransport บน web.dev

การตรวจหาฟีเจอร์ประเภทสคริปต์

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

ป้อน HTMLScriptElement.supports() คุณสามารถใช้รายงานนี้เพื่อพิจารณาประเภทของสคริปต์ที่คุณสามารถใช้ได้ และส่งตัวเลือกที่ดีที่สุดให้กับเบราว์เซอร์

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

ต้นแบบอาร์เรย์ใหม่

ผมชอบตอนที่ JavaScript ง่ายขึ้น Array และ TypedArray รองรับเมธอดแบบคงที่ findLast() และ findLastIndex() แล้ว

ฟังก์ชันเหล่านี้มีประสิทธิภาพเหมือนกับ find() และ findIndex() แต่จะค้นหาจากจุดสิ้นสุดของอาร์เรย์แทนที่จะเป็นจุดเริ่มต้น

ตัวอย่างเช่น หากต้องการค้นหาตัวเลขสุดท้ายในอาร์เรย์ที่มากกว่า 10 ให้เรียกใช้ findLast() ด้วยฟังก์ชันทดสอบที่ตรวจสอบว่าค่ามากกว่า 10 เท่า ก็เรียบร้อย

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

จำลอง Chrome 100 ในสตริง UA

ในอีกไม่กี่เดือน เราจะได้ใช้ Chrome 100 ซึ่งเป็นหมายเลขเวอร์ชัน3 หลัก ควรตรวจสอบโค้ดที่ตรวจสอบหมายเลขเวอร์ชันหรือแยกวิเคราะห์สตริง UA เพื่อให้แน่ใจว่าจัดการกับตัวเลข 3 หลัก

มีการแจ้งว่าไม่เหมาะสมชื่อ #force-major-version-to-100 ซึ่งจะเปลี่ยนหมายเลขเวอร์ชันปัจจุบันเป็น 100 คุณจึงตรวจสอบว่าทุกอย่างทำงานได้ตามที่คาดไว้

Chrome Flags ที่ไฮไลต์ตัวเลือก #force-major-version-to-100 ใหม่

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

แน่นอน ยังมีคำถามอีกมากมาย

ตอนนี้บรรทัดใหม่ในรายการแบบฟอร์มจะได้รับการปรับให้เป็นมาตรฐานในลักษณะเดียวกับ Gecko และ WebKit เพื่อปรับปรุงการทำงานร่วมกันระหว่างเบราว์เซอร์

เรากำลังทำให้ชื่อของคำแนะนำไคลเอ็นต์เป็นมาตรฐานโดยใส่ sec-ch นำหน้า เช่น dpr จะกลายเป็น sec-ch-dpr เราจะยังคงสนับสนุนเวอร์ชันที่มีอยู่ของคำแนะนำนี้ต่อไป แต่คุณควรวางแผนสำหรับการเลิกใช้งานและนำคำแนะนำออกในที่สุด

ตอนนี้องค์ประกอบ <details> ที่ปิดไปแล้วสามารถค้นหาได้และลิงก์ได้ องค์ประกอบที่ซ่อนอยู่เหล่านี้จะขยายโดยอัตโนมัติเมื่อมีการใช้การค้นหาในหน้า, ScrollToTextFragment และการนำทางส่วนย่อยขององค์ประกอบ

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

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

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

โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 98 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!