찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >브라우저가 HTML을 로드하고 렌더링하는 프로세스(표준에 의해 정의되고 최신 브라우저에 최적화된 프로세스)

브라우저가 HTML을 로드하고 렌더링하는 프로세스(표준에 의해 정의되고 최신 브라우저에 최적화된 프로세스)

PHP中文网
PHP中文网원래의
2016-08-23 09:03:401548검색

먼저 표준에 의해 정의된 브라우저 렌더링 프로세스(온라인에서 찾을 수 있음)를 살펴보세요.

브라우저가 웹 페이지를 여는 프로세스

  1. 첫 번째 사용자가 웹사이트를 방문하면 브라우저가 서버에 요청을 보내고 서버는 html 파일을 반환합니다.

  2. 브라우저가 html 코드 로드를 시작하고 링크가 있음을 찾습니다. 외부 CSS 또는 JS 파일을 참조하는 head 태그의 태그

  3. 브라우저는 CSS 및 JS 파일에 대한 요청을 다시 보내고 서버는 CSS 및 JS 파일을 반환합니다. 🎜>

    4. 브라우저는 html 코드, CSS 및 JS 파일의 본문 부분을 계속 로드하고 페이지 렌더링을 시작할 수 있습니다.
  4. 브라우저는 이미지를 참조하는 코드에서 img 태그를 찾아 서버에 요청했습니다.

    이때 브라우저는 이미지가 다운로드될 때까지 기다리지 않고 계속해서 다음 코드를 렌더링합니다.

  5. 서버가 이미지 파일을 반환합니다. 이미지가 특정 영역을 차지하면 영향이 미칩니다. 페이지 레이아웃이 변경되므로 브라우저가 돌아가서 코드의 이 부분을 다시 렌더링해야 합니다.

    6. 브라우저가 스크립트 태그를 찾습니다.

    7. Javascript 스크립트는 브라우저에 코드에서 특정 p를 숨기도록 지시하는 이 명령문을 실행합니다(style.display=”none&rdquo). ;). 이런, 갑자기 그러한 요소가 누락되어 브라우저가 코드의 이 부분을 다시 렌더링해야 합니다.

    8. 마지막으로 html이 도착하면 브라우저는 눈물을 흘립니다. 🎜>

  8. 브라우저가 HTML을 로드하고 렌더링하는 순서

  9. IE 브라우저가 다운로드하는 순서는 위에서 아래로, 렌더링되는 것도 위에서부터입니다. 다음으로 다운로드와 렌더링이 동시에 수행됩니다.

    페이지의 특정 부분을 렌더링할 때 그 위의 모든 부분이 다운로드되었습니다
  1. (관련 요소가 모두 다운로드되었다는 의미는 아닙니다)

  2. 의미적으로 해석 가능한 태그 삽입 파일(JS 스크립트, CSS 스타일)이 있는 경우 IE 다운로드 프로세스에서는 다운로드를 위해 별도의 연결을 활성화합니다.

    다운로드 후 구문 분석합니다.
    3. 구문 분석 중에 페이지의 모든 하위 요소 다운로드를 중지하고 로드를 차단합니다
  3. .

  4. 스타일 시트를 다운로드한 후 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료된 후 모든 이전 요소(이전에 렌더링된 요소 포함)는 다시 렌더링됩니다.

    JS나 CSS에서 재정의가 있는 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.

  5. JS 로딩

  6. 병렬 다운로드 및 구문 분석 불가(다운로드 차단)

  • 웹 모드는 동기식입니다. 개발자는 스크립트 태그가 파싱되면 즉시 스크립트를 파싱하여 실행하고, 스크립트가 외부에서 인용되면 스크립트가 실행될 때까지 문서의 파싱을 차단하기를 바랍니다.

    JS가 인용될 때 브라우저는 js 요청을 보낼 때

    요청이 반환될 때까지 기다립니다. 이 프로세스도 동기식이며 리소스가 요청될 때까지 문서 구문 분석을 차단합니다. 브라우저에는 안정적인 DOM 트리 구조가 필요하고 document.write 또는appendChild를 사용하거나 심지어 location.href를 직접 사용하여 점프하는 등 DOM 트리 구조를 직접 변경하는 코드가 JS에 있을 가능성이 높기 때문에 브라우저는 JS가 DOM 트리를 수정하는 경우 DOM 트리를 다시 빌드해야 하므로 다른 다운로드 및 프레젠테이션이 차단됩니다. 이 패턴은 수년 동안 유지되어 왔으며 특히 HTML4 및 HTML5에 지정되어 있습니다. 개발자는 스크립트를 연기로 표시하여 문서 구문 분석을 차단하지 않고 문서 구문 분석이 완료된 후 실행되도록 할 수 있습니다. Html5는 스크립트의 구문 분석 실행이 다른 스레드를 사용하도록 스크립트를 비동기로 표시하는 옵션을 추가합니다.

  • 설명해야 할 몇 가지 사항이 있습니다:

    　1. 브라우저의 처리 프로세스는
    • HTML을 파싱하는 것으로 알고 있습니다. DOM 트리 생성->DOM 트리 및 스타일 시트를 기반으로 렌더 트리 생성->렌더링 트리 표시 렌더링
. 사용자가 페이지를 더 빠르게 볼 수 있도록 브라우저는 HTML을 파싱하면서 부분 DOM 트리를 생성하고, 브라우저는 부분 렌더링 트리를 생성하여 표시합니다.

　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)를 주목해주세요!


성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：WEB基础原理理论复习다음 기사：移动端的高清适配

관련 기사

더보기