HTML 페이지 로딩 및 파싱 과정 상세 소개_HTML/Xhtml_웹페이지 제작

브라우저가 HTML을 로드하고 렌더링하는 순서

1. IE 다운로드 순서는 위에서 아래로, 렌더링 순서도 위에서 아래로 입니다. 동시에 수행됩니다.

2. 페이지의 특정 부분을 렌더링할 때 그 위의 모든 부분이 다운로드되었습니다(모든 관련 요소가 다운로드되었다는 의미는 아닙니다).

3. 의미상 해석 가능한 태그 삽입 파일(JS 스크립트, CSS 스타일)이 있는 경우 IE 다운로드 프로세스에서는 다운로드를 위해 별도의 연결을 활성화합니다.

4. 스타일 시트가 다운로드되면 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료되면 이전의 모든 요소(이전에 렌더링된 요소 포함)가 다시 렌더링됩니다.

5. JS나 CSS에서 재정의가 있는 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.

JS 로딩

1. 병렬로 다운로드 및 구문 분석할 수 없습니다(다운로드 차단).

2. JS가 참조되면 브라우저는 js 요청을 보내고 요청의 반환을 기다립니다. 브라우저에는 안정적인 DOM 트리 구조가 필요하고 JS에는 document.write 또는appendChild를 사용하거나 심지어 location.href를 직접 사용하는 등 DOM 트리 구조를 직접 변경하는

코드가 있을 가능성이 높기 때문입니다. 점프, JS가 DOM 트리

를 수정하는 것을 방지하려면 브라우저가 DOM 트리를 다시 빌드해야 하므로 다른 다운로드 및 렌더링이 차단됩니다.

속도를 높이는 방법. HTML 페이지 로딩 속도

1. 페이지 무게 감소:

a. 페이지 무게는 로딩 속도에 영향을 미치는 가장 중요한 요소입니다.

b. 불필요한 공백과 댓글을 삭제하세요.

c. 인라인 스크립트와 CSS를 외부 파일로 이동합니다.

d. HTML Tidy를 사용하여 HTML의 무게를 줄일 수 있고 일부 압축 도구를 사용하여 JavaScript의 무게를 줄일 수도 있습니다.

2. 파일 수 줄이기:

a. 페이지에서 참조되는 파일 수를 줄이면 HTTP 연결 수가 줄어들 수 있습니다.

b. 많은 JavaScript 및 CSS 파일을 병합할 수 있으며 Caibangzi는 JavaScript 기능과 Prototype.js를 base.js 파일로 병합했습니다.

3. 도메인 이름 쿼리 줄이기:

a. DNS 쿼리 및 도메인 이름 확인에도 시간이 많이 걸리므로 외부 JavaScript, CSS, 이미지 등에 대한 참조를 줄여야 합니다. 다양한 도메인 이름을 사용할수록 적을수록 좋습니다.

4. 캐시 재사용 데이터:

a.

5. 페이지 요소의 로드 순서 최적화:

a. 먼저 페이지에 처음 표시되는 콘텐츠와 이와 관련된 JavaScript 및 CSS를 로드한 다음 HTML 관련 항목을 로드합니다. 처음에 표시되지 않는 것 관련 사진, 플래시, 비디오 및 기타 매우 큰 리소스가 마지막에 로드됩니다.

6. 인라인 JavaScript 수 줄이기:

a. 브라우저 파서는 인라인 JavaScript가 페이지 구조를 변경한다고 가정하므로 인라인 JavaScript를 사용하는 것이 더 비쌉니다.

b. 콘텐츠를 출력하는 데 document.write()를 사용하지 말고 최신 W3C DOM 메서드를 사용하여 최신 브라우저의 페이지 콘텐츠를 처리하세요.

7. 최신 CSS 및 법적 태그 사용:

a. 최신 CSS를 사용하여 태그와 이미지를 줄입니다. 예를 들어 최신 CSS 텍스트를 사용하면 일부 이미지를 텍스트만으로 완전히 바꿀 수 있습니다.

b. HTML을 구문 분석할 때 브라우저가 "오류 수정" 작업을 수행하지 못하도록 합법적인 태그를 사용합니다. HTML Tidy를 사용하여 HTML을 줄일 수도 있습니다.

8. 콘텐츠 청크:

a. 중첩된 테이블을 사용하지 말고 중첩되지 않은 테이블이나 div를 사용하세요. 큰 중첩 테이블을 기반으로 레이아웃을 여러 개의 작은 테이블로 나누면 전체 페이지(또는 큰 테이블) 콘텐츠가 표시되기 전에 로드될 때까지 기다릴 필요가 없습니다.

9. 이미지 및 표의 크기 지정:

a. 브라우저가 이미지나 표의 크기를 즉시 결정할 수 있으면 일부를 다시 실행하지 않고도 페이지를 즉시 표시할 수 있습니다. 레이아웃 준비.

b. 이렇게 하면 페이지 표시 속도가 빨라질 뿐만 아니라 페이지가 로드된 후 일부 부적절한 레이아웃 변경이 방지됩니다.

c. 이미지는 높이와 너비를 사용합니다.

HTML 페이지 로딩 및 파싱 과정

1. 사용자가 URL을 입력하면(HTML 페이지이고 첫 번째 방문이라고 가정) 브라우저에서 서버에 요청하면 서버가 html 파일을 반환합니다.

2. 브라우저가 HTML 코드 로드를 시작하고 태그 내에 외부 CSS 파일을 참조하는 태그가 있음을 발견합니다.

3. 브라우저는 CSS 파일에 대한 요청을 다시 보내고 서버는 CSS 파일을 반환합니다.

4. 브라우저는 html의 부분 코드를 계속 로드하고 CSS 파일을 얻었으며 페이지를 렌더링할 수 있습니다.

5. 브라우저는 이미지를 참조하는 코드에서 태그를 찾아 서버에 요청을 보냅니다. 이때 브라우저는 이미지가 다운로드될 때까지 기다리지 않고 후속 코드를 계속 렌더링합니다.

6. 서버는 이미지 파일을 반환합니다. 이미지는 특정 영역을 차지하고 다음 문단의 배열에 영향을 주기 때문에 브라우저는 이 부분을 다시 렌더링해야 합니다.

7. 브라우저는 Javascript 코드 줄이 포함된 <script> 태그를 찾아 빠르게 실행합니다. <br /><br />8. Javascript 스크립트는 이 명령문을 실행하여 브라우저에 코드에서 특정 <style>(style.display="none")을 숨기도록 지시합니다. 이런, 갑자기 그러한 요소가 누락되어 브라우저가 코드의 이 부분을 다시 렌더링해야 합니다. <br /><br />9.드디어 의 도착을 기다리며 브라우저는 눈물을 펑펑 흘렸다... <br /><br />10.아직 끝나지 않았는데 유저가 '스킨 체인지' 버튼을 눌렀다. 인터페이스에서 Javascript를 사용하면 브라우저가 <link> 태그의 CSS 경로를 변경할 수 있습니다. <br /><br />11. 브라우저가 모두를 소환합니다 <div><span><ul><li>, "모두 짐을 챙기세요. 다시 시작해야 합니다...", 브라우저가 서버에 새 CSS 생성을 요청합니다. 파일을 제출하고 페이지를 다시 렌더링하세요.</script>