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

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:

Có 2 API mới cho phép sử dụng DOM tối khai báo từ JavaScript.
Bạn có thể sử dụng luồng trong Web Socket.
Hiệu ứng chuyển đổi dạng khung hiển thị đã tốt hơn một chút.
Và còn nhiều tính năng khác.

Bạn có muốn xem bản trình bày đầy đủ không? Hãy xem Ghi chú phát hành của Chrome 124.

Sử dụng DOM tối theo khai báo trong JavaScript

Có 2 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ử thành chuỗi được cung cấp. Điều này 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 đúng cách và sẽ không có DOM tối. Tuy nhiên, với setHTMLUnsafe(), DOM bóng sẽ được tạo và phần tử này đượ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, có nghĩa là chúng không thực hiện bất kỳ hoạt động dọn dẹp đầu vào nào. Do đó, 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 giúp dọn dẹp đầ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

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 thăm dò ý kiến. Điều này hữu ích đối với những nội dung như ứng dụng trò chuyện, nơi bạn muốn xử lý thông tin ngay khi có thông tin.

Nhưng nếu dữ liệu đến nhanh hơn khả năng xử lý của bạn thì sao?

Tình trạng đó được gọi là áp lực lưng và có thể gây ra một số cơn đau đầu nghiêm trọng cho bạn. Thật không may, API WebSocket không có cách nào hiệu quả để xử lý áp lực ngược.

WebSocket Stream API cung cấp cho bạn sức mạnh của các 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 chi phí.

Hãy 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ở, dẫn đến 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 luồng hoàn tất.

Để 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 một WritableStreamDefaultWriter mà sau đó bạn có thể write() dữ liệu vào.

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

Tôi rất thích các tính năng Chuyển đổi khung hiển thị. Ngoài ra, Chrome 124 có 2 tính năng mới được thiết kế để giúp việc 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;
  }
});

Tính năng chặn hiển thị tài liệu cho phép bạn chặn kết xuất 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ị nhất quán lần đầu trên tất cả các trình duyệt.

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

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

disallowReturnToOpener sẽ gợi ý cho trình duyệt rằng trình duyệt không nên hiển thị nút trong cửa sổ hình trong hình, cho phép người dùng quay lại thẻ mở.
Vùng chứa cuộn có thể lấy tiêu điểm bằng bàn phím cải thiện khả năng hỗ trợ tiếp cận bằng cách làm cho vùng chứa cuộn có thể làm tâm điểm thông qua tính năng điều hướng tiêu điểm tuần tự.
Còn chế độ cài đặt phổ quát cho phép người dùng cài đặt mọi trang, ngay cả những trang không đáp ứng các tiêu chí hiện tại về PWA.

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

Để 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 sau khi Chrome 125 được phát hành, chúng tôi sẽ có mặt ngay để cho bạn biết các tính năng mới của Chrome!