최근들어 부쩍 Front-End Optimization에 대한 이슈가 부각되고 있다. 웹서비스는 더욱더 많은 기능을 탑재하고 있으며 노출되는 컨텐츠 또한 정적인 컨텐츠에서 동적인 컨텐츠로 변경되고 있다. 이로인해, 전통적인 최적화의 방법중 캐시를 적용하는 방법이 있는데 이또한 효과가 점점 떨어지고 있는것이 사실이다. 또한, 페이지를 이동하며 컨텐츠를 제공하는 전통적인 방법에서 한 페이지에 머무르면서 사용자 요구사항에 부응해야 하며 더 많은 동적인 컨텐츠를 제공하는 방법으로 변화하고 있다. 그런데, 이런 기능이 많아지면 많아질수록 자바스크립트의 양이 많아 지는데 이는 서비스 진입시 페이지가 하얗게 보이는 시간을 더 길게 하는 주요 원인이 된다.
아래의 문제를 알기쉽게 설명해놓은 글이 있어서 소개하려고 한다.
- 자바스크립트로 인해 페이지 랜더링이 왜 지연이 되는가?
- 자바스크립트로 인한 페이지 랜더링의 지연을 최소화 할 수 없는가?
원 블로그는 다음에서 읽을수 있다.
It was just a couple of years ago that Steve Souders introduced the concept of blocking vs. non-blocking into the common lexicon of web developers around the world.
저자가 소개한 블로그를 정리하면 대략 다음과 같다.
자바스크립트로 인해 왜 페이지 랜더링이 지연되는가?
- 자바스크립트는 기본적으로 싱글쓰레드며, 이는 동시에 2가지 동작을 수행할 수 없다는 말이다.
- 아쉽게도 싱글쓰레드는 브라우저 랜더링과 자바스크립트 수행 모두를 포함한다.
브라우저 랜더링과 자바스크립트 수행은 결코 동시에 발생할 수 없다.
- 브라우저 랜더링과 자바스크립트 수행이 결코 동시에 발생할 수 없는 이유는 간단하다. 자바스크립트의 주요 기능중의 하나가 UI를 생성 또는 변경하는 기능인데 이때 서로 의존성이 발생하기 때문이다.
(현재 브라우저 엔진이 현재 서비스 트랜드 대비 약간 보수적으로 만들어졌다는걸 여기서 느끼게 된다.) - 위 3가지 원인으로 일단 <script>태그를 만나게 되면 Http Connection or Download, Parse, Execution 이 끝날때까지 랜더링을 대기하고 있는것이다.
자바스크립트로 인한 페이지 랜더링의 지연을 최소화 할 수 없는가?
- 브라우저가 발전됨에 따라 스크립트 다운로드 성능도 개선되었다.
각 브라우저별로 어떤 개선이 있는지는 아래 스티브 소더스의 블로그를 참고하기 바란다.
http://www.stevesouders.com/blog/2010/02/07/browser-script-loading-roundup/ - 명심해야 할 사실은 스크립트 다운로드에 대한 부분은 병렬화 할수 있으나 수행(Execution)에 대한 부분은 여전히 싱글 쓰레드 형태로 동작한다는것이다.
- 브라우저가 <script> 태그를 만나면 랜더링이 지연되기 때문에 이를 회피하는 방법으로 <script> 태그를 동적으로 삽입하는 방법을 제시하고 있다.
http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/
(상당히 간단한 소스이고 크로스 브라우징 이슈도 모두 해결된 소스니 꼭 한번 적용해보기 바란다.)
위와 같은 방법을 사용하면 적어도 스크립트가 다운로드 되는동안 페이지 랜더링이 지연되는 현상은 막을수 있을 것이다. (저자는 통상적으로 스크립트 다운로드되는 시간이 많은 부분을 포함한다고 말하고 있다.) - HTML5스펙에서 지원하는 스크립트 태그에 사용할수 있는 aync라는 속성도 알아둘 필요가 있다.
- 마지막으로 저자가 한 말이 인상에 남는다.
Try to avoid blocking JavaScript downloads whenever possible.
개발자의 끝나지 않는 고민중의 하나는 아마도 성능과 기능 2마리 토끼를 어떻게 잡을수 있을까? 라고 생각이 든다. 자바스크립트 최적화에 대한 부분은 한동한 식지 않을 것이다. 계속해서 여러가지 방법들이 나오면 원인을 먼저 파악하고 해결책을 정리하는 식으로 글을 써보려고 한다.
반응형