◆ 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다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...
수백 개의 요소를 효율적으로 관찰하면서 메모리 누수도 방지하는 방법
JSON.parse()가 버거워할 때 살아남는 법