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

Maksim Sadym
Maksim Sadym

Khởi động Công cụ cho nhà phát triển giờ đây nhanh hơn ~13% 🎉 (từ 11,2 giây xuống còn 10 giây)

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

Tổng quan

Trong khi Công cụ cho nhà phát triển đang khởi động, nó 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 trong Công cụ cho nhà phát triển đến V8 (và cho IPC nói chung) được gọi là mojo. Các thành viên trong nhóm của tôi là Benedikt MeurerSigurd Schneider phát hiện ra sự thiếu hiệu quả trong khi làm một nhiệm vụ khác, nên đã tìm ra ý tưởng để cải thiện quy trình này bằng cách loại bỏ hai bước dư thừa trong cách gửi và nhận những thông báo này.

Hãy để chúng ta tìm hiểu kỹ hơn về cách hoạt động của cơ chế mojo!

Các cơ chế mojo

Cơ chế nhạc mojo

Có một lệnh mojo EvaluateScript chạy lệnh JS. Công cụ 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ể 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 giải trình tự trước khi chạy. Quá trình chuyển đổi tuần tự và giải trình tự cho từng thông báo sẽ gây ra chi phí đáng kể.

Benedikt Meurer nhận ra rằng việc chuyển đổi tuần tự và giải tuần tự arguments là khá tốn kém, và toàn bộ các bước "Chuyển đổi tuần tự JS sang chuỗi JS""Giải tuần tự JS chuỗi" là dư thừa và có thể bỏ qua.

Chi tiết kỹ thuật: RenderFrameHostImpl::ExecuteJavaScript

Những điểm chúng tôi đã cải thiện

Cơ chế được cải tiến

Chúng tôi đã giới thiệu một phương thức API mojo khác cho phép chúng tôi truyền trực tiếp tên đối tượng, phương thức được gọi và danh sách các đố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 việc chuyển đổi tuần tự và huỷ chuyển đổi tuần tự và không cần phải phân tích cú pháp mã JavaScript.

Để biết chi tiết 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 mức hao tổn hiệu suất của việc gửi thư trong giao diện người dùng
  2. CL 2442012: [devtools] Sử dụng ExecuteJavaScriptMethod trong Công cụ cho nhà phát triển

Mức độ tác động

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

Đối với cả hai bản sửa đổi, chúng tôi đã chạy trường hợp sau 5 lần:

  1. Ghi lại dấu vết bằng chrome://tracing
  2. Mở Công cụ cho nhà phát triển trên nhà phát triển
  3. Xem dấu vết CrRendererMain đã ghi lại và so sánh các chỉ số dành riêng cho phiên bản 8.

Dựa trên các thử nghiệm này, Công cụ cho nhà phát triển mở nhanh hơn khoảng 13% (từ 11,2 giây xuống còn 10 giây) với 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á (mili giây) Chênh lệch (mili giây) 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 CPU tải trong 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 đó, Công cụ cho nhà phát triển sẽ mở và hoạt động nhanh hơn với mức sử dụng CPU ít 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. Những kênh xem trước này cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử API nền tảng web tiên tiến và tìm ra các sự cố trên trang web của bạn trước khi người dùng làm việc đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

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

  • Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
  • Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng mục Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Để lại nhận xét về Video trên YouTube của chúng tôi về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc mẹo Công cụ cho nhà phát triển.