브라우저가 HTML을 로드하고 렌더링하는 프로세스(표준에 의해 정의되고 최신 브라우저에 최적화된 프로세스)
먼저 표준에 의해 정의된 브라우저 렌더링 프로세스(온라인에서 찾을 수 있음)를 살펴보세요.
브라우저가 웹 페이지를 여는 프로세스
첫 번째 사용자가 웹사이트를 방문하면 브라우저가 서버에 요청을 보내고 서버는 html 파일을 반환합니다.
브라우저가 html 코드 로드를 시작하고 링크가 있음을 찾습니다. 외부 CSS 또는 JS 파일을 참조하는 head 태그의 태그
- 브라우저는 CSS 및 JS 파일에 대한 요청을 다시 보내고 서버는 CSS 및 JS 파일을 반환합니다. 🎜> 브라우저는 html 코드, CSS 및 JS 파일의 본문 부분을 계속 로드하고 페이지 렌더링을 시작할 수 있습니다.
- 브라우저는 이미지를 참조하는 코드에서 img 태그를 찾아 서버에 요청했습니다.
이때 브라우저는 이미지가 다운로드될 때까지 기다리지 않고 계속해서 다음 코드를 렌더링합니다.
서버가 이미지 파일을 반환합니다. 이미지가 특정 영역을 차지하면 영향이 미칩니다. 페이지 레이아웃이 변경되므로 브라우저가 돌아가서 코드의 이 부분을 다시 렌더링해야 합니다.
브라우저가 스크립트 태그를 찾습니다. - Javascript 스크립트는 브라우저에 코드에서 특정 p를 숨기도록 지시하는 이 명령문을 실행합니다(style.display=”none&rdquo). ;). 이런, 갑자기 그러한 요소가 누락되어 브라우저가 코드의 이 부분을 다시 렌더링해야 합니다.
- 마지막으로 html이 도착하면 브라우저는 눈물을 흘립니다. 🎜>
- 브라우저가 HTML을 로드하고 렌더링하는 순서
- IE 브라우저가 다운로드하는 순서는 위에서 아래로, 렌더링되는 것도 위에서부터입니다. 다음으로 다운로드와 렌더링이 동시에 수행됩니다.
- 페이지의 특정 부분을 렌더링할 때 그 위의 모든 부분이 다운로드되었습니다
- (관련 요소가 모두 다운로드되었다는 의미는 아닙니다)
- 의미적으로 해석 가능한 태그 삽입 파일(JS 스크립트, CSS 스타일)이 있는 경우 IE 다운로드 프로세스에서는 다운로드를 위해 별도의 연결을 활성화합니다.
다운로드 후 구문 분석합니다.
구문 분석 중에 페이지의 모든 하위 요소 다운로드를 중지하고 로드를 차단합니다 - .
- 스타일 시트를 다운로드한 후 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료된 후 모든 이전 요소(이전에 렌더링된 요소 포함)는 다시 렌더링됩니다.
JS나 CSS에서 재정의가 있는 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.
- JS 로딩
- 병렬 다운로드 및 구문 분석 불가(다운로드 차단)
- 웹 모드는 동기식입니다. 개발자는 스크립트 태그가 파싱되면 즉시 스크립트를 파싱하여 실행하고, 스크립트가 외부에서 인용되면 스크립트가 실행될 때까지 문서의 파싱을 차단하기를 바랍니다.
JS가 인용될 때 브라우저는 js 요청을 보낼 때
요청이 반환될 때까지 기다립니다. 이 프로세스도 동기식이며 리소스가 요청될 때까지 문서 구문 분석을 차단합니다. 브라우저에는 안정적인 DOM 트리 구조가 필요하고 document.write 또는appendChild를 사용하거나 심지어 location.href를 직접 사용하여 점프하는 등 DOM 트리 구조를 직접 변경하는 코드가 JS에 있을 가능성이 높기 때문에 브라우저는 JS가 DOM 트리를 수정하는 경우 DOM 트리를 다시 빌드해야 하므로 다른 다운로드 및 프레젠테이션이 차단됩니다. 이 패턴은 수년 동안 유지되어 왔으며 특히 HTML4 및 HTML5에 지정되어 있습니다. 개발자는 스크립트를 연기로 표시하여 문서 구문 분석을 차단하지 않고 문서 구문 분석이 완료된 후 실행되도록 할 수 있습니다. Html5는 스크립트의 구문 분석 실행이 다른 스레드를 사용하도록 스크립트를 비동기로 표시하는 옵션을 추가합니다. -
설명해야 할 몇 가지 사항이 있습니다:
1. 브라우저의 처리 프로세스는 HTML을 파싱하는 것으로 알고 있습니다. DOM 트리 생성->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)를 주목해주세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7328
9
1626
14
1350
46
1262
25
1209
29
코인베이스 교환 로그인 포트 2025
Mar 21, 2025 pm 05:51 PM
Coinbase 보안 로그인 안내서 : 피싱 사이트 및 사기를 피하는 방법은 무엇입니까? 피싱과 사기는 점점 더 만연해지고 있으며 Coinbase 공식 로그인 포털에 안전하게 액세스하는 것이 중요합니다. 이 기사는 사용자가 코인베이스의 최신 공식 로그인 포털을 안전하게 찾아 사용하여 디지털 자산의 보안을 보호 할 수 있도록 실용적인 가이드를 제공합니다. 우리는 피싱 사이트를 식별하는 방법과 공식 웹 사이트, 모바일 앱 또는 신뢰할 수있는 타사 플랫폼을 통해 안전하게 로그인하는 방법을 다루고 강력한 비밀번호 사용 및 2 요인 검증 가능성과 같은 계정 보안을 향상시키기위한 제안을 제공합니다. 잘못된 로그인으로 인한 자산 손실을 피하려면이 기사를주의 깊게 읽으십시오!
OUYI 공식 웹 사이트의 최신 등록 포털
Mar 21, 2025 pm 05:54 PM
세계 최고의 디지털 자산 거래 플랫폼 인 Ouyi Okx는 풍부한 거래 제품, 강력한 보안 보증 및 편리한 사용자 경험으로 많은 투자자를 유치합니다. 그러나 네트워크 보안의 위험이 점점 심해지고 있으며 공식 OUYI OKX 계정을 안전하게 등록하는 방법이 중요합니다. 이 기사는 OUYI OKX 공식 웹 사이트의 최신 등록 포털을 제공하고 공식 웹 사이트를 식별하고 강력한 암호를 설정하고 2 인용 암호 검증을 활성화하는 방법을 포함하여 안전한 등록 단계와 예방 조치를 자세히 설명하여 디지털 자산 투자 여행을 안전하고 편리하게 시작하는 데 도움이됩니다. 디지털 자산 투자에는 위험이 있습니다. 신중한 결정을 내리십시오.
Ouyi Exchange App 국내 다운로드 자습서
Mar 21, 2025 pm 05:42 PM
이 기사는 중국의 Ouyi Okx 앱의 안전한 다운로드에 대한 자세한 안내서를 제공합니다. 국내 앱 스토어의 제한으로 인해 사용자는 OUYI OKX의 공식 웹 사이트를 통해 앱을 다운로드하거나 공식 웹 사이트에서 제공 한 QR 코드를 사용하여 스캔 및 다운로드하는 것이 좋습니다. 다운로드 프로세스 중에 공식 웹 사이트 주소를 확인하고 응용 프로그램 권한을 확인하고 설치 후 보안 스캔을 수행하며 2 요인 확인을 활성화하십시오. 사용하는 동안 현지 법률 및 규정을 따르고, 안전한 네트워크 환경을 사용하고, 계정 보안을 보호하고, 사기에 대해 경계하고, 합리적으로 투자하십시오. 이 기사는 참조 용이며 투자 조언은 자신의 위험에 처해 있습니다.
Binance Exchange App 국내 다운로드 자습서
Mar 21, 2025 pm 05:45 PM
이 기사는 안전하고 신뢰할 수있는 Binance Exchange 앱 다운로드 가이드를 제공하여 사용자가 국가에서 Binance 앱 다운로드 문제를 해결할 수 있도록 도와줍니다. 국내 애플리케이션 상점에 대한 제한으로 인해이 기사는 Binance 공식 웹 사이트에서 APK 설치 패키지를 다운로드하는 데 우선 순위를두고 있으며 공식 웹 사이트 다운로드, 제 3 자 애플리케이션 상점 다운로드 및 동시에 공식 웹 사이트 주소를 확인하는 동안 보안 예방 조치를 강조합니다. 또한이 기사는 사용자에게 현지 법률 및 규정을 이해하고, 네트워크 보안에주의를 기울이고, 개인 정보 보호, 사기, 합리적 투자를 조심하고, 보안 거래를 조심해야한다고 상기시킵니다. 기사가 끝나면 기사는 Binance 앱 다운로드 및 사용이 현지 법률 및 규정을 준수해야하며 자신의 위험에 따라 투자 조언을 구성하지 않는다는 점을 다시 한 번 강조했습니다.
Bitmex Exchange의 최신 공식 웹 사이트에 로그인하십시오.
Mar 21, 2025 pm 06:06 PM
이 기사는 사용자가 Bitmex Exchange의 최신 공식 웹 사이트에 액세스하고 거래 보안을 개선 할 수 있도록 안전하고 신뢰할 수있는 가이드를 제공합니다. 규제 및 사이버 보안 위협으로 인해 공식 Bitmex 웹 사이트를 식별하고 피싱 웹 사이트가 계정 정보 및 자금을 훔치는 것을 피하는 것이 중요합니다. 이 기사는 신뢰할 수있는 cryptocurrency 플랫폼, 공식 소셜 미디어, 뉴스 미디어 및 공식 이메일을 통해 공식 웹 사이트 포털 검색을 소개합니다. HTTPS 연결, 보안 증명서 확인 및 정기적으로 비밀번호 변경을 사용하여 도메인 이름을 확인하는 것의 중요성을 강조합니다. cryptocurrency 거래는 위험이 높습니다.주의해서 투자하십시오.
Coinbase Exchange 웹 버전 로그인 포털
Mar 21, 2025 pm 05:48 PM
Coinbase Exchange 웹 버전은 편의로 인기가 있지만 안전한 액세스가 중요합니다. 이 기사는 사용자가 공식 코인베이스 웹 버전에 안전하게 로그인하고 피싱 웹 사이트 및 해커를 피하도록 안내합니다. 우리는 검색 엔진, 신뢰할 수있는 타사 플랫폼 및 공식 소셜 미디어를 통해 공식 포털을 검증하는 방법을 자세히 설명하고 주소 변호사 보안 잠금 확인, 2 요인 확인, 공개 Wi-Fi를 피하고, 정기적으로 암호 변경 및 디지털 자산의 보안을 보장하기 위해 전자 메일을 피하는 것과 같은 보안 조치를 강조합니다. 공식 코인베이스 웹 사이트에 대한 올바른 액세스는 디지털 통화를 보호하는 첫 번째 단계는 디지털 통화 거래를 안전하게 시작하는 데 도움이됩니다.
Bitmex Exchange의 최신 공식 웹 사이트 입구
Mar 21, 2025 pm 06:03 PM
베테랑 cryptocurrency 파생 상품 거래 플랫폼으로서 공식 웹 사이트 입학의 정확성이 중요합니다. Phishing 웹 사이트로 인해 가짜 웹 사이트로의 오해 입력은 도난과 자금 손실로 이어질 수 있습니다. 이 기사는 사용자가 Bitmex 공식 웹 사이트에 안전하게 액세스하고 신뢰할 수있는 cryptocurrency 정보 플랫폼 (예 : CoinmarketCap, Coingecko), 공식 소셜 미디어, 기존 주소 검증 및 공식 지원 채널의 검증, 2 인용 검증, 정기적 인 암호 변경 및 보안 소프트웨어의 사용을 강조하여 사용자에게 영향을 미치고 보안을 피할 수 있도록 강조합니다.
국가에서 Binance를 다운로드하는 방법
Mar 21, 2025 pm 05:33 PM
이 기사는 국내 앱 스토어의 제한으로 인해 Binance 앱을 안전하게 다운로드하기위한 안내서를 제공합니다. Binance 공식 웹 사이트를 통해 APK 설치 패키지를 다운로드하거나 QR 코드를 스캔하여 앱을 신중하게 확인하고 응용 프로그램 권한을 확인하고 설치 후 보안 스캔을 수행하며 2 요인 확인 (2FA)을 활성화하는 것이 좋습니다. 다운로드 및 사용하기 전에 현지 법률 및 규정을 이해하고 준수하십시오. 이 기사는 참조 용이며 모든 위험은 사용자가 부담합니다. 키워드 : Binance, Binance, 다운로드, 앱, 국내, 보안, 자습서, 디지털 통화, 암호 화폐
