All Posts
크롬에서 자바스크립트 로딩 순서
브라우저가 어떻게 스크립트를 스케쥴링 하고 실행하느냐에 따라서 웹페이지 성능에 큰 영향을 미친다. <script defer /> <link rel=preload> 등등 스크립트 로딩에 영향을 미치는 다양한 기술들이 있으며 이러한 기술을 브라우저에서 어떤 순서로 처리하는지 이해하는 것도 중요하다.
Table of Contents
<head /> 안에 있는 <script />
로딩 우선 순위
중간, 높음
실행 우선 순위
매우높음, 파서 실행을 멈춤
사용처
- First Meaningful Paint, First Contentful Paint 컨텐츠
- 다른 스크립트 이전에 실행해야 되는 스크립트
예
- 프레임워크 런타임 (정적 렌더링이 아닌 경우)
- 폴리필
- 전체 페이지 DOM 구조에 영향을 미치는 A/B 테스트
<link rel=preload + <script async> 또는 <script type=module async />
로딩 우선 순위
중간, 높음
실행 우선 순위
높음, 파서 실행을 방해함
사용처
- 중요한 컨텐츠를 만드는 스크립트 (First Meaningful Paint)
- 그러나 페이지 상단 (above-the-fold)에는 영향을 미치지 않는 요소
- 동적으로 컨텐츠를 넣기 위해 네트워크 fetch를 실행하는 스크립트
- imports한 요소들이 모두 fetch된 이후 즉시 실행되어야 하는 스크립트는,
<script async type=module />
예
<canvas />에 그려야 하는 것
<script async />
로딩 우선 순위
제일 낮음, 낮음
실행 우선 순위
높음, 파서를 방해함
사용처
사용할 때 주의 해야 한다. (https://calendar.perfplanet.com/2016/prefer-defer-over-async/) 요즘 들어 중요하지 않은 스크립트를 로딩 할 때 많이 사용하고 있지만, 로딩 우선순위만 낮을 뿐 실행 우선순위는 높다는 것을 기억해야 한다.
<script defer />
로딩 우선 순위
제일 낮음, 낮음
실행 우선 순위
매우 낮음, <body /> 최하단에 있는 <script />가 실행된 이후에 실행
사용처
- 중요하지 않은 컨텐츠를 만드는 스크립트
- 페이지 방문자의 50% 이상정도가 사용하는 중요한 상호작용 기능
예
- 광고
- 프레임 워크 런타임 (클라이언트 또는 서버사이드 렌더링)
<body /> 최하단에 있는 <script />
로딩 우선 순위
중간, 높음
실행 우선 순위
낮음, 파서의 작업이 끝나기를 기다림
사용처
이 방법은 생각만큼 낮은 우선순위로 실행되지 않는다.
<body /> 최하단에 있는 <script defer />
로딩 우선 순위
가장 낮음, 낮음, 큐의 모든 작업이 끝난 후에 실행됨.
실행 우선 순위
매우 낮음. <body /> 최하단에 있는 <script /> 보다도 낮음.
사용처
- 사용자들이 가끔 사용하는 상호작용 기능
예
- '연관된 기사들' 같은 컨텐츠 (중요도가 낮은)
- '피드백을 주세요' 같은 기능들 (역시 중요도가 낮은)
<link rel=prefetch /> + <script/>
로딩 우선 순위
작업이 없을 때, 가장낮음
실행 우선 순위
스크립트가 어떻게 작동하느냐에 따라 다름.
사용처
다음 페이지 탐색을 위한 중요한 기능을 제공하는 스크립트
예
- 다음 라우팅을 위한 자바스크립트 번들
마치며
- 브라우저 별로 동작이 통일되어 있지 않으므로 사용할 때 주의를 필요로 한다.
- 크롬에서 스크립트 우선순위를 알아내기 위해서는 네트워크 탭에서 Priority를 보면된다.
