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

Pete LePage

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

Tôi là Pete LePage. 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 129.

Chia nhỏ các tác vụ dài bằng scheduler.yield()

Tác vụ dài sẽ làm chậm khả năng của trình duyệt trong việc phản hồi hoạt động đầu vào của người dùng, tạo ra cảm nhận rằng một trang web hoạt động chậm và ảnh hưởng đến các chỉ số hiệu suất quan trọng như INP. Với scheduler.yield(), bạn có thể chia các tác vụ dài thành các phần nhỏ hơn, cải thiện khả năng phản hồi bằng cách trả về rõ ràng cho luồng chính.

Tuỳ chọn này cho phép bạn thông báo cho trình duyệt:

"Xin chào! Công việc tôi định làm có thể mất chút thời gian, nếu bạn cần vẽ khung, phản hồi hoạt động đầu vào của người dùng hoặc có những nhiệm vụ quan trọng khác thì không sao, tôi có thể chờ"

Hình ảnh mô tả cách chia nhỏ một tác vụ có thể hỗ trợ tương tác của người dùng. Ở trên cùng, một tác vụ dài sẽ chặn trình xử lý sự kiện chạy cho đến khi tác vụ đó hoàn tất. Ở dưới cùng, tác vụ được chia thành các phần cho phép trình xử lý sự kiện chạy sớm hơn.

Thường xuyên thêm dòng sau vào mã JavaScript để cho trình duyệt có thời gian nghỉ ngơi và tránh các vấn đề INP.

await scheduler.yield();

Quan trọng là việc này cho phép ưu tiên tiếp tục mã của bạn để bạn không bị mất quyền bằng cách nhường quyền. Bạn nên sử dụng scheduler.yield() một cách linh hoạt trong các hàm giữa các phần công việc lớn hơn.

Hãy xem bài viết Tối ưu hoá các tác vụ dài để biết thêm thông tin.

Ảnh động có kích thước nội tại

Ảnh động CSS khá đẹp, nhưng thường yêu cầu kích thước rõ ràng, bạn không thể sử dụng các từ khoá định cỡ nội tại như auto, min-content hoặc fit-content.

Thuộc tính CSS interpolate-size mở ra một tập hợp các ảnh động mới không thể thực hiện được khi sử dụng từ khoá định kích thước nội tại.

Nếu không có interpolate-size, các nút trong video sau đây sẽ không có hiệu ứng chuyển đổi.

Sau khi thêm interpolate-size: allow-keywords, các nút trong video sẽ có hiệu ứng ảnh động chuyển đổi đẹp mắt.

Việc chỉ định interpolate-size: allow-keywords trên phần tử root sẽ thiết lập hành vi mới cho toàn bộ trang. Bạn nên làm việc này bất cứ khi nào khả năng tương thích không phải là vấn đề.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Để kiểm soát tốt hơn, hàm calc-size() của CSS, tương tự như calc(), cũng hỗ trợ các thao tác trên chính xác một trong các từ khoá định kích thước nội tại được hỗ trợ. Khi thực hiện các phép tính bố cục, từ khoá size sẽ đánh giá kích thước ban đầu của calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Hãy xem phần Tạo ảnh động cho chiều cao: tự động; (và các từ khoá định cỡ nội tại khác) trong CSS để biết thông tin chi tiết đầy đủ.

Thay đổi về vị trí neo CSS

Tính năng định vị neo CSS đã ra mắt trong Chrome 125, nhưng sau một số cuộc thảo luận bổ sung trong nhóm làm việc CSS, có một số thay đổi đối với thông số kỹ thuật và cách triển khai. Nếu đang sử dụng vị trí neo CSS, bạn cần cập nhật mã càng sớm càng tốt.

Trước tiên, inset-area đã được đổi tên thành position-area. Bạn nên sử dụng cách này vì cụm từ position- giúp bạn nhớ rằng thuộc tính này được áp dụng cho phần tử được định vị chứ không phải phần tử neo.

Thứ hai, position-try-options được đổi tên thành position-try-fallbacks. Điều này giúp bạn nhớ rằng đây chỉ là các vị trí dự phòng cho vị trí chính, được xác định bằng các kiểu cơ sở.

Cuối cùng, cú pháp hàm inset-area() sẽ bị xoá khỏi position-try. Do đó, hãy sử dụng position-try-fallbacks: top thay vì position-try-fallbacks: inset-area(top).

Và nhiều tính năng khác!

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

Có một phương thức Intl mới để định dạng thời lượng, hỗ trợ nhiều ngôn ngữ.

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"

Canvas GPU trên web hiện có thể sử dụng toàn bộ phạm vi màn hình cho hình ảnh HDR.

Ngoài ra, một số tính năng ngừng hoạt động và bị xoá có thể ảnh hưởng đến một số nhà phát triển.

Đọc ghi chú phát hành đầy đủ.

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 129.

Đă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.

Tôi là Pete LePage thay Adriana. Ngay sau khi Chrome 130 được phát hành, chúng tôi sẽ sẵn sàng cho bạn biết các tính năng mới trong Chrome!