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

Pete LePage

Dưới đây là những điểm nổi bật trong Chrome 124:

Bạn có muốn xem hết video không? Xem Ghi chú phát hành Chrome 124.

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

Có hai API mới cho phép sử dụng DOM bóng 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ử vào chuỗi đã cung cấp. Điều này sẽ hữu ích khi bạn có một số HTML bao gồm DOM bóng khai báo, như thế này.

<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 chính xác và có không có DOM tối. Nhưng với setHTMLUnsafe(), DOM tối của bạn được tạo và được phân tích cú pháp như bạn 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, nghĩa là chúng không thực hiện bất kỳ dữ liệu đầu vào nào dọn dẹp. Vì vậy, bạn cần đảm bảo rằng bất cứ thứ gì 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 có tính năng dọn dẹp của đầu vào.

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

API luồng WebSocket

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

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

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

API Luồng WebSocket cung cấp bạn sức mạnh của luồng và cổng web, có nghĩa là áp lực ngược có thể mà không mất thêm bất kỳ chi phí nào.

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

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ả trong ReadableStream và WritableStream. Bằng cách gọi hàm Phương thức ReadableStream.getReader(), bạn sẽ nhận được ReadableStreamDefaultReader mà 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 cung cấp cho bạn WritableStreamDefaultWriter để bạn có thể write() chuyển dữ liệu vào.

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

Tôi rất thích thú với các tính năng Chuyển đổi chế độ xem ở đây, ở đây có hai tính năng mới trong Chrome 124 được thiết kế để giúp 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 đ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 một cách 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 là còn nhiều tính năng khác nữa.

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. Kiểm tra các đường liên kết sau để các thay đổi bổ sung trong Chrome 124.

Đăng ký

Để cập nhật thông tin, 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 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ẽ luôn sẵn sàng cho bạn biết các tính năng mới của Chrome!