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 hiện nhanh hơn ~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á một chuỗi tuần tự thừa.

Tổng quan

Khi đang khởi động, Công cụ cho nhà phát triể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 lệnh Công cụ cho nhà phát triển đến V8 (và cho IPC nói chung) được gọi là mojo. Đồng đội của tôi là Benedikt MeurerSigurd Schneider đã phát hiện ra sự kém hiệu quả khi làm một nhiệm vụ khác. Họ nảy ra ý tưởng cải tiến quy trình bằng cách loại bỏ 2 bước thừa trong cách gửi và nhận những tin nhắn 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. Thao tác này sẽ 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ể hình dung, những 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 giải tuần tự trước khi chạy. Quá trình chuyển đổi tuần tự và giải tuần tự cho từng tin nhắn riêng lẻ này sẽ tạo ra chi phí đáng kể.

Benedikt Meurer nhận ra rằng quá trình 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 "Serialize JS to JS string" (Chuyển đổi tuần tự lệnh JS thành chuỗi JS) và "Deserialize string JS" (Gỡ lỗi mã hoá chuỗi JS) là không cần thiết và có thể bỏ qua.

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

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

Cơ chế được cải thiện

Chúng tôi đã ra mắt 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 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 tôi bỏ qua quá trình chuyển đổi tuần tự và huỷ chuyển đổi tuần tự cũng như không cần 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 khi gửi thông báo 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 đã tiến hành một số phép đo so sánh các 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 tình huống sau đây 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 công cụ cho nhà phát triển
  3. Lấy dấu vết CrRendererMain đã ghi lại và so sánh các chỉ số dành riêng cho V8.

Dựa trên những 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) 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á (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,2 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 đầy đủ các chỉ số theo dõi

Do đó, Công cụ cho nhà phát triển sẽ mở ra và hoạt động nhanh hơn với mức sử dụng CPU ít hơn. 🎉

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

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. Các kênh xem trước này cho phép bạ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ử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

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

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo vấn đề về 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 bình luận 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 video trên YouTube trong Công cụ cho nhà phát triển.