Bảng điều khiển tiến trình 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 tải, viết tập lệnh, kết xuất và tô màu. Gần đây, chúng tôi đã nâng cấp Dòng thời gian để bổ sung khả năng đo lường để bạn có thể xem thông tin chuyên sâu 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.
- trình phân tích màu vẽ để xem chi tiết hoạt động vẽ của trình duyệt.
Xin lưu ý rằng việc sử dụng các tuỳ chọn chụp Paint (Vẽ) được mô tả trong bài viết này sẽ làm phát sinh một số chi phí hiệu suất. Vì vậy, bạn chỉ nên lật chúng khi cần.
Trình phân tích tài nguyên JavaScript tích hợp
Nếu đã từng khám phá bảng điều khiển Profiles (Hồ sơ), bạn có thể đã 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 dành cho 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ể hình dung được quá trình xử lý JavaScript của mình theo thời gian.
Giờ đây, bạn có thể xem thông tin chi tiết về quá trình thực thi JavaScript 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 các 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 giúp đơn giản hoá quy trình gỡ lỗi. Nhưng hơn thế nữa, tính năng này cho phép bạn xem JavaScript theo ngữ cảnh và xác định các phần của mã có ảnh hưởng đến thời gian tải và hiển thị trang.
Ngoài trình phân tích 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 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
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à cẩn thận, các lớp có thể giúp tránh việc phải vẽ lại tốn kém và giúp tăng hiệu suất đáng kể. Nhưng việc dự đoán cách trình duyệt sẽ tổng hợp nội dung của bạn thường không rõ ràng. Khi sử dụng tuỳ chọn chụp Paint mới của Dòng thời gian, bạn có thể trực quan hoá các lớp tổng hợp ở mỗi khung hình của bản ghi.
Khi bạn chọn thanh khung màu xám phía trên Luồng chính, bảng điều khiển Lớp của thanh này sẽ cung cấp mô hình trực quan của các lớp cấu thành ứng dụng.
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 đó. Di chuột qua một lớp sẽ cho thấy vị trí hiện tại của lớp đó trên trang. Nhấp chuột phải vào một lớp sẽ cho phép bạn chuyển đến nút tương ứng trong bảng điều khiển Elements (Phần tử). Những tính năng này cho bạn biết những gì đã được quảng bá lên 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 kết 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 màu sơn để giúp bạn xác định hiện tượng giật do các màu sơn đắt tiền. Tính năng này làm phong phú Dòng thời gian với nhiều thông tin chi tiết hơn 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 từng 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ác pixel thực tế đã được vẽ.
Nếu bạn thực sự muốn tìm hiểu sâu hơn, hãy chuyển sang ngăn Paint Profiler (Trình phân tích tài nguyên). 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 điểm 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 lệnh gọi draw* rồi chuyển thẳng đến nút tương ứng trong bảng điều khiển Elements (Phần tử).
Tiến trình nhỏ trên đầu ngăn cho phép bạn phát lại quy trình vẽ và biết những thao tác nào tốn kém để trình duyệt thực hiện. Các thao tác vẽ được mã hoá bằng màu như sau: hồng (hình dạng), xanh dương (bản đồ bit), xanh lục (văn bản) và tím (khác). Chiều cao 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 biết được chi phí của một nội dung vẽ cụ thể như thế nào.
Hồ sơ và lợi nhuận!
Khi nói đến tối ưu hóa hiệu suất, kiến thức về trình duyệt có thể vô cùng hữu ích. Bằng cách giúp bạn xem trước, những nội dung cập nhật này về Dòng thời gian sẽ giúp làm rõ mối quan hệ giữa mã của bạn và các quá trình hiển thị của Chrome. Hãy dùng thử những 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 tìm hiện tượng giật!