DevTools 시작 시간 단축

Maksim Sadym

DevTools 시작 속도가 최대 13% 빨라짐 🎉 (11.2초에서 10초로 단축)

요약: 중복 직렬화를 제거함으로써 얻을 수 있는 결과입니다.

개요

DevTools가 시작되는 동안 V8 JavaScript 엔진을 호출해야 합니다.

Chromium이 DevTools 명령어를 V8 (및 일반적으로 IPC의 경우)으로 전송하는 데 사용하는 메커니즘을 mojo라고 합니다. 팀원인 Benedikt Meurer와 Sigurd Schneider가 또 다른 작업을 하는 과정에서 비효율성을 발견하고, 메시지를 주고받는 과정에서 중복되는 두 단계를 없애 프로세스 개선을 위한 아이디어를 떠올렸습니다.

mojo 메커니즘의 작동 방식을 살펴보겠습니다.

mojo 메커니즘

JS 명령어를 실행하는 mojo 명령어 EvaluateScript가 있습니다. arguments를 포함한 전체 JS 명령어를 eval()일 수 있는 JavaScript 소스 코드 문자열로 직렬화합니다. 상상할 수 있듯이 이러한 문자열은 꽤 길고 비용이 많이 들 수 있습니다. V8이 명령어를 수신하면 이러한 JavaScript 코드 문자열은 실행 전에 역직렬화됩니다. 모든 메시지를 직렬화 및 역직렬화하는 과정에서 상당한 오버헤드가 발생합니다.

Benedikt Meurer는 arguments의 직렬화 및 역직렬화에 비용이 많이 들고 전체 'JS 명령어 직렬화' 및 'JS 문자열 역직렬화' 단계가 중복되고 건너뛸 수 있다는 사실을 깨달았습니다.

기술 세부정보: RenderFrameHostImpl::ExecuteJavaScript

개선 방법

JavaScript 소스 코드의 문자열을 만들 필요 없이 객체 이름, 호출할 메서드, 인수 목록을 직접 전달할 수 있는 또 다른 mojo API 메서드를 도입했습니다. 따라서 직렬화와 역직렬화를 건너뛸 수 있고 JavaScript 코드를 파싱할 필요가 없습니다.

이 최적화를 구현한 방법에 대한 기술적 세부정보는 다음 두 패치를 참조하세요.

1. CL 2431864: [devtools] 프런트엔드에서 메시지 전달의 성능 오버헤드 감소
2. CL 2442012: [devtools] DevTools에서 ExecuteJavaScriptMethod 사용

영향

변경사항의 효과를 측정하기 위해 Chromium 버전 cb971089a058와 4f213b39d581 (변경 전후)을 비교하여 몇 가지 측정을 실행했습니다.

두 버전 모두에서 다음 시나리오를 5회 실행했습니다.

1. chrome://tracing를 사용하여 트레이스 기록
2. DevTools-on-DevTools 열기
3. 기록된 CrRendererMain 트레이스를 가져오고 V8 전용 측정항목을 비교합니다.

이러한 실험을 기반으로 DevTools는 최적화를 통해 약 13% 더 빠르게 (11.2초에서 10초로) 작동합니다.

주요 기능, CPU 기간

전체 추적 측정항목 비교 표

따라서 DevTools가 열리고 CPU 사용량을 줄이면서 더 빠르게 작동합니다. 🎉

미리보기 채널 다운로드

Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용해 보세요. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.

Chrome DevTools 팀에 문의하기

다음 옵션을 사용하여 게시물의 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 사항에 대해 논의하세요.

• crbug.com을 통해 제안이나 의견을 보내주세요.
• DevTools에서 옵션 더보기     > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고하세요.
• @ChromeDevTools에서 트윗하세요.
• DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.