'defer'에 해당되는 글 2건

  1. 2007.10.01 웹사이트 속도를 높이는 방법 3
  2. 2007.06.12 script 속성 중 defer (5)
원문 : http://developer.yahoo.com/performance/rules.html

4. Gzip Component

 Http 요청/응답 시간은 프론트엔드 개발자에 의해 크게 개선될 수 있다.
엔드유저의 네트웍 대역폭이나 인터넷 제공회선망 같은 것은 개발자가 어쩔수 있는 것은 아니다.
하지만, 실제 전송되는 데이타의 양을 줄임으로서 속도를 개선시킬 수는 있다.

Http1.1 에 추가된 해더인 Accept-Encoding 해더를 사용해 압축된 데이타를 전송할 수 있다.

Request 해더에 Accept-Encoding 해더를 붙여 보내면,

Accept-Encoding: gzip, deflate
서버는 나열된 압축방법 중에 하나로 컨텐츠를 엔코딩하고 Response 해더를 통해 클라이언트에 압축방식을 알려준다.

Content-Encoding: gzip
Gzip 이 가장 널리 쓰이는 방식이다.(RFC 1952.) Deflate 는 Gzip 에 비해 비효율적이고 널리 쓰이지도 않는다.

Gzip 은 Response 크기를 약 70프로 정도 줄여준다.(와우..) 그리고 현재 인터넷 트래픽의 90프로 정도가 이 기능을 제공하는 브라우저를 통해 이뤄지고 있다.
압축할때 서버자원이 소모되고 다시 클라이언트에서 압축을 풀때 클라이언트 자원이 소모되지만,
현재 인터넷 환경이 머신의 cpu 비용 보다는 네트웍 비용이 더 많이 든는 상태이므로(앞에서 언급했듯이) 시도해 볼 만한 것인듯 하다.
주의할 점은 이미지처럼 이미 압축된 컨텐츠에 대해서 gzip 처리를 하려고 해서는 안된다. 이미 이미지는 압축된 내용이므로 오히려 크기가 늘어난다. JSON 이나 XML 이 포함된 응답에서는 좋은 성능을 보인다.

본문에서는 아파치 사용시 예가있으므로 , iis6.0 사용시 gzip 사용법은 아래의 링크된 블로그를 참고해 보기 바란다.

IIS 6.0 + ASP.NET 에서 HTTP 압축 사용하기

HOW TO: Enable ASPX Compression in IIS



5: Put Stylesheets at the Top

스타일시트는 해드태그에 넣는 것이 로딩 타임을 줄여준다고 한다. 야후의 테스트 결과다.
해드테그에 모든 스타일시트가 걸려있으면 브라우저는 차례로 엘리먼트들을 그려나가지만,
스타일 시트가 아래에 배치된 경우 브라우저는 엘리먼트를 위에서 순차적으로 그린후 스타일에 따라
다시 그려야 한다. 따라서 브라우저는 마지막 스타일이 로딩되기까지 흰색으로 페이지 렌더링을 멈추고 있다가 스타일이 로드된 후 엘리먼트를 그린다. 파이어 폭스는 멈추지 않고 순차적으로 그린후 스타일시트에 따라 다시 그리는 쪽으로 동작한다고 한다.

브라우저가 해드를 먼저 로딩하고 페이지 엘리먼트를 순차적으로 로드하는 쪽이 UX 상에도 좋다고 한다.

HTML specification  에서도 스타일 시트는 해드 태그에 넣으라고 명시하고 있다.


6: Put Scripts at the Bottom

스크립트의 경우는 반대다. 스트립트는 가능한한 페이지의 하단에 배치해야 한다.(외부 링크로 연결된 스크립트도 마찬가지)

첫번째 이유는 엘리먼트의 순차적인 렌더링을 위해서이고 두번째 이유는 병렬 다운로딩의 극대화이다.

엘리먼트 렌더링의 블록킹을 제거하고 순차적인 렌더링을 위해 스타일시트는 해드태그에 위치해 먼저 로딩되는 것이 좋지만, 왜냐하면 모든 스타일 시트가 로딩되기까지 페이지 렌더링이 블로킹 되기 때문이다.
스크립의 경우는 스크립의 아래에 존재하는 컨텐츠는 순차적인 렌더링이 블로킹된다.
따라서 가능한한 스크립트위로 컨텐츠를 배치시켜야 컨텐츠가 빠르게 표시된다.

또한, HTTP/1.1 specification 에서 한 호스트당 두개이하의 다운로드 커넥션을 권고하고 있다.
즉 한 호스트(hostname)당 동시에 두개의 컨텐츠만 다운로드 하라는 것이다.(대부분 브라우저가 이 규정을 지킨다고 한다.) 이미지 서버를 따로두고 호스트명을 다르게 한다면 보다 좋은 다운로드 속도를 낼 수 있다.
하지만 스크립트를 다운로딩 하는 동안에는 호스트명이 다르다 해도 새로운 다운로드를 시작할 수 없다.(왜 그럴까?)
모든 스크립트를 다 페이지 아래에 배치하지 못하는 경우도 있다. 이에 대한 대안으로 defer 속성을 셋팅하는 것이다. 이 속성은 페이지 렌더링후 스크립트를 처리하라는 표시인데 불행히도  파이어폭스에서는 동작하지 않는다고 한다.

AJAX.net 을 공부할때 생성되는 스크립트가 모두 페이지 하단에 생겨서 짜증냈던 적이 있는데, 다 그럴만한 이유가 있었군.

7: Avoid CSS Expressions

CSS expressions 은 IE 5 부터 제공되는 막강한 기능이데, IE 에서만 가능하고 클라이언트 자원을 너무 낭비한다.(너무 자주 호출된다)
가능하면 자바스크립트를 활용해 필요한 이벤트에서 한번씩만 처리되도록 하는 것이 좋겠다.
신고

댓글을 달아 주세요

script 속성 중 defer

javascript 2007.06.12 08:51 |

출처 : http://www.devpia.com/Maeul/Contents/Detail.aspx?BoardID=8&MAEULNO=5&no=644&page=1

요거 몰랐던거네...

defer 속성값을 defer로 지정하면 브라우저에게 스크립트가 문서 컨텐트를 생성하지 않는 것을 명시해줍니다. 이에 따라, 브라우저는 웹페이지의 나머지 부분을 우선적으로 처리해 화면에 표시하는 것을 끝내고 난 후, 스크립트를 처리 합니다.

<script type="text/javascript" defer="defer" >
.... defer 속성을 지정함으로써 화면표시와는 관련없다는 것을 브라우저에게 알려줌
</script>

이러한 방법을 사용하면 자바스크립트 코드의 분량이 많거나 자바스크립트 라이브러리를 사용하는 경우에는 페이지를 로드할 때 상당한 속도 향상 효과를 볼 수 있습니다.

defer 를 설정하면 onLoad 이벤트에 연결한것 처럼 동작한다는 말인가?
신고

댓글을 달아 주세요

  1. 야생여우 2008.09.17 16:17 신고 Address Modify/Delete Reply

    onLoad 랑 반대라는 얘기 아닐까요.. onload 는 form 이 불려질때 동시에 실행되어야 하는 자바스크립트니까... defer 로 설정하면 form (또는 화면에 표시할 태그들) 이 다 표시된후에 실행된다는 뜻인듯... 동작이 정확히 그렇게 이루어지는지는 테스트까지는 못해봤네요..

    • 무쇠다리 2008.09.18 16:48 신고 Address Modify/Delete

      브라우저는 (특히 IE) 스크립트 태그를 만나면 그 스크립트가 모두 로딩될때까지 화면 렌더링을 멈춘다고 합니다.
      그 스크립트가 화면 구성을 핸들링 할지 모르기 때문이라고 해요, 즉 대용량의 스크립트가 걸려있으면 그게 모두 로딩될때까지 화면의 렌더링이 멈추고 유저는 흰색 화면을 보고 있어야 하죠..그만큼 페이지가 느리다고 느낄것입니다. 반면 defer 처리를 하게 되면 스크립트가 랜더링에 영향을 주지 않는다는 것을 브라우저가 알게 되어 랜더링을 멈추지 않죠, page 의 onload 가 호출되는 타임은 같지만, 후자의 경우 페이지를 먼저 볼수있게 되어 체감속도는 개선되는 효과가 있습니다.

  2. Favicon of http://www.hermesbagsoutletsale.com BlogIcon Hermes Bags 2011.12.03 15:46 신고 Address Modify/Delete Reply

    아이구, 괜 찮 아요 요.아주 재미 있 었 어요.

  3. Favicon of http://www.drebeatsoutletus.com BlogIcon Beats by dr dre 2011.12.03 15:46 신고 Address Modify/Delete Reply

    훌 륭 한 작품 이다.

  4. Favicon of http://www.mosterbeatbydre.com BlogIcon Beats by dr dre 2011.12.03 15:46 신고 Address Modify/Delete Reply

    다른 느낌 을 나 누 는 감사합니다.