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

Pete LePage

Chrome 85 hiện đang bắt đầu được phát hành phiên bản chính thức.

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

Tôi là Pete LePage, làm việc và quay video tại nhà. 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 85!

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

Quy trình kết xuất của trình duyệt

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

Việc áp dụng content-visibility: auto cho một phần tử sẽ cho trình duyệt 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 nhìn, giúp kết xuất ban đầu nhanh hơn.


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

Để khai thác tối đa content-visibility, hãy áp dụng thuộc tính 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 phần con có bố cục riêng.

Bằng cách chia nhỏ nội dung 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 còn 30 mili giây.

Hãy xem mức độ 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à biến CSS

Biến CSS (về mặt kỹ thuật được gọi là thuộc tính tuỳ chỉnh) rất tuyệt vời. Với API Giá trị và thuộc tính CSS của Houdini, bạn có thể xác định 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 tính nă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 tính nă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 yêu thích về Thuộc tính CSS là thuộc tính này mang lại ý nghĩa ngữ nghĩa, 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 tuyệt vời @property: trao siêu năng lực cho các biến CSS cho bạn biết cách sử dụng các biến đó.

Tải 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ụ: hiển thị nội dung khác cho người dùng trên trang đích nếu ứng dụng của bạn đã được cài đặt. Tập trung chức năng trùng lặp trong 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, đừ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 với các ứng dụng Android. Giờ đây, trên Android, ứng dụng này cũng có thể kiểm tra xem bạn đã cài đặt PWA hay chưa. Và trên Windows, ứng dụng này có thể kiểm tra xem ứng dụng Windows UWP của bạn có được cài đặt hay không.

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 chưa? 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 đó là ứng dụng của bạn.

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

Lối 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ợ cho lối tắt 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 ra 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 biểu tượng ứng dụng trên web.dev để biết toàn bộ thông tin chi tiết. Tôi rất xin lỗi vì đã gây nhầm lẫn.

Bản dùng thử theo nguyên gốc: Yêu cầu truyền trực tuyến bằng fetch()

Kể từ Chrome 85, tính năng truyền trực tuyến tải lên fetch sẽ được cung cấp dưới dạng bản dùng thử nguồn gốc. Phương thức này cho phép bạn bắt đầu tìm nạp trước khi phần 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 đã sẵn sàng 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 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 để 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 máy ảnh.

Jake đã có một bài viết chuyên sâu về Yêu cầu truyền trực tuyến bằng API tìm nạp trên web.dev, đồng thời cũng đề cập đến chủ đề này trong video mới nhất HTTP203 – Yêu cầu truyền trực tuyến bằng tính năng tìm nạp.

Và các dữ liệu khác

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

Promise.any trả về một lời hứa được thực hiện bằng lời hứa đầu tiên được đưa ra để thực hiện hoặc 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 tiêu chuẩn hoá bởi Liên minh vì nội dung nghe nhìn mở. AVIF mang lại mức tăng đáng kể về khả năng nén so với JPEG và WebP, theo một nghiên cứu gần đây của Netflix cho thấy mức tiết kiệm 50% so với JPEG 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

Phần 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 bên dưới để biết thêm các thay đổi trong Chrome 85.

Đăng ký

Nếu muốn cập nhật video của chúng tôi, 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 và cuối cùng tôi cũng được cắt tóc!

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