브라우저가 HTML을 로드하고 렌더링하는 순서
- Y2J원래의
- 2017-05-24 09:14:593158검색
브라우저가 HTML을 로드하고 렌더링하는 순서, HTML 페이지 로딩 속도를 높이는 방법, HTML 페이지 로딩 및 구문 분석 프로세스 등이 이 기사에서 자세히 소개됩니다. 관심 있는 친구들은 놓치지 마세요
브라우저가 HTML을 로드하고 렌더링하는 순서
1. IE 다운로드 순서는 위에서 아래로, 렌더링 순서도 위에서 아래입니다. 다운로드와 렌더링이 동시에 수행됩니다.
2. 페이지의 특정 부분을 렌더링할 때 그 위의 모든 부분이 다운로드되었습니다(모든 관련 요소가 다운로드되었다는 의미는 아닙니다).
3. 의미 해석 태그가 포함된 파일(JS 스크립트, CSS 스타일)을 발견하면 IE의 다운로드 프로세스에서 다운로드를 위한 별도의 연결이 활성화됩니다.
4. 스타일 시트가 다운로드되면 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료되면 이전의 모든 요소(이전에 렌더링된 요소 포함)가 다시 렌더링됩니다.
5. JS 또는 CSS에서 재정의가 있는 경우 나중에 정의된 함수 가 이전에 정의된 함수를 덮어씁니다.
JS 로딩
1. 병렬로 다운로드 및 구문 분석할 수 없습니다(다운로드 차단).
2. 이 JS를 참조하면 브라우저는 js 요청을 보내고 요청이 반환될 때까지 기다립니다. 브라우저에는 안정적인 DOM 트리 구조가 필요하고 JS에는
document
.write 또는 app 코드가 있을 가능성이 매우 높기 때문입니다. 🎜>end 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. 중첩 테이블을 사용하지 말고 중첩되지 않은 테이블이나 p를 사용하세요. 큰 중첩 테이블을 기반으로 레이아웃을 여러 개의 작은 테이블로 나누면 표시하기 전에 전체 페이지(또는 큰 테이블) 콘텐츠가 로드될 때까지 기다릴 필요가 없습니다.
9. 이미지 및 표의 크기 지정:
a. 브라우저가 이미지나 표의 크기를 즉시 결정할 수 있으면 일부를 다시 실행하지 않고도 페이지를 즉시 표시할 수 있습니다. 레이아웃 준비.
b. 이렇게 하면 페이지 표시 속도가 빨라질 뿐만 아니라 페이지가 로드된 후 일부 부적절한 레이아웃 변경이 방지됩니다.
c. 이미지는
높이와 너비를 사용합니다.
HTML 페이지 로딩 및 파싱 프로세스
1. 사용자가 URL을 입력하고(html 페이지이고 처음 방문한다고 가정) 브라우저는 서버에 요청을 보내고 서버는 html 파일을 반환합니다.
2. 브라우저가 HTML 코드 로드를 시작하고 <head> 태그에 외부 CSS 파일을 참조하는 태그가 있음을 발견합니다.
3. 브라우저는 CSS 파일에 대한 요청을 다시 보내고 서버는 CSS 파일을 반환합니다.
4. 브라우저는 html의
5. 브라우저는 이미지를 참조하는 코드에서
6. 서버는 이미지 파일을 반환합니다. 이미지는 특정 영역을 차지하고 다음 문단의 배열에 영향을 주기 때문에 브라우저는 이 부분을 다시 렌더링해야 합니다.
7. 브라우저는 Javascript 코드 줄이 포함된