HTMLElement.innerText가 가져온 성능 저하 살펴보기

Context

BOJ Extended의 일부 기능을 성능 최적화 하는 중에 생긴 일이다.

확장 프로그램의 특성상, 로드되는 DOM 을 조작하는 일이 많다. 그 중에서 불필요하게 DOM을 조작하느라 속도가 느린 부분이 보여서, 렌더링 단계를 생략할 수 있도록 CSSOM으로 역할을 넘기는 작업을 하고 있었다.

그런데 페이지 로드가 평소보다 심하게 느려져서 확인해보니, 아래와 같은 상황이 발생했다.

[Figure 1.] innerText vs. textContent

해결

무슨 일인지 확인하기 위해서 MDN 문서를 확인했는데, 다음과 같은 문장이 있었다.

innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

말 그대로, 중요한 차이점이었다. display 등의 속성으로 실제 브라우저에 표시되는 부분만 가져오는 innerText는 렌더링을 기다리느라 병목이 생길 수 밖에 없었던 것이다. (자세한 내용은 리플로우를 참고)

textContent는 오히려 innerHTML와 비슷하지만 그것과도 차이가 있다.

[Figure 2.] innerText를 사용하려던 HTML Element

위 스크린샷과 같이 다른 요소 없이 적혀있는 텍스트를 그대로 가져와도 문제가 없었으므로 textContent로 변경했고, [Figure 1.]과 같이 병목을 깔끔하게 해결할 수 있었다.

참고

HTMLElement.innerText - Web API | MDN

Node.textContent - Web API | MDN