자바스크립트 runtime - 해당되는 글 1건
왜 Javascript 를 하나로 합쳐서 배포하는게 더 좋은가?
기분좋은 월요일 아침입니다~ 오늘은 일찍출근해서 하나 포스트하고 업무를 시작하려고 합니다. ㅎㅎ
이번주제는 제목처럼 "왜 자바스크립트 파일을 하나로 합쳐서 배포해야하는가?" 라는 주제로 포스트를
해볼까 합니다. 여러분들은 알고 계신가요? 사실 많은 사람들이 좋다좋다~ 하니까 따라하고는 있지만 정확한 이유는 모르시지는 않은가요?
설령 그렇다 해도 걱정은 하지 마세요. 이제부터 알면 되잖아요 ㅎㅎ

이것을 이야기 하기전에 일단 Http Connection의 갯수부터 알아볼 필요가 있습니다.
왜? Browser가 서버와 통신하는 방법이 Http 이기 때문이죠. 브라우져는 특별한 애드온(activeX와 같은)이
없다면 기본적으로 Http를 사용하여 서버와 통신합니다. 그옛날 HTTP 1.0 일때는 http connection의 갯수가
4개였습니다. 허나 지금의 HTTP 1.1은 2개로 줄었죠. 혹자는 이렇게 말합니다. 줄일거라면 그냥 1개로 하지
2개는 뭐야?라고.. ㅎㅎ 저도 의문이군요.. http connection이 하는역할은 단순합니다. 서버와의 통신라인
갯수를 의미하고 서버로부터 정보를 받는거죠. 쉽게 서버와 클라이언트간의 파이프라인이라고 할까요?
이해되시죠? 좀더 쉽게 한마디로 정의하면 "클라이언트는 동시에 라인(http connection)을 두개이상 사용할 수 없다" 입니다.
이것과 자바스크립트 파일을 합치는거랑 무슨관계냐구요? 다음의 그림을 봅시다.

사용자 삽입 이미지

파이어버그로 js가 로드되는 모습을 덤프한 이미지입니다. 보시다 시피 파일이 여러개일때는 http connection의 갯수와는 상관없이 하나가 로드가 되어야 다른 하나를 로드합니다.왜 이런모습을 보일까요? 그이유는 제가 가장 먼저 포스트한 "Javascript에서의 runtime"부분에 보면 나와있습니다. 바로 브라우져의 자바스크립트 엔진이 <script>단위로 읽고 해석하고 로드하기 때문입니다. 즉 http connection는 의미가 없어지는 부분입니다. 그렇다면 자바스크립트 파일을 제외한 나머지는 어떤 모습일까요?
아래의 이미지를 봐주세요.

사용자 삽입 이미지

거의 동시에 모든파이을 받고 있습니다. 심지어는 파일을 받고있는 동안에도 다른하나의 파일이 받아지는 모습도 볼수있습니다. 첫번째 그림과는 사뭇 다른 모습이지요.

어떻습니까? 왜 자바스크립트의 파일을 하나로 합쳐서 로드해야하는지, 왜 그게더 효과적일 수 있는지 이유를 아시겠습니까? 그렇다고 모든 js 파일을 하나로 합쳐서 로드한다는 것은 상황에 따라서 안좋을 수 있습니다.
상황에 맞게 적절히 배합해서 사용하는게 가장 좋은모습이죠.
여러분들도 누군가가 무엇이 좋다고 한다면 한번쯤은 스스로 테스트를 하셔서 사용하시는게 좋을것 같습니다. 월요일 아침이라 부담이 적은 포스트를 하고 갑니다..ㅎㅎ

----------------------------------------------------------------------------
아래 커멘트에 AD님이 올려주신 내용을 참고하여 포스트를 이어보겠습니다. - 2007.07.22

--AD님의 글
http connection은 여러개가 생성될 수 있습니다.
만약 한 페이지에 html 1개+js 2개가 있다면 connection은 2개만 생성되는게 맞습니다만, html 1개+gif 9개가 있다면 connection은 10개가 생성됩니다.
browser 내부에서는 별도의 파일 다운로드 관련 thread(일의 단위)가 생성되며 따라서 파일은 병렬적으로 다운로드 됩니다. js는 왜 2개만 생성되냐면, 궁극적으로 js parser와 관련된 일이며, js parser가 병렬처리가 가능한 구조로 되어진다면, js파일도 여러개를 동시에 다운로드 받을 수 있게 됩니다.
--

여기서 의문점이 있습니다.
1. html갯수 + 이미지의 갯수 = 커넥션의 갯수
  --> 이미지가 총 100개라면 커넥션의 갯수가 총 101개가 되는 논리입니다만, 정확한 근거가 무엇인지 궁금합니다.

2. browser 내부에서는 별도의 파일 다운로드 관련 thread(일의 단위)가 생성
  --> winInet에 의해 서버당 http connection의 갯수가 제한됩니다.
Microsoft 참조글


오해의 소지가 있는것 같아 파이어버그외에 다른툴로 체크를 하였습니다(파이어버그는 정확한 시간이 나오지 않아 오해의 소지가 있습니다. 이것을 덤프한 제잘못이기도 하지요)

사용자 삽입 이미지
<iwatch 화면>

사용자 삽입 이미지
<firebug 화면>

캡쳐환경은 쿠키 및 임시파일 모두 삭제하고 테스트하였습니다.
보시다시피 파이어버그의 경우 시간의차이가 얼마나지 않을경우 같은 라인에 뿌려주고 있으며, iwatch의 경우는
아주 자세한 초까지 계산해주고 있습니다.

위 그림중에 빨간색으로 사각형체크가 되어있는 부분은 동시에 connection이 이루어진 startTime입니다. 빨간색사각형 체크가 안되어 있는 상단부분은 보시면 아시겠지만 logo.gif가 상당히 큰 파일이므로 커넥션 하나를 물고있으므로 이 logo파일이 로드되기전까지 1개의 커넥션이 계속 돌면서 작은파일들을 처리하다가 logo파일이 다 로드된 시점에서는 커넥션이 다시 2개가 되어 2개씩 받아짐을 확인할 수 있습니다.

위 내용은 ajaxian에서도 소개가 된 내용이며, 원 블로그글은 서버당 http connection의 갯수가 제한적이라 이를 해결해보고자 했던 내용(cname으로 해결)이 주였습니다(ajaxian 소개글 | 원블로그의 글)

위에서도 언급했지만 AD님께 어떠한 근거와 논리로 저러한 내용을 써주셨는지 궁금하며, 근거와 논리가 있으시면 다시한번 글을 남겨주시기 바랍니다.

------- 2007.07.23
AD님이 새로운 글을 트랙백을 통해 알려주셨습니다.
허나 그글을 읽고 아래와 같은 의문점이 드는군요. 물론 제글에 대한 명확한 반박근거도 없습니다.

테스트 url : htttp://www.blankus.net/test.html

1. tcpview를 통해 체크하신것이 전부인지요?
2. 작은 이미지라서 http connection이 순식간이라 그렇게 보인게 아닌가 한다구요?
3. 분명 AD님의 글에 의하면 html+이미지 갯수 = 커넥션 갯수라고 했는데 말을 바꾸셨군요?
4. IE 브라우저가 wininet을 이용하지 않는다구요?
5. FF는 또 다른 커넥션구조를 갖는다구요?
6. 그럼 두 브라우져는 W3C에 규정되어있는 HTTP 1.1에 어긋나게 설계가 되어있으며 표준을 준수하지 않는다는 말이군요?

위에 대한 답변을 제가해볼테니 만약 아니라고 생각하시면 조목조목따져 하나씩 반박해주시기 바랍니다.

1. 브라우저는 인터넷에서 리소스를 다운받을때 activex가 아닌이상 기본적으로 http 프로토콜을 통하여 처리가 됩니다. 말인즉, http connection이 발생하고 그 파이프라인을 통해 정보가 다운되는 것입니다. 그리고 tcpview를 근거로 제시하셨는데, 저또한 그프로그램으로 정보를 추출해본결과 아래와 같습니다.
사용자 삽입 이미지

보시다 시피 ie의 로컬소켓은 2개만 생성되었습니다. 근데 AD님이 포스트한것을 보면 분명 여러개이구요. 단언컨데 분명 Reg값이 2보다 큰값으로 되어있을겁니다. http 1.1규약에 의하면 http connection의 갯수는 분명 서버당 2개로 제한되게 하고 있습니다.다른 브라우저 또한 마찬가지이고요.

2. 작은이미지라서 커넥션이 빨리끊기고하여 2개씩 보일 수 있다구요? 참으로 어리석은 생각입니다.
사용자 삽입 이미지
보시다 시피 IE의 iwatch에서의 그림입니다. 시작되는 시간을 보시죠 처음부분 html이 다받아지고 동시에 두개의 다운로드가 시작되는 2번과 3번을 제외하고 동시에 시작하는 화면이 있나요? 자세히 시간을 비교해보세요... 거의 동시에 시작은되나, 2,3번을 제외하곤 작은 타임의갭이 있습니다.

사용자 삽입 이미지

FF의 firebug입니다. 정확하게 두개씩 다운받고 있는것을 보실수가 있습니다. 설마 저 그래프를 동시에 다운받기시작하여 저런 그래프가 생겼다고 말씀하실분은 없겠죠? 역시 firebug는 시간이 나오지 않아 동시에 시작한것처럼 보이는군요, 그래도 파이프라인이 두개라는건 확실하구요.

3. html+이미지 갯수 = http connection갯수 라는 논리의 근거를 제시해달라고 했더니 트랙백 글에선 말을 바꾸시던데 왜 그랬나요? 실제로 테스트해보니 생각과는 달랐나요? http 1.1의 규약처럼 reg값을 기본으로 변경(2개)하여 테스트해보세요. 그래도 이런 생각을 하게될까요?

4. IE가 wininet을 이용하지 않는다는 근거는 어떤것인가요? 자료를 첨부해주세요.

5.FF가 다른 커넥션구조를 갖는다고 어디에 누가그러던가요? 자료를 첨부해주세요

6. 4번과 같은 맥락인데, http connection의 갯수와 관련 IE가 W3C의 HTTP 1.1의 기준에 미달한다는 자료를 첨부해주세요.


posted by blankus
태그 - , , ,
Tip  |  2007/07/16 09:28
Trackbacks  2415 | Comments  16