Home

오늘의 기억

[HTML] prefetch


prefetch

먼저 프로그래밍에서 prefetch 라는 것은 다음과 같이 정의할 수 있다.

응용 프로그램 실행시 필요로 하는 파일과 데이터를 미리 메모리에 불러놓아서 부팅 시간 및 프로그램 실행 시간을 빠르게 해주는 것.

이는 윈도우 어플리케이션에서 사용하는 용어를 참조한건데, 보통 이런 용어들은 거의 일맥상통한다.
따라서 HTML 에서도 prefetch 는 비슷한 의미로 사용할 수 있다.


눈치챘을 수도 있지만 HTML에서 prefetch는 사용자가 앞으로 방문하게 될 문서를 미리 브라우저의 유휴시간(idle time)을 이용해 다운을 받아 놓는 것이다.
이후 사용자가 실제 해당 페이지에 접속하게 되면 이미 캐싱된 데이터를 가지고 오게 된다.


prefetch hint

브라우저에서 제공하는 prefetch는 link 태그를 이용해서 설정할 수 있다.

<link ref="prefetch" href="prefetch-target-source">

하지만 의아한게 link 태그라함은 보통 CSS 로딩하는데 많이 쓰인다.
그럼 CSS 파일만 prefetch가 가능한 것인가?

꼭 그렇지만은 않다. link 태그는 사실 CSS 파일 말고도 모든 파일을 다 불러올 수 있다.
CSS 같은 경우 rel 값을 stylesheet로 설정해서 불러오는 것 뿐이지 기타 JavaScript 파일이나, HTML 파일 등등 모든 파일을 link 태그로 불러올 수 있다.
(물론 CSS를 제외한 나머지는 link 태그로 불러와도 별다른 변화가 생기진 않는다.)

따라서 JavaScript 파일을 prefetch 하고 싶은 경우 미리 link 태그로 JavaScript 파일을 prefetching 해놓은 뒤 실제 해당 파일이 필요한 부분에선 그냥 일반적인 <script> 태그로 로드하는걸 작성하면 실제 브라우저가 <script> 태그를 만났을 때 서버에 요청하지 않고, 이미 prefetch로 인해 캐싱된 파일을 불러오기 때문에 좀 더 페이지 이동이 빨라질 수 있다.


SPA

해당 개념은 SPA에서 상황에 따라 종종 쓰인다.
SPA로 페이지별 소스 코드를 Code Splitting을 설정해 놓으면
페이지별 소스코드가 전부 나뉘어져 있기 때문에 페이지 이동할 때마다 서버에 JS 파일을 요청해서 불러오게 된다.
하지만 여기서 prefetch로 맨 첫 페이지에 설정을 해 놓으면 페이지 이동했을 때 캐싱된 Script 파일을 불러오기 때문에 좀 더 페이지 이동이 빠르다는 느낌을 받을 수 있다.


부작용

세 가지 정도의 부작용이 존재한다.

  1. prefetch는 정석대로라면 브라우저의 유휴시간 (idle time)에 로드되는 것이기 때문에 초기 로딩과는 전혀 무관해야한다. 하지만 브라우저 유휴시간이라는 것이 아직 표준으로 채택된 내용이 존재하지 않는다. 따라서 브라우저마다 prefetch로 인해 실제 로딩 시간에 연관이 있을 수도 있다.
  2. 실제 접속하지 않을 페이지의 데이터도 불러올 수 있기 때문에 불필요한 Server Request가 일어날 수 있다.
  3. 다른 페이지의 소스를 미리 가져오기 때문에 보안적인 측면에서 이슈가 될 수도 있다. 예를들어 인증이 필요한 페이지의 소스인데 prefetch로 먼저 가져오면 안되는 것 처럼 말이다.

참고

20200228 Charyum.Park