어젯밤, 나는 브라우저의 렌더링 프로세스에 대한 에세이를 썼지 만 작은 코드를 통해 설명했습니다. 브라우저 테스트를 통과하지 못했고 설득력이 없었으며 불완전한 측면이 많이있었습니다. 오늘 브라우저에서 테스트하고 테스트 결과를 모든 사람과 공유했습니다. 테스트 과정은 약간 지저분해질 수 있습니다. 모든 사람들이 이해하기를 바랍니다.
테스트 브라우저 : Chrome v24.0.1312.52 m, Firefox V18.0, Opera v12.12.WebKit 커널에서 웹 페이지가 표시되면 HTML 문서를 구문 분석 한 다음 렌더링 트리 (렌더링 트리)를 생성하는 파서 (Parser)가 있습니다. 이것은 하나의 스레드에서 수행되므로 둘 다 동시에 수행되지 않습니다.
나는 그것을 다음 두 가지 상황으로 나누고 다른 브라우저에서 테스트했습니다.
스타일 파일은 헤드에 있고 다른 스크립트 파일은 신체의 시작 부분에 연결되어 있고 다른 스크립트 파일은 신체의 바닥에 있습니다. 스타일 파일은 본문의 시작 부분에 있으며 스크립트 파일은 위와 동일합니다.테스트 결과는 다음과 같습니다. Chrome에서 스타일 파일의 위치는 이미지의 다운로드 시간에 영향을 미치고 다른 두 브라우저에서는 두 상황간에 차이가 없습니다. 다음은 자세한 테스트 프로세스입니다.
테스트 1 : 스타일 파일이 헤드에 있고 다른 스크립트 파일은 신체의 시작에 연결되어 있고 다른 스크립트 파일은 신체의 바닥에 있습니다.테스트 된 코드 :
코드를 복사하십시오