1. IE 다운로드 순서는 위에서 아래로이며 렌더링 순서도 위에서 아래로입니다. 다운로드 및 렌더링은 동시에 수행됩니다.
2. 페이지의 일부로 렌더링 할 때 위의 모든 부분이 다운로드되었습니다 (모든 관련 요소가 다운로드 된 것은 아닙니다).
3. 시맨틱 해석 태그 포함 파일 (JS 스크립트, CSS 스타일)이 발생하면 IE 다운로드 프로세스를 사용하면 별도의 연결을 다운로드 할 수 있습니다.
4. 스타일 시트의 다운로드가 완료된 후에는 이전에 다운로드 한 모든 스타일 시트로 구문 분석됩니다. 구문 분석이 완료되면 이전의 모든 요소 (이전에 렌더링 된 요소 포함)가 다시 렌더링됩니다.
5. JS 및 CSS에 재정의가 있으면 나중에 정의 함수가 이전 정의 함수를 무시합니다.
JS의 로딩1. 병렬로 다운로드하여 구문 분석 할 수 없습니다 (차단 다운로드).
2. JS가 참조되면 브라우저는 JS 요청을 보내고 요청의 반환을 기다립니다. 브라우저에는 안정적인 돔 트리 구조가 필요하기 때문에
코드는 Document.Write 또는 AppendChild 사용과 같은 DOM 트리 구조를 직접 변경하거나 Location.href를 직접 사용하여 점프를 직접 변경합니다. JS 수리가 발생하지 않도록 브라우저
DOM 트리를 수정하려면 DOM 트리를 재건해야하므로 다른 다운로드 및 렌더링을 차단합니다.
HTML 페이지로드 속도를 높이는 방법1. 페이지 체중 감량 :
에이. 페이지의 무게는 로딩 속도에 영향을 미치는 가장 중요한 요소입니다.
비. 불필요한 공간과 주석을 삭제하십시오.
기음. 인라인 스크립트와 CSS를 외부 파일로 이동하십시오.
디. HTML Tidy를 사용하여 HTML의 체중 감량을 할 수 있으며 압축 도구를 사용하여 JavaScript의 체중 감량도 할 수도 있습니다.
2. 파일 수를 줄이기 :
에이. 페이지에서 참조 된 파일 수를 줄이면 HTTP 연결 수가 줄어들 수 있습니다.
비. 많은 JavaScript 및 CSS 파일을 병합 할 수 있으며 병합하는 것이 가장 좋습니다. Caibangzi는 자바 스크립트를 병합했습니다. functions and prototype.js는 base.js 파일로.
3. 도메인 이름 쿼리 감소 :
에이. DNS 쿼리 및 구문 분석 도메인 이름도 시간을 소비하므로 외부 JavaScript, CSS, 사진 및 기타 리소스에 대한 참조를 줄여야합니다. 다른 도메인 이름을 사용하면 더 적을수록 좋습니다.
4. 캐시 재사용 데이터 :
에이. 캐시 재사용 데이터.
5. 페이지 요소의로드 순서 최적화 :
에이. 먼저 페이지와 관련 페이지 및 JavaScript 및 CSS에 표시된 콘텐츠를로드 한 다음 원본 사진, 플래시, 비디오 등에 표시되지 않은 것과 같은 HTML 관련 사항을로드 한 다음로드하십시오.
6. 인라인 JavaScript 수를 줄이기 :
에이. 브라우저 파서는 인라인 JavaScript가 페이지 구조를 변경한다고 가정하므로 인라인 JavaScript를 사용하는 데 비용이 많이 듭니다.
비. 컨텐츠를 출력하는 방법 인 Document.write ()를 사용하지 말고 최신 W3C DOM 메소드를 사용하여 최신 브라우저의 페이지 컨텐츠를 처리하십시오.
7. 최신 CS 및 법적 태그 사용 :
에이. 최신 CSS를 사용하여 레이블과 이미지를 줄입니다. 예를 들어, 최신 CSS+ 텍스트를 사용하면 일부 텍스트 전용 사진을 완전히 대체 할 수 있습니다.
비. 브라우저가 HTML을 구문 분석 할 때 오류 수정 및 기타 작업을 피하기 위해 법적 태그를 사용하십시오. HTML Tidy를 사용하여 HTML의 체중 감량도 할 수 있습니다.
8. 콘텐츠를 청크 :
에이. 중첩 테이블이 아니라 네트워크 테이블 또는 div를 사용하지 마십시오. 중첩 테이블의 큰 덩어리를 기반으로 테이블의 레이아웃을 여러 개의 작은 테이블로 분해하므로 전체 페이지 (또는 큰 테이블) 컨텐츠가 표시되기 전에로드 될 때까지 기다릴 필요가 없습니다.
9. 이미지와 테이블의 크기를 지정합니다.
에이. 브라우저에서 이미지 또는 테이블의 크기를 즉시 결정할 수 있으면 일부 레이아웃 배열을 다시 복용하지 않고 즉시 페이지를 표시 할 수 있습니다.
비. 이것은 페이지 표시 속도를 높일뿐만 아니라 페이지가로드 된 후 레이아웃의 부적절한 변경을 방지합니다.
기음. 이미지는 높이와 너비를 사용합니다.
HTML 페이지로드 및 구문 분석 프로세스1. 사용자가 URL을 입력합니다 (HTML 페이지라고 가정하고 액세스 할 때 처음이라고 가정) 브라우저는 서버에 요청을 발행하고 서버가 HTML 파일을 반환합니다.
2. 브라우저는 HTML 코드를로드하기 시작하고 <head> 태그에 외부 CSS 파일을 참조하는 <link> 태그가 있음을 발견합니다.
3. 브라우저는 CSS 파일에 대한 요청을 발행하고 서버는 CSS 파일을 반환합니다.
4. 브라우저는 HTML의 코드의 <body> 부분을 계속로드하고 CSS 파일이 얻어 졌으므로 페이지 렌더링을 시작할 수 있습니다.
5. 브라우저는 코드에서 이미지를 참조하고 서버에 요청한 <Img> 태그를 찾았습니다. 현재 브라우저는 이미지가 다운로드 될 때까지 대기하지 않지만 후속 코드를 계속 렌더링합니다.
6. 서버가 이미지 파일을 반환합니다. 이미지는 특정 영역을 차지하기 때문에 후속 단락의 배열에 영향을 미치므로 브라우저는 코드 의이 부분을 되돌아 가서 다시 렌더링해야합니다.
7. 브라우저는 JavaScript 코드 라인이 포함 된 <cript> 태그를 찾아 빠르게 실행했습니다.
8. JavaScript 스크립트는이 명령문을 실행합니다.이 명령문은 브라우저에 코드에 <style> (style.display = none)을 숨기도록 명령합니다. 동정심이 많고 갑자기 그러한 요소가 누락되었으며 브라우저는 코드 의이 부분을 다시 렌더링해야합니다.
9. 마침내, 나는 </html>의 도착을 기다렸다가 브라우저가 눈물을 흘렸다 ...
10. 잠깐만 요, 아직 끝나지 않았습니다. 사용자는 인터페이스에서 스키닝 버튼을 클릭했으며 JavaScript는 브라우저에 <link> 태그의 CSS 경로를 변경하도록 요청했습니다.
11. 브라우저는 여기에 모든 사람을 모으고 모든 사람이 수하물을 포장했습니다. 다시해야합니다 ... 브라우저는 서버에서 새 CSS 파일을 요청하고 페이지를 다시 렌더링했습니다.