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

Chrome 85 hiện đang bắt đầu ra mắt ổn định.

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 phim tại nhà. Hãy cùng tìm hiểu sâu hơn và xem có gì 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 trình duyệt

Việc chuyển HTML của bạn thành nội dung mà người dùng có thể nhìn thấy, đòi hỏi trình duyệt phải trải qua một số bước trước khi có thể vẽ điểm ảnh đầu tiên. Và nó 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 phần tử đó có thể bỏ qua công việc kết xuất cho phần tử đó cho đến khi phần tử này cuộn vào khung nhìn, nhờ đó mang lại 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 phần tử này cho các phần mẹ có thuật toán bố cục phức tạp hơn (như flexboxgrid) hoặc phần tử 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 đã chuyển từ thời gian kết xuất là 232 mili giây xuống chỉ còn 30 mili giây.

Hãy xem chế độ hiển thị nội dung để biết cách bạn có thể sử dụng chế độ hiển thị này để cải thiện hiệu suất kết xuất.

Biến @property và CSS

Biến CSS, về mặt kỹ thuật được gọi là thuộc tính tùy chỉnh, thật tuyệt vời. Với API thuộc tính và giá trị 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 của mình. Trước đây, tôi đã đề cập đến các khái niệm này trong phần Mới trong Chrome 78, khi chúng tôi thêm tính năng hỗ trợ việc xác định những thành phần 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, giá trị dự phòng và thậm chí là 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 cho siêu năng lực cho các biến CSS để hướng dẫn bạn cách sử dụng chúng.

Tải ứng dụng có liên quan đã cài đặt

API getInstalledRelatedApps() giúp bạn kiểm tra xem ứng dụng của mình đã đượ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 nhau 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 các chức năng trùng lặp vào cùng một ứng dụng để tránh nhầm lẫn. Hoặc nếu ứng dụng gốc đã được cài đặt, thì bạn không được quảng bá việc cài đặt PWA.

Trong lần đầu xuất bản trong Chrome 80, phiên bản 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 PWA của bạn đã được cài đặt hay chưa. 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à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 chưa? getInstalledRelatedApps() sẽ cho bạn biết! trên web.dev để xem cách thức hoạt động và cách ký các ứng dụng để chứng minh các ứng dụng đó là 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 đã hỗ trợ thêm lối tắt cho biểu tượng ứng dụng. Tôi vô tình nói rằng các ứng dụng này có ở mọi nơi, nhưng chỉ có trên Android. Giờ đây, trong Chrome 85, các tính năng này có trên AndroidWindows, 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 đầy đủ thông tin chi tiết. Tôi rất lấy làm tiếc về sự nhầm lẫn mà tôi đã gây ra.

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

Kể từ Chrome 85, bạn có thể sử dụng tính năng phát trực tuyến tải lên bằng fetch dưới dạng bản dùng thử theo nguyên gốc. Phương thứ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 yêu cầu sau khi toàn bộ nội dung đã sẵn sàng. 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ụ: hãy sử dụng trường này để khởi động máy chủ hoặc phát trực tuyến âm thanh/video khi nội dung này được thu thập từ micrô hoặc máy ảnh.

Jake đã tìm hiểu kỹ hơn về Yêu cầu truyền trực tuyến bằng API tìm nạp trên web.dev và cũng đề cập đến vấn đề này trong video mới nhất về HTTP203 – Yêu cầu truyền trực tuyến bằng API tìm nạp.

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

Tất nhiên, còn nhiều thứ khác.

Promise.any trả về một lời hứa được thực hiện bằng lời hứa nhất định đầu tiên sẽ đượ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 bằng .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 Alliance for Open Media chuẩn hoá. AVIF giúp tăng đáng kể khả năng nén so với JPEG và WebP, với một nghiên cứu của Netflix gần đây cho thấy khả năng tiết kiệm 50% so với JPEG tiêu chuẩn và tiết kiệm hơn 60% đối với nội dung có tỷ lệ khung hình 4:4:4.

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 chính. Hãy truy cập vào 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 bạn muốn luôn nhận được thông tin mới nhất về video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome và bạn sẽ nhận được thông báo qua email bất cứ khi nào chúng tôi ra mắt video mới.

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

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