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

Pete LePage

Chrome 85 hiện đang bắt đầu được phát hành cho phiên bản ổn định.

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

Tôi là Pete LePage, tôi đang làm việc và quay video tại nhà. Hãy cùng tôi khám phá những điểm mới dành cho nhà phát triển trong Chrome 85!

Chế độ hiển thị nội dung

Quy trình hiển thị của trình duyệt

Để chuyển HTML thành nội dung mà người dùng có thể thấy, trình duyệt cần thực hiện một số bước trước khi có thể kết xuất pixel đầu tiên. Và thao tác này được thực hiện cho toàn bộ trang, ngay cả đối với nội dung không xuất hiện trong khung nhìn.

Khi áp dụng content-visibility: auto cho một phần tử, trình duyệt sẽ biết rằng trình duyệt có thể bỏ qua công việc kết xuất cho phần tử đó cho đến khi phần tử đó cuộn vào khung hiển thị, nhờ đó giúp quá trình kết xuất ban đầu diễn ra nhanh hơn.


.my-class {
  content-visibility: auto;
}

Để đạt được tác động lớn nhất từ content-visibility, hãy áp dụng thành phần này cho các phần mẹ có thuật toán bố cục phức tạp hơn, chẳng hạn như flexbox và grid, hoặc có các thành phần con có bố cục riêng.

Bằng cách chia nội dung thành các đoạn và thêm content-visibility: auto;, trang này đã giảm thời gian kết xuất từ 232 mili giây xuống chỉ còn 30 mili giây.

Hãy xem khả năng hiển thị nội dung để biết cách sử dụng tính năng này nhằm cải thiện hiệu suất kết xuất.

@property và các biến CSS

Các biến CSS (về mặt kỹ thuật được gọi là thuộc tính tuỳ chỉnh) rất hữu ích. Với API Giá trị và thuộc tính CSS Houdini, bạn có thể xác định một loại và giá trị dự phòng mặc định cho các thuộc tính tuỳ chỉnh. Trước đây, tôi đã đề cập đến các đối tượng này trong bài viết Tính năng mới trong Chrome 78, khi chúng tôi thêm tính năng hỗ trợ xác định các đối tượng này trong JavaScript.

Kể từ Chrome 85, bạn cũng có thể xác định và đặt các thuộc tính CSS ngay trong CSS. Điều tôi thích ở Thuộc tính CSS là nó mang lại ý nghĩa ngữ nghĩa cho thuộc tính, các giá trị dự phòng và thậm chí cho phép kiểm thử CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una có một bài đăng rất hay @property: trao quyền cho các biến CSS, trong đó hướng dẫn cách bạn có thể sử dụng các biến này.

Nhận các ứng dụng có liên quan đã cài đặt

API getInstalledRelatedApps() cho phép bạn kiểm tra xem ứng dụng của bạn đã được cài đặt hay chưa, sau đó tuỳ chỉnh trải nghiệm người dùng.

Ví dụ: cho người dùng thấy nội dung khác trên trang đích nếu ứng dụng của bạn đã được cài đặt. Tập trung các chức năng trùng lặp vào một ứng dụng để tránh nhầm lẫn. Hoặc nếu ứng dụng gốc của bạn đã được cài đặt, thì đừng quảng bá việc cài đặt PWA.

Khi được phát hành lần đầu trong Chrome 80, tính năng này chỉ hoạt động cho các ứng dụng Android. Giờ đây, trên Android, ứng dụng này cũng có thể kiểm tra xem PWA của bạn đã được cài đặt hay chưa. Và trên Windows, nó có thể kiểm tra xem ứng dụng UWP của Windows đã được cài đặt hay chưa.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Hãy xem bài viết của tôi: Ứng dụng của bạn có cài đặt được không? getInstalledRelatedApps() sẽ cho bạn biết! trên web.dev để xem cách hoạt động và cách ký ứng dụng để chứng minh rằng ứng dụng đó là của bạn.

Lối tắt biểu tượng ứng dụng

Phím tắt biểu tượng ứng dụng trên Windows

Trong Chrome 84, chúng tôi đã thêm tính năng hỗ trợ Lối tắt đến biểu tượng ứng dụng. Tôi đã vô tình nói rằng các tính năng này có ở mọi nơi, nhưng thực tế là chúng chỉ có trên Android. Giờ đây, trong Chrome 85, các tính năng này có trên Android và Windows, cũng như trong cả Chrome và Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Hãy xem bài viết Lối tắt đến biểu tượng ứng dụng trên web.dev để biết thông tin chi tiết. Tôi xin lỗi vì đã gây ra sự nhầm lẫn này.

Thử nghiệm nguồn gốc: Yêu cầu phát trực tuyến bằng fetch()

Kể từ Chrome 85, tính năng fetch tải trực tuyến lên sẽ có sẵn dưới dạng một bản dùng thử theo nguồn. Thao tác này cho phép bạn bắt đầu tìm nạp trước khi nội dung yêu cầu sẵn sàng. Trước đây, bạn chỉ có thể bắt đầu một yêu cầu sau khi chuẩn bị xong toàn bộ nội dung. Nhưng giờ đây, bạn có thể bắt đầu gửi nội dung, ngay cả khi bạn vẫn đang tạo nội dung đó.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Ví dụ: sử dụng nó để khởi động máy chủ hoặc phát trực tuyến âm thanh hoặc video khi được ghi lại từ micrô hoặc camera.

Jake đã xem xét kỹ lưỡng về Yêu cầu truyền phát trực tiếp bằng API tìm nạp trên web.dev, đồng thời cũng đề cập đến vấn đề này trong video HTTP203 – Yêu cầu truyền phát trực tiếp bằng lệnh tìm nạp mới nhất.

Cùng nhiều thông tin khác

Tất nhiên, còn nhiều điều khác nữa.

Promise.any trả về một promise được thực hiện bởi promise đầu tiên được thực hiện hoặc bị từ chối.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Việc thay thế tất cả các thực thể trong một chuỗi sẽ dễ dàng hơn với .replaceAll(), không cần biểu thức chính quy nữa!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 bổ sung tính năng hỗ trợ giải mã cho AVIF, một định dạng hình ảnh được mã hoá bằng AV1 và được Liên minh vì nội dung nghe nhìn mở tiêu chuẩn hoá. AVIF mang lại mức tăng đáng kể về khả năng nén so với JPEG và WebP. Theo nghiên cứu gần đây của Netflix, mức tiết kiệm là 50% so với JPEG tiêu chuẩn và > 60% đối với nội dung 4:4:4.

Và quá trình xoá AppCache đã bắt đầu.

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

Đây chỉ là một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm những thay đổi trong Chrome 85.

Đăng ký

Nếu muốn nắm bắt thông tin mới nhất về các video của chúng tôi, hãy đăng ký theo dõi kênh YouTube của Chrome Developers. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt một video mới.

Tôi là Pete LePage và cuối cùng tôi cũng cắt tóc!

Ngay khi Chrome 86 được phát hành, tôi sẽ có mặt ở đây để cho bạn biết những điểm mới trong Chrome!