CRP

압축

캐싱

html을 불러오고(get) css를 모두 불어와야 브라우저는 페이지를랜더할 수 있다.이유는 Render Tree를 만들기 위해서는 DOM과 CSSOM이 모두 필요하기 때문이다. 이때문에 CSS는 랜더링에 꼭 필요하지만 동시에 방해가 되는 요소중 하나다.

Unblocking CSS

미디어쿼리는 viewport나 특정한 상황이나 기기에 따라 다른 스타일을 적용해줄수 있다. 만약 한개의 파일에 모든상황에대한 미디어 쿼리를 넣는다면 해당상황이 아닌경우에도 긴 css코드를 불러와야한다. 이것은 랜더링을 오래걸리게 하는 요소중 하나다. 따라서 미디어쿼리를 이용할때 하나의 파일을 만드는것보다 여러개의 파일로 나누는것이 더 좋을때도 있다.

/*style.css*/
body { font-size: 16px; }

@media screen and (orientation: landscape){
    .menu { float:right }
}

/*style-print.css*/
@media print{
    body { font-size: 12px; }
}

link태그에 media속성을 추가해 print로 적용해두면 인쇄시에만 css가 적용되기 때문에 평소에는 랜더링을 막지 않는다. 브라우저는 여전히 두 파일을 모두 다운받아야 하지만 style-print.css파일은 랜더링를 막지 않는다.(물론 파일을 두개 다운받아야하기때문에 GET이 한번더 늘어 시간이 더걸릴수있다. 조삼모사)

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-print.css" media="print">

javascript

브라우저는 js를 만나면 문서파싱을 멈춘다. 왜냐하면 js가 DOM과 CSSOM모두에 영향을 줄수 있기 떄문이다. 아래코드에서는 DOM생성중에 `script`태그를 만나게되고 document에 with javascript를 입력한후 종료된다. 이후 다시 DOM생성을 재한다. 결과적으로 Awesome page with javascript is awesome 라는 문장을 볼수 있다.

<p>
    Awesome page
    <script>
        document.write(" with javascript ");
    </script>
    is awesome
</p>

만약 위와같이 짧은 코드가 아니라 오래걸리는 코드일경우 js가 모두 실행될때까지 브라우저는 DOM생성을 멈추게된다. 추가로 외부에서 js를 불러오는경우는 파일을 다운받는시간까지 더해져 더욱 문제가 될 수 있다.

해결방안

onload

브라우저는 로딩을 끝냈을때 onload이벤트를 발생시킨다. 이떄 js를 실행하게 한다.(참고)

async

이 속성은 파서를 막지 않아 script를 만났을때 브라우저의 랜더링을 방해하지 않는다.. 브라우저는 스트립트 다운로드와 파싱을 동시에 진행한다. 그리고 다운로드가 완료되면 최대한 빨리 실행한다.(물론 실행되는동안 파싱은또 멈추긴한다.) 인라인 스크립트는 async를 사용할 수 없다.

defer

async script는 window의 load event 전 내려받는 즉시 바로 실행되는 데 반해 defer script는 문서의 parsing 작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행된다.

results matching ""

    No results matching ""