먼저 표준에 의해 정의된 브라우저 렌더링 프로세스(온라인에서 찾을 수 있음)를 살펴보세요.
첫 번째 사용자가 웹사이트를 방문하면 브라우저가 서버에 요청을 보내고 서버는 html 파일을 반환합니다.
브라우저가 html 코드 로드를 시작하고 링크가 있음을 찾습니다. 외부 CSS 또는 JS 파일을 참조하는 head 태그의 태그
이때 브라우저는 이미지가 다운로드될 때까지 기다리지 않고 계속해서 다음 코드를 렌더링합니다.
서버가 이미지 파일을 반환합니다. 이미지가 특정 영역을 차지하면 영향이 미칩니다. 페이지 레이아웃이 변경되므로 브라우저가 돌아가서 코드의 이 부분을 다시 렌더링해야 합니다.
다운로드 후 구문 분석합니다.
JS나 CSS에서 재정의가 있는 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.
JS가 인용될 때 브라우저는 js 요청을 보낼 때
요청이 반환될 때까지 기다립니다. 이 프로세스도 동기식이며 리소스가 요청될 때까지 문서 구문 분석을 차단합니다. 브라우저에는 안정적인 DOM 트리 구조가 필요하고 document.write 또는appendChild를 사용하거나 심지어 location.href를 직접 사용하여 점프하는 등 DOM 트리 구조를 직접 변경하는 코드가 JS에 있을 가능성이 높기 때문에 브라우저는 JS가 DOM 트리를 수정하는 경우 DOM 트리를 다시 빌드해야 하므로 다른 다운로드 및 프레젠테이션이 차단됩니다. 이 패턴은 수년 동안 유지되어 왔으며 특히 HTML4 및 HTML5에 지정되어 있습니다. 개발자는 스크립트를 연기로 표시하여 문서 구문 분석을 차단하지 않고 문서 구문 분석이 완료된 후 실행되도록 할 수 있습니다. Html5는 스크립트의 구문 분석 실행이 다른 스레드를 사용하도록 스크립트를 비동기로 표시하는 옵션을 추가합니다.설명해야 할 몇 가지 사항이 있습니다:
1. 브라우저의 처리 프로세스는2. 이 과정에는 스크립트 실행을 차단하여 렌더링을 차단하는 두 가지 외부 리소스, 즉 외부 js와 외부 css가 있습니다. 외부 js는 DOM 트리 생성을 차단합니다. 브라우저에는 안정적인 DOM 트리가 필요하고 js는 이 구조를 파괴할 수 있기 때문입니다. (물론 스타일을 변경할 수도 있습니다. [스타일이 아니라 스타일이라는 점에 유의하세요.] sheet], 그러나 이는 차단되지 않으며 아무런 영향도 미치지 않습니다.) 외부 CSS 스타일 시트도 스크립트 실행을 차단합니다. 이론적으로 스타일 시트는 Dom 트리를 변경하지 않습니다. , 문서를 중지할 필요는 없습니다. 그러나 문제가 있습니다. 스타일이 로드되지 않고 구문 분석되는 동안 스크립트가 스타일 정보를 요청할 수 있습니다. 잘못된 값을 얻으면 분명히 많은 문제가 발생할 것입니다. 이는 Edge 사례인 것처럼 보이지만 실제로는 일반적입니다. Firefox는 스타일 시트가 로드되고 구문 분석되는 동안 모든 스크립트를 차단하는 반면, Chrome은 언로드된 스타일 시트의 영향을 받을 수 있는 특정 스타일 속성에 액세스하려고 할 때만 스크립트를 차단합니다.
3. 기타 다른 외부 리소스는 렌더링을 차단하지 않습니다. 페이지의 일반 프레임이 여러 번 표시되는 것을 볼 수 있습니다. . 즉, 이미지의 위치가 표시되지 않으며, 이미지를 다운로드한 후 다시 렌더링됩니다.
최신 브라우저에 대한 최적화:
표준에 따름 브라우저 렌더링 및 다운로드 프로세스. 다음 코드는 HTML의 리소스와 동일한 순서로 외부 리소스를 로드합니다. 외부 리소스 요청 http://hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d는 모든 스타일 이전에 로드되어야 합니다
<html>
<head>...百度统计代码-->
<script>var _hmt = _hmt || [];
(function() {var host=document.location.hostname;if(/lcfarm.com$/ig.test(host)){
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
}
})();script>
<link rel="stylesheet"
type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_f9db6a6.css?1.1.2">
<link rel="stylesheet"
type="text/css" href="//static.lcfarm.com/pc-dist/common/css/common_530eedd.css?1.1.2">
<link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/css/index_8b620da.css?1.1.2">
<link rel="stylesheet"
type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_2_2379650.css?1.1.2">head>
<body>...
<script type="text/javascript" data-loader=""
src="//static.lcfarm.com/pc-dist/common/dep/mod_36ad799.js?1.1.2">script>
<script type="text/javascript" data-loader=""
src="//static.lcfarm.com/pc-dist/common/dep/jquery_c07f226.js?1.1.2">script>
<script type="text/javascript"
src="//static.lcfarm.com/pc-dist/common/js/jquery/jquery.cookie_546183c.js?1.1.2">script>
<script type="text/javascript" src="//static.lcfarm.com/pc-dist/pkg/common_85ea494.js?1.1.2">script>
<script type="text/javascript"
src="//static.lcfarm.com/pc-dist/pkg/index.html_aio_350303c.js?1.1.2">script>body>html>하지만 실제로는 크롬에 있습니다. Firefox, ie8+ 및 기타 브라우저에서 다음과 같은 효과가 나타났습니다(https://www.webpagetest.org/를 사용하여 테스트)
왜일까요? 이것이 추측적 파싱
Webkit과 Firefox 모두 이 최적화를 수행했습니다. 스크립트가 실행되면 다른 스레드가 나머지 문서를 파싱하고 리소스를 로드합니다. 나중에 네트워크를 통해 로드해야 합니다. 이 접근 방식을 사용하면 리소스를 병렬로 로드할 수 있으므로 전체 속도가 더 빨라집니다. 사전 구문 분석은 Dom 트리를 변경하지 않는다는 점에 유의해야 합니다. 이 작업은 외부 스크립트, 스타일 시트 및 이미지와 같은 외부 리소스에 대한 참조만 구문 분석하는 기본 구문 분석 프로세스에 맡겨집니다.
위 그림과 같이 스크립트를 실행하면 많은 외부 리소스 참조가 파싱되고 이를 다운로드하기 위해 스레드가 시작되는 것을 볼 수 있습니다. 메인 스레드는 여전히 반환을 기다리고 있습니다. 흠.js.
위 내용은 브라우저에서 HTML을 로드하고 렌더링하는 과정(표준 정의 및 최신 브라우저의 최적화 과정)에 대한 내용입니다. PHP 중국어 웹사이트(www.php.cn)를 주목해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
