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

Pete LePage

Sau đây là các điểm nổi bật trong Chrome 124:

Bạn muốn biết thông tin đầy đủ? Hãy xem Ghi chú phát hành của Chrome 124.

Sử dụng shadow DOM khai báo trong JavaScript

Có hai API mới cho phép sử dụng shadow DOM khai báo từ JavaScript.

setHTMLUnsafe() tương tự như innerHTML và cho phép bạn đặt HTML bên trong của một phần tử thành chuỗi đã cung cấp. Điều này sẽ hữu ích khi bạn có một số HTML bao gồm một DOM bóng đổ khai báo, như sau.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Nếu bạn chỉ sử dụng innerHTML, trình duyệt sẽ không phân tích cú pháp đúng cách và không có DOM bóng. Nhưng với setHTMLUnsafe(), DOM bóng sẽ được tạo và phần tử sẽ được phân tích cú pháp như mong đợi.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

API còn lại là parseHTMLUnsafe() và hoạt động tương tự như DOMParser.parseFromString().

Cả hai API này đều không an toàn, tức là không thực hiện bất kỳ biện pháp dọn dẹp đầu vào nào. Vì vậy, bạn cần đảm bảo rằng mọi thứ bạn cho chúng ăn đều an toàn. Trong bản phát hành sắp tới, chúng tôi dự kiến sẽ thấy một phiên bản dọn dẹp dữ liệu đầu vào.

Cuối cùng, cả hai API này đều được hỗ trợ trong phiên bản mới nhất của Firefox và Safari!

WebSocket Stream API

WebSocket là một cách tuyệt vời để gửi dữ liệu qua lại giữa trình duyệt của người dùng và máy chủ mà không cần phải dựa vào tính năng thăm dò ý kiến. Điều này rất hữu ích cho các ứng dụng như ứng dụng trò chuyện, nơi bạn muốn xử lý thông tin ngay khi nhận được.

Nhưng nếu dữ liệu đến nhanh hơn bạn có thể xử lý thì sao?

Đó được gọi là áp lực ngược và có thể gây ra một số vấn đề nghiêm trọng cho bạn. Rất tiếc, API WebSocket không có cách hay để xử lý áp lực ngược.

WebSocket Stream API mang đến cho bạn sức mạnh của luồng và ổ cắm web, tức là bạn có thể áp dụng áp lực ngược mà không mất thêm phí.

Bắt đầu bằng cách tạo một WebSocketStream mới và truyền vào đó URL của máy chủ WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Tiếp theo, bạn đợi kết nối được mở, kết quả là ReadableStream và WritableStream. Bằng cách gọi phương thức ReadableStream.getReader(), bạn sẽ nhận được ReadableStreamDefaultReader mà sau đó bạn có thể read() dữ liệu cho đến khi quá trình truyền trực tuyến kết thúc.

Để ghi dữ liệu, hãy gọi phương thức WritableStream.getWriter(). Phương thức này sẽ cung cấp cho bạn một WritableStreamDefaultWriter, sau đó bạn có thể write() dữ liệu.

Xem các điểm cải tiến về hiệu ứng chuyển đổi

Tôi rất hào hứng với các tính năng Chuyển đổi chế độ xem và có hai tính năng mới trong Chrome 124 được thiết kế để giúp quá trình chuyển đổi chế độ xem dễ dàng hơn.

Sự kiện pageswap được kích hoạt trên đối tượng cửa sổ của tài liệu khi một thao tác điều hướng sẽ thay thế tài liệu bằng một tài liệu mới.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Và tính năng chặn hiển thị tài liệu cho phép bạn chặn hiển thị một tài liệu cho đến khi nội dung quan trọng được phân tích cú pháp, đảm bảo hiển thị đầu tiên nhất quán trên tất cả các trình duyệt.

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

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

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 sau để biết thêm các thay đổi trong Chrome 124.

Đăng ký

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