퍼포먼스 향상을 위한 Ajax Anti Pattern
기존에 ibm에서 발표한 자료와는 조금 틀립니다.
당연히 알고 있는 부분일 수도 있지만 다시 한번 되새기고 모르시는 분들과 알지만 간과했던 부분일 수 있음을
분명히 인지하시면 좋겠습니다.
Ajax 패턴이라 하기 보다는 웹에서 javascript 로 동적 처리를 할 경우에 꼭 체크해야할 사항입니다.
위의 이미지는 jsProc.htm 파일에서 jsProc1.js 와 jsProc2.js 를 로딩하는 과정에서 발생하는 Cost에 대해서 분석했습니다.
기본적으로 브라우저에서 js파일을 HTTP Request 할때 parallel download 가 이뤄집니다.
즉 1개의 js가 다운로드 되고 나면 그 다음에 오게될 js를 다운로드 하게 됩니다. 다른말로 block download 라고도 하는데요.
위의 이미지는 js 파일에 아무런 내용이 없을때 다운로드 되는 속도입니다.
0 byte의 js 파일을 HTTP Request 하는데에도 약 32ms 가 발생하네요. 작은 거지만
10만 모이더라도 3ms 가 발생합니다. 웹 페이지에서는 치명적입니다.
위의 내용은 jsProc1.js 에 아래의 코드를 수행하도록 처리해 놓은 것입니다.
이는 각 모듈별로 js가 로드되면서 js가 수행하는 일이 있을때 과연 어떻게 브라우저에서는 작용을 하는지 체크하였습니다.
jsProc1.js 안의 명령들이 수행이 완료되고 나면 비로소 나머지 js파일을 로딩합니다.
jsProc1.js 의 download 시간은 313ms 가 소요되었습니다.
아무것도 없을 때에 비해 282ms 더 걸렸습니다.
이는 js 내에서 처리되는 명령들이 수행이 되고나서 다음 js 가 비로소 다운로드 됨을 의미합니다.
좀더 복합적으로 image 라들지 css, flash 등의 component 들 역시 javascript에 의해서 딜레이 되게 됩니다.
그렇기 때문에 javascript 라이브러리들은 HTML document 의 하단 부분에 넣기를 권장합니다.
그리고 js에서 페이지 로딩단계에서 처리해야 될 부분을 최소화 시켜야합니다.
TPerformance v0.0.001 - Rhio Ajax Application 2007
------------------------------------------------------------------------------
시작 : 1197982303953/ms
종료 : 1197982304718/ms
------------------------------------------------------------------------------
수행시간 : 765/ms
기존에 ibm에서 발표한 자료와는 조금 틀립니다.
당연히 알고 있는 부분일 수도 있지만 다시 한번 되새기고 모르시는 분들과 알지만 간과했던 부분일 수 있음을
분명히 인지하시면 좋겠습니다.
Ajax 패턴이라 하기 보다는 웹에서 javascript 로 동적 처리를 할 경우에 꼭 체크해야할 사항입니다.
위의 이미지는 jsProc.htm 파일에서 jsProc1.js 와 jsProc2.js 를 로딩하는 과정에서 발생하는 Cost에 대해서 분석했습니다.
기본적으로 브라우저에서 js파일을 HTTP Request 할때 parallel download 가 이뤄집니다.
즉 1개의 js가 다운로드 되고 나면 그 다음에 오게될 js를 다운로드 하게 됩니다. 다른말로 block download 라고도 하는데요.
위의 이미지는 js 파일에 아무런 내용이 없을때 다운로드 되는 속도입니다.
0 byte의 js 파일을 HTTP Request 하는데에도 약 32ms 가 발생하네요. 작은 거지만
10만 모이더라도 3ms 가 발생합니다. 웹 페이지에서는 치명적입니다.
위의 내용은 jsProc1.js 에 아래의 코드를 수행하도록 처리해 놓은 것입니다.
이는 각 모듈별로 js가 로드되면서 js가 수행하는 일이 있을때 과연 어떻게 브라우저에서는 작용을 하는지 체크하였습니다.
jsProc1.js 안의 명령들이 수행이 완료되고 나면 비로소 나머지 js파일을 로딩합니다.
jsProc1.js 의 download 시간은 313ms 가 소요되었습니다.
아무것도 없을 때에 비해 282ms 더 걸렸습니다.
이는 js 내에서 처리되는 명령들이 수행이 되고나서 다음 js 가 비로소 다운로드 됨을 의미합니다.
좀더 복합적으로 image 라들지 css, flash 등의 component 들 역시 javascript에 의해서 딜레이 되게 됩니다.
그렇기 때문에 javascript 라이브러리들은 HTML document 의 하단 부분에 넣기를 권장합니다.
그리고 js에서 페이지 로딩단계에서 처리해야 될 부분을 최소화 시켜야합니다.
TPerformance v0.0.001 - Rhio Ajax Application 2007
------------------------------------------------------------------------------
시작 : 1197982303953/ms
종료 : 1197982304718/ms
------------------------------------------------------------------------------
수행시간 : 765/ms
'JavaScript' 카테고리의 다른 글
| Javascript 패키지 개발을 위한 base2.Packages (0) | 2007/12/25 |
|---|---|
| javascript singleton(자바스크립트 싱글 패턴) story (0) | 2007/12/24 |
| Ajax Anti Pattern! 퍼포먼스 향상 (2) | 2007/12/18 |
| DOM innerHTML 이 갖는 문제점?!! (2) | 2007/12/15 |
| Javascript 클래스 인스턴스 - OOP 다지기 (0) | 2007/12/09 |
| Javascript Compress and Minify Skill - 1 (2) | 2007/11/27 |
Prev
Rss Feed