웹 페이지의 로딩 속도를 개선하기 위해 사전에 알아야 할 것이 많았습니다. 네이버 D2에 올라와있는 아주 유익한 브라우저의 동작 설명과 기본적인 웹 사이트 최적화 기법들이 적혀있는 서적을 추천합니다. 아래에 대한 대략의 내용은 알고 있어야 할 것 같습니다.
추천 서적 (웹 사이트 최적화 기법 : http://book.naver.com/bookdb/book_detail.nhn?bid=4587095 )
'웹 사이트 최적화 기법'은 기본적인 웹 사이트 최적화 기법이 소개되고 있습니다. 알아두면 모두 좋은 내용이지만 책이 쓰여진 것은 ie8이 발표되기 이전 입니다. 브라우저의 역사를 함께 생각하면서 보아야만 좋은 책일 것 같습니다. 저는 아무것도 모르고 그대로 받아들였다가 상당히 시간 낭비를 하게 되었습니다. 그래서 브라우저에서 스크립트 로딩에 대해 알게된 점들을 기록 합니다.
동시 다운로드
어떠한 구성요소의 로딩 속도를 개선하기 위해서는 구성요소가 다운로드되고 실행되는 타이밍을 알아야 합니다. 그러기 위해서는 구성요소들이 어떻게 다운로드되고 어떻게 실행되는지를 생각해야 합니다.
페이지 구성요소들 간의 동시 다운로드는 브라우저의 역사에 따라 다릅니다. 제가 추천한 서적에서는 '동시 다운로드를 막는 스크립트'라는 내용이 있습니다. 스크립트 하나가 실행될 때 HTML 파싱을 멈추고 단일 다운로드가 진행되고 스크립트가 실행되고, 다음 스크립트가 같은 과정을 거치는 엄청나게 비효율적이여 보이는 내용입니다. 이 서적이 쓰여진 것이 2008년이라 당시에는 아직 병렬 다운로드가 지원하지 않았던 것 입니다. 현재는 많이 개선되어 이런 비효율적인 과정은 없습니다. 그 이후 브라우져의 변화는 아래 표와 같습니다.
(출처:
표를 보면 과거 일부 브라우져에서는 Script 동시 다운로드를 지원하지 않았고 버전이 올라가면서 Script는 물론 Image까지 동시 다운로드가 가능하며 Iframe의 동시 다운로드는 최신 브라우져에서도 모두 지원되지 않는 것을 확인 할 수 있습니다.
간단한 테스트를 하였습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html > <head> <title></title> <script src="test1.js" type="text/javascript"></script> </head> <body> Test <script src="test2.js" type="text/javascript"></script> <div id="container-main"></div> <script type="text/javascript"> console.log("html: " + Date()); </script> <img src="http://static.news.zumst.com/images/upload/2016/03/05/22/d4ebb52f7f944a5d972bee797be911f0.jpg" /> <script src="test3.js" type="text/javascript"></script> <script src="test4.js" type="text/javascript"></script> </body> </html> | cs |
최신 크롬 브라우저에서 확인하였는데 이미지까지 병렬 다운로드가 되고 스크립트도 순서대로 잘 실행되었습니다. 위에서는 test1~4.js가 순서에 맞게 다운로드가 되어있는데 순서에 맞게 다운로드가 되어있지 않더라도 스크립트 실행순서가 보장되어 실행된다고 합니다. (워낙 간단하게 짜서 재현을 못했습니다.)
동시 다운로드를 이해하고 웹 사이트를 최적화 하는 것은 중요한 것 같습니다. 서비스에 따라서 하위 버전의 브라우저를 지원해야 하는 경우가 많으므로 이러한 내용을 알고 있어야 시도를 할 수 있기도 하고 쓸데없는 수고(?)를 덜 수도 있을 것 같습니다.
'JavaScript' 카테고리의 다른 글
| [Jquery Plugin 소개] form 데이터를 Object로 만들기 (7) | 2017.02.09 |
|---|---|
| JSONP 알고 쓰자 (5) | 2016.12.18 |
댓글