ใหม่ใน Chrome 129

Pete LePage

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

และ 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);
  }
}

ดูรายละเอียดทั้งหมดได้ที่ภาพเคลื่อนไหวเป็นความสูง: auto; (และคีย์เวิร์ดการกำหนดขนาดเฉพาะอื่นๆ) ใน CSS

การเปลี่ยนแปลงการจัดตำแหน่ง Anchor ของ 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 เปิดตัว