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 được 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 cung cấp tính năng 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 mức 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 URL của máy chủ WebSocket vào đó.

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 một ReadableStreamDefaultReader, sau đó bạn có thể read() dữ liệu từ đó cho đến khi luồng 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 khung hiển thị và có hai tính năng mới trong Chrome 124 được thiết kế để giúp quá trình chuyển đổi khung hiển thị 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 việc hiển thị tài liệu cho đến khi nội dung quan trọng được phân tích cú pháp, đảm bảo lượt vẽ đầu tiên nhất quán trên tất 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

Nội dung 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 đây để 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!