สิ่งที่จำเป็นต้องทราบมีดังนี้
- คุณสามารถเพิ่มผลผลิตในงานระยะยาวเพื่อปรับปรุงประสิทธิภาพได้
- เคลื่อนไหวองค์ประกอบที่มีขนาดตามจริง
- ไวยากรณ์ตำแหน่งของหมุดมีการเปลี่ยนแปลงบางอย่าง
- และยังมีอีกมากมาย
และ 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 ได้ที่ลิงก์ต่อไปนี้
- มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (129)
- การอัปเดต ChromeStatus.com สำหรับ Chrome 129
- รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
- ปฏิทินการเผยแพร่ของ Chrome
สมัครใช้บริการ
หากต้องการติดตามข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผม Pete LePage จะเป็นผู้ดูแลคุณแทน Adriana และเราจะมาแจ้งให้ทราบถึงข่าวสารใหม่ๆ ใน Chrome ทันทีที่ Chrome 130 เปิดตัว