Ngày phát hành: 4 tháng 4 năm 2025
Việc khắc phục các vấn đề về hiệu suất trong thực tế có nghĩa là thu hẹp khoảng cách giữa môi trường phát triển và trải nghiệm hiệu suất đa dạng của người dùng. Trong bài đăng này, chúng ta sẽ xem xét các tính năng mới trong Công cụ phát triển Chrome giúp bạn đưa ra quyết định gỡ lỗi hiệu suất dựa trên dữ liệu thực tế thay vì phỏng đoán.
Điều chỉnh kỳ vọng
Kể từ Chrome 134, DevTools sẽ có tính năng điều chỉnh tốc độ CPU, một công cụ mới giúp loại bỏ sự không chắc chắn khi chọn mức điều tiết CPU phù hợp. Chạy quy trình hiệu chỉnh một lần và DevTools sẽ tạo các chế độ điều tiết "thiết bị di động cấp thấp" và "thiết bị di động cấp trung" dành riêng cho máy phát triển của bạn.
Một điểm không khớp thường gặp trong công việc về hiệu suất web là với tư cách là nhà phát triển, chúng ta thường xây dựng trang web trên các thiết bị máy tính nhanh trong khi nhiều người dùng của chúng ta sử dụng các thiết bị di động khiêm tốn hơn. Việc theo dõi vấn đề về hiệu suất có thể khó khăn khi vấn đề chỉ xảy ra trên một thiết bị có CPU chậm hơn nhiều.
Tiêu chuẩn vàng là gỡ lỗi từ xa trên thiết bị di động thực, nhưng trong gần một thập kỷ qua, Chrome cũng đã hỗ trợ hạn chế tốc độ CPU cho các chu kỳ lặp lại nhanh và nhẹ trong quá trình phát triển.
Nhưng bạn nên chọn mức điều tiết CPU nào? 4 lần? 20 lần? Làm cách nào để biết thiết bị nào phù hợp nhất với loại thiết bị mà bạn biết là truy cập vào trang web của mình? Và tốc độ của máy tính của bạn ảnh hưởng như thế nào đến quyết định đó, cho dù bạn đang sử dụng máy trạm cao cấp hay đang dùng một chiếc Chromebook 8 năm tuổi khi di chuyển?
Quy trình hiệu chỉnh điều tiết
Khi mở bảng điều khiển Performance (Hiệu suất), phần cài đặt Environment (Môi trường) sẽ có một trình đơn thả xuống để đặt mức điều tiết CPU. Nếu chưa từng chạy quy trình hiệu chuẩn, bạn sẽ thấy hai tuỳ chọn bị tắt trong phần "Tự động cài đặt trước đã hiệu chuẩn" trong trình đơn thả xuống và tuỳ chọn Hiệu chuẩn… ở dưới cùng.
Khi chọn mục này, bạn sẽ được chuyển đến phần chế độ điều tiết CPU đặt sẵn trong phần Cài đặt (bạn cũng có thể chuyển thẳng đến phần này).
- Nhấp vào nút Hiệu chỉnh
- Nhấp vào Tiếp tục khi trình duyệt cảnh báo rằng bạn sẽ tạm thời rời khỏi trang hiện tại
- Một phép đo điểm chuẩn nhanh sẽ chạy để đo tốc độ của máy hiện tại và quá trình hiệu chuẩn đã hoàn tất
Giờ đây, các tuỳ chọn điều tiết sẽ được điền sẵn các giá trị đặt trước được hiệu chỉnh cho thiết bị cấp thấp và cấp trung.
Hai giá trị đặt trước này là đủ cho hầu hết các trường hợp sử dụng trong quá trình phát triển. Bạn nên sử dụng giá trị đặt trước "trung cấp" để phù hợp với một thiết bị di động "thông thường" trên web. Nếu bạn biết rằng nhiều người dùng của mình có thiết bị thậm chí còn chậm hơn hoặc vấn đề về hiệu suất chỉ thường xảy ra với những người dùng đó, thì tuỳ chọn "cấp thấp" phải đủ chậm để chụp được cả thiết bị cấp thấp.
Cuối cùng, nếu cho rằng quá trình hiệu chỉnh có vấn đề hoặc máy tính cục bộ của bạn đã thay đổi theo cách nào đó, bạn luôn có thể hiệu chỉnh lại thông qua trình đơn thả xuống về tính năng điều tiết hoặc trong phần cài đặt. Thao tác này sẽ chạy lại phép đo điểm chuẩn và cập nhật các chế độ cài đặt trước.
Cách hoạt động của tính năng điều tiết CPU trong DevTools
Nếu bạn từng tò mò về cách hoạt động của tính năng điều tiết CPU trong DevTools, thì ý tưởng này tương đối đơn giản. Khi bạn bật tính năng điều tiết cho một thẻ, Chrome sẽ chạy một luồng điều tiết riêng gián đoạn và tạm ngưng luồng chính của thẻ đó trong các đợt ngắn thường xuyên. Mục tiêu là tạm ngưng luồng chính đủ lâu để thời lượng của bất kỳ tác vụ nào tăng lên theo hệ số điều tiết.
Ví dụ: ở mức điều tiết CPU 4 lần, luồng chính sẽ bị tạm ngưng khoảng 75% thời gian, khiến mọi tác vụ trên luồng chính mất gấp 4 lần thời gian để hoàn tất.
Lợi ích của phương pháp này là hầu hết các phần còn lại của Chrome đều có thể thấy được; không cần mã chuyên biệt để làm chậm JavaScript, bố cục hoặc mỗi loại công việc khác mà trình duyệt cần thực hiện. Tất cả công việc trên luồng chính sẽ mất nhiều thời gian hơn vì chính luồng này chỉ được phép thực thi trong một phần thời gian.
Khi tính năng điều tiết CPU hoạt động như một thiết bị di động thực
Do đó, nhiều loại công việc liên quan đến CPU trên thiết bị di động được mô phỏng tốt bằng cách điều tiết CPU. Ví dụ: nếu một lượt tương tác kích hoạt javascript và bố cục, thì khả năng cao là lượt tương tác đó sẽ thực thi rất giống với cách thực thi trên thiết bị di động.
Hãy xem xét một tác vụ được kích hoạt bằng một lượt nhấp vào nút, chạy JavaScript để thêm các phần tử mới vào DOM, sau đó yêu cầu trình duyệt chạy các phép tính về Kiểu và Bố cục để định vị nội dung mới:
Với chế độ cài đặt trước "thiết bị di động cấp trung" được điều chỉnh cho CPU (3,7 lần trên máy phát triển này), hoạt động tương tác có vẻ rất giống nhau, nhưng thời lượng tăng lên đáng kể, trở thành một tác vụ dài:
Việc kiểm thử cùng một lượt tương tác trên một thiết bị cấp trung thực tế bằng cách gỡ lỗi từ xa sẽ mang lại kết quả tương tự đáng kể, cả về hình dạng và thời lượng của dấu vết tương tác. Vì tác vụ này chủ yếu bị ràng buộc bởi CPU trong luồng chính (thực thi mã JavaScript của trang và mã bố cục và kiểu của Chrome), nên tính năng điều tiết được hiệu chỉnh sẽ tái tạo chính xác hiệu suất thực tế trên thiết bị di động:
Trường hợp bạn vẫn muốn thử nghiệm trên thiết bị di động thực
Mặc dù rất hữu ích, nhưng tính năng điều tiết CPU không thể mô phỏng tất cả các khía cạnh của phần cứng di động. Trên điện thoại, tốc độ ổ đĩa chậm hơn, băng thông bộ nhớ bị hạn chế hơn và tính năng điều tiết nhiệt có thể kích hoạt bất cứ lúc nào để giảm tốc độ thực thi.
Một hạn chế thường gặp về việc điều tiết là liên quan đến công việc nặng về GPU. GPU trên thiết bị di động và máy tính có kiến trúc khác nhau, đồng thời Chrome chạy các thao tác GPU trong một quy trình riêng biệt với luồng chính của trang. Do đó, tính năng điều tiết CPU của DevTools không ảnh hưởng đến quá trình GPU (đây là điều tốt nhất vì điều đó sẽ ảnh hưởng đến khả năng phản hồi của chính DevTools và phần còn lại của trình duyệt).
Việc vẽ, kết hợp và tạo kiểu hiệu ứng phức tạp là những vấn đề hiệu suất thường gặp có vẻ ổn trên máy phát triển nhưng lại chậm bất ngờ trên thiết bị di động. Và có thể khó nhận ra vấn đề khi cố gắng tạo lại vấn đề trên máy phát triển.
Hãy xem xét tương tác giống như trước (nhấp và thêm nhiều phần tử vào DOM), chỉ khác là lần này các phần tử mới được tạo kiểu bằng số lượng bóng hộp và bộ lọc làm mờ quá nhiều GPU.
Hình dạng ban đầu và thời lượng tương tác có vẻ tương tự nhau, nhưng có một lớp phủ luồng chính mới dài ở cuối để thêm các hiệu ứng:
Trên điện thoại thực tế tầm trung, phần luồng chính của hoạt động tương tác trông rất giống với phần được mô phỏng, bao gồm cả lớp phủ bổ sung, nhưng sau đó, một quá trình GPU ngẫu nhiên xuất hiện để thực hiện một lượng lớn công việc trước khi kết quả của hoạt động tương tác có thể xuất hiện trên màn hình:
Công việc của GPU kéo dài thêm 300 mili giây cho hoạt động tương tác và hầu như không tồn tại đối với GPU máy tính xách tay, ngay cả khi bật tính năng điều tiết CPU (luồng chính).
Ngoài ra, có một số trường hợp khác cũng có những hạn chế đáng kể về mô phỏng, chẳng hạn như tải trang có phần phụ thuộc sâu, trong đó có sự tương tác giữa việc điều tiết mạng được mô phỏng, giao tiếp liên quy trình và truy cập vào bộ nhớ đệm của ổ đĩa và bộ nhớ.
Hãy nhớ kiểm thử trên thiết bị di động thực tại một thời điểm nào đó. Và nếu bạn không thể tái tạo vấn đề trong phòng thí nghiệm trên máy tính mà dữ liệu thực tế cho thấy đang ảnh hưởng đến người dùng thiết bị di động, hãy thử gỡ lỗi từ xa bằng một thiết bị thực để xem liệu có sự khác biệt nào mà bạn đang bỏ lỡ hay không.
Các điểm cải tiến khác về gỡ lỗi dựa trên dữ liệu
Gần đây, chúng tôi đã ra mắt một số tính năng mới khác để giúp bạn dễ dàng đưa ra các quyết định và chế độ cài đặt gỡ lỗi dựa trên người dùng thực.
Nếu bạn đã bật dữ liệu thực tế, thì bảng điều khiển Hiệu suất sẽ đưa ra đề xuất về việc điều tiết dựa trên người dùng ở phân vị thứ 75 được đo lường bằng Báo cáo trải nghiệm người dùng trên Chrome (CrUX), đồng thời chế độ xem chỉ số theo thời gian thực sẽ cảnh báo bạn nếu các chỉ số được đo lường cục bộ khác với dữ liệu thực tế. Điều này đã được đề cập chi tiết trong một bài đăng trước đó về việc đưa dữ liệu thực tế về Các chỉ số quan trọng về trang web vào DevTools.
Một điểm mới là thông tin chi tiết về bảng điều khiển Hiệu suất trong thanh bên hiện cũng sẽ cảnh báo bạn nếu các chỉ số được đo lường trong một dấu vết không khớp với trải nghiệm thực tế của người dùng.
Việc bật dữ liệu thực tế tại trang cũng sẽ giúp bạn sử dụng Chỉ số quan trọng chính của trang web ở phân vị thứ 75 để xếp hạng thứ tự hiển thị thông tin chi tiết trong thanh bên. Ví dụ: nếu người dùng của bạn thường có Thời gian hiển thị nội dung lớn nhất (LCP) rất tốt nhưng Lượt tương tác đến nội dung hiển thị tiếp theo (INP) lại kém, thì thông tin chi tiết giúp cải thiện INP sẽ có xu hướng nằm ở đầu danh sách.
Cuối cùng, nếu bạn từng chuyển đổi qua lại giữa nhiều dấu vết hoặc tải dấu vết từ ổ đĩa, thì có thể bạn sẽ khó nhớ chính xác chế độ cài đặt mô phỏng và điều tiết thiết bị di động mà bạn đã sử dụng trong mỗi dấu vết. Trình đơn thả xuống để chọn dấu vết ở đầu bảng điều khiển Hiệu suất hiện hiển thị thông tin mô phỏng cho từng dấu vết.
Dừng, hiệu chỉnh và nghe
Cuối cùng, chúng ta cần đưa ra quyết định gỡ lỗi dựa trên thực tế: bắt đầu bằng dữ liệu thực địa từ báo cáo phân tích và báo cáo người dùng để tìm vấn đề, sau đó tạo lại những trải nghiệm người dùng đó trong phòng thí nghiệm để chẩn đoán. Những tính năng bổ sung mới này trong DevTools sẽ giúp bạn thực hiện quy trình đó dễ dàng hơn một chút.
Tính năng hiệu chỉnh và cảnh báo về việc điều tiết CPU trên các trải nghiệm thực tế và trong phòng thí nghiệm khác nhau giúp giảm sự không chắc chắn về việc bạn có đang đi đúng hướng hay không và cho phép ước tính hiệu suất thực tế nhất quán hơn. Bằng cách loại bỏ việc phỏng đoán khỏi cấu hình và làm nổi bật các điểm khác biệt tiềm ẩn, DevTools giúp bạn tập trung nhiều thời gian hơn vào việc khắc phục các vấn đề về hiệu suất thực tế ảnh hưởng đến người dùng.
Bạn có ý tưởng cải tiến khác hoặc đề xuất về tính năng mới không? Hãy cho chúng tôi biết!