◆ ESSAY
브라우저가 어떻게 스크립트를 스케쥴링 하고 실행하느냐에 따라서 웹페이지 성능에 큰 영향을 미친다. <script defer /> <link rel=preload> 등등 스크립트 로딩에 영향을 미치는 다양한 기술들이 있으며 이러한 기술을 브라우저에서 어떤 순서로 처리하는지 이해하는 것도 중요하다.
<head /> 안에 있는 <script />
<link rel=preload + <script async> 또는 <script type=module async />
<script async />
<script defer />
<body /> 최하단에 있는 <script />
<body /> 최하단에 있는 <script defer />
<link rel=prefetch /> + <script/>
<head /> 안에 있는 <script />중간, 높음
매우높음, 파서 실행을 멈춤
<link rel=preload + <script async> 또는 <script type=module async />중간, 높음
높음, 파서 실행을 방해함
<script async type=module /><canvas /> 에 그려야 하는 것<script async />제일 낮음, 낮음
높음, 파서를 방해함
사용할 때 주의 해야 한다. (https://calendar.perfplanet.com/2016/prefer-defer-over-async/) 요즘 들어 중요하지 않은 스크립트를 로딩 할 때 많이 사용하고 있지만, 로딩 우선순위만 낮을 뿐 실행 우선순위는 높다는 것을 기억해야 한다.
<script defer />제일 낮음, 낮음
매우 낮음, <body /> 최하단에 있는 <script />가 실행된 이후에 실행
<body /> 최하단에 있는 <script />중간, 높음
낮음, 파서의 작업이 끝나기를 기다림
이 방법은 생각만큼 낮은 우선순위로 실행되지 않는다.
<body /> 최하단에 있는 <script defer />가장 낮음, 낮음, 큐의 모든 작업이 끝난 후에 실행됨.
매우 낮음. <body /> 최하단에 있는 <script /> 보다도 낮음.
<link rel=prefetch /> + <script/>작업이 없을 때, 가장낮음
스크립트가 어떻게 작동하느냐에 따라 다름.
다음 페이지 탐색을 위한 중요한 기능을 제공하는 스크립트
분석할 때 마다 한숨이 나오는 그것
## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...
서비스 워커는 사이트와 네트워크 사이에 선 프로그래밍 가능한 프록시다. 어디에 서 있는가, 캐시는 왜 썩는가, 배포했는데 왜 옛 버전이 보이는가, 무엇을 어떤 전략으로 담는가, 그래서 이걸 써야 하는가. 실무에서 마주치는 다섯 개의 질문을 붙잡고, opaque 응답이 104KB에서 6.6MB로 집계되는 실측과 상태 전이의 세부까지 내려간다. 『프런트엔드 성능 최적화 Deep Dive』의 캐시 장에서 못 다한 일반론이다. 서비스 워커 캐싱 딥다이브 시리즈의 첫 편이다.
수백 개의 요소를 효율적으로 관찰하면서 메모리 누수도 방지하는 방법