ใหม่ใน Chrome 129

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 129

แบ่งงานที่มีขั้นตอนเยอะออกเป็นหลายงานด้วย scheduler.yield()

งานที่ใช้เวลานานจะทําให้เบราว์เซอร์ตอบสนองต่ออินพุตของผู้ใช้ช้าลง ซึ่งทําให้ผู้ใช้รู้สึกว่าเว็บไซต์ช้าและส่งผลต่อเมตริกประสิทธิภาพที่สําคัญ เช่น INP scheduler.yield() ช่วยให้คุณแบ่งงานขนาดใหญ่ออกเป็นชิ้นเล็กๆ ซึ่งจะปรับปรุงการตอบสนองโดยส่งคืนไปยังเธรดหลักได้อย่างชัดเจน

ซึ่งช่วยให้คุณบอกเบราว์เซอร์ได้ดังนี้

"สวัสดี งานที่เรากำลังจะทำอาจใช้เวลาสักครู่ หากคุณต้องการวาดเฟรม ตอบสนองต่ออินพุตของผู้ใช้ หรือมีงานสำคัญอื่นๆ อยู่ ไม่เป็นไร เรารอได้"

ภาพแสดงว่าการแบ่งงานช่วยให้ผู้ใช้โต้ตอบได้ง่ายขึ้นได้อย่างไร ที่ด้านบน งานระยะยาวจะบล็อกตัวแฮนเดิลเหตุการณ์ไม่ให้ทํางานจนกว่างานจะเสร็จ ที่ด้านล่าง งานที่มีการแบ่งออกเป็นหลายส่วนจะอนุญาตให้ตัวแฮนเดิลเหตุการณ์ทำงานได้เร็วขึ้น

เพิ่มบรรทัดต่อไปนี้ลงในโค้ด JavaScript บ่อยๆ เพื่อให้เบราว์เซอร์มีเวลาพักและหลีกเลี่ยงปัญหา INP

await scheduler.yield();

ที่สำคัญคือ จะช่วยให้ระบบจัดลำดับความสำคัญของการดําเนินการโค้ดต่อ เพื่อให้คุณไม่เสียเปรียบจากการยอมแพ้ เราขอแนะนำให้ใช้ scheduler.yield() ในฟังก์ชันต่างๆ ระหว่างงานที่ใหญ่ขึ้น

ดูรายละเอียดเพิ่มเติมที่เพิ่มประสิทธิภาพงานระยะยาว

ภาพเคลื่อนไหวที่มีขนาดตามจริง

ภาพเคลื่อนไหว CSS นั้นเจ๋งมาก แต่โดยทั่วไปแล้วต้องใช้ขนาดที่ชัดเจน คุณจึงใช้คีย์เวิร์ดการปรับขนาดแบบกำหนดเอง เช่น auto, min-content หรือ fit-content ไม่ได้

พร็อพเพอร์ตี้ CSS interpolate-size จะเปิดชุดภาพเคลื่อนไหวชุดใหม่ซึ่งใช้ไม่ได้เมื่อใช้คีย์เวิร์ดการปรับขนาดตามค่าเริ่มต้น

หากไม่มี interpolate-size ปุ่มในวิดีโอต่อไปนี้จะไม่มีการเปลี่ยน

หลังจากเพิ่ม interpolate-size: allow-keywords แล้ว ปุ่มในวิดีโอจะมีเอฟเฟกต์ภาพเคลื่อนไหวการเปลี่ยนที่สวยงาม

การระบุ interpolate-size: allow-keywords ในองค์ประกอบ root จะตั้งค่าลักษณะการทำงานใหม่สำหรับทั้งหน้า เราขอแนะนำให้ทำเช่นนี้ทุกครั้งที่ความเข้ากันได้ไม่ใช่ปัญหา

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

หากต้องการการควบคุมที่ละเอียดยิ่งขึ้น ฟังก์ชัน calc-size() ของ CSS ซึ่งคล้ายกับ calc() ยังรองรับการดำเนินการกับคีย์เวิร์ดการปรับขนาดตามค่าเริ่มต้นที่รองรับเพียงคีย์เวิร์ดเดียว เมื่อทำการคํานวณเลย์เอาต์ คีย์เวิร์ด size จะประเมินเป็นขนาดเดิมของ calc-size-basis

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

ดูรายละเอียดทั้งหมดได้ที่ Animate to height: auto; (and other intrinsic sizing keywords) in CSS

การเปลี่ยนแปลงการจัดตําแหน่งจุดยึด CSS

การวางตำแหน่งจุดยึด CSS ใช้งานได้ใน Chrome 125 แต่หลังจากการพูดคุยเพิ่มเติมภายในกลุ่มทำงาน CSS มีข้อกำหนดและการใช้งานที่เปลี่ยนแปลงไปเล็กน้อย หากคุณใช้ตำแหน่งจุดยึด CSS อยู่แล้ว คุณจะต้องอัปเดตโค้ดโดยเร็วที่สุด

อันดับแรก เราได้เปลี่ยนชื่อ inset-area เป็น position-area เราขอแนะนำให้ใช้รูปแบบนี้เนื่องจากวลี position- ช่วยให้จำได้ว่าพร็อพเพอร์ตี้นี้ใช้กับองค์ประกอบที่มีตำแหน่ง ไม่ใช่องค์ประกอบแอตทริบิวต์ "a"

ประการที่ 2 คือ position-try-options เปลี่ยนชื่อเป็น position-try-fallbacks ซึ่งจะช่วยให้คุณทราบว่าค่าเหล่านี้เป็นเพียงค่าสำรองสำหรับตำแหน่งหลัก ซึ่งกำหนดโดยรูปแบบพื้นฐาน

สุดท้าย เราจะนำไวยากรณ์ฟังก์ชัน inset-area() ออกจาก position-try ดังนั้นให้ใช้ position-try-fallbacks: top แทน position-try-fallbacks: inset-area(top)

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

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

มีวิธีการ Intl ใหม่สำหรับการจัดรูปแบบระยะเวลาที่รองรับหลายภาษา

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

ตอนนี้แคนวาส GPU บนเว็บสามารถใช้ช่วงการแสดงผลทั้งหมดสําหรับรูปภาพ HDR ได้แล้ว

และมีการเลิกใช้งานและการนำออกบางอย่างที่อาจส่งผลกระทบต่อนักพัฒนาแอปบางราย

อ่านบันทึกประจำรุ่นฉบับเต็ม

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

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

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

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

ผม Pete LePage จะเป็นผู้ดูแลคุณแทน Adriana และเราจะมาแจ้งให้ทราบถึงข่าวสารใหม่ๆ ใน Chrome ทันทีที่ Chrome 130 เปิดตัว