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

Adriana Jara

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

ฉันชื่อ 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);
}
  • หากผู้ใช้เลือกธีมสว่าง องค์ประกอบจะมีพื้นหลังสีมะนาว
  • หากผู้ใช้เลือกธีมมืด องค์ประกอบจะมีพื้นหลังสีเขียว

Long Animation Frames API

Long Animation Frames API ช่วยคุณหาสาเหตุของความคับคั่งของเทรดหลักซึ่งมักทำให้ INP (การโต้ตอบกับ 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 Static Routing API ณ เวลาติดตั้ง คุณจะประกาศเส้นทางที่จะให้บริการจากเครือข่ายได้เสมอ เมื่อ URL ที่มีการควบคุมโหลดขึ้นในภายหลัง เบราว์เซอร์จะเริ่มดึงข้อมูลทรัพยากรจากเส้นทางเหล่านั้นก่อนที่ Service Worker จะเริ่มทำงานเสร็จสิ้น การดำเนินการนี้จะนำ Service Worker ออกจาก URL ที่คุณทราบว่าไม่ต้องใช้ Service Worker

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