DOM 성능 대폭 향상 - WebKit의 innerHTML이 240% 더 빨라짐

샘 더튼

우리는 일부 일반적인 DOM 작업의 속도가 급격히 증가한 것을 매우 기쁘게 생각합니다. 변경사항은 WebKit 수준에서 이루어졌으며, Safari (JavaScriptCore) 및 Chrome (V8) 모두에서 성능이 향상되었습니다.

Chrome 엔지니어 Kentaro Hara는 WebKit 내에서 7가지 코드를 최적화했습니다. 아래는 JavaScript DOM 액세스 속도가 얼마나 빨라졌는지를 보여주는 결과입니다.

DOM 성능 향상 요약

아래에는 하라로 켄타로가 자신이 만든 패치에 대한 자세한 설명이 나와 있습니다. 이 링크는 테스트 사례가 있는 WebKit 버그이므로 테스트를 직접 해볼 수 있습니다. WebKit r109829와 r111133 간에 변경된 사항이 있습니다. Chrome 17에는 포함되지 않지만 Chrome 19에는 포함됩니다.

div.innerHTML 및 div.outerHTML의 성능을 2.4배 개선 (V8, JavaScriptCore)

WebKit의 이전 동작:

  • 각 태그에 대해 문자열을 만듭니다.
  • 생성된 문자열을 Vector<string>에 추가하여 DOM 트리를 파싱합니다.
  • 파싱이 끝나면 크기가 Vector<string>에 있는 모든 문자열의 합계인 문자열을 할당합니다.
  • Vector<string>의 모든 문자열을 연결하고 innerHTML로 반환합니다.

WebKit의 새로운 동작은 다음과 같습니다. 1. 문자열 1개를 할당합니다(예: S). 1. 각 태그의 문자열을 S에 연결하여 DOM 트리를 점진적으로 파싱합니다. 1. S를 innerHTML로 반환합니다.

요약하면, 패치는 문자열을 많이 생성한 다음 연결하는 대신 문자열을 한 개 만든 다음 점진적으로 문자열을 추가합니다.

Chromium/Mac에서 div.innerText 및 div.outerText의 성능을 4배 개선 (V8/Mac)

패치에서 방금 innerText 생성을 위한 초기 버퍼 크기를 변경했습니다. 초기 버퍼 크기를 2^16에서 2^15로 변경하자 Chromium/Mac 성능이 4배 향상되었습니다. 이 차이는 기본 malloc 시스템에 따라 다릅니다.

JavaScriptCore에서 CSS 속성 액세스 성능 35%개선

CSS 속성 문자열 (예: .fontWeight, .backgroundColor)은 WebKit에서 정수 ID로 변환됩니다. 전환이 많습니다. 패치는 변환이 여러 번 수행되지 않도록 변환 결과를 맵에 캐시합니다 (즉, 속성 문자열 => 정수 ID).

테스트는 어떻게 진행되나요?

속성 액세스 시간을 측정합니다. innerHTML (bugs.webkit.org/show_bug.cgi?id=81214의 성능 테스트)의 경우 테스트는 다음 코드를 실행하는 시간만 측정합니다.

for (var i = 0; i < 1000000; i++)
    document.body.innerHTML;

성능 테스트에서는 HTML 사양에서 복사한 큰 본문을 사용합니다.

마찬가지로 CSS 속성 액세스 테스트는 다음 코드의 시간을 측정합니다.

var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
    spanStyle.invalidFontWeight;
    spanStyle.invalidColor;
    spanStyle.invalidBackgroundColor;
    spanStyle.invalidDisplay;
}

좋은 소식은 Kentaro Hara는 다른 중요한 DOM 속성과 메서드의 성능을 더 많이 개선할 수 있다고 믿습니다.

힘을 내세요!

하라켄님과 다른 팀원 여러분, 축하합니다.