Dưới đây là những điểm nổi bật trong Chrome 124:
- Có hai API mới cho phép DOM bóng khai báo được sử dụng từ JavaScript.
- Bạn có thể dùng luồng trong Web Sockets.
- Hiệu ứng chuyển đổi khung hiển thị sẽ được cải thiện một chút.
- Và còn nhiều nhiều lợi ích khác.
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.
disallowReturnToOpener
gợi ý cho trình duyệt rằng trình duyệt không nên hiển thị nút ở chế độ hình trong hình cửa sổ cho phép người dùng quay lại thẻ trình mở.Vùng chứa cuộn có thể làm tâm điểm bằng bàn phím cải thiện khả năng tiếp cận bằng cách đặt các vùng chứa cuộn làm tâm điểm bằng cách sử dụng tuần tự điều hướng tiêu điểm.
Cài đặt chung cho phép người dùng cài đặt bất kỳ trang nào, ngay cả những trang không đáp ứng tiêu chí của PWA hiện tại.
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.
- Ghi chú phát hành của Chrome 124
- Tính năng mới trong Công cụ của Chrome cho nhà phát triển (124)
- Nội dung cập nhật ChromeStatus.com cho Chrome 124
- Danh sách thay đổi kho lưu trữ nguồn Chromium
- Lịch phát hành Chrome
Đă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!