avatar
Published on

크롬에서 자바스크립트 로딩 순서

Author
  • avatar
    Name
    yceffort

브라우저가 어떻게 스크립트를 스케쥴링 하고 실행하느냐에 따라서 웹페이지 성능에 큰 영향을 미친다. <script defer /> <link rel=preload> 등등 스크립트 로딩에 영향을 미치는 다양한 기술들이 있으며 이러한 기술을 브라우저에서 어떤 순서로 처리하는지 이해하는 것도 중요하다.

Table of Contents

<head /> 안에 있는 <script />

로딩 우선 순위

중간, 높음

실행 우선 순위

매우높음, 파서 실행을 멈춤

사용처

  • First Meaningful Paint, First Contentful Paint 컨텐츠
  • 다른 스크립트 이전에 실행해야 되는 스크립트

  • 프레임워크 런타임 (정적 렌더링이 아닌 경우)
  • 폴리필
  • 전체 페이지 DOM 구조에 영향을 미치는 A/B 테스트

로딩 우선 순위

중간, 높음

실행 우선 순위

높음, 파서 실행을 방해함

사용처

  • 중요한 컨텐츠를 만드는 스크립트 (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 /> 보다도 낮음.

사용처

  • 사용자들이 가끔 사용하는 상호작용 기능

  • '연관된 기사들' 같은 컨텐츠 (중요도가 낮은)
  • '피드백을 주세요' 같은 기능들 (역시 중요도가 낮은)

로딩 우선 순위

작업이 없을 때, 가장낮음

실행 우선 순위

스크립트가 어떻게 작동하느냐에 따라 다름.

사용처

다음 페이지 탐색을 위한 중요한 기능을 제공하는 스크립트

  • 다음 라우팅을 위한 자바스크립트 번들

마치며

  • 브라우저 별로 동작이 통일되어 있지 않으므로 사용할 때 주의를 필요로 한다.
  • 크롬에서 스크립트 우선순위를 알아내기 위해서는 네트워크 탭에서 Priority를 보면된다.

priorities

출처: https://addyosmani.com/blog/script-priorities/