Bảng điều khiển Dòng thời gian của Công cụ cho nhà phát triển luôn là điểm dừng đầu tiên tốt nhất trên lộ trình tối ưu hoá hiệu suất. Thông tin tổng quan tập trung này về hoạt động của ứng dụng giúp bạn phân tích thời gian dành cho việc tải, viết tập lệnh, kết xuất và vẽ. Gần đây, chúng tôi đã nâng cấp Dòng thời gian với nhiều khả năng đo lường hơn để bạn có thể xem thông tin chi tiết hơn về hiệu suất của ứng dụng.
Chúng tôi đã thêm các tính năng sau:
- trình phân tích JavaScript tích hợp. (Đã bao gồm biểu đồ hình ngọn lửa!)
- trình xem khung để giúp bạn trực quan hoá các lớp tổng hợp.
- Sơ đồ phân tích tài nguyên để xem thông tin chi tiết về hoạt động tô màu của trình duyệt.
Lưu ý rằng việc sử dụng các tuỳ chọn chụp Paint được mô tả trong bài viết này sẽ làm phát sinh một số hao tổn hiệu suất, vì vậy hãy chỉ bật các tuỳ chọn này khi bạn muốn.
Trình phân tích tài nguyên JavaScript tích hợp
Nếu từng mở bảng điều khiển Hồ sơ, thì có lẽ bạn đã quen thuộc với Trình phân tích CPU JavaScript. Công cụ này đo lường vị trí thời gian thực thi được sử dụng trong các hàm JavaScript của bạn. Khi xem các hồ sơ JavaScript bằng Biểu đồ hình ngọn lửa, bạn có thể trực quan hoá quá trình xử lý JavaScript của mình theo thời gian.
Giờ đây, bạn có thể xem bảng phân tích chi tiết về quá trình thực thi JavaScript của mình trong bảng điều khiển Dòng thời gian. Bằng cách chọn tuỳ chọn ghi lại Trình phân tích tài nguyên JS, bạn có thể xem ngăn xếp lệnh gọi JavaScript trong Dòng thời gian cùng với các sự kiện khác trên trình duyệt. Việc thêm tính năng này vào Dòng thời gian sẽ giúp đơn giản hoá quy trình gỡ lỗi của bạn. Nhưng hơn hết, nó cho phép bạn xem JavaScript theo ngữ cảnh và xác định các phần của mã ảnh hưởng đến thời gian tải trang và hiển thị.
Ngoài trình phân tích tài nguyên JavaScript, chúng tôi cũng đã tích hợp chế độ xem Biểu đồ hình ngọn lửa vào bảng điều khiển Dòng thời gian. Giờ đây, bạn có thể xem hoạt động của ứng dụng dưới dạng thác nước sự kiện kiểu cũ hoặc dưới dạng Biểu đồ hình ngọn lửa. Biểu tượng Biểu đồ hình ngọn lửa cho phép bạn chuyển đổi giữa hai chế độ xem này.
Trình xem khung hình
Nghệ thuật kết hợp lớp là một khía cạnh khác của trình duyệt hầu như đã bị ẩn khỏi các nhà phát triển. Khi được sử dụng một cách thận trọng và thận trọng, các lớp phủ có thể giúp bạn tránh phải vẽ lại tốn kém và tăng hiệu suất đáng kể. Tuy nhiên, thường không phải lúc nào cũng dễ dàng dự đoán cách trình duyệt kết hợp nội dung của bạn. Khi sử dụng tính năng chụp Sơn mới của Dòng thời gian, bạn có thể trực quan hoá các lớp kết hợp tại mỗi khung hình của bản ghi.
Khi bạn chọn một thanh khung màu xám phía trên Chuỗi chính, bảng điều khiển Lớp của thanh đó sẽ cung cấp mô hình trực quan về các lớp tạo ứng dụng của bạn.
Bạn có thể thu phóng, xoay và kéo mô hình lớp để khám phá nội dung của mô hình đó. Khi di chuột qua một lớp, bạn sẽ thấy vị trí hiện tại của lớp đó trên trang. Khi nhấp chuột phải vào một lớp, bạn có thể chuyển đến nút tương ứng trong bảng điều khiển Phần tử. Các tính năng này cho bạn biết nội dung nào đã được quảng bá trong một lớp. Nếu chọn một lớp, bạn cũng có thể xem lý do khiến lớp đó được quảng bá trong hàng có nhãn Lý do tổng hợp.
Trình phân tích tài nguyên vẽ
Cuối cùng nhưng không kém phần quan trọng, chúng tôi đã thêm trình phân tích sơn để giúp bạn xác định hiện tượng giật do sơn tốn kém. Tính năng này làm phong phú Dòng thời gian bằng cách cung cấp thêm thông tin chi tiết về công việc mà Chrome thực hiện trong các sự kiện hiển thị.
Đối với người mới bắt đầu, giờ đây, bạn có thể dễ dàng xác định nội dung hình ảnh tương ứng với mỗi sự kiện vẽ. Khi bạn chọn một sự kiện sơn màu xanh lục trong Dòng thời gian, ngăn Chi tiết sẽ hiển thị cho bạn bản xem trước của các pixel thực tế đã được vẽ.
Nếu bạn thực sự muốn tìm hiểu chi tiết, hãy chuyển sang ngăn Paint Profiler (Trình phân tích tài nguyên tranh). Trình phân tích tài nguyên này cho bạn thấy các lệnh vẽ chính xác mà trình duyệt đã thực thi cho lớp vẽ đã chọn. Để kết nối các lệnh gốc này với nội dung thực tế trong ứng dụng, bạn có thể nhấp chuột phải vào một lệnh gọi draw* rồi chuyển thẳng đến nút tương ứng trong bảng điều khiển Phần tử.
Dòng thời gian nhỏ ở đầu ngăn cho phép bạn phát lại quá trình vẽ và biết được những thao tác nào tốn kém tài nguyên để trình duyệt thực hiện. Các thao tác vẽ được mã hoá màu như sau: hồng (hình dạng), xanh dương (bitmap), xanh lục (văn bản) và tím (khác). Chiều cao của thanh cho biết thời lượng cuộc gọi, vì vậy, việc kiểm tra các thanh cao có thể giúp bạn hiểu rõ chi phí cho một lớp sơn cụ thể.
Hồ sơ và lợi nhuận!
Khi nói đến việc tối ưu hoá hiệu suất, kiến thức về trình duyệt có thể cực kỳ mạnh mẽ. Bằng cách cung cấp cho bạn thông tin nâng cao, những nội dung cập nhật này của Dòng thời gian giúp làm rõ mối quan hệ giữa mã của bạn và quá trình hiển thị của Chrome. Hãy thử các lựa chọn mới này trong Dòng thời gian và xem Công cụ của Chrome cho nhà phát triển có thể làm gì để cải thiện quy trình truy xuất hiện tượng giật!