[web network] inlining 이란?

[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>

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

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

</script>

...

</head>

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

</noscript>

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

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

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

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

[web network] Domain Sharding 이란? (0)	2018.05.10
[network] SNI ( Server Name Indication ) (0)	2018.05.09
[Network] 가상 호스트란 ( Virtual Host ) ? (0)	2018.05.08
AMP HTML 어떤 녀석일까? (0)	2018.05.07
[web network] SPDY ( 스피디 ) (0)	2018.05.06

돼지왕 왕돼지 놀이터