프론트엔드 성능 최적화_HTML/Xhtml_웹페이지 제작 학습을 위한 준비로 HTML 페이지의 렌더링 과정을 이해합니다.
- WBOY원래의
- 2016-05-16 16:40:411480검색
최근에는 프론트엔드 성능 최적화에 대해 배우고 있는데, 올바른 약을 처방하고 성능 병목 현상을 찾아내기 위해서는 페이지 렌더링 과정을 이해하는 것이 필요합니다. 제가 본 몇 가지 내용을 여러분과 공유하겠습니다.
참고: 렌더러 이해
페이지 렌더링에는 다음과 같은 특징이 있습니다:
•단일 스레드 이벤트 폴링
•잘 정의되고 연속적이며 질서 있는 작업(HTML5 )
•단어 분할 및 DOM 트리 작성
•리소스 요청 및 사전 로드
•렌더링 트리 작성 및 페이지 그리기
구체적으로:
네트워크 해당 바이트에 도달하면 DOM 트리가 구성되기 시작합니다. UI를 업데이트하는 브라우저 스레드가 이를 담당합니다. 다음 상황이 발생하면 DOM 트리 구성이 차단됩니다.
•HTML 응답 흐름이 네트워크에서 차단됩니다
•언로드된 스크립트가 있습니다.
•스크립트 노드가 발견되었지만 이 오류가 발생했습니다. 여전히 언로드된 스타일 파일입니다
렌더링 트리는 DOM 트리에서 구축되며 스타일 파일에 의해 차단됩니다.
단일 스레드 이벤트 폴링을 기반으로 하기 때문에 스크립트와 스타일에 대한 차단이 없더라도 이러한 스크립트나 스타일을 구문 분석하고 실행하고 적용하면 페이지 렌더링이 차단됩니다.
페이지 렌더링을 차단하지 않는 일부 상황:
• defer 속성 및 async 속성 정의
• 일치하는 미디어 유형 스타일 파일 없음
• 파서 삽입 스크립트 노드를 통과하지 못했습니다. 또는 스타일 노드
아래 예를 들어 설명하겠습니다(완전한 코드) :
코드 복사
코드는 다음과 같습니다.안녕하세요!
<script> <br> document.write('<script src="other.js">< ;/ scr' 'ipt>') <br> </script>
안녕하세요!
example.css 파일이 로드되고 이제 렌더링 트리가 구성됩니다.
인라인 스크립트가 실행된 후 파서는 other.js에 의해 즉시 차단됩니다. 파서가 차단되면 브라우저는 그리기 요청을 수신하고 "안녕하세요!"가 페이지에 표시됩니다.
other.js가 로드되면 파서는 계속해서 아래쪽으로 구문 분석합니다. . .
코드 복사
코드는 다음과 같습니다.
그러나 렌더링 차단 속도를 늦추기 위해 최신 브라우저는 추측 로딩을 사용합니다.
위의 경우 스크립트와 스타일 파일이 페이지 렌더링을 심각하게 차단합니다. 사전 로드의 목적은 이 차단 시간을 줄이는 것이라고 추측합니다. 렌더링이 차단되면 다음 작업이 수행됩니다.
• 경량 HTML(또는 CSS) 스캐너(스캐너)가 계속해서 문서를 스캔합니다.
• 향후 파일 URL에 사용될 수 있는 리소스 찾기
• 렌더러가 사용하기 전에 다운로드하세요
그러나 사전 로드는 javascript(예: document.write())를 통해 로드된 리소스 파일을 검색할 수 없습니다.
참고: 모든 "최신" 브라우저는 이 방법을 지원합니다. 뒤로 돌아가서 위의 예를 보고 사전 로드가 어떻게 작동하는지 추측해 보세요.
추측 로더는 계속해서 문서를 "읽고" last.js를 찾아 로드합니다. 다음:
document.write('
한 번 example.css 파일 로딩이 완료되면 렌더링 트리가 완성되고 인라인 스크립트가 실행될 수 있습니다. 그 후 파서는 other.js에 의해 차단됩니다. 파서가 차단된 후 브라우저는 첫 번째 렌더링 요청을 수신하고 "안녕하세요!"가 페이지에 표시됩니다. 이 단계는 지금의 상황과 일치합니다. 그런 다음
안녕하세요!
<script> <br> document.write('<script src="other.js"></scr' 'ipt>') <br> </script> >
파서가 last.js를 만난 후 차단되면 브라우저는 또 다른 그리기 요청을 받고 페이지에 "Hi again!"이 표시됩니다. 마지막으로 last.js가 로드되고 실행됩니다. <script> <br> document.write('<script src="other.js"></scr' 'ipt>') <br> </script> >
안녕하세요!
그러나 렌더링 차단 속도를 늦추기 위해 최신 브라우저는 추측 로딩을 사용합니다.
위의 경우 스크립트와 스타일 파일이 페이지 렌더링을 심각하게 차단합니다. 사전 로드의 목적은 이 차단 시간을 줄이는 것이라고 추측합니다. 렌더링이 차단되면 다음 작업이 수행됩니다.
• 경량 HTML(또는 CSS) 스캐너(스캐너)가 계속해서 문서를 스캔합니다.
• 향후 파일 URL에 사용될 수 있는 리소스 찾기
• 렌더러가 사용하기 전에 다운로드하세요
그러나 사전 로드는 javascript(예: document.write())를 통해 로드된 리소스 파일을 검색할 수 없습니다.
참고: 모든 "최신" 브라우저는 이 방법을 지원합니다. 뒤로 돌아가서 위의 예를 보고 사전 로드가 어떻게 작동하는지 추측해 보세요.
코드 복사코드는 다음과 같습니다.
>
<script>... <br /> <br /><br />파서가 example.css를 반환하고 네트워크에서 가져왔습니다. 파서는 차단되지 않고 계속해서 구문 분석을 진행했는데, 인라인 스크립트 노드를 발견하면 스타일 파일이 로드되지 않았기 때문에 차단되었습니다. 스크립트 실행을 차단합니다. 렌더링 트리도 스타일 파일에 의해 차단되므로 브라우저는 렌더링 요청을 받지 못하고 아무것도 볼 수 없습니다. 지금까지는 방금 언급한 것과 같은 방식입니다. 그러나 상황이 바뀌었습니다. </script>
안녕하세요!
<script>... <br /> <br /><br />파서가 example.css를 반환하고 네트워크에서 가져왔습니다. 파서는 차단되지 않고 계속해서 구문 분석을 진행했는데, 인라인 스크립트 노드를 발견하면 스타일 파일이 로드되지 않았기 때문에 차단되었습니다. 스크립트 실행을 차단합니다. 렌더링 트리도 스타일 파일에 의해 차단되므로 브라우저는 렌더링 요청을 받지 못하고 아무것도 볼 수 없습니다. 지금까지는 방금 언급한 것과 같은 방식입니다. 그러나 상황이 바뀌었습니다. </script>
추측 로더는 계속해서 문서를 "읽고" last.js를 찾아 로드합니다. 다음:
코드 복사코드는 다음과 같습니다.
안녕하세요!
document.write('
한 번 example.css 파일 로딩이 완료되면 렌더링 트리가 완성되고 인라인 스크립트가 실행될 수 있습니다. 그 후 파서는 other.js에 의해 차단됩니다. 파서가 차단된 후 브라우저는 첫 번째 렌더링 요청을 수신하고 "안녕하세요!"가 페이지에 표시됩니다. 이 단계는 지금의 상황과 일치합니다. 그런 다음
코드를 복사하세요
document .write('
코드는 다음과 같습니다.
안녕하세요!
document .write('
안녕하세요!< ;/div>
파서가 last.js를 찾았지만 프리로더가 방금 로드했기 때문에 브라우저 캐시에 있으므로 last.js가 즉시 실행됩니다. 그 후 브라우저는 렌더링 요청을 수신하고 "Hi again"이 페이지에 표시됩니다.
이전과 이후의 두 상황을 비교하여 모든 사람이 페이지 렌더링에 대해 어느 정도 이해하고 목표에 맞는 최적화를 할 수 있기를 바랍니다. 안녕히 주무세요! (끝)^_^
파서가 last.js를 찾았지만 프리로더가 방금 로드했기 때문에 브라우저 캐시에 있으므로 last.js가 즉시 실행됩니다. 그 후 브라우저는 렌더링 요청을 수신하고 "Hi again"이 페이지에 표시됩니다.
이전과 이후의 두 상황을 비교하여 모든 사람이 페이지 렌더링에 대해 어느 정도 이해하고 목표에 맞는 최적화를 할 수 있기를 바랍니다. 안녕히 주무세요! (끝)^_^
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.