좀더 안정된 Ajax 개발 Pattern - Dynamic rendering with many HTTP Request
javascript 가 document rendering 에 미치는 영향 과는 다른 부분에서 접근했습니다.

정리하고 있는 문서중의 일부를 적어봅니다.

아래 이미지와 같은 UI를 동적으로 구현하려 할때에 Image를 포함(document component)한 Dynamic Rendering에 의해 발생하는 HTTP Requests 와 관련한 내용입니다.

사용자 삽입 이미지
좌측 이미지와 같이 "HD", "▲", "▼"는 이미지로 구성되어져 있습니다.

"HD" 이미지는 2개 하지만 정적인 페이지를 요청한 것이라면 첫번째 요청한 이미지만 Requst Result가 200(Headers and content returned)이 발생하고 그외의 이미지는 304(Content read from browser cache)가 발생하게 됩니다. Static 페이지의 경우에는 캐시를 사용하게 됩니다.

그렇기 때문에 불필요한 작은 이미지 하나 때문에 HTTP Request 를 발생하지 않습니다.

또한 우측으로 보이는
"▲", "▼" 이미지 역시 "HD" 이미지와 동일합니다.

하지만 동적으로 rendering 하는 방식은 경우(innerHTML을 통하거나, 동적 element를 사용)에 따라 이미지 개수만큼 HTTP Request가 발생합니다.

첨부한 자료는 아래의 시나리오에 의해서 나타난 결과입니다.

시나리오

  1.    createElement 를 통해 수십개의 엘리먼트를 생성합니다.
  2.    CSS에 background : transparent url(‘image url’); 속성을 갖는 className을 생성해 놓는다.
  3.    해당 엘리먼트들에 생성해 놓은 className을 부여합니다.
  4.    생성된 엘리먼트를 appendChild로 document에 rendering 합니다.


신고
Posted by Rhio.kim
퍼포먼스 향상을 위한 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
신고
Posted by Rhio.kim