มีอะไรใหม่ใน Chrome 151

Rachel Andrew

Published: July 28, 2026

Chrome 151 กำลังเปิดตัวแล้ว และโพสต์นี้จะแชร์ฟีเจอร์หลักบางอย่างจากการเปิดตัว อ่านบันทึกประจำรุ่นฉบับเต็มของ Chrome 151

ไฮไลต์จากการเปิดตัวนี้

องค์ประกอบความสามารถ: <usermedia> MVP

องค์ประกอบ <usermedia> เป็นองค์ประกอบล่าสุดที่เปิดตัวในชุดองค์ประกอบความสามารถ โดยต่อจาก <geolocation> การเปลี่ยนจากข้อเสนอ <permission> เดิม ซึ่งเป็นส่วนหนึ่งของความคิดริเริ่ม PEPC ช่วยให้เบราว์เซอร์จัดการความซับซ้อนและลักษณะการทำงานที่ไม่เหมือนใครของความสามารถของฮาร์ดแวร์ต่างๆ ได้อย่างมีประสิทธิภาพมากขึ้น แม้ว่าข้อเสนอเริ่มต้นจะเน้นที่การจัดการสถานะสิทธิ์เป็นหลัก เช่น อนุญาตเทียบกับปฏิเสธ แต่องค์ประกอบความสามารถจะทำหน้าที่เป็นตัวกลางข้อมูล

องค์ประกอบ <geolocation> จะแสดงออบเจ็กต์ตำแหน่งในเว็บไซต์ และ <usermedia> จะจัดการโฟลว์ทั้งหมดสำหรับการเข้าถึงกล้องและไมโครโฟน โดยจะบันทึกความตั้งใจของผู้ใช้ จัดการข้อความแจ้งของเบราว์เซอร์ และส่งออบเจ็กต์ MediaStream ไปยังแอปพลิเคชัน การเปลี่ยนแปลงนี้ช่วยลดความจำเป็นในการเรียก getUserMedia() แยกต่างหาก ทำให้การใช้งานง่ายขึ้น และช่วยให้เบราว์เซอร์มีสัญญาณที่เชื่อถือได้เกี่ยวกับความตั้งใจของผู้ใช้

ดูข้อมูลเพิ่มเติมได้ที่ การเปิดตัวองค์ประกอบ HTML <usermedia>

Shadow DOM แบบประกาศ: แอตทริบิวต์ shadowrootslotassignment

Chrome 151 เพิ่มการรองรับแอตทริบิวต์ shadowrootslotassignment ในองค์ประกอบ <template> ซึ่งช่วยให้คุณสร้างราก Shadow DOM แบบประกาศที่ใช้การกำหนดช่องด้วยตนเองใน HTML ได้โดยตรง

จนถึงตอนนี้ การกำหนดช่องด้วยตนเองใช้ได้เฉพาะแบบจำเป็นเท่านั้น การอัปเดตนี้ช่วยให้คุณระบุ shadowrootslotassignment="manual" ในเทมเพลตราก Shadow DOM ได้

แอตทริบิวต์ยอมรับ named (ลักษณะการทำงานเริ่มต้น) และ manual และแสดงโดยพร็อพเพอร์ตี้ shadowRootSlotAssignment ใน HTMLTemplateElement ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบ HTMLTemplateElement.shadowRootSlotAssignment ใน MDN

แอตทริบิวต์นี้พร้อมใช้งานใน Firefox และใน Safari 27 เวอร์ชันเบต้าแล้ว ดังนั้นจึงจะพร้อมใช้งานเป็น Baseline ในเร็วๆ นี้

เมตริกการนำทางแบบนุ่มนวลและเมตริกประสิทธิภาพการโต้ตอบ

Chrome 151 ขยายไทม์ไลน์ประสิทธิภาพของเว็บด้วยการเปิดตัว PerformanceEntry 2 ประเภทใหม่ ได้แก่ soft-navigation และ interaction-contentful-paint รายการเหล่านี้ช่วยให้นักพัฒนาเว็บติดตามประสิทธิภาพและเวลาในการตอบสนองที่เกิดจากการโต้ตอบในแอปพลิเคชันหน้าเว็บเดียว (SPA) โดยอิงตามเมตริก Core Web Vitals ที่กำหนดไว้ เช่น Largest Contentful Paint (LCP) และ Interaction to Next Paint (INP)

ใน SPA การเปลี่ยนเส้นทางที่เกิดจาก JavaScript จะไม่ทริกเกอร์การโหลดหน้าเว็บของเบราว์เซอร์แบบเดิม รายการ soft-navigation จะบันทึกการเปลี่ยนแปลงสถานะประวัติในเอกสารเดียวกันที่เกิดจากการโต้ตอบของผู้ใช้ เมื่อเกิดการนำทางแบบยืดหยุ่น เบราว์เซอร์จะกำหนดจุดเริ่มต้นเวลาใหม่ ซึ่งช่วยให้คุณระบุแหล่งที่มาของข้อมูลประสิทธิภาพที่ตามมาได้อย่างถูกต้องไปยังเส้นทาง SPA ที่ใช้งานอยู่ แทนที่จะเป็น URL ของเอกสารเริ่มต้น

รายการ interaction-contentful-paint จะวัดการแสดงผลเนื้อหาใหม่ภายในภูมิภาค DOM ที่แก้ไขโดยการโต้ตอบของผู้ใช้ ซึ่งจะแสดงการมองเห็นเวลาในการตอบสนองของการโหลดการโต้ตอบ แม้ว่าการอัปเดตเนื้อหาจะขึ้นอยู่กับการดำเนินการแบบอะซิงโครนัส เช่น คำขอ fetch()

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

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานและการวัดการนำทาง SPA ได้ที่เอกสารประกอบการนำทางแบบยืดหยุ่นใน Chrome สำหรับนักพัฒนาเว็บ

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

หัวข้อนี้ครอบคลุมเฉพาะไฮไลต์ที่สำคัญบางส่วน ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 151 ได้จากลิงก์ต่อไปนี้

ติดตาม

หากต้องการรับข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของ Chrome Developers แล้วคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่ หรือติดตามเราบน X หรือ LinkedIn เพื่ออ่านบทความและบล็อกโพสต์ใหม่ๆ

เมื่อ Chrome 152 เปิดตัว เราจะมาบอกคุณว่ามีอะไรใหม่ใน Chrome บ้าง