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 xem có tính năng mới nào dành cho nhà phát triển trong Chrome 122.

Storage Buckets API (API Bộ chứa lưu trữ).

API Bộ chứa lưu trữ cung cấp thông tin chi tiết hơn để quản lý bộ nhớ ổn định một cách 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 pháp yêu cầu bộ nhớ duy trì này là hoàn toàn hoặc không có gì

Ý tưởng chính của API Bộ chứa lưu trữ là cấp cho các trang web khả năng tạo nhiều bộ chứa lưu trữ, trong đó trình duyệt có thể chọn xoá từng bộ chứa một cách độc lập với các bộ chứa 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 xem bài viết Không phải tất cả bộ nhớ đều được tạo như nhau: giới thiệu Bộ chứa bộ nhớ để biết thêm thông tin chi tiết và mã mẫu để bắt đầu sử dụng Bộ chứa bộ nhớ.

Các điểm cải tiến trong Công cụ cho nhà phát triển trong Bảng điều khiển hiệu suất

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

Trước tiên, Dòng thời gian ở đầu bảng Hiệu suất hiện cho phép bạn đặt đường dẫn và chuyển giữa các đường dẫn đó. Để đặt breadcrumb (tập hợp liên kết phân cấp), 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 zoom_in tương ứng. Bạn có thể tạo liên tiếp nhiều đường dẫn lồng nhau. Để 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. Xem video tiếp theo để xem cách hoạt động của đường dẫn.

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

  • Vô hiệu hoá kiểu hoặc bố cục -> Tính toán lại kiểu hoặc Bố cục
  • Yêu cầu khung ảnh động -> Đã kích hoạt khung ảnh động
  • Yêu cầu lệnh gọi lại ở trạng thái rảnh -> Lệnh gọi lại ở trạng thái rảnh
  • Cài đặt bộ tính giờ -> Đã kích hoạt bộ tính giờ
  • Tạo WebSocket -> Gửi... và Nhận giao tay 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ũi tên từ yêu cầu và kích hoạt một lệnh gọi lại ở trạng thái rảnh.

Tìm hiểu thêm thông tin cập nhật về Công cụ cho nhà phát triển trong bài viết 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() sẽ cho phép các ứng dụng và trang web truy cập vào HTML chưa được dọn dẹp. Trừ 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 được nhà phát triển web hoặc ứng dụng dành cho thiết bị 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>'

Đã dọn dẹp (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 lựa chọn unsanitized:

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

Hãy xem 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ề API Bảng nhớ tạm.

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.

  • Trong CSS, các truy vấn vùng chứa có các tính năng không được hỗ trợ không bao giờ khớp. Ví dụ: truy vấn sau sẽ không bao giờ khớp do 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

Trên đây chỉ là 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 122.

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

Xin 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!