Apple, Google, Microsoft, Mozilla라고 하는 테크놀로지 대기업이 협력해 개발하는 벤치마크 툴 「Speedometer 3.0」이 발표되었다.
Speedometer는 시뮬레이션된 사용자 인터랙션의 타이밍을 측정함으로써, 브라우저 웹 앱의 응답성을 테스트하는 벤치마크 툴. Speedometer의 초기 버전은 2014년 WebKit 팀에서 출시되었으며, 그 이후 사용자와 개발자가 보다 풍부하고 원활한 온라인 경험을 추구하기 위한 도구로 유용하게 사용되었다.
이 Speedometer의 최신 버전인 「Speedometer 3.0」이 발표되었는데, Speedometer 3.0은 Google Chrome의 브라우저 엔진인 Blink를 개발하는 Google, Firefox의 브라우저 엔진인 Gecko를 개발하는 Mozilla, Safari의 브라우저 엔진인 WebKit를 개발하는 Apple이라는 세 가지 주요 브라우저 엔진의 개발자들에 의한 공동 작업으로 탄생했다고...
Speedometer 3.0은 기존 버전과 마찬가지로, 실제 웹페이지에서의 사용자 조작을 시뮬레이션함으로써, 웹앱의 응답성을 측정하도록 설계되어 있고, 퍼포먼스를 측정하는 보다 좋은 방법과 현대의 웹 환경을 반영한 보다 대표적인 테스트 세트가 도입되고 있다고 한다.
Speedometer 3.0은 Blink/V8, Gecko/Spider Monkey, WebKit/JavaScript Core와 같은 각 주요 브라우저 엔진에서 지원되며, 이러한 업계를 초월한 협업은 이번이 처음. 이는 컨센서스를 바탕으로 새로운 거버넌스 모델을 기반으로 개발되었으며, GitHub상의 공유 저장소에서 개발에 기여할 수도 있다.
Speedometer 3.0에서는 여러 개의 새로운 테스트가 추가되었는데, 새로운 벤치마크를 설계하기 위해, 개발진은 브라우저를 최적화하기 위해 중요하다고 생각되는 몇 가지 주요 시나리오와 사용자 인터랙션을 특정하는 것부터 시작했다고 한다.
이번에 추가된 새로운 테스트는, 캔버스와 SVG 차트 렌더링(React Stockcharts, Chart.js, Perf Dashboard, Observable Plot), 코드 편집(Code Mirror), WYSIWYG 편집(TipTap), 뉴스 사이트 읽기(Next.js) 등을 시뮬레이션 하는 것.
또한, TodoMVC 테스트도 개선되었으며, HTTP 아카이브의 데이터를 기반으로 가장 일반적인 프레임워크의 가장 일반적인 버전에 적응하도록 코드가 업데이트되었는데, 이번에 업데이트된 프레임워크와 라이브러리는 다음과 같다.
. Angular
. Backbone
. jQuery
. Lit
. Preact
. React
. React＋Redux
. Svelte
. Vue
. ES5와 ES6를 대상으로 한 Vanilla Java Script 구현 및 웹 컴포넌트 버전
또한, 이러한 테스트의 보다 복잡한 버전도 도입되고 있는데, 인기 있는 웹 앱 페이지의 무게와 구조를 보다 엄밀하게 에뮬레이트하는 많은 복잡한 CSS 규칙을 갖춘 더 큰 DOM 트리에 내장되어 있다.
이들을 조합함으로써 브라우저 엔진의 보다 광범위하고 대표적인 단면이 실행되고, 웹상의 사용자 경험을 향상시키기 위해, 자바스크립트, 레이아웃, CSS, 그래픽스, DOM API를 최적화하는 새로운 기회가 제공된다.
게다가, Speedometer 3.0의 테스트러너 자체가 개선되어, 페인트나 비동기 작업 등 사용자의 액션에 따라 브라우저가 수행하는 작업을 더 많이 측정할 수 있게 되었다. Speedometer 2.0은, 테스트 스크립트를 동기적으로 실행하는 시간을 "동기" 시간으로 측정하고, 0초 타이머가 부팅되기 전 추가 작업을 "비동기" 시간으로 측정하고 있었는데...단, 이것은 웹 페이지 렌더링을 갱신하기 위해 브라우저 엔진이 수행해야 하는 일부 작업을 잃게 된다고 한다.
Speedometer 3.0에서는, 지금까지 누락된 렌더링 작업을 측정할 수 있게 되어, 현실 세계의 콘텐츠를 최적화할 기회를 더욱 늘렸다. 이를 위해 request Animation Frame 콜백 내 테스트 스크립트를 "동기" 시간으로 측정하고, 두 번째 request Animation Frame에서 예약된 0초 타이머를 "비동기" 시간으로 부팅한다. 이 비동기 시간에는, 브라우저 엔진에 의한 페이지 렌더링뿐만 아니라, 테스트 자체의 타이머에 의한 작업도 포함되는 것이 보장되어 있다. 이를 통해 벤치마크의 정확도가 크게 향상되고, 브라우저 엔진이 그동안 부족했던 작업을 최적화하기 때문에, 사용자에게 큰 개선으로 이어진다고 한다.
이외에도, 개발자 도구가 개선되어, 브라우저 엔지니어가 결과를 더 잘 이해하고, 프로파일링하며 테스트를 커스터마이징 할 수 있게 되었다. 복잡한 테스트 케이스의 작성과 유지보수를 용이하게 하기 위해, 테스트 러너 아키텍처는 재설계되어 있고, 또한 많은 코드 품질 향상과 네이티브 Promise, async/await, 클래스, 모듈 등 Speedometer 2.0 출시 시에는 널리 이용 가능하지 않았던 최신 기능으로의 이행도 이루어지고 있다.
또한, Speedometer 3.0의 주요 목표는 현실세계의 웹 환경을 최대한 반영함으로써, 브라우저가 벤치마크 점수를 향상시켰을 때, 사용자가 혜택을 받을 수 있도록 하는 것. 이것에 대해 Speedometer 3.0의 개발팀은 "Speedometer 3.0의 목표는 일반 공개 전에 이미 어느 정도의 성공을 거두고 있습니다 .2023년을 통해 각 주요 브라우저 엔진의 핵심 최적화로, 웹 전체 사용자의 응답성 향상이 이뤄지고 있기 때문입니다"라며, Speedometer의 성과가 이미 나타나고 있음을 강조하고 있다.
