나무위키에서는 브라우저를 위처럼 정의하고 있습니다. 우리는 웹 개발하는 사람이므로, 어떻게 브라우저가 동작하고 어떤식으로 브라우저를 제어, 핸들링 할 수 있을지 알 필요가 있습니다.
여러분들이 자주 방문하는 사이트가 있다면 어떤 사이트가 있나요? 그 사이트를 방문하면서 느꼈던 불편함과 아니면 좋았던 경험이 있나요?
요즘은 거의 대부분의 웹 사이트가 빠르게 동작하면서 익숙해져서 장점이 되지 않지만, 반대로 느린 웹 사이트를 만나게 된다면 정말 나쁜 경험으로 다가오게 될 것입니다.
그렇다면, 웹 성능에 영향을 주는 두 가지 문제는 무엇일까요?
- 지연 시간
- 싱글 쓰레드
가 주요한 원인이 될 수 있습니다.
지연시간
지연시간이 길다면 유저는 긴 로딩상태를 마주하게 될 것입니다.
우리는 저 답답한 로딩 애니메이션을 보며 지루한 시간을 보내게 되죠. 이러한 경험은 꼭 필요한 웹 사이트라 해도 재방문을 하고싶어지지 않게 됩니다.
이런 부정적인 경험은 커머스같이 물건을 판매하는 곳에선 실시간으로 매출에 영향을 줄 수 있게 되는 것입니다.
싱글 쓰레드
브라우저의 성능 최적화는 사용자의 원활한 경험을 위해 필수적입니다. 대부분의 브라우저가 싱글 쓰레드로 작동한다는 점에서, 메인 쓰레드의 효율적인 관리가 매우 중요합니다. 이 쓰레드는 모든 작업을 처리하면서도 사용자와의 상호작용에 신속하게 반응해야 합니다.
먼저, 싱글 쓰레드 구조의 특성을 이해하는 것이 필요합니다. 브라우저의 메인 쓰레드는 HTML, CSS, JavaScript 등의 구문 분석, DOM 트리 구축, 스타일 계산, 레이아웃, 페인팅 등의 작업을 담당합니다. 이 과정에서 하나의 작업이 블로킹되면, 전체 페이지의 렌더링 속도가 느려지고 사용자 경험이 저하될 수 있습니다.
이 문제를 해결하기 위해서는 메인 쓰레드의 부담을 줄이는 다양한 전략이 필요합니다. 예를 들어, 비동기적 작업 처리와 최적화된 자원 로딩이 중요한 역할을 합니다. 비동기적으로 스크립트를 로드하고 실행하면 메인 쓰레드가 다른 작업을 동시에 처리할 수 있습니다. 또한, 중요한 스타일과 스크립트를 인라인으로 포함시키고, 덜 중요한 자원은 지연 로딩(lazy loading)하는 방법도 효과적입니다.
제가 이전에 참여한 프로젝트에서, 페이지의 초기 로딩 속도가 느려 사용자 불만이 발생한 적이 있었습니다. 이를 해결하기 위해, 메인 쓰레드의 작업을 분산시키는 방안을 모색했습니다. 우선, CSS와 JavaScript 파일을 최소화하고 압축하여 전송 크기를 줄였습니다. 또한, 비동기적 로딩을 활용해 중요하지 않은 스크립트는 페이지 로딩 후에 실행되도록 했습니다. 이러한 최적화 후, 페이지 로딩 속도가 눈에 띄게 향상되었고, 사용자 만족도도 크게 개선되었던 적이 있습니다.
결론적으로, 브라우저의 싱글 쓰레드 구조를 효율적으로 관리하는 것은 원활한 사용자 경험을 보장하는 핵심입니다. 메인 쓰레드의 부담을 줄이기 위한 다양한 최적화 전략을 적용함으로써, 부드러운 스크롤과 신속한 터치 반응을 제공할 수 있습니다. 이러한 노력은 사용자에게 즉각적인 피드백을 제공하고, 웹사이트의 전체적인 성능을 향상시키는 데 크게 기여할 것입니다.
그럼 이제 본격적으로 브라우저가 동작하는 방식에 대해 알아보고자 합니다.
탐색하기
웹페이지 로딩의 첫 단계는 탐색입니다. 사용자가 주소창에 URL을 입력하거나 링크를 클릭하고, 폼을 제출하는 등의 동작을 통해 요청을 보낼 때마다 이 과정이 시작됩니다. 이 단계에서의 주요 목표는 탐색이 완료되기까지의 시간을 최소화하는 것입니다.
DNS 조회
탐색의 첫 단계는 DNS를 조회하는 일입니다. 이는 웹 페이지의 자언이 어디에 위치하는지 확인하는 과정입니다. 예를 들어, 사용하자 `https://example.com`을 탐색하면 브라우저는 해당 페이지의 IP주소가
93.184.216.34인 서버를 찾아야 합니다. 만약 해당 사이트를 처음 방문하는 경우, 브라우저는 DNS 조회를 요청하여 이름 서버로부터 IP 주소를 받아옵니다. 이 IP 주소는 일정 기간 동안 캐시되어 이후의 요청 속도를 높여줍니다.
DNS 조회는 보통 호스트 이름당 한 번만 수행됩니다. 하지만 웹 페이지에서 여러 호스트 이름을 참조하는 경우, 각 호스트 이름마다 DNS 조회가 필요합니다. 예를 들어, 글꼴, 이미지, 스크립트, 광고 등의 자원이 서로 다른 호스트 이름을 가지고 있다면 각각에 대해 DNS 조회가 이루어져야 합니다.예를 들어, HTML 파일은 example.com에서 로드되고, 이미지 파일은 img.example.com에서, 스크립트 파일은 scripts.example.com에서 로드된다고 가정해보겠습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DNS Lookup Example</title> <script src="https://scripts.example.com/script.js"></script> </head> <body> <h1>DNS Lookup Example</h1> <img src="https://img.example.com/image.jpg" alt="Example Image"> </body> </html>
과정 설명
- 브라우저가
example.com의 HTML 파일을 요청하고 DNS 조회를 수행합니다.
- HTML 파일 내에서
scripts.example.com의 스크립트를 요청하며, 이에 대해 또다시 DNS 조회를 수행합니다.
- HTML 파일 내에서
img.example.com의 이미지를 요청하며, 이 또한 DNS 조회를 수행합니다.
이와 같이, 웹 페이지는 여러 호스트 이름을 참조할 때마다 각각의 DNS 조회를 수행합니다.
이러한 웹 페이지의 DNS조회는 특히 모바일 네트워크 환경에서는 성능 문제가 더 두드러질 수 있습니다. 모바일 환경에서의 DNS 조회는 휴대폰에서 셀 타워로, 셀 타워에서 중앙 전화 회사 컴퓨터로, 그리고 다시 인터넷으로 이어지는 복잡한 과정을 거칩니다. 이 과정에서 상당한 지연시간이 발생할 수 있습니다.
과정 설명
- 사용자가 웹페이지를 요청합니다.
- 휴대폰에서 셀 타워로 요청을 전송합니다.
- 셀 타워에서 중앙 전화 회사 컴퓨터로 요청을 전달합니다.
- 중앙 전화 회사 컴퓨터에서 인터넷으로 요청을 보냅니다.
- 인터넷을 통해 DNS 서버로 요청이 도달합니다.
- DNS 서버가 응답을 전송합니다.
- 응답이 다시 인터넷을 통해 중앙 전화 회사 컴퓨터로 전달됩니다.
- 중앙 전화 회사 컴퓨터에서 셀 타워로 응답을 전달합니다.
- 셀 타워에서 휴대폰으로 응답을 전송합니다.
이 과정은 각 단계마다 지연시간을 발생시킬 수 있습니다.
그렇다면, 어떻게 하면 DNS조회를 최적화할 수 있을까요? DNS Prefetch를 사용하는 방법이 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DNS Prefetch Example</title> <link rel="dns-prefetch" href="//scripts.example.com"> <link rel="dns-prefetch" href="//img.example.com"> </head> <body> <h1>DNS Prefetch Example</h1> <script src="https://scripts.example.com/script.js"></script> <img src="https://img.example.com/image.jpg" alt="Example Image"> </body> </html>
과정 설명
dns-prefetch링크를 사용하여 브라우저가 페이지 로드 전에scripts.example.com과img.example.com에 대한 DNS 조회를 미리 수행합니다.
- 이를 통해 실제로 자원을 요청할 때 DNS 조회로 인한 지연시간을 최소화할 수 있습니다.
TCP 핸드셰이크(TCP Handshake)
DNS 조회를 통해 IP 주소를 확인한 후, 브라우저는 서버와의 연결을 설정하기 위해 TCP 3방향 핸드셰이크를 수행합니다. 이 과정은 브라우저와 웹 서버가 데이터를 전송하기 전에 TCP 소켓 연결을 위한 매개변수를 주고받는 절차입니다. 이 핸드셰이크는
SYN, SYN-ACK, ACK의 3단계로 이루어져 있으며, 두 컴퓨터 간에 3개의 메시지가 교환됩니다.TLS 협상(TLS Negotiation)
보안 연결을 위해서는 추가적인 핸드셰이크가 필요합니다. TLS 협상은 통신 암호화에 사용할 암호를 결정하고, 서버를 확인하며, 실제 데이터 전송 전에 안전한 연결을 설정합니다. 이를 위해 클라이언트와 서버 간에 3번의 왕복이 추가로 필요합니다. 이 과정에는
clienthello, serverhello, certificate, clientkey, finished 등의 단계가 포함됩니다.보안 연결을 설정하는 과정은 페이지 로딩 시간을 증가시키지만, 데이터의 보안을 확보하는 데 매우 중요합니다. TLS를 통해 브라우저와 서버 사이의 데이터가 제3자에 의해 해독되지 않도록 보호됩니다.
초기 요청과 응답
이 모든 과정이 완료된 후, 브라우저는 마침내 HTTP GET 요청을 서버에 보낼 수 있습니다. 서버는 이 요청에 응답하여 HTML 데이터를 브라우저에 전송합니다. 여기까지의 과정을 최적화함으로써 페이지 로딩 속도를 향상시킬 수 있습니다.
결국, 탐색(Navigation)은 웹페이지 로딩의 첫 단계로, 이 과정을 최적화하면 전체적인 웹 성능을 크게 개선할 수 있습니다. DNS 조회, TCP 핸드셰이크, TLS 협상 등의 단계를 최적화하여 사용자에게 더 빠르고 안전한 웹 경험을 제공하는 것이 중요합니다.
구분 분석하기 (Parsing)
브라우저가 웹 페이지를 렌더링할 때 중요한 단계 중 하나는 구문 분석(Parsing)입니다. 이는 브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 변환하는 과정으로, 최종적으로 화면에 페이지를 그리기 위한 기초 작업입니다. 이 과정에서 브라우저는 HTML을 받아들이고, 이를 내부적으로 DOM으로 표현하게 됩니다.
구문 분석의 중요성
브라우저가 첫 번째 데이터 청크를 받으면 즉시 구문 분석을 시작합니다. 이 과정에서 브라우저는 네트워크를 통해 받은 데이터를 DOM(Document Object Model)이나 CSSOM(CSS Object Model)으로 변환합니다. 이 두 모델은 브라우저가 화면에 페이지를 렌더링하는 데 필요한 구조적 정보와 스타일 정보를 제공합니다.
DOM 트리 구축
DOM 트리 구축은 구문 분석의 첫 번째 단계입니다. HTML 문서를 구문 분석하면서, 브라우저는 이를 토큰화하여 DOM 트리를 생성합니다. DOM 트리는 문서의 계층 구조를 반영하며, 각 HTML 요소는 DOM 트리의 노드로 표현됩니다. 예를 들어, 다음과 같은 HTML 코드를 살펴보겠습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is an example paragraph.</p> </body> </html>
이 HTML 코드의 구문 분석 과정에서 브라우저는 다음과 같은 DOM 트리를 생성합니다.
html ├── head │ ├── meta │ └── title └── body ├── h1 └── p
CSSOM 구축
CSSOM 구축은 중요한 렌더링 경로의 두 번째 단계입니다. 브라우저는 CSS 파일을 파싱하여 CSSOM 트리를 만듭니다. CSSOM은 DOM과 비슷하게 트리 구조를 가지며, 각 노드는 CSS 규칙을 나타냅니다. 예를 들어, 다음과 같은 CSS 코드를 살펴보겠습니다.
body { font-family: Arial, sans-serif; } h1 { color: blue; } p { color: green; }
이 CSS 코드의 구문 분석 과정에서 브라우저는 다음과 같은 CSSOM 트리를 생성합니다:
CSSOM ├── body │ └── font-family: Arial, sans-serif ├── h1 │ └── color: blue └── p └── color: green
프리로드 스캐너
브라우저는 DOM 트리를 생성하는 동안 프리로드 스캐너를 사용하여 외부 자원을 미리 요청합니다. 프리로드 스캐너는 사용 가능한 콘텐츠를 분석하고 CSS, JavaScript, 웹 폰트 같은 우선순위가 높은 자원을 요청합니다. 이를 통해 구문 분석기가 자원에 대한 참조를 찾아 요청하기까지 기다리지 않아도 됩니다. 예를 들어, 다음과 같은 HTML 코드를 살펴보겠습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Preload Scanner Example</title> <link rel="stylesheet" href="styles.css"> <script src="script.js" async></script> </head> <body> <h1>Example Page</h1> <img src="image.jpg" alt="Example Image"> </body> </html>
이 코드에서 브라우저는
styles.css와 script.js를 미리 로드하고, image.jpg도 구문 분석 중에 요청합니다. 이를 통해 페이지 로딩 속도를 최적화할 수 있습니다.구문 분석 최적화 방법
- 크리티컬 렌더링 경로 최적화: 첫 번째 14kb 데이터에 중요한 HTML과 CSS를 포함하여 초기 로딩 속도를 높입니다.
- 비동기 로딩 사용: JavaScript 파일에
async또는defer속성을 사용하여 스크립트 로딩이 구문 분석을 막지 않도록 합니다.
- 리소스 최소화 및 압축: HTML, CSS, JavaScript 파일을 최소화하고 압축하여 전송 크기를 줄입니다.
- 캐싱 활용: 브라우저 캐시를 활용하여 자주 사용되는 리소스의 로딩 시간을 단축합니다.
최적화 예제 코드
다음은 위 최적화 방법을 적용한 예제 코드입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Optimized Page</title> <link rel="stylesheet" href="styles.min.css"> <script src="script.js" defer></script> <style> /* Critical CSS */ body { font-family: Arial, sans-serif; } h1 { color: blue; } </style> </head> <body> <h1>Hello, Optimized World!</h1> <p>This page is optimized for performance.</p> <img src="image.jpg" alt="Optimized Image"> </body> </html>
이 예제에서는 중요한 CSS를 인라인으로 포함하고, JavaScript 파일을
defer 속성으로 비동기 로딩하여 구문 분석 중 블로킹을 피했습니다.이와 같은 최적화 방법을 통해 브라우저의 구문 분석 과정을 효율적으로 관리하고, 전체적인 웹 성능을 향상시킬 수 있습니다.
다른 작업들
웹페이지 로딩 과정에서 브라우저는 다양한 작업을 병행하여 처리합니다. 이 작업들은 JavaScript 컴파일부터 접근성 트리 구축까지 다양하며, 각 작업은 웹 성능과 사용자 경험에 중요한 역할을 합니다. 여기서는 이러한 과정들을 자세히 살펴보겠습니다.
JavaScript 컴파일 (JavaScript Compilation)
CSS가 분석되고 CSSOM이 생성되는 동안, 브라우저는 JavaScript 파일을 다운로드합니다. JavaScript는 단순히 다운로드되는 것에 그치지 않고, 해석, 컴파일, 구문 분석 및 실행됩니다. 이 과정에서 브라우저는 JavaScript 코드를 추상 구문 트리(Abstract Syntax Tree, AST)로 변환합니다.
JavaScript 컴파일 과정
- 해석 및 구문 분석: JavaScript 파일이 브라우저에 의해 로드되면, 첫 번째 단계는 코드를 해석하고 구문 분석하는 것입니다. 이를 통해 코드는 추상 구문 트리로 변환됩니다.
- 컴파일: 일부 브라우저 엔진은 이 추상 구문 트리를 인터프리터에게 넘겨, 바이트코드로 변환합니다. 바이트코드는 메인 쓰레드에서 실행됩니다.
이 과정은 JavaScript의 복잡도와 크기에 따라 시간이 다르게 소요될 수 있으며, 최적화된 코드는 컴파일 과정을 단축시켜 전체적인 로딩 시간을 줄일 수 있습니다.
접근성 트리 구축 (Building the Accessibility Tree)
브라우저는 웹 페이지의 접근성을 보장하기 위해 접근성 트리를 구축합니다. 이 트리는 보조 장치가 페이지 내용을 분석하고 해석하는 데 사용됩니다. 접근성 객체 모델(AOM)은 DOM의 의미적 버전으로, 보조 기술이 페이지의 구조와 내용을 이해하는 데 중요한 역할을 합니다.
접근성 트리 구축 과정
- 초기 구축: 브라우저는 DOM을 바탕으로 초기 접근성 트리를 생성합니다. 이 트리는 화면 리더기와 같은 보조 기술이 페이지의 내용을 해석하는 데 사용됩니다.
- 동적 업데이트: DOM이 업데이트되면, 접근성 트리도 자동으로 업데이트됩니다. 이는 웹 페이지의 동적 변화에 따라 보조 기술이 실시간으로 내용을 반영할 수 있도록 합니다.
접근성 트리는 보조 기술 자체에서 수정될 수 없으며, AOM이 완성되기 전까지 화면 리더기는 콘텐츠에 접근할 수 없습니다. 이는 웹 페이지가 로드되는 동안 보조 기술이 정확한 정보를 제공할 수 있도록 보장합니다.
최적화 예제 코드
다음은 JavaScript 컴파일과 접근성 트리 구축을 고려한 최적화 예제 코드입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Optimized Page with AOM</title> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <h1 id="header">Hello, World!</h1> <p>This page is optimized for performance and accessibility.</p> <button aria-label="Click me">Click</button> </body> </html>
코드 설명
- CSS 파일의 로드:
styles.css파일은 HTML 로드와 동시에 비동기적으로 로드됩니다.
- JavaScript 파일의 비동기 로드:
script.js파일은defer속성을 사용하여 HTML 구문 분석이 완료된 후 실행되도록 합니다. 이를 통해 초기 렌더링 성능을 최적화할 수 있습니다.
- 접근성 속성 사용:
aria-label속성을 사용하여 버튼의 의미를 명확히 하고,id속성을 사용하여 요소를 구분합니다. 이를 통해 접근성 트리를 구축할 때 정확한 정보를 제공할 수 있습니다.
이와 같은 최적화 방법을 통해 웹 페이지의 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다. 특히, JavaScript 컴파일과 접근성 트리 구축을 효율적으로 관리함으로써 보다 빠르고 접근성 높은 웹 페이지를 제공할 수 있습니다.
렌더
웹 페이지가 사용자에게 표시되기 위해 브라우저가 수행하는 최종 단계는 렌더링(Rendering)입니다. 이 과정에는 스타일 적용, 레이아웃 계산, 페인팅, 그리고 합성이 포함됩니다. 각 단계는 페이지의 시각적 콘텐츠를 화면에 정확하게 표시하는 데 중요한 역할을 합니다.
스타일 적용 (Styling)
렌더링 과정에서 첫 번째 단계는 DOM과 CSSOM을 합쳐서 렌더 트리를 만드는 것입니다. 렌더 트리는 DOM 트리의 루트에서 시작하여 눈에 보이는 노드들로 구성됩니다.
display: none 속성을 가진 요소들은 렌더 트리에 포함되지 않지만, visibility: hidden 속성을 가진 요소들은 자리를 차지하기 때문에 렌더 트리에 포함됩니다.각 보이는 노드는 CSSOM 규칙이 적용된 상태로 렌더 트리에 포함됩니다. 이 렌더 트리는 페이지의 모든 시각적 요소와 해당 요소에 적용된 스타일 정보를 담고 있습니다. 이를 통해 브라우저는 최종적으로 화면에 표시될 내용을 결정합니다.
예제 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rendering Example</title> <style> .hidden { display: none; } .invisible { visibility: hidden; } .visible { color: red; } </style> </head> <body> <div class="hidden">This will not be rendered.</div> <div class="invisible">This will take space but not be visible.</div> <div class="visible">This will be visible and styled in red.</div> </body> </html>
레이아웃 (Layout)
두 번째 단계는 렌더 트리를 기반으로 각 요소의 도형 값을 계산하는 레이아웃입니다. 이 단계에서는 각 요소의 너비, 높이, 위치를 결정합니다. 초기 레이아웃이 완료된 후, 요소의 크기나 위치가 변경되면 리플로우(Reflow)가 발생하여 다시 레이아웃을 계산합니다.
레이아웃 과정은 브라우저가 렌더 트리의 루트부터 시작하여 각 요소의 정확한 크기와 위치를 계산하는 과정입니다. 이는 다양한 뷰포트 크기와 장치에 맞게 조정됩니다.
예제 설명
<html> └── <body> ├── <div class="invisible"> // 위치는 계산되지만 보이지 않음 └── <div class="visible"> // 위치와 크기가 계산되고 보임
페인트 (Painting)
세 번째 단계는 각 요소를 화면에 페인팅하는 과정입니다. 페인팅은 렌더 트리의 각 요소를 실제 화면의 픽셀로 변환하는 작업을 포함합니다. 텍스트, 색깔, 경계, 그림자, 이미지 등 모든 시각적 요소가 이 단계에서 처리됩니다.
첫 번째 의미 있는 페인트는 페인팅이 처음 일어나는 시점을 의미합니다. 페인팅 과정은 매우 빠르게 이루어져야 하며, 이를 위해 브라우저는 작업을 여러 레이어로 분리하여 효율적으로 처리합니다.
합성 (Compositing)
마지막 단계는 합성입니다. 이 단계에서는 여러 레이어에서 그려진 콘텐츠를 합쳐 최종적으로 화면에 표시합니다. 합성은 각 레이어를 올바른 순서로 겹치도록 하여 정확한 시각적 결과를 보장합니다.
레이어를 나누는 것은 성능을 향상시키지만, 메모리 관리 측면에서는 비용이 큽니다. 따라서 과도하게 사용하지 않는 것이 중요합니다.
최적화 팁
- 스타일 적용 최적화: 불필요한 스타일 계산을 피하고, 자주 변경되는 요소의 스타일을 미리 계산해두는 것이 좋습니다.
- 레이아웃 최적화: 요소의 크기와 위치를 미리 정의하여 리플로우를 최소화합니다. 특히 이미지의 크기를 미리 지정하여 리플로우를 방지할 수 있습니다.
- 페인트 최적화: 레이어를 적절히 분리하여 페인트와 리페인트 성능을 향상시킵니다.
- 합성 최적화: 최소한의 레이어로 합성 과정을 최적화하여 메모리 사용을 줄입니다.
예제 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Optimized Rendering</title> <style> .box { width: 100px; height: 100px; background-color: red; will-change: transform; } </style> </head> <body> <div class="box">Optimized Box</div> <script> // JavaScript to add animations or interactions document.querySelector('.box').style.transform = 'translateX(100px)'; </script> </body> </html>
이 예제에서는
will-change 속성을 사용하여 성능을 최적화하고, 레이아웃과 페인트 과정에서 발생할 수 있는 문제를 미리 대비했습니다. 이를 통해 부드러운 사용자 경험을 제공할 수 있습니다.웹 페이지 렌더링 과정은 다양한 단계로 이루어져 있으며, 각 단계는 페이지의 성능과 사용자 경험에 중요한 영향을 미칩니다. 스타일 적용, 레이아웃 계산, 페인팅, 합성 등 각 과정에서의 최적화를 통해 페이지 로딩 속도와 반응성을 향상시킬 수 있습니다.
브라우저의 싱글 쓰레드 구조를 이해하고, 구문 분석, JavaScript 컴파일, 접근성 트리 구축 등 각 과정에서 발생할 수 있는 성능 병목을 미리 대비하는 것은 더 나은 웹 경험을 제공하는 데 필수적입니다. 최적화된 코드와 효율적인 리소스 관리로 웹 페이지의 성능을 극대화하고, 사용자에게 빠르고 매끄러운 인터페이스를 제공할 수 있습니다.
이제, 웹 성능 최적화를 통해 웹사이트가 더욱 빠르고, 반응성이 뛰어나며, 접근성이 향상된 모습을 보여줄 수 있을 것입니다!