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

Adriana Jara

Dưới đây là những gì bạn cần phải biết:

Tôi là Adriana Jara. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 122.

API Bộ chứa bộ nhớ.

API Bộ nhớ cung cấp thông tin chi tiết hơn để quản lý bộ nhớ cố định hiệu quả hơn.

Thông thường, khi người dùng hết không gian lưu trữ trên thiết bị, dữ liệu được lưu trữ bằng các API như IndexedDB hoặc localStorage sẽ bị mất và người dùng không thể can thiệp. Một cách để lưu trữ liên tục là sử dụng phương thức persist() của giao diện StorageManager. Tuy nhiên, phương thức yêu cầu bộ nhớ ổn định này là tất cả hoặc không có gì

Ý tưởng cốt lõi của API Bộ nhớ là cấp cho các trang web khả năng tạo nhiều bộ nhớ, trong đó trình duyệt có thể chọn xoá từng bộ nhớ một cách độc lập với các bộ nhớ khác. Vì vậy, bạn có thể chỉ định mức độ ưu tiên giải phóng để đảm bảo dữ liệu có giá trị nhất không bị xoá.Mỗi bộ chứa lưu trữ có thể chứa dữ liệu liên kết với các API lưu trữ đã thiết lập, chẳng hạn như IndexedDB và CacheStorage.

Hãy truy cập vào bài viết không phải tất cả bộ nhớ đều được tạo như nhau: giới thiệu về Bộ nhớ để biết thêm thông tin chi tiết và các mã mẫu để bắt đầu sử dụng Bộ nhớ.

Các điểm cải tiến của DevTools trong Bảng điều khiển hiệu suất

Trong Chrome 122, Công cụ của Chrome cho nhà phát triển có các điểm cải tiến sau trong bảng điều khiển Hiệu suất.

Trước tiên, Tiến trình ở đầu bảng điều khiển Hiệu suất hiện cho phép bạn đặt các dấu vết và chuyển đổi giữa các dấu vết đó. Để đặt đường dẫn, hãy chọn một dải ô trên Dòng thời gian, di chuột qua dải ô đó rồi nhấp vào nút N mili giây tương ứng. Bạn có thể tạo nhiều chuỗi liên kết lồng nhau liên tiếp. Để chuyển đổi giữa các mức thu phóng, hãy nhấp vào đường dẫn tương ứng trong chuỗi ở đầu Dòng thời gian. Hãy xem video tiếp theo để xem cách hoạt động của các chuỗi liên kết.

Ngoài ra, hiện có trình khởi tạo sự kiện trong kênh Main (Chính). Theo mặc định, kênh Hiệu suất > Chính hiển thị các mũi tên kết nối trình khởi tạo và các sự kiện sau đây mà trình khởi tạo đó gây ra.

  • Kiểu hoặc bố cục không hợp lệ -> Tính toán lại kiểu hoặc Bố cục
  • Yêu cầu khung ảnh động -> Khung ảnh động đã kích hoạt
  • Yêu cầu lệnh gọi lại ở trạng thái rảnh -> Kích hoạt lệnh gọi lại ở trạng thái rảnh
  • Install Timer (Cài đặt bộ hẹn giờ) -> Timer Fired (Đã kích hoạt bộ hẹn giờ)
  • Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay của WebSocket hoặc Huỷ bỏ WebSocket

Để xem các mũi tên, hãy tìm một sự kiện như vậy trong dấu vết rồi nhấp vào sự kiện đó.

Một mũi tên từ yêu cầu và kích hoạt lệnh gọi lại ở trạng thái rảnh.

Tìm hiểu thêm về các bản cập nhật DevTools trong phần Tính năng mới trong Devtools 122.

Tuỳ chọn unsanitized của API Bảng nhớ tạm không đồng bộ

Khi sao chép và dán bằng API Bảng nhớ tạm không đồng bộ, tuỳ chọn unsanitized cho phương thức read() cho phép ứng dụng và trang web nhận HTML chưa được dọn dẹp. Trừ phi các trang web có thuộc tính này, việc đọc HTML từ bảng nhớ tạm sẽ được dọn dẹp.

Theo mặc định, khi đọc các loại MIME text/html bằng API không đồng bộ, trình dọn dẹp được gọi để loại bỏ nội dung khỏi mã đánh dấu HTML do các vấn đề về bảo mật và các kiểu nằm trong HTML kết quả. Điều này dẫn đến tải trọng HTML lớn và làm mất độ trung thực của nội dung HTML khi nhà phát triển web hoặc ứng dụng di động đọc.

Bạn có thể thấy sự khác biệt trong kết quả trong ví dụ sau.

Đầu vào:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Đã loại bỏ nội dung độc hại (mặc định):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

Với tuỳ chọn unsanitized:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Truy cập vào bài viết Bỏ chặn quyền truy cập vào bảng nhớ tạm để tìm hiểu kiến thức cơ bản về Clipboard API.

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

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

  • Trong CSS, các truy vấn vùng chứa có các tính năng không được hỗ trợ sẽ không bao giờ khớp. Ví dụ: truy vấn sau sẽ không bao giờ khớp do có tính năng không xác định:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() không ảnh hưởng đến đối tượng File mà chỉ xoá các đối tượng loại văn bản.

  • Với drawingBufferStorage của WebGL, bạn có thể tránh được việc sao chép thêm khi chuyển đổi kết xuất sang định dạng pixel vùng đệm vẽ mặc định và vẽ nội dung có độ chính xác hơn 8 bit.

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 122.

Đă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.

Chào Adriana Jara! Ngay sau khi Chrome 123 được phát hành, tôi sẽ cho bạn biết các tính năng mới trong Chrome!