Xuất bản: Ngày 28 tháng 7 năm 2026
Chrome 151 hiện đang được triển khai và bài đăng này chia sẻ một số tính năng chính của phiên bản này. Đọc toàn bộ ghi chú phát hành Chrome 151.
Nội dung nổi bật trong bản phát hành này:
- Phần tử khả năng
<usermedia>cung cấp một chế độ kiểm soát khai báo do người dùng kích hoạt cho luồng camera và micrô. - Tính năng chỉ định khe cắm DOM bóng khai báo cho phép các thành phần web sử dụng tính năng chỉ định khe cắm thủ công mà không cần JavaScript bắt buộc.
- Chỉ số về hiệu suất tương tác và điều hướng mềm theo dõi độ trễ do tương tác và các thay đổi về tuyến đường trong ứng dụng trang đơn.
Phần tử chức năng: <usermedia> MVP
Phần tử <usermedia> là phần tử mới nhất được ra mắt trong bộ Phần tử chức năng, sau <geolocation>. Quá trình chuyển đổi này từ đề xuất <permission> ban đầu (một phần của sáng kiến PEPC) cho phép trình duyệt xử lý hiệu quả hơn những điểm phức tạp và hành vi riêng biệt của các chức năng phần cứng. Mặc dù đề xuất ban đầu chủ yếu tập trung vào việc quản lý các trạng thái quyền (chẳng hạn như cho phép so với từ chối), nhưng Capability Elements (Phần tử chức năng) hoạt động như các trung gian dữ liệu.
Phần tử <geolocation> cung cấp một đối tượng vị trí cho trang web của bạn và <usermedia> quản lý toàn bộ quy trình truy cập camera và micrô. Nó nắm bắt ý định của người dùng, quản lý lời nhắc của trình duyệt và gửi đối tượng MediaStream đến ứng dụng. Sự thay đổi này giúp bạn không cần thực hiện các lệnh gọi getUserMedia() riêng biệt, đơn giản hoá quy trình triển khai và đảm bảo trình duyệt có tín hiệu đáng tin cậy về ý định của người dùng.
Tìm hiểu thêm trong bài viết Giới thiệu phần tử HTML <usermedia>.
DOM bóng khai báo: thuộc tính shadowrootslotassignment
Chrome 151 bổ sung tính năng hỗ trợ thuộc tính shadowrootslotassignment trên các phần tử <template>. Điều này cho phép bạn tạo các gốc bóng khai báo sử dụng tính năng chỉ định vị trí theo cách thủ công ngay trong HTML.
Cho đến nay, việc chỉ định vị trí theo cách thủ công chỉ có sẵn theo cách bắt buộc. Với bản cập nhật này, bạn có thể chỉ định shadowrootslotassignment="manual" trên mẫu gốc bóng
Thuộc tính này chấp nhận named (hành vi mặc định) và manual, đồng thời được phản ánh bằng thuộc tính shadowRootSlotAssignment trên HTMLTemplateElement. Để biết thêm thông tin, hãy xem tài liệu HTMLTemplateElement.shadowRootSlotAssignment trên MDN.
Thuộc tính này đã có trong Firefox và trong phiên bản beta 27 của Safari, nên sẽ sớm có trong Baseline Newly.
Chỉ số hiệu suất tương tác và điều hướng mềm
Chrome 151 mở rộng dòng thời gian hiệu suất web bằng cách giới thiệu 2 loại PerformanceEntry mới: soft-navigation và interaction-contentful-paint. Những mục này giúp nhà phát triển theo dõi hiệu suất và độ trễ do hoạt động tương tác gây ra trong các ứng dụng một trang (SPA), dựa trên các chỉ số đã thiết lập của Chỉ số quan trọng chính của trang web, chẳng hạn như Nội dung lớn nhất hiển thị (LCP) và Lượt tương tác đến nội dung hiển thị tiếp theo (INP).
Trong SPA, các quá trình chuyển đổi tuyến đường dựa trên JavaScript không kích hoạt quá trình tải trang của trình duyệt truyền thống. Mục soft-navigation ghi lại những thay đổi về trạng thái nhật ký trong cùng một tài liệu do hoạt động tương tác của người dùng khởi tạo. Khi một thao tác điều hướng mềm xảy ra, trình duyệt sẽ thiết lập một gốc thời gian mới, cho phép bạn phân bổ chính xác dữ liệu hiệu suất tiếp theo cho tuyến SPA đang hoạt động thay vì URL tài liệu ban đầu.
Mục interaction-contentful-paint đo lường các lần hiển thị nội dung mới trong các vùng DOM được sửa đổi bởi lượt tương tác của người dùng. Điều này giúp bạn biết được độ trễ khi tải tương tác, ngay cả khi nội dung cập nhật phụ thuộc vào các thao tác không đồng bộ như yêu cầu fetch().
Bạn có thể quan sát những mục mới này trong ứng dụng bằng cách sử dụng PerformanceObserver. Đoạn mã sau đây ghi các mục điều hướng mềm vào bảng điều khiển, bao gồm cả các thao tác điều hướng mềm trước đó trên trang này bằng cách sử dụng tuỳ chọn được lưu vào bộ nhớ đệm:
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
Để tìm hiểu thêm về cách triển khai và đo lường hoạt động điều hướng SPA, hãy đọc tài liệu về hoạt động điều hướng mềm trên trang Chrome cho nhà phát triển.
Tài liệu đọc thêm
Đây chỉ là một số điểm nổi bật chính. Hãy xem các đường liên kết sau để biết thêm những thay đổi trong Chrome 151:
- Ghi chú phát hành cho Chrome 151.
- Thông tin cập nhật trên ChromeStatus.com cho Chrome 151.
- Lịch phát hành phiên bản Chrome.
Đăng ký
Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube của Chrome Developers. 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. Hoặc theo dõi chúng tôi trên X hoặc LinkedIn để xem các bài viết và bài đăng mới trên blog.
Ngay khi Chrome 152 được phát hành, chúng tôi sẽ thông báo cho bạn về những điểm mới trong Chrome!