Bản tóm tắt năm 2024 của Chrome dành cho nhà phát triển: Tái tạo web bằng AI trong DevTools, Gemini tích hợp và các chức năng mới về giao diện người dùng

Xuất bản: Ngày 13 tháng 12 năm 2024

Khi Internet mới bắt đầu phát triển, việc truy cập Internet đồng nghĩa với việc phải kiên nhẫn chờ đợi kết nối quay số chậm và nghịch ngợm với các đoạn mã Perl và HTML. Nhưng mạng Internet đã phát triển theo cấp số nhân trong một khoảng thời gian ngắn. Cho dù bạn đang nhận hàng tạp hoá được giao vào phút chót hay sử dụng AI để tóm tắt vô số bài viết dài, thì đường liên kết hiện là một cánh cổng dẫn đến vô vàn khả năng.

Đó là lý do khiến nhiều người trong chúng ta yêu thích web. Để giúp bạn thu hút nhiều người hơn trên khắp thế giới, chúng tôi đã ra mắt các công cụ mới cho tất cả nhà phát triển web, bất kể bạn là nhà phát triển giao diện người dùng hay nhà phát triển toàn diện, người mới bắt đầu hay chuyên gia.

Hãy xem bản tóm tắt năm 2024 của chúng tôi về các tính năng cải tiến giúp bạn xây dựng trải nghiệm web giàu sức tưởng tượng hơn mà không tốn nhiều công sức.

AI tích hợp sẵn trong Chrome giúp nhà phát triển cung cấp các tính năng mạnh mẽ nhờ Gemini

Tại Google I/O 2024, chúng tôi đã thông báo về cách chúng tôi đang sử dụng AI để tăng cường tiềm năng của web bằng Gemini Nano được tích hợp trực tiếp trong Chrome. Cho đến nay, hơn 13.000 người dùng đã tham gia chương trình xem trước sớm để giúp chúng tôi định hình tương lai của web. Chúng tôi vô cùng biết ơn những đóng góp của bạn và rất mong chờ những trải nghiệm AI đầy sáng tạo mà bạn sẽ tạo ra.

Để giúp bạn khai thác tối đa AI, chúng tôi đã ra mắt một số API tích hợp trong các thử nghiệm ban đầu, chẳng hạn như Prompt API, Translator API, Summarizer APILanguage Detector API (API phát hiện ngôn ngữ) thử nghiệm. Tất cả các công cụ này đều cho phép bạn chạy các tác vụ dựa trên AI trong trình duyệt mà không cần gọi máy chủ, đồng thời bạn không cần quản lý và triển khai các mô hình AI của riêng mình. Hơn 8.600 nhà phát triển đã đăng ký tham gia Thử thách AI tích hợp của Google Chrome để xây dựng một ứng dụng web hoặc Tiện ích Chrome bằng các API này. Chúng tôi sẽ công bố người chiến thắng vào giữa tháng 1, vì vậy hãy tiếp tục theo dõi.

PolicyBazaar sử dụng Language Detector API để phát hiện ngôn ngữ khi khách hàng chuyển đổi ngôn ngữ trong cuộc trò chuyện.

AI trên thiết bị được tăng cường nhờ các tính năng cải tiến WebAssembly (Wasm) và WebGPU

Chúng tôi tin rằng web là thời gian chạy tốt nhất để bạn xây dựng các ứng dụng hỗ trợ AI có thể tiếp cận mọi người. Để bổ sung cho công việc của chúng tôi về các API AI tích hợp, chúng tôi cũng đã cải thiện hai công nghệ cho phép bạn mang các mô hình AI của riêng mình lên web và chạy chúng với tốc độ cao: WebGPU và Wasm.

Chúng tôi đã giới thiệu các giá trị dấu phẩy động 16 bit trong WebGPUcác tích số nguyên được đóng gói, giúp bạn sử dụng GPU của thiết bị linh hoạt hơn với các chương trình đổ bóng điện toán. Các điểm cải tiến trong tương lai dự kiến cho WebGPU bao gồm các nhóm con và ma trận nhóm con. Các tính năng này sẽ cho phép các ứng dụng giao tiếp nhanh chóng giữa các luồng GPU và tận dụng tối đa phép nhân ma trận có kích thước cố định. Chúng tôi cũng sẽ giới thiệu Memory64 cho Wasm vào năm 2025 để cho phép giải quyết các mô hình AI lớn hơn trong bộ nhớ.

Biểu đồ điểm chuẩn từ Transformers.js.
Điểm chuẩn WebGPU từ Transformers.js cho thấy WebGPU nhanh hơn Wasm 32,51 lần.

View Transition API giúp các trang web trở nên kết nối hơn bao giờ hết với chế độ điều hướng mượt mà

Với các chức năng mới như chuyển đổi chế độ xem trên nhiều tài liệu, bạn có thể tạo thao tác điều hướng liền mạch và mượt mà trên nhiều trang. Bạn chỉ cần vài dòng CSS để loại bỏ những "nhấp nháy" khó chịu khi tải lại. Nhờ đó, bạn có thể cung cấp trải nghiệm sống động hơn trong khi vẫn giữ được những lợi ích của cấu trúc nhiều trang.

Chế độ xem chuyển đổi cho phép điều hướng mượt mà giữa các trang. Xem bản minh hoạ hiệu ứng chuyển đổi chế độ xem.

CSS popover và tính năng định vị phần tử neo cho phép các lớp phủ tương tác mà không cần JavaScript

Giờ đây, bạn có thể tạo chú thích, trình đơn và các lớp phủ khác bằng popover, đồng thời kết nối trực quan các lớp phủ này với các phần tử kích hoạt bằng CSS Anchor Positioning API. Bạn chỉ cần một chút CSS và HTML để đảm bảo lớp phủ luôn được cố định và hiển thị ngay cả khi người dùng cuộn hoặc đổi kích thước cửa sổ. Người dùng sẽ có trải nghiệm web đáng tin cậy và linh hoạt hơn, đồng thời bạn không cần quản lý chỉ mục z và phép tính vị trí JavaScript phức tạp. Đó là mối quan hệ đôi bên cùng có lợi.

Speculation Rules API giúp bạn điều hướng gần như tức thì bằng cách kết xuất trước các trang

Thời gian tải trang đã giảm từ nhanh xuống gần như tức thì trong năm nay nhờ Speculation Rules API. API này chỉ cần một vài dòng JSON để triển khai, cho phép các trang được kết xuất trước hoàn toàn trong nền để sẵn sàng hoạt động bất cứ khi nào người dùng của bạn truy cập.

web.dev mất 1,6 giây để tải mà không cần kết xuất trước và 0,2 giây khi có kết xuất trước.

Lượt tương tác đến nội dung hiển thị tiếp theo (INP) trở thành một Chỉ số quan trọng chính của trang web

INP đã thay thế Độ trễ đầu vào đầu tiên làm Chỉ số quan trọng chính của trang web từ tháng 3 để giúp bạn đo lường khả năng phản hồi của trang một cách toàn diện hơn ngoài lượt nhập đầu tiên của người dùng. Kể từ đó, số lượng trang web có INP "tốt" trên thiết bị di động đã tăng 9%, tức là trải nghiệm người dùng trên web sẽ nhanh hơn và thú vị hơn.

Tính năng tự động điền giúp bạn mang đến cho người dùng trải nghiệm thanh toán trực tuyến mượt mà hơn

Việc bật tính năng tự động điền (cho phép trình duyệt tự động điền thông tin đã lưu của người dùng vào các trường trong biểu mẫu) có thể khuyến khích mọi người hoàn tất việc gửi biểu mẫu. Khi phân tích dữ liệu ẩn danh, tổng hợp trên hàng nghìn biểu mẫu trực tuyến, nhóm Chrome nhận thấy số lượt bỏ dở biểu mẫu giảm trung bình 75% khi người dùng sử dụng tính năng tự động điền. Mặc dù có nhiều yếu tố góp phần mang lại trải nghiệm tích cực khi thanh toán, nhưng dữ liệu cho thấy tính năng tự động điền có thể đóng vai trò hữu ích.

Tính năng tự động điền đặc biệt hữu ích cho quy trình thanh toán của trang thương mại điện tử. Tại Shopify,những lượt thanh toán của khách sử dụng tính năng tự động điền có tỷ lệ chuyển đổi thanh toán cao hơn 45% so với những lượt thanh toán của khách không sử dụng tính năng tự động điền.

Chrome DevTools nâng cao hiệu suất nhờ các giải pháp dựa trên AI

Có thể bạn còn nhớ chúng tôi đã giới thiệu Gemini cho Công cụ cho nhà phát triển của Chrome bằng thông tin chi tiết về bảng điều khiển, cho phép bạn truy cập vào tính năng gỡ lỗi dựa trên AI để khắc phục sự cố hiệu quả hơn. Kể từ hội nghị Google I/O 2024, tính năng này đã được cung cấp trên toàn cầu.

Chúng tôi cũng đã ra mắt bảng điều khiển trợ lý AI. Bảng điều khiển này sử dụng Gemini để giúp bạn hiểu rõ các thông tin kỹ thuật của trang, chẳng hạn như kiểu dáng, yêu cầu mạng, nguồn và hiệu suất.

Thông tin chi tiết về bảng điều khiển và bảng trợ lý AI.
Thông tin chi tiết về bảng điều khiển và bảng điều khiển trợ lý AI là hai trong số nhiều điểm cải tiến của Công cụ cho nhà phát triển trong năm 2024.

Có thể bạn đã nhận thấy bảng điều khiển Hiệu suất cũng có nhiều điểm cải tiến trong năm nay, bao gồm cả khả năng theo dõi Các chỉ số quan trọng về trang web theo thời gian thực và thêm chú thích. Ngoài ra, chúng tôi đã đưa sức mạnh của Lighthouse vào bảng điều khiển Hiệu suất bằng thông tin chi tiết về hiệu suất.

Với những điểm cải tiến dựa trên AI, các điểm cải tiến trong bảng điều khiển Hiệu suất và hàng chục bản cập nhật giúp nâng cao chất lượng cuộc sống (chẳng hạn như huy hiệu cuộn), Chrome DevTools hữu ích hơn bao giờ hết. Nhiều điểm cải tiến khác, chẳng hạn như hiệu suất được nâng cấp nhờ các mô hình Gemini 2.0 mới, sẽ ra mắt vào năm 2025.

Baseline 2024 mang đến cho nhà phát triển các tính năng mới trên web trên nhiều trình duyệt

Từ nội suy chuyển màu đến các thuộc tính tuỳ chỉnh đã đăng ký, Baseline 2024 (Đường cơ sở 2024) cho đến nay đã bao gồm 39 tính năng web mới, hoạt động trên nhiều trình duyệt. Bạn không cần phải lo lắng về khả năng tương tác khi một tính năng đã có trong Baseline ít nhất 30 tháng. Nhưng nếu bạn đang cố gắng quyết định xem có nên sử dụng một tính năng mới hay không, hãy xem Thông tin chi tiết về Kho lưu trữ RUM của Akamai để biết các tính năng của từng phiên bản Cơ sở và thị phần người dùng trên toàn cầu.

Thông báo yêu thích của chúng tôi về Baseline trong năm nay là trang tổng quan về Trạng thái nền tảng web. Trang tổng quan này trình bày tất cả các tính năng web cùng với mức độ hỗ trợ trên nhiều trình duyệt. Điều thú vị hơn nữa là dữ liệu hỗ trợ trang tổng quan Web Platform Status là dữ liệu mở và có sẵn để bạn sử dụng và tích hợp vào công cụ của riêng mình. Một ví dụ điển hình cho trường hợp này là biểu ngữ Đường cơ sở.

Các trình duyệt chính sẽ có nhiều tính năng hơn trong Baseline nhờ Interop 2024

Để bổ sung thêm nhiều tính năng cho Baseline, chúng tôi đã một lần nữa hợp tác với các đối tác của mình trong dự án Interop 2024. Các tính năng mục tiêu của năm nay bao gồm cửa sổ bật lên, tính năng lồng CSS, font-size-adjust và cú pháp màu tương đối.

Interop cũng nêu rõ điểm số cho các bản phát hành trình duyệt thử nghiệm và ổn định. Điểm số tổng thể về khả năng tương tác của các trình duyệt ổn định hiện là 87 và Chrome Stable đạt điểm số 98 khi chúng ta sắp kết thúc năm. Bạn có thể theo dõi tiến trình của các trình duyệt trên Trang tổng quan về khả năng tương tác. Chúng tôi đã lên kế hoạch cho Interop 2025 và sẽ công bố vào tháng 2.

Cùng nhau định hình sự phát triển của web trong năm mới

Mặc dù những tiến bộ trong năm 2024 rất đáng mừng, nhưng chúng tôi biết rằng tương lai sẽ còn tươi sáng hơn nữa. Tất cả là nhờ niềm đam mê, ý kiến phản hồi và sự đổi mới của các bạn – cộng đồng nhà phát triển của chúng tôi. Tại các sự kiện trên khắp thế giới, từ Hội nghị BrazilJSDevFest Paris cho đến Google I/O 2024Hội nghị thượng đỉnh đầu tiên về AI trên web, chúng tôi nhận thấy rõ ràng rằng tất cả các bạn đều tin tưởng vào sức mạnh và tiềm năng của web như chúng tôi.

Bạn có những ý tưởng táo bạo hơn bao giờ hết. Chúng tôi cam kết giúp bạn biến những ý tưởng đó thành hiện thực. Vì vậy, hãy kết nối với chúng tôi trên X, YouTubeLinkedIn để nắm bắt thông tin cập nhật mới nhất của chúng tôi. Hãy cùng nhau tái định hình sức mạnh của web.