html 렌더링 중 javascript가 실행되면, 브라우저는 html 파싱을 멈추고 자바스크립트를 먼저 실행한다. 이는 javascript가 DOM 조작이나 스타일 변경을 하면 렌더 트리를 재구성해야 하기 때문에 발생한다. 이러한 이유와 목적에 대해서 자세히 살펴보자.
HTML 파싱 중단
- 브라우저는 HTML 문서를 파싱하면서
<script>태그를 만나면 파싱을 중단한다. 이는 브라우저가 HTML 문서를 위에서부터 아래로 순차적으로 파싱하기 때문에 발생한다. - 브라우저는 javascript 코드를 만나면 즉시 그 부분을 해석하고 실행할 준비를 한다.
JavaScript 실행
- 브라우저는 중단된 지점에서부터 javascript 코드를 실행한다. 이 코드는 주로 DOM 조작, 이벤트 핸들링, 스타일 변경과 같은 작업을 수행할 수 있다.
- javascript가 실행되면서 DOM 트리에 변화가 생기면, 브라우저는 새로운 DOM 트리를 만들고, 렌더 트리를 재구성하게 된다. 이는 화면의 레이아웃이나 스타일이 변경될 수 있다는 것을 의미한다.
HTML 파싱 재개
- javascript 코드의 실행이 완료되면 브라우저는 중단된 지점에서 HTML 파싱을 다시 시작한다. 이때까지의 HTML 코드를 계속 파싱하고, DOM 트리를 완성한다.
- 만약 JavaScript가 DOM을 변경하는 코드를 실행한 경우, 새로운 DOM 트리와 함께 파싱이 계속 진행된다.
이와 같은 과정에서 중요한 점은 javascript가 실행되는 동안 화면의 렌더링이 멈추게 되기 때문에, 사용자가 페이지를 볼 때까지 javascript 코드를 최대한 빨리 로드하고 실행해야 한다.
이를 위해 브라우저에서는 <script> 태그의 위치, 비동기적 로딩 (async 속성), 지연 로딩 (defer 속성) 등을 활용하여 최적화할 수 있는 여러 방법을 제공한다. 페이지 성능을 향상시키기 위해서는 이러한 최적화 기법을 적절히 활용하는 것이 중요하다.
<script>의 defer 속성
defer속성은<script>태그에서 사용되는 속성 중 하나로, 스크립트가 비동기적으로 다운로드되지만, 실행은 HTML 문서가 파싱된 후에 이루어지도록 지정한다. 이를 통해 스크립트가 HTML 문서의 파싱을 방해하지 않고 비동기적으로 로딩되면서도 실행 시점을 조절할 수 있다.defer속성을 사용하는 스크립트는 HTML 문서에서 나타나는 순서대로 실행된다. 즉, 여러 개의defer스크립트가 있다면, 그 순서대로 위에서 아래로 실행된다. 예시는 아래와 같다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<!-- 다른 head 요소들... -->
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
</head>
<body>
<!-- 페이지 내용... -->
</body>
</html>- 주의할 점은,
defer속성은 외부 스크립트에만 적용되며, 인라인 스크립트에는 적용되지 않는다. 또한, 모든 브라우저에서 완벽하게 지원되지 않을 수 있으므로 사용 시에는 브라우저 호환성을 확인하는 것이 좋다.
안녕하세요! 26살 프론트엔드 개발자입니다! (2024/03 ~)