DevTools 시작 시간 단축

Maksim Sadym
Maksim Sadym
X GitHub

이제 DevTools 시작 속도가 13% 빨라졌습니다🎉 (11.2초에서 10초로).

요약: 중복 직렬화를 삭제하여 결과를 얻습니다.

개요

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

DevTools 시작 프로세스

Chromium이 DevTools 명령어를 V8에 전송하는 데 사용하는 메커니즘 (일반적으로 IPC용)을 mojo라고 합니다. 팀원인 베네디크트 뮐러와 시구르드 슈나이더는 다른 작업을 하는 중에 비효율성을 발견하고 메시지를 주고받는 방식에서 중복된 두 단계를 삭제하여 프로세스를 개선하는 아이디어를 생각해 냈습니다.

mojo 메커니즘의 작동 방식을 자세히 알아보겠습니다.

mojo 메커니즘

Mojo 메커니즘

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

베네디크트 뫼어는 arguments의 직렬화 및 역직렬화가 상당히 비용이 많이 들고 전체 'JS 명령어를 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 내 DevTools 열기
  3. 녹음된 CrRendererMain 트레이스를 가져와 V8 관련 측정항목을 비교합니다.

이러한 실험을 바탕으로 최적화하면 DevTools가 13% 더 빠르게 (11.2초에서 10초로) 열립니다.

하이라이트, CPU 시간

메서드 이름 최적화되지 않음 (ms) 최적화됨 (ms) 차이 (밀리초) 속도 개선 (%)
합계 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%

DevTools 로드 CPU 시간 (밀리초)

전체 추적 측정항목 비교 표

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.