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

Adriana Jara

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

  • ปรับรูปแบบสีด้วยฟังก์ชัน light-dark() ใหม่
  • วินิจฉัยการตอบสนองของเว็บไซต์ด้วย Long Animation Frames API
  • หลีกเลี่ยงการเสียประสิทธิภาพในการเริ่มต้นใช้งาน Service Worker ด้วย Service Worker Static Routing API
  • และยังมีอีกมากมาย

ฉันชื่อ Adriana Jara มาเจาะลึกกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 123

light-dark() ฟังก์ชัน CSS

ฟังก์ชัน light-dark() ใน CSS ช่วยให้คุณสร้างสีที่ปรับตามความต้องการของผู้ใช้สำหรับโหมดสว่างหรือโหมดมืดได้ ใช้ฟังก์ชัน light-dark() เพื่อระบุค่าสี 2 ค่าที่แตกต่างกันภายในพร็อพเพอร์ตี้ CSS รายการเดียว

เบราว์เซอร์จะเลือกสีที่เหมาะสมให้โดยอัตโนมัติตามค่า color-scheme ที่คำนวณไว้ขององค์ประกอบ ตัวอย่างเช่น โดยใช้ CSS ต่อไปนี้

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • หากผู้ใช้เลือกธีมสว่าง องค์ประกอบจะมีพื้นหลังสีเขียวมะนาว
  • หากผู้ใช้เลือกธีมมืด องค์ประกอบจะมีพื้นหลังสีเขียว

API เฟรมของภาพเคลื่อนไหวแบบยาว

Long Animation Frames API พร้อมให้ใช้งานเพื่อช่วยค้นหาสาเหตุของความแออัดของชุดข้อความหลัก ซึ่งมักเป็นสาเหตุของ INP (Interaction to Next Paint) ที่ไม่ดี ซึ่งเป็น Core Web Vitals ที่วัดการตอบสนองของเว็บไซต์

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

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

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API การกำหนดเส้นทางแบบคงที่ของ Service Worker

การใช้ Service Worker จะช่วยให้เว็บไซต์ทํางานแบบออฟไลน์และสร้างกลยุทธ์การแคชที่จะช่วยเพิ่มประสิทธิภาพได้

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

เมื่อใช้ Service Worker Static Routing API คุณจะประกาศเส้นทางให้แสดงจากเครือข่ายได้เสมอ ณ เวลาติดตั้ง เมื่อโหลด URL ที่มีการควบคุมในภายหลัง เบราว์เซอร์จะเริ่มดึงข้อมูลทรัพยากรจากเส้นทางเหล่านั้นก่อนที่ Service Worker จะเริ่มต้นเสร็จ ซึ่งจะนำ Service Worker ออกจาก URL ที่คุณทราบว่าไม่จําเป็นต้องใช้

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

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

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

  • คุณเสนอหน้าเว็บที่กำหนดเองได้โดยอิงตามตำแหน่งที่ผู้ใช้นำทางด้วยอินเทอร์เฟซ NavigationActivation

  • ตอนนี้ Chrome มีการรองรับ Zstandard (zstd) แล้ว Content-Encoding นี้จะช่วยให้โหลดหน้าเว็บได้เร็วขึ้นและใช้แบนด์วิดท์น้อยลง และใช้เวลา, CPU น้อยลงและพลังงานในการบีบอัดบนเซิร์ฟเวอร์ ทำให้ต้นทุนของเซิร์ฟเวอร์ลดลง

  • notRestoredReasons API สำหรับ bfcache จะเปิดตัวใน Chrome 123 วิธีนี้จะช่วยให้เจ้าของเว็บไซต์รวบรวมเหตุผลที่ใช้งาน bfcache ไม่ได้ เจ้าของเว็บไซต์สามารถใช้ข้อมูลนี้เพื่อปรับปรุงการใช้งาน bfcache ซึ่งช่วยให้ไปยังส่วนต่างๆ ในประวัติได้เร็วขึ้น

  • ค่า picture-in-picture สำหรับ display-mode ช่วยให้คุณเขียนกฎ CSS ที่เจาะจงซึ่งจะมีผลเมื่อเว็บแอปแสดงในโหมดการแสดงภาพซ้อนภาพเท่านั้น เช่น

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

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

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

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

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

ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 124 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome