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ã trạng thái HTTP 103 mới giúp trình duyệt quyết định nội dung cần tải trước trước khi trang bắt đầu truy cập.
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à 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 kỹ hơn và xem có gì mới dành cho nhà phát triển trong Chrome 103.

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

Bạn có thể sử dụng các gợi ý về tài nguyên để cải thiện hiệu suất của trang. Chúng cung cấp cho trình duyệt "gợi ý" về những thứ 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ể xử lý 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ủ yêu cầu 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ỉ ở đó và chờ. Tuy nhiên, nếu biết rằng trang sẽ luôn cần một nhóm tài nguyên phụ nhất định, ví dụ: 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 lập tức 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 đó, sau khi 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 đến, trình duyệt đã bắt đầu tải các tài nguyên bắt buộc.

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

Bắt đầu với HTTP 103 Gợi ý sớm:

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 những ứng dụng cho phép người dùng tạo đồ hoạ và thiết kế của riêng mình. 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 của họ. Và, không có cách nào để truy cập vào dữ liệu bảng phông chữ đầy đủ, điều quan trọng là 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 Truy cập phông chữ cục bộ mới cho phép các ứng dụng web liệt kê phông chữ trên thiết bị của người dùng, đồng thời cung cấp quyền truy cập vào dữ liệu bảng phông chữ.

Để có 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ả các phông chữ đã 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 số 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 Sử dụng kiểu chữ nâng cao với phông chữ trên máy của Tom trên web.dev để biết đầy đủ chi tiết.

Tăng thời gian chờ dễ dàng hơn bằng abortSignal.timeout()

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

Ví dụ: khi đưa ra 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 trả về, hãy gọi abort() trên thực thể của AbortSignal. Cho đến nay, nếu muốn huỷ sau một khoảng thời gian cụ thể, bạn cần gói mã 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 bị tự động huỷ sau số mili giây nhất định. Trước đây phải là 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ợ trong Chrome 103 và đã có trong Firefox cũng như Safari.

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

Đị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 giờ đây khớp với Firefox bằng cách kích hoạt popstate ngay sau khi thay đổi URL. Thứ tự của các sự kiện hiện là: popstate, sau đó là hashchange trên cả hai nền tảng.
Và 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ập đến Element.isVisible() hiện có sẵn ở trạng thái ổn định, nhưng hiện chỉ có sẵn sau một cờ tính năng.

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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm các thay đổi khác trong Chrome 103.

Để 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 và ngay sau khi Chrome 104 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới trong Chrome!

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

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

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

Tăng thời gian chờ dễ dàng hơn bằng abortSignal.timeout()

Và nhiều kiến thức khác!

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

Đăng ký