Tính năng mới trong Chrome 123

Adriana Jara

Dưới đây là những gì bạn cần phải biết:

Tôi là Adriana Jara. Hãy cùng tìm hiểu sâu hơn và xem những tính năng mới dành cho nhà phát triển trong Chrome 123.

Hàm CSS light-dark().

Hàm light-dark() trong CSS cho phép bạn tạo màu phù hợp với lựa chọn ưu tiên của người dùng về chế độ sáng hoặc tối. Sử dụng hàm light-dark() để chỉ định hai giá trị màu khác nhau trong một thuộc tính CSS.

Trình duyệt sẽ tự động chọn màu phù hợp dựa trên giá trị color-scheme đã tính toán của phần tử. Ví dụ: với CSS sau:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • Nếu người dùng chọn giao diện sáng, thì phần tử này sẽ có nền màu vàng chanh.
  • Nếu người dùng chọn giao diện tối, thì phần tử đó sẽ có nền màu xanh lục.

API Khung hình động dài.

Bạn có thể sử dụng API Khung ảnh động dài để tìm ra nguyên nhân gây ra tình trạng nghẽn luồng chính. Đây thường là nguyên nhân khiến INP không hợp lệ (Lượt tương tác với nội dung hiển thị tiếp theo) – một Chỉ số quan trọng chính của trang web đo lường khả năng phản hồi của trang web.

API mới là phiên bản nâng cao của API Tác vụ dài, giúp bạn hiểu rõ hơn về việc cập nhật giao diện người dùng chậm. API Khung ảnh động dài cho phép bạn đo lường công việc chặn. Thư viện này đo lường các tác vụ cùng với bản cập nhật kết xuất sau đây, đồng thời bổ sung thông tin như các tập lệnh chạy trong thời gian dài, thời gian kết xuất và thời gian dành cho bố cục và kiểu bắt buộc, còn gọi là tình trạng đơ bố cục.

Việc thu thập và phân tích thông tin này giúp bạn xác định và khắc phục điểm tắc nghẽn về hiệu suất. Bạn có thể chụp các khung hình dài bằng mã sau.

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

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

API định tuyến tĩnh của Service worker.

Bằng cách sử dụng trình chạy dịch vụ, bạn có thể khiến trang web hoạt động ở chế độ ngoại tuyến và tạo chiến lược lưu vào bộ nhớ đệm để giúp tăng hiệu suất.

Tuy nhiên, có thể mất phí hiệu suất khi trang được tải lần đầu tiên trong một khoảng thời gian và trình chạy dịch vụ đang kiểm soát không chạy trong thời điểm đó. Vì tất cả các lần tìm nạp đều cần diễn ra thông qua trình chạy dịch vụ, nên trình duyệt phải đợi trình chạy dịch vụ này khởi động và chạy để biết nội dung nào cần tải.

Với Service Worker Static Routing API, tại thời điểm cài đặt, bạn có thể khai báo các đường dẫn sẽ luôn được phân phát qua mạng. Khi một URL được kiểm soát được tải sau đó, trình duyệt có thể bắt đầu tìm nạp tài nguyên từ các đường dẫn đó trước khi trình chạy dịch vụ khởi động xong. Thao tác này sẽ xoá trình chạy dịch vụ khỏi các URL mà bạn biết là không cần trình chạy dịch vụ.

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

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

  • Bạn có thể cung cấp các trang tuỳ chỉnh dựa trên giao diện NavigationActivation mà người dùng truy cập.

  • Chrome hiện đã hỗ trợ Zstandard (zstd). Content-Encoding này giúp tải trang nhanh hơn và sử dụng ít băng thông hơn, đồng thời tốn ít thời gian, CPU và khả năng nén trên máy chủ hơn, giúp giảm chi phí máy chủ.

  • notRestoredReasons API dành cho bfcache sẽ được ra mắt từ Chrome 123. Điều này cho phép chủ sở hữu trang web thu thập các lý do tại trường về lý do không thể sử dụng bfcache. Chủ sở hữu trang web có thể dùng tính năng này để cải thiện việc sử dụng bfcache, giúp duyệt xem nhật ký nhanh hơn.

  • Giá trị picture-in-picture cho display-mode cho phép bạn viết các quy tắc CSS cụ thể. Các quy tắc này chỉ áp dụng khi ứng dụng web hiển thị ở chế độ hình trong hình. Ví dụ:

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

Tài liệu đọc thêm

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết sau để biết thêm các thay đổi khác trong Chrome 123.

Đăng ký

Để nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho Nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Chào Adriana Jara! Ngay sau khi Chrome 124 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!