이제 DevTools 시작 속도가 최대 13% 빨라졌습니다. 🎉 (11.2초에서 10초로 단축)
요약: 중복 직렬화를 제거하면 결과를 얻을 수 있습니다.
개요
DevTools가 시작되는 동안 V8 자바스크립트 엔진을 호출해야 합니다.
Chromium에서 DevTools 명령어를 V8 (일반적으로 IPC)으로 전송하는 데 사용하는 메커니즘을 mojo라고 합니다. 제 팀원인 Benedikt Meurer와 Sigurd Schneider는 다른 작업을 수행하는 동안 비효율성을 발견했으며, 이러한 메시지를 주고받는 과정에서 두 가지 중복 단계를 제거하여 프로세스를 개선할 수 있는 아이디어를 내놓았습니다.
mojo 메커니즘의 작동 방식을 알아보겠습니다.
mojo 메커니즘
JS 명령어를 실행하는 mojo 명령어 EvaluateScript가 있습니다. arguments를 포함한 전체 JS 명령어를 eval()일 수 있는 자바스크립트 소스 코드 문자열로 직렬화합니다. 짐작할 수 있듯이 이러한 문자열은 꽤 길고 비용이 많이 들 수 있습니다. V8에서 명령어를 수신한 후에는 이러한 자바스크립트 코드 문자열이 실행되기 전에 역직렬화됩니다. 이러한 모든 메시지 직렬화 및 역직렬화 프로세스에는 상당한 오버헤드가 발생합니다.
Benedikt Meurer는 arguments의 직렬화 및 역직렬화가 꽤 많이 소요되며 전체 "Serialize JS command to JS string" 및 "Deserialize JS string" 단계가 중복되므로 건너뛸 수 있음을 깨달았습니다.
기술 세부정보: RenderFrameHostImpl::ExecuteJavaScript
개선사항
JavaScript 소스 코드 문자열을 생성할 필요 없이 객체 이름, 호출할 메서드, 인수 목록을 직접 전달할 수 있는 또 다른 mojo API 메서드를 도입했습니다. 이렇게 하면 직렬화와 역직렬화를 건너뛰고 JavaScript 코드를 파싱할 필요가 없습니다.
이 최적화를 구현한 방법에 관한 기술적 세부정보는 다음 두 패치를 참고하세요.
- CL 2431864: [devtools] 프런트엔드에서 메시지 전달의 성능 오버헤드 감소
- CL 2442012: [devtools] DevTools에서
ExecuteJavaScriptMethod사용
영향
변경사항의 효과를 측정하기 위해 Google에서는 Chromium 버전 cb971089a058 및 4f213b39d581 (변경 전후)를 비교하여 측정을 진행했습니다.
두 버전 모두 다음 시나리오를 5번 실행했습니다.
chrome://tracing를 사용하여 트레이스 기록- DevTools-on-DevTools 열기
- 기록된
CrRendererMain트레이스를 가져와 V8 관련 측정항목을 비교합니다.
이러한 실험을 기반으로 DevTools는 최적화를 통해 최대 13% 더 빠르게 (11.2초에서 10초로) 실행합니다.
하이라이트, CPU 기간
| 메서드 이름 | 최적화되지 않음 (밀리초) | 최적화됨 (밀리초) | 차이 (밀리초) | 속도 향상 (%) |
| 합계 | 11,213.19 | 9,953.99달러 | -1,259.20달러 | 12.65% |
| v8.run | 499,670원 | 3.61 | -496.06 | 12.65% |
| V8.Execute | 1,654.87 | 1,349,610 | -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를 적게 사용하면 더 빠르게 작동합니다. 🎉
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools 팀에 문의하기
다음 옵션을 사용하여 게시물의 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 모든 것에 대해 논의합니다.
- crbug.com을 통해 제안이나 의견을 제출해 주세요.
- DevTools에서 옵션 더보기
> 도움말 > DevTools 문제 보고를 사용하여 DevTools 문제를 신고합니다. - @ChromeDevTools로 트윗을 보냅니다.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 의견을 남겨주세요.