Steve Souders씨가 또 다른 통찰력있는 글을 작성했습니다. 초기 탑재량 분산 - 즉, 페이지나 응용프로그램을 처음 로딩하면서 읽어들이는 JavaScript의 분량을 분산하자는 글입니다.

Steve 씨는 우선 브라우저가 페이징을 렌더링하는 것에 JavaScript가 어떻게 영향을 끼치는지 간단히 설명했습니다:

Ajax와 DHTML의 사용이 늘어난다는 것은 오늘날의 웹 페이지들이 이전보다 더 많은 JavaScript를 지니고 있다는 것을 의미합니다. 미국의 상위 10개 웹 사이트들은 평균 252K의 JavaScript를 포함하고 있습니다(표1 참고). JavaScript는 페이지를 느리게 합니다. 브라우저가 JavaScript를 다운로드하거나 실행하려는 순간에는 다른 어떤 병렬 다운로드도 하지 않습니다. 또한, 외부 스크립트 아래쪽은 그 스크립트가 완전히 다운로드되어 실행되기 전까지 렌더링되지 않습니다. 외부 스크립트가 캐시된 경우라 하더라도 실행 시간은 여전히 사용자의 체감시간을 느리게 하고 점진적인 렌더링을 방해합니다.

그는 Alexa 상위 10개 사이트를 뽑아서 호출된 함수를 기준으로 onload 이벤트가 발생하기전에 실행되는 코드가 얼마나 많은지 조사했습니다. 결과는 아래와 같습니다:

표 1 미국 상위 10개 웹사이트의 JavaScript 사용 크기

표 1 미국 상위 10개 웹사이트의 JavaScript 사용 크기

이게 왜 문제인지 이해하기 쉬워졌습니다. 코드를 한 파일에 집어넣는 단순함과 (Steve씨가 반박한) 논란이 될만한 캐시 효과 체감과 같은 여러 요인들이 있습니다. Steve씨는 이렇게 했습니다:

큰 단위의 JavaScript를 나누는 것을 찾는 작업은 쉬운 일이 아니었습니다. Microsoft Research의 프로젝트인 Doloto는 이 작업을 자동화하려고 시도합니다. Doloto는 공개되어있진 않지만, 문서에서 그들 시스템에 대해 잘 설명하고 있습니다. (다가올 Velocity 컨퍼런스에서 Doloto에 대한 개발자의 이야기도 들을 수 있습니다)
Doloto가 취한 접근방식은 필요시에 추가적으로 JavaScript를 다운로드하는 스텁(stub) 함수들을 사용하는 것이었습니다. 이것은 사용자가 추가적인 코드가 필요한 어떤 행동을 했을 때 기다려야하는 결과를 초래할 것입니다. 페이지가 렌더링 된 이후에 바로 추가 JavaScript를 로딩하는 것이 더 빠르게 보일 것입니다.

from Split the Initial Payload; Why are we sending all JavaScript down in one go on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요