สิ่งใหม่ๆ ใน Chrome 122

Adriana Jara

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

ฉันชื่อ Adriana Jara มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 122

Storage Buckets API

Storage Buckets API ช่วยให้จัดการพื้นที่เก็บข้อมูลถาวรได้ดียิ่งขึ้น

เดิมที เมื่อผู้ใช้มีเนื้อที่เก็บข้อมูลในอุปกรณ์ไม่เพียงพอ ข้อมูลที่จัดเก็บไว้กับ API เช่น IndexedDB หรือ localStorage จะหายไปโดยที่ผู้ใช้ไม่สามารถแทรกแซงได้ วิธีหนึ่งในการทำให้พื้นที่เก็บข้อมูลถาวรคือการใช้เมธอด persist() ของอินเทอร์เฟซ StorageManager อย่างไรก็ตาม วิธีนี้ในการขอพื้นที่เก็บข้อมูลแบบถาวรเป็นแบบ "ใช้ทั้งหมดหรือใช้ไม่ได้เลย"

แนวคิดหลักของ Storage Buckets API คือการให้สิทธิ์เว็บไซต์สร้างที่เก็บข้อมูลหลายรายการ โดยเบราว์เซอร์สามารถเลือกลบแต่ละที่เก็บข้อมูลแยกต่างหากจากที่เก็บข้อมูลอื่นๆ ได้ คุณจึงระบุลําดับความสําคัญของการลบออกได้เพื่อให้มั่นใจว่าระบบจะไม่ลบข้อมูลที่มีค่าที่สุดออก แต่ละที่เก็บข้อมูลอาจมีข้อมูลที่เชื่อมโยงกับ API พื้นที่เก็บข้อมูลที่ติดตั้งไว้ เช่น IndexedDB และ CacheStorage

โปรดไปที่พื้นที่เก็บข้อมูลบางประเภทไม่เหมือนกัน: ขอแนะนําที่เก็บข้อมูลเพื่อดูรายละเอียดเพิ่มเติมและตัวอย่างโค้ดเพื่อเริ่มใช้ที่เก็บข้อมูล

การปรับปรุงเครื่องมือสำหรับนักพัฒนาเว็บในแผงประสิทธิภาพ

ใน Chrome 122 เครื่องมือสำหรับนักพัฒนาเว็บมีการปรับปรุงต่อไปนี้ในแผงประสิทธิภาพ

ประการแรก ไทม์ไลน์ที่ด้านบนของแผงประสิทธิภาพช่วยให้คุณตั้งค่าเบรดครัมบ์และข้ามไปมาระหว่างเบรดครัมบ์ต่างๆ ได้แล้ว หากต้องการตั้งค่าเบรดครัมบ์ ให้เลือกช่วงในไทม์ไลน์ วางเมาส์เหนือช่วงนั้น แล้วคลิกปุ่ม N ms ที่เกี่ยวข้อง คุณสร้างเบรดครัมบ์ที่ฝังซ้อนกันหลายรายการได้อย่างต่อเนื่อง หากต้องการข้ามไปมาระหว่างระดับการซูม ให้คลิกเบรดครัมบ์ที่เกี่ยวข้องในเชนด้านบนไทม์ไลน์ ดูวิดีโอถัดไปเพื่อดูการทำงานของเบรดครัมบ์

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

  • สไตล์หรือเลย์เอาต์ไม่ถูกต้อง -> คํานวณสไตล์ใหม่หรือเลย์เอาต์
  • ส่งคำขอเฟรมภาพเคลื่อนไหว -> เฟรมภาพเคลื่อนไหวทำงาน
  • ขอ Callback ที่ไม่มีการใช้งาน -> เริ่มใช้ Callback ที่ไม่มีการใช้งาน
  • ติดตั้งตัวจับเวลา -> ตัวจับเวลาเริ่มทำงาน
  • สร้าง WebSocket -> ส่ง... และรับแฮนด์เชค WebSocket หรือทำลาย WebSocket

หากต้องการดูลูกศร ให้ค้นหาเหตุการณ์ดังกล่าวในการติดตามและคลิกเหตุการณ์นั้น

รูปลูกศรจากคําขอและการเรียกใช้ Callback ที่ไม่มีการใช้งาน

ดูการอัปเดตเพิ่มเติมของ DevTools ได้ในมีอะไรใหม่ใน Devtools 122

ตัวเลือก unsanitized ของ Async Clipboard API

เมื่อคัดลอกและวางโดยใช้ Async Clipboard API ตัวเลือก unsanitized สำหรับเมธอด read() จะช่วยให้แอปและเว็บไซต์รับ HTML ที่ไม่ผ่านการกรองได้ ระบบจะกรองข้อมูล HTML ที่อ่านจากคลิปบอร์ด เว้นแต่เว็บไซต์จะมีพร็อพเพอร์ตี้นี้

โดยค่าเริ่มต้น เมื่ออ่านประเภท MIME text/html โดยใช้ API แบบแอ็กซิงโครน ระบบจะเรียกใช้โปรแกรมตรวจสอบเพื่อนำเนื้อหาออกจากมาร์กอัป HTML เนื่องจากข้อกังวลด้านความปลอดภัย และแทรกสไตล์ใน HTML ที่ได้ ซึ่งทำให้เพย์โหลด HTML มีขนาดมากและเนื้อหา HTML สูญเสียความถูกต้องเมื่อนักพัฒนาเว็บหรือแอปบนอุปกรณ์เคลื่อนที่อ่าน

คุณจะเห็นความแตกต่างของเอาต์พุตในตัวอย่างต่อไปนี้

อินพุต:

<style>p { color: blue; }</style><p>Hello, World!</p>'

ผ่านการกรอง (ค่าเริ่มต้น):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

เมื่อใช้ตัวเลือก unsanitized

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

ไปที่การเลิกบล็อกการเข้าถึงคลิปบอร์ดเพื่อดูข้อมูลเบื้องต้นเกี่ยวกับ Clipboard API

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

แน่นอนว่ายังมีอีกมากมาย

  • ใน CSS การค้นหาคอนเทนเนอร์ที่มีฟีเจอร์ที่ไม่รองรับจะไม่ตรงกัน ตัวอย่างเช่น คําค้นหาต่อไปนี้จะไม่ตรงกันเนื่องจากฟีเจอร์ที่ไม่รู้จัก
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() จะไม่ส่งผลต่อออบเจ็กต์ไฟล์ แต่จะลบเฉพาะออบเจ็กต์ประเภทข้อความ

  • drawingBufferStorage ของ WebGL ช่วยให้คุณหลีกเลี่ยงการคัดลอกเพิ่มเติมเมื่อแปลงการแสดงผลเป็นรูปแบบพิกเซลของบัฟเฟอร์การวาดเริ่มต้น และวาดเนื้อหาที่มีความแม่นยำมากกว่า 8 บิต

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

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

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

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

ฉันชื่อ Adriana Jara และเราจะคอยแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 123 เปิดตัว