Cải thiện thời gian khởi động Công cụ cho nhà phát triển

Maksim Sadym
Maksim Sadym
X GitHub

Giờ đây, thời gian khởi động DevTools nhanh hơn khoảng 13% 🎉 (từ 11,2 giây xuống còn 10 giây)

Tóm tắt: Kết quả đạt được bằng cách xoá quá trình chuyển đổi tuần tự thừa.

Tổng quan

Trong khi khởi động, DevTools cần thực hiện một số lệnh gọi đến công cụ JavaScript V8.

Quy trình khởi động Công cụ cho nhà phát triển

Cơ chế mà Chromium sử dụng để gửi các lệnh DevTools đến V8 (và nói chung là cho IPC) được gọi là mojo. Các đồng đội của tôi là Benedikt Meurer và Sigurd Schneider đã phát hiện thấy một điểm không hiệu quả trong khi làm việc trên một nhiệm vụ khác và đã nghĩ ra một ý tưởng để cải thiện quy trình bằng cách xoá hai bước thừa trong cách gửi và nhận các thông báo này.

Hãy cùng tìm hiểu cách hoạt động của cơ chế mojo!

Cơ chế mojo

Cơ chế mojo

Có một lệnh mojo EvaluateScript chạy lệnh JS. Hàm này chuyển đổi tuần tự toàn bộ lệnh JS, bao gồm cả arguments thành một chuỗi mã nguồn JavaScript có thể là eval(). Như bạn có thể tưởng tượng, các chuỗi này có thể trở nên khá dài và tốn kém. Sau khi V8 nhận được lệnh, các chuỗi mã JavaScript này sẽ được chuyển đổi tuần tự trước khi chạy. Quá trình chuyển đổi tuần tự và chuyển đổi tuần tự cho mỗi thông báo tạo ra mức hao tổn đáng kể.

Benedikt Meurer nhận thấy rằng việc chuyển đổi tuần tự và huỷ chuyển đổi tuần tự của arguments khá tốn kém, đồng thời toàn bộ các bước "Chuyển đổi tuần tự lệnh JS thành chuỗi JS" và "Huỷ chuyển đổi tuần tự chuỗi JS" là thừa và có thể bỏ qua.

Thông tin chi tiết về kỹ thuật: RenderFrameHostImpl::ExecuteJavaScript

Cách chúng tôi cải thiện

Cải thiện cơ chế

Chúng tôi đã giới thiệu một phương thức API mojo khác cho phép truyền trực tiếp tên đối tượng, phương thức cần gọi và danh sách đối số, thay vì phải tạo chuỗi mã nguồn JavaScript. Điều này cho phép chúng ta bỏ qua quá trình chuyển đổi tuần tự và huỷ chuyển đổi tuần tự, đồng thời không cần phân tích cú pháp mã JavaScript.

Để biết thông tin kỹ thuật về cách chúng tôi triển khai tính năng tối ưu hoá này, hãy tham khảo hai bản vá sau:

  1. CL 2431864: [devtools] Giảm hao tổn hiệu suất của việc gửi thông báo ở phần giao diện người dùng
  2. CL 2442012: [devtools] Sử dụng ExecuteJavaScriptMethod trong DevTools

Tác động

Để đo lường hiệu quả của thay đổi này, chúng tôi đã chạy một số phép đo so sánh các bản sửa đổi Chromium cb971089a058 và 4f213b39d581 (trước và sau khi thay đổi).

Đối với cả hai bản sửa đổi, chúng tôi đã chạy kịch bản sau 5 lần:

  1. Ghi lại dấu vết bằng chrome://tracing
  2. Mở DevTools-on-DevTools
  3. Nhận dấu vết CrRendererMain đã ghi và so sánh các chỉ số dành riêng cho V8.

Dựa trên các thử nghiệm này, DevTools mở khoảng 13% nhanh hơn (từ 11,2 giây xuống còn 10 giây) nhờ tính năng tối ưu hoá.

Điểm nổi bật, thời lượng CPU

Tên phương thức Không được tối ưu hoá (mili giây) Đã tối ưu hoá (ms) Sự khác biệt (mili giây) Mức cải thiện tốc độ (%)
Tổng cộng 11.213,19 9.953,99 -1.259,20 12,65%
v8.run 499,67 3,61 -496,06 12,65%
V8.Execute 1.654,87 1.349,61 -305,25 3,07%
v8.callFunction 1.171,84 1.339,77 167,94 -1,69%
v8.compile 133,93 3,56 -130,37 1,31%

Thời gian tải CPU của Công cụ cho nhà phát triển (mili giây)

Bảng so sánh các chỉ số theo dõi đầy đủ

Do đó, DevTools sẽ mở ra và hoạt động nhanh hơn với mức sử dụng CPU thấp hơn. 🎉

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.