프리패치 게시판으로 이동하기 ```<!-- 프리패칭: ->다음 페이지에서 필요한것을 미리 받아옴. .-->
프리패치, 프리로드, 레이지로드
프리패칭은 다음 페이지의 것을 미리 받아오는 것이라고 할 수 있다.
<!DOCTYPE html> <html lang="ko"> <head> <title>프리로드</title> <!-- 다운로드는 위에서부터 6개씩 받음 --> <!-- 이미지 미리받기 rel=프리로드, as무엇을? image를 --> <!-- 프리패치? => 다음 페이지를 위한것. 따라서 다른것먼저 다 하고 마지막에 실행됨. 여기서 프리페치하면 이미지까지 다 나오고 한번 더 그림-->
<!-- 1. 프리로드란? 한 번에 6개씩 받아오므로 body태그의 이미지는 가장 마지막에 다운로드 -->
<!-- 눈에 보이는 이미지를 먼저 다운로드 받아 보여주고, 클릭하면 실행되는 JS는 나중에 받아오기.(next에서 추구하는것과 같음.) -->
<!-- 2. 만약 여기서 프리패치를 한다면 다음을 위해 받는 것이므로 마지막에 받는다. (img태그로 1번 받고, prefetch로 1번 총 2번 받음.)-->
<!-- Disable cache체크하고 테스트 -->
<!-- 전체 모든 파일 총 다운로드 시간은 더 짧아짐 -->
<link rel="preload" as="image" href="./Fog.jpg" />
<link rel="stylesheet" href="./index.css" />
<script src="./index1.js"></script>
<script src="./index2.js"></script>
<script src="./index3.js"></script>
<script src="./index4.js"></script>
<script src="./index5.js"></script>
<script src="./index6.js"></script>
>
```
브라우저에서 페이지가 그려지는 과정에서먼저 html코드를 받아오고 위에서부터 받아오는것을 알 수 잇는데, 이때 다운로드는 위에서부터 6개씩 받는 다.
미리 받는다는점에서는 프리로드와 프리패치가 같은 개념이다.
그러나 프리패치는 다음 페이지의 것을 받아오는것이기에 이번페이지것을 다 받고 나서야 실행되는 부분이다.
프리로드는 이번페이지의 것을 그려지기전에 미리 받는것으로 한번에 6개씩 받아오는 순서중에서 rel="preload" 부분이 먼저 다운받아진다.
그다음 이미지가 그려지는 때에는 빠르게 불러와지는것이다.
정리: 다음 페이지를 빠르게 보여주기위해 사용하는것이 prefeth.
용량이 큰 이미지를 미리 다운 받을때 사용하는것은 preload인데
접속한 페이지에서 다운을 받기 시작하여 사진이 쓰일 페이지에서도 같은 이미지 주소라면 해당 이미지를 빠르게 볼 수 있다.
약간 이해가 안되는 개념이다. 분명 다음페이지것을 미리 받아오는것이 프리 패치인데, 현페이지에서 다운받아서 넘어가는 페이지에서는 빠르게 불러오는 이것을 왜 프리로드라고 하는지 모르겠다..
헷갈리는 개념인듯.....ㅜ
LazyLoad
한번에 이미지를 다 보여주지 않고, 스크롤 내릴때 받아오는것이다.
이렇게되면 다 받아와지지 않아도 그려지고 따라서 기다리지 않아도된다.(미리 받아와지는것보다는 느리지만 다른 컨텐츠를 볼 수 있기에 사용자의 불편함도 적다.)
