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 kỹ hơn và xem những tính năng mới dành cho nhà phát triển trong Chrome 122.

Storage Buckets API (API Bộ chứa bộ nhớ).

API bộ chứa bộ nhớ lưu trữ cung cấp nhiều 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 dung lượng 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 mà người dùng không thể can thiệp. Một cách để giúp bộ nhớ trở nên ổn định 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 dung lượng lưu trữ được duy trì lâu dài này là tất cả hoặc không có gì

Ý tưởng cốt lõi của Storage Buckets API 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 những bộ chứa khác. Vì vậy, bạn có thể chỉ định mức độ ưu tiên loại bỏ để đả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 như IndexedDB và CacheStorage.

Truy cập 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 chi tiết và mã mẫu để bắt đầu sử dụng Bộ chứa bộ nhớ.

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

Trong Công cụ của Chrome 122, công cụ cho nhà phát triển bao gồm những đ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 điều khiển Hiệu suất hiện cho phép bạn thiết lập breadcrumb (tập hợp liên kết phân cấp) và chuyển giữa các đường dẫn đó. Để thiết lập 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 zoom_in N mili giây tương ứng. Bạn có thể tạo nhiều breadcrumb (tập hợp liên kết phân cấp) lồng nhau liên tiếp. Để chuyển giữa các mức thu phóng, hãy nhấp vào breadcrumb (tập hợp liên kết phân cấp) tương ứng trong chuỗi ở đầu Dòng thời gian. Hãy xem video tiếp theo để tìm hiểu cách hoạt động của breadcrumb (tập hợp liên kết phân cấp).

Ngoài ra, hiện có các trình khởi tạo sự kiện trong kênh 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à chúng 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 -> Kích hoạt lệnh gọi lại ở trạng thái rảnh
  • Cài đặt bộ tính giờ -> Bộ tính giờ đã kích hoạt
  • Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay 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 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 nhận HTML chưa được dọn dẹp. Trừ khi các trang web bao gồm 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 sẽ được gọi để loại bỏ nội dung khỏi mã đánh dấu HTML do vấn đề về bảo mật và các kiểu sẽ được dùng trong HTML thu được. Điều này dẫn đến việc 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 di động đọc.

Bạn có thể thấy sự khác biệt về dữ liệu đầu ra 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 phần Bỏ chặn quyền truy cập vào bảng nhớ tạm để tìm hiểu thông tin cơ bản về API Bảng nhớ tạm.

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

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

  • Trong CSS, các truy vấn vùng chứa có tính năng không được hỗ trợ không bao giờ khớp. Ví dụ: truy vấn sau đây 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 Tệp 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 tình trạng thêm bản sao 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 cao hơn 8 bit.

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 những thay đổi khác trong Chrome 122.

Đăng ký

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