웹 브라우저는 웹 페이지의 리소스를 어떻게 로드하고 실행합니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

웹 브라우저는 웹 페이지의 리소스를 어떻게 로드하고 실행합니까?

Mary-Kate Olsen

Dec 28, 2024 pm 06:56 PM

How Does a Web Browser Load and Execute a Web Page's Resources?

웹페이지 로드 및 실행 순서 이해

소개

사용자가 웹페이지를 요청하면 브라우저는 체계적인 프로세스를 거쳐 페이지를 로드하고 렌더링합니다. 이 프로세스에는 HTML, CSS, JavaScript 및 이미지를 포함한 다양한 리소스의 순차적 다운로드, 구문 분석 및 실행이 포함됩니다.

로드 및 실행 순서

HTML 구문 분석:

브라우저가 HTML 문서를 로드하고 구문 분석을 시작합니다. 프로세스.
HTML 구문 분석은 페이지의 구조와 콘텐츠를 나타내는 DOM(문서 개체 모델)을 생성합니다.

외부 리소스 다운로드:

HTML을 구문 분석하는 동안 브라우저는 CSS 파일, JavaScript 등의 외부 리소스를 감지합니다.
브라우저는 이러한 리소스의 비동기 다운로드를 병렬로 시작합니다.

인라인 CSS 및 JavaScript 실행:

As HTML이 구문 분석되고 브라우저가 인라인 CSS 및 JavaScript 블록을 발견합니다.
이러한 리소스는 구문 분석 중에 즉시 실행됩니다.

CSS 애플리케이션:

CSS 파일이 다운로드되면 브라우저는 규칙을 구문 분석하고 리소스에 적용합니다. DOM.
DOM의 요소에는 스타일이 지정됩니다.

JavaScript 실행:

HTML 구문 분석 중에 외부 JavaScript 파일이 발견되면 다운로드되어 실행됩니다.
브라우저는 JavaScript 실행이 완료될 때까지 구문 분석을 차단합니다. 완료됩니다.

DOM 조작:

구문 분석이 완료되면 DOM을 조작할 수 있습니다.
JavaScript는 수정할 수 있습니다. DOM의 레이아웃과 콘텐츠에 영향을 미칩니다. 페이지.

문서 준비 이벤트:

HTML 구문 분석 및 외부 리소스 로딩이 완료되면 문서 준비 이벤트가 시작됩니다.
이 이벤트 내의 JavaScript 코드가 실행되어 페이지 요소를 초기화하고 사용자를 처리합니다.

이미지 로딩

귀하의 예에서는 HTML 구문 분석 중에 abc.jpg가 발견되면 다운로드되어 표시됩니다. $(document).ready 이벤트가 발생하면 kkk.png가 다운로드되어 이미지 소스로 설정됩니다.

브라우저 차이점

브라우저에 따라 로드 및 실행 순서가 조금씩 다를 수 있습니다. 예를 들어 일부 브라우저는 리소스 로딩을 최적화하기 위해 도메인당 동시 요청 수를 제한합니다.

캐싱

캐싱 메커니즘은 리소스 로딩에 영향을 미칩니다. 캐시된 리소스를 서버가 아닌 스토리지에서 로드할 수 있어 다운로드 시간이 단축됩니다.

병렬 실행

일반적으로 HTML 파싱, JavaScript/DOM 조작, CSS 애플리케이션은 별도의 스레드에서 병렬로 실행됩니다. 그러나 JavaScript 실행은 스크립트가 완료될 때까지 HTML 구문 분석을 차단할 수 있습니다. CSS 규칙은 점진적으로 적용되어 비동기 렌더링이 가능합니다.

참조

[브라우저 엔지니어링 도서](https://browser.engineering/)
[jQuery 문서](https://docs.jquery.com/Tutorials:Introducing_$(document).ready())

위 내용은 웹 브라우저는 웹 페이지의 리소스를 어떻게 로드하고 실행합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

이미지 맵 재 방문May 07, 2025 am 09:40 AM

빠른 새로 고침을 통해 실행합시다. 이미지 맵은 html 3.2로 돌아가는데, 먼저 서버 측 맵과 클라이언트 측지 맵은 맵 및 영역 요소를 사용하여 이미지를 통해 클릭 가능한 영역을 정의했습니다.

DEVS 상태 : 모든 개발자를위한 설문 조사May 07, 2025 am 09:30 AM

Devs State Survey는 이제 참여에 개방되어 있으며, 이전 설문 조사와 달리 코드, 직장, 건강, 취미 등을 제외한 모든 것을 포함합니다.

CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

See all articles