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 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 sắc phù hợp với lựa chọn ưu tiên của người dùng khi sử dụng 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 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, phần tử này sẽ có nền màu chanh.
  • Nếu người dùng chọn giao diện tối, phần tử này sẽ có nền màu xanh lục.

API Khung ảnh động dài.

Bạn có thể dùng API Khung ảnh động dài để tìm nguyên nhân gây ra tình trạng tắc nghẽn luồng chính. Đây thường là nguyên nhân gây ra INP không hợp lệ (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 giúp đ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 Long Tasks API, giúp bạn hiểu rõ hơn về các bản cập nhật giao diện người dùng bị chậm. API Khung ảnh động dài cho phép bạn đo lường công việc chặn. Chỉ số này đo lường các tác vụ cùng với nội dung cập nhật kết xuất sau đây và thêm thông tin như 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 buộc, còn gọi là bố cục bị xáo trộn.

Việc thu thập và phân tích thông tin này cho phép bạn xác định và khắc phục nút thắt cổ chai 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 worker dịch vụ.

Khi sử dụng trình chạy dịch vụ, bạn có thể làm cho trang web hoạt động khi không có kết nối mạng và tạo các chiến lược lưu vào bộ nhớ đệm để cải thiện hiệu suất.

Tuy nhiên, có thể có chi phí hiệu suất khi một trang được tải lần đầu tiên trong một thời gian và trình chạy dịch vụ kiểm soát không chạy vào 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 Service worker, nên trình duyệt phải chờ service worker khởi động và chạy để biết nội dung nào cần tải.

Với API Định tuyến tĩnh cho Service Worker, tại thời điểm cài đặt, bạn có thể khai báo các đường dẫn để luôn được phân phát từ 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 worker dịch vụ hoàn tất quá trình khởi động. 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 tính năng khác!

Tất nhiên còn nhiều tính năng khác.

  • Bạn có thể cung cấp các trang tuỳ chỉnh dựa trên vị trí người dùng đã điều hướng bằng giao diện NavigationActivation.

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

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

  • Giá trị picture-in-picture cho display-mode cho phép bạn viết các quy tắc CSS cụ thể 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

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết sau đây để biết thêm các thay đổi trong Chrome 123.

Đăng ký

Để luôn 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.

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