Trang này được dịch bởi Cloud Translation API.

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

Pete LePage

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

Có một mã trạng thái HTTP 103 mới giúp trình duyệt quyết định nội dung nào cần tải trước trước khi trang bắt đầu xuất hiện.
Local Font Access API (API truy cập phông chữ cục bộ) cho phép các ứng dụng web liệt kê và sử dụng phông chữ đã cài đặt trên máy tính của người dùng.
AbortSignal.timeout() là một cách dễ dàng hơn để triển khai thời gian chờ trên các API không đồng bộ.
Và còn nhiều tính năng khác.

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

Mã trạng thái HTTP 103 – gợi ý sớm

Một cách bạn có thể cải thiện hiệu suất trang là sử dụng gợi ý tài nguyên. Các tệp này cung cấp "gợi ý" cho trình duyệt về những nội dung mà trình duyệt có thể cần sau này. Ví dụ: tải trước tệp hoặc kết nối với một máy chủ khác.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Tuy nhiên, trình duyệt không thể hành động theo các gợi ý đó cho đến khi máy chủ gửi ít nhất một phần của trang.

Hãy tưởng tượng trình duyệt yêu cầu một trang, nhưng máy chủ cần vài trăm mili giây để tạo trang đó. Cho đến khi trình duyệt bắt đầu nhận trang, trình duyệt sẽ chỉ ngồi đó và chờ. Tuy nhiên, nếu máy chủ biết rằng trang sẽ luôn cần một nhóm tài nguyên phụ nhất định, chẳng hạn như tệp CSS, một số JavaScript và một vài hình ảnh, thì máy chủ có thể phản hồi ngay bằng mã trạng thái Gợi ý sớm HTTP 103 mới và yêu cầu trình duyệt tải trước các tài nguyên phụ đó.

Sau đó, khi máy chủ đã tạo trang, máy chủ có thể gửi trang đó bằng phản hồi HTTP 200 thông thường. Khi trang xuất hiện, trình duyệt đã bắt đầu tải các tài nguyên cần thiết.

Vì đây là mã trạng thái HTTP mới nên bạn cần cập nhật máy chủ để sử dụng mã này.

Bắt đầu với các gợi ý của HTTP 103:

API Truy cập phông chữ cục bộ

Phông chữ trên web luôn là một thách thức, đặc biệt là đối với các ứng dụng cho phép người dùng tạo đồ hoạ và thiết kế của riêng họ. Cho đến nay, các ứng dụng web chỉ thực sự có thể sử dụng phông chữ web. Không có cách nào để lấy danh sách phông chữ mà người dùng đã cài đặt trên máy tính. Ngoài ra, không có cách nào để truy cập vào dữ liệu bảng phông chữ đầy đủ, điều này rất quan trọng nếu bạn cần triển khai ngăn xếp văn bản tuỳ chỉnh của riêng mình.

API Quyền truy cập phông chữ cục bộ mới cho phép các ứng dụng web liệt kê các phông chữ cục bộ trên thiết bị của người dùng và cấp quyền truy cập vào dữ liệu bảng phông chữ.

Để nhận danh sách phông chữ được cài đặt trên thiết bị, trước tiên, bạn cần yêu cầu quyền.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Sau đó, hãy gọi window.queryLocalFonts(). Phương thức này trả về một mảng gồm tất cả phông chữ được cài đặt trên thiết bị của người dùng.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Nếu chỉ quan tâm đến một nhóm nhỏ phông chữ, bạn có thể lọc các phông chữ đó bằng cách thêm tham số postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Hãy xem bài viết của Tom Sử dụng kiểu chữ nâng cao với phông chữ cục bộ trên web.dev để biết thông tin chi tiết đầy đủ.

Dễ dàng hơn với thời gian chờ bằng AbortSignal.timeout()

Trong JavaScript, AbortController và AbortSignal được dùng để huỷ lệnh gọi không đồng bộ.

Ví dụ: khi tạo yêu cầu fetch(), bạn có thể tạo một AbortSignal và truyền yêu cầu đó đến fetch(). Nếu bạn muốn huỷ fetch() trước khi hàm này trả về, hãy gọi abort() trên thực thể của AbortSignal. Cho đến nay, nếu muốn thao tác này huỷ sau một khoảng thời gian cụ thể, bạn cần gói phương thức này trong một setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Rất may, việc này trở nên dễ dàng hơn với phương thức tĩnh timeout() mới trên AbortSignal. Phương thức này trả về một đối tượng AbortSignal được tự động huỷ sau một số mili giây nhất định. Trước đây, bạn phải viết một vài dòng mã, giờ đây chỉ cần một dòng.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() được hỗ trợ trên Chrome 103 và đã có trong Firefox và Safari.

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.

Định dạng tệp hình ảnh avif hiện có thể chia sẻ bằng tính năng Chia sẻ trên web
Chromium hiện so khớp với Firefox bằng cách kích hoạt popstate ngay sau khi URL thay đổi. Thứ tự của các sự kiện hiện tại là: popstate, sau đó là hashchange trên cả hai nền tảng.
Còn Element.isVisible() cho bạn biết một phần tử có hiển thị hay không.

Lưu ý: Trong video, tôi có đề cập đến Element.isVisible() có sẵn trong phiên bản ổn định, nhưng tính năng này hiện chỉ có trong cờ tính năng.

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

Bài viết 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 về các thay đổi khác trong Chrome 103.

Để 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. Ngay khi Chrome 104 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!

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

Mã trạng thái HTTP 103 – gợi ý sớm

API Truy cập phông chữ cục bộ

Dễ dàng hơn với thời gian chờ bằng AbortSignal.timeout()

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

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

Đăng ký