다양한 경우의 HTTP 요청 여부 정리

웹페이지를 개발하다 보면 이러저러한 개체에 대해 브라우저가 서버에 HTTP 요청을 정말 할까하고 궁금한 경우가 있다. 예를 들어 display: none; 스타일을 줘서 보이지 않는 이미지도 서버에서 받아올까 하는 궁금증이다.

일전에 이러한 궁금증에 대한 다양한 사례를 퀴즈로 풀어보는 외국 사이트가 떠서 나도 좀 풀어봤다(이 사이트는 프로그램적으로도 참신하게 잘 만든 사이트다. 꼭 크롬에서 보기 바란다). 무지 어려웠다. W3C의 HTML이나 CSS 명세서에 없는 사항인 경우도 있고 브라우저마다 실제 구현도 다른데 그걸 어떻게 많이 맞추겠나.

그래서 문제 풀기보다 정리하는 게 낫겠다 싶어 여기 정리해봤다. 퀴즈 제공자인 Jake님에게 감사하면서 보기로 하자. :)

보이지 않게 처리된 이미지

보이지 않는 이미지는 브라우저가 다운로드를 할까, 안 할까?

• <img> 태그에 지정된 이미지는 무조건 서버로부터 다운로드된다. 예:

  <div style="display: none"><img src="img.png"></div>

• 하위 요소의 백그라운드 스타일로 지정된 이미지는 다운로드되지 않는다.

  <div style="display:none">
  	<div style="background: url(img.png)"></div>
  </div>

• 이미지가 백그라운드에 있는 요소 자체가 보이지 않게 처리된 경우는 FireFox만 다운로드하지 않고 Chrome, Safari, IE는 다운로드한다.

  <div style="background: url(img.png); display: none"></div>`

• 보이지 않는 방식이 visibility: hidden인 경우는 다운로드 된다.

  <div style="background: url(img.png); visibility: hidden"></div>

자바스크립트로 이미지를 로딩하는 경우

자바스크립트(JavaScript)로 이미지를 로딩하는 경우는 브라우저가 다운로드를 할까? 안 할까?

• <img> 태그를 만들어내는 경우는 다운로드된다.

  var img = document.createElement('img');
  img.src = 'img.png';

• 문서에 삽입되기 전의 백그라운드 이미지는 다운로드되지 않는다.

  var div = document.createElement('div');
  div.style.background = 'url(img.png)';

웹브라우저에서 JavaScript는 단일 스레드이므로 이벤트 하나에서 개체를 넣었다가(예: appendChild) 바로 제거하는 경우는(예: removeChild) 결과적으로 문서에 삽입된 적이 없게 되므로 역시 다운로드되지 않는다. 그러나 한 스레드더라도 제거하기 전에 innerHTML을 호출하면 IE는 다운로드하며 offsetWidth를 호출하면 다른 브라우저도 다운로드한다.

<script> 요소

<script> 태그 사용시 어떤 경우에 자바스크립트가 로딩되지 않을까?

• type이나 language가 인식할 수 없는 값으로 지정된 경우 HTML 규격은 다운로드하지 않도록 기술하고 있지만 Firefox, IE는 스크립트를 다운로드한다.

  <script src="script.js" type="foo/bar"></script>

• 자바스크립트로 자바스크립트를 로딩하는 경우 규격에는 문서에 삽입된 경우에만 로딩하는 것으로 기술돼 있지만 IE는 스크립트를 다운로드한다.

  var script = document.createElement('script');
  script.src = 'script.js';

• 규격에는 스크립트가 문서에 삽입되면 동기적으로(synchronously) 스크립트를 준비해야 한다고 돼 있고 IE를 제외한 브라우저는 스크립트가 삽입과 동시에 제거되더라도 스크립트를 로딩한다.

  var script = document.createElement('script');
  script.src = 'script.js';
  document.body.appendChild(script);
  document.body.removeChild(script);

<link> 요소

<link> 태그를 자바스크립트로 삽입하면 어떻게 될까?

• <link> 요소는 문서에 삽입되지 않으면 다운로드되지 않는다.

  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'style.css';

<iframe> 요소

• 빈 <iframe> 태그는 아무 것도 서버에 요청하지 않는다.

  <iframe></iframe>
  <iframe src=""></iframe>

이 이후의 내용은 상당히 특수한 경우라고 생각되므로 더 이상 정리해 싣지는 않겠다. 위의 내용만으로도 많은 공부가 되리라고 생각된다.