본문 바로가기
프로그래밍 놀이터/Web

[web network] inlining 이란?

by 돼지왕왕돼지 2018. 5. 11.

[web network] inlining 이란?


-

웹 사이트에 접속하면 browser 는 먼저 HTML 을 다운받는다.

그리고 HTML 을 순차적으로 읽어가며, image, js, css 등을 다운받는다.


이 때 css, js 등의 파일을 전체를 다운받을 경우 느린 인터넷 환경에서는 overhead 가 될 수 있기 때문에, ( 물론 최초 loading 이후에는 cache 를 사용할 테지만.. )

자주 쓰이는 코드나, 빨리 load 되어야 하는 코드는 HTML 안에 내용을 넣을 수 있다.


이것이 inline 이다.



-

css 파일을 async 하게 로딩하거나, footer 쪽에서 loading 하므로써 추가적인 성능 향상도 꾀할 수 있다.


<!— load css asyn —>

<head>

<script>

        function loadCSS( href, before, media, callback ){ ... }

        loadCSS( '/path/to/your/full.css' );

</script>

...

</head>



<!— load css at footer if JS is not supported —>

<noscript>

    <link href='/path/to/your/full.css' rel='stylesheet' type='text/css'>

</noscript>



-

Font file 을 stylesheet 에 base64 encoding 으로 inline 하는 것은 피해야 한다.

이 녀석은 font download 하는 동안 웹 페이지가 표시되지 않는 치명적인 performance degradation 을 초래한다.



-

Inline 으로 처리할 경우에는 cache external file 을 사용하는 것보다 cache 를 덜 활용하게 된다.

상황에 따라서 inline 으로 처리하는 것이 전체적인 UX 에 더 좋을 수도 있고, 그렇지 않을 수도 있다.




댓글0