웹 페이지 로드 및 실행 순서
웹 기반 프로젝트를 몇 번 해봤지만, 일반 웹 페이지의 로드 및 실행 순서에 대해서는 크게 생각하지 않습니다.하지만 이제 자세히 알아야겠어구글이나 SO에서는 답을 찾기 어렵기 때문에 이 질문을 하게 되었습니다.
샘플 페이지는 다음과 같습니다.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
질문하겠습니다.
- 이 페이지는 어떻게 로딩됩니까?
- 로딩 순서는 어떻게 됩니까?
- JS 코드는 언제 실행됩니까?(외부 및 외부)
- CSS는 언제 실행됩니까(적용)?
- $(문서)는 언제입니까?실행할 준비가 되었습니까?
- abc.jpg는 다운로드됩니까?아니면 그냥 kk.png만 다운받나요?
저는 다음과 같이 이해하고 있습니다.
- 브라우저는 처음에 html(DOM)을 로드합니다.
- 브라우저는 외부 리소스를 위에서 아래로 한 줄씩 로드하기 시작합니다.
- 「」의 '
<script>이 경우 로딩이 차단되고 JS 파일이 로드 및 실행될 때까지 기다린 후 계속 진행합니다. - 다른 자원(CSS/이미지)은 병렬로 로드되어 필요에 따라 실행됩니다(CSS 등).
아니면 이런 건가요?
브라우저는 html(DOM)을 해석하여 배열 또는 스택형 구조로 외부 리소스를 가져옵니다.html이 로드되면 브라우저는 모든 리소스가 로드될 때까지 구조체의 외부 리소스를 병렬로 로드하여 실행합니다.그러면 JS에 따라 사용자의 행동에 따라 DOM이 변경됩니다.
html 페이지의 응답을 받았을 때 어떤 일이 일어나는지 누가 자세히 설명해 줄 수 있나요?이것은 브라우저에 따라 달라집니까?이 질문에 대한 언급은?
감사해요.
편집:
파이어폭스 파이어버그 이 은 다음과 입니다.
편집: 2022년입니다.웹 페이지 로드 및 실행 및 브라우저 작동 방법에 대한 자세한 내용은 https://disc.engineering/(오픈소스:https://github.com/browserengineering/book))을 참조하십시오.
당신의 샘플에 따르면,
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
대략 실행 흐름은 다음과 같습니다.
- HTML 문서가 다운로드 됩니다.
- HTML 문서의 구문 분석이 시작됩니다.
- 이 HTML에 도달하다
<script src="jquery.js" ... jquery.js분석합니다.- 이 HTML에 도달하다
<script src="abc.js" ... abc.js, 및 실행되다- 이 HTML에 도달하다
<link href="abc.css" ... abc.css분석합니다.- 이 HTML에 도달하다
<style>...</style> - 내부 CSS 규칙은 해석 및 정의됩니다.
- 이 HTML에 도달하다
<script>...</script> - 내부 Javascript를 구문 분석하여 실행합니다.
- 이 HTML에 도달하다
<img src="abc.jpg" ... abc.jpg됩니다.- 이 HTML에 도달하다
<script src="kkk.js" ... kkk.js, 및 실행되다- HTML 문서 구문 분석 종료
브라우저의 동작으로 인해 다운로드가 비동기적이고 차단되지 않을 수 있습니다.예를 들어 Firefox에는 도메인당 동시 요청 수를 제한하는 이 설정이 있습니다.
또한 컴포넌트가 이미 캐시되었는지 여부에 따라 조만간 컴포넌트를 다시 요청하지 않을 수도 있습니다.컴포넌트가 캐시된 경우 컴포넌트는 실제 URL이 아닌 캐시에서 로드됩니다.
이 종료되고 로딩되면 " " " " " " " " "onload발각되었습니다. 언제요?onload가 기동해, 「」가 합니다.$("#img").attr("src","kkk.png");행행중중중중다다 ★★★★★★★★★★★★★★★★:
- 문서가 준비되었습니다. 온로드가 실행됩니다.
- 이 Javascript에 히트하다
$("#img").attr("src", "kkk.png"); kkk.png됩니다.#img
$(document).ready()이벤트는 실제로 모든 페이지 구성요소가 로드되고 준비되었을 때 발생하는 이벤트입니다.자세한 것은, http://docs.jquery.com/Tutorials:Introducing_$(document).ready() 를 참조해 주세요.
Edit(편집) - 이 부분에서는 병렬인지 아닌지에 대해 자세히 설명합니다.
기본적으로는 브라우저는 HTML 파서, Javascript/DOM, CSS의 3가지 방법으로 실행됩니다.
HTML 파서는 마크업 언어의 해석과 해석을 담당하기 때문에 다른 2개의 컴포넌트에 콜을 발신할 수 있어야 합니다.
예를 들어 파서가 다음 회선을 통과하는 경우:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
파서는 Javascript에 2개, CSS에 1개 등 3개의 콜을 발신합니다.먼저 파서는 이 요소를 생성하여 이 요소와 관련된 모든 속성과 함께 DOM 네임스페이스에 등록합니다.다음으로 파서는 온클릭이벤트를 이 특정 요소에 바인드하기 위해 호출합니다.마지막으로 이 특정 요소에 CSS 스타일을 적용하기 위해 CSS 스레드에 다시 콜을 발신합니다.
실행은 하향식으로 단일 스레드 방식으로 이루어집니다.Javascript는 멀티 스레드처럼 보일 수 있지만 사실 Javascript는 싱글 스레드입니다.따라서 외부 javascript 파일 로드 시 메인 HTML 페이지의 파싱이 중단됩니다.
단, CSS 규칙은 항상 적용되기 때문에 CSS 파일을 동시에 다운로드할 수 있습니다.즉, 요소는 항상 정의된 최신 CSS 규칙으로 재도장되므로 블록 해제됩니다.
요소는 해석된 후에만 DOM에서 사용할 수 있습니다.따라서 특정 요소를 사용하는 경우 스크립트는 항상 윈도의 온로드 이벤트 뒤에 배치됩니다.
다음과 같은 스크립트는 (jQuery에서) 오류를 일으킵니다.
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
스크립트가때, 「」는 「」를 참조해 주세요.#mydiv요소는 아직 정의되지 않았습니다. 이렇게 : 대, 음, 음, 다, 다, 다, 다, 다, 다, 다, instead instead, instead.
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
또는
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
1) HTML이 다운로드 됩니다.
2) HTML을 단계적으로 해석합니다.자산 요청에 도달하면 브라우저는 자산 다운로드를 시도합니다.대부분의 HTTP 서버 및 대부분의 브라우저에서 기본 설정은 두 개의 요청만 병렬로 처리하는 것입니다.IE는 무제한 수의 자산을 병렬로 다운로드하도록 재구성할 수 있습니다.Steve Souders는 IE에서 100개 이상의 요청을 동시에 다운로드할 수 있었습니다.예외적으로 스크립트 요청은 IE에서 병렬 자산 요청을 차단합니다.그렇기 때문에 모든 JavaScript를 외부 JavaScript 파일에 넣고 HTML에서 종료 본문 태그 바로 앞에 요청을 넣는 것이 좋습니다.
3) HTML을 해석하면 DOM이 렌더링됩니다.CSS는 거의 모든 사용자 에이전트에서 DOM 렌더링과 병렬로 렌더링됩니다.따라서 모든 CSS 코드를 문서의 <head> </head> 섹션에서 가능한 한 높게 요청된 외부 CSS 파일에 입력하는 것이 좋습니다.그 이외의 경우 페이지는 DOM 내의 CSS 요구 위치까지 렌더링되며 이후 렌더링은 처음부터 다시 시작됩니다.
4) DOM이 완전히 렌더링되고 페이지 내의 모든 자산에 대한 요구가 해결되거나 타임아웃된 후에만 JavaScript가 온로드 이벤트에서 실행됩니다.IE7(IE8에 대해서는 잘 모르겠습니다만, 자산 요구로부터 HTTP 응답이 수신되지 않는 경우)는, 자산의 타임 아웃을 신속히 실시하지 않습니다.즉, JavaScript가 페이지에 인라인으로 요청한 자산, 즉 함수에 포함되지 않은 HTML 태그에 기록된 JavaScript는 몇 시간 동안 온로드 이벤트의 실행을 방지할 수 있습니다.이 문제는 페이지에 이러한 인라인코드가 존재하고 네임스페이스의 충돌로 인해 코드가 크래시되어 실행되지 않을 경우 트리거될 수 있습니다.
위의 절차 중 CPU 부하가 가장 높은 것은 DOM/CSS 해석입니다.페이지를 고속으로 처리하려면 용장성 명령을 삭제하고 CSS 명령을 가능한 최소한의 요소 참조로 통합하여 효율적인 CSS를 작성합니다.또한 DOM 트리의 노드 수를 줄이면 렌더링 속도가 빨라집니다.
HTML 또는 CSS/JavaScript 자산에서 요구하는 각 자산에는 별도의 HTTP 헤더가 필요합니다.이로 인해 대역폭이 소비되어 요구별로 처리해야 합니다.페이지를 가능한 한 빨리 로드하고 싶다면 HTTP 요청 수를 줄이고 HTML 크기를 줄이십시오. HTML에서만 페이지 무게를 180k로 평균화함으로써 사용자의 편의를 도모할 수 없습니다.많은 개발자들은 사용자가 페이지의 콘텐츠 품질에 대해 6나노초 만에 결정을 내리고 DNS 쿼리를 서버에서 지우고 불쾌할 경우 컴퓨터를 태운다는 오류에 동의하고 있습니다.그래서 HTML을 25k의 HTML로 가능한 가장 아름다운 페이지를 제공합니다.사용자가 당신의 HTML을 짧고 달콤하게 로딩할 수 있도록 하세요.보다 고속의 페이지.빠르고 응답성이 뛰어난 웹 페이지만큼 사용자 경험을 향상시키는 것은 없습니다.
파이어폭스에서 페이지를 열고 HTTPFox 애드온을 가져옵니다.필요한 건 다 알려줄 거예요.
보관소에서 찾았어요삽입:
http://archivist.incutio.com/viewlist/css-discuss/76444
페이지를 처음 요청하면 브라우저는 GET 요청을 서버로 전송하고 서버는 HTML을 브라우저로 반환합니다.그런 다음 브라우저가 페이지 해석을 시작합니다(모든 페이지가 반환되기 전일 수 있습니다).
외부 엔티티(CSS 파일, 이미지 파일, 스크립트파일, 플래시 파일, 또는 페이지 외부(같은 서버/도메인상의 어느 쪽인가)에 대한 참조가 검출되면, 그 자원에 대한 추가 GET 요구를 작성할 준비를 합니다.
단, HTTP 표준에서는 브라우저가 같은 도메인에 대해 동시에3개 이상의 요구를 할 수 없도록 규정하고 있습니다.따라서 각 요구를 큐 내의 특정 도메인에 배치하고 각 엔티티가 반환되면 해당 도메인의 큐 내의 다음 엔티티를 시작합니다.
엔티티가 반환되는 데 걸리는 시간은 엔티티의 크기, 서버에서 현재 발생하고 있는 부하 및 브라우저를 실행하고 있는 머신과 서버 간의 각 머신의 액티비티에 따라 달라집니다.이러한 머신의 리스트는, 어느쪽인가의 이미지가 미국에서 대서양을 경유해 영국에 있는 나에게 전송 되는 경우가 있는 한편, 같은 서버로부터 다른쪽의 이미지가 태평양, 아시아, 및 유럽을 경유하는 경우는, 요구 마다 원칙적으로 다릅니다.따라서 다음과 같은 시퀀스를 얻을 수 있습니다.페이지에는 크기가 다른3개의 스크립트파일 및 5개의 이미지 파일이 (이 순서로) 참조됩니다.
- GET script1 및 script2.script3 및 images1 ~ 5의 큐 요구.
- script2가 도착(script1보다 작음): GET script3, queue images1 ~ 5 。
- script1이 도착합니다.GET image1, 큐이미지2-5.
- image1이 도착하고 GET image2가 도착하며 queue images3-5가 됩니다.
- 네트워크 문제로 인해 script3가 도착하지 않음 - GET script3을 다시 가져옵니다(자동 재시도).
- image2가 도착했는데 script3은 아직 없습니다.GET image3, 큐이미지4-5
- 이미지 3이 도착하고 GET 이미지 4, 큐이미지 5, 스크립트3이 아직 진행 중입니다.
- image4가 도착하고 GET image5;
- image5가 도착합니다.
- script3가 도착합니다.
즉, 서버의 동작, 나머지 인터넷의 동작, 에러 유무에 따라서는, 낡은 순서를 다시 취득할 필요가 있습니다.이것은 이상하게 보일지도 모르지만, 만약 이런 식으로 하지 않는다면 WWW뿐만 아니라 인터넷이 어느 정도의 신뢰성으로 작동하는 것은 문자 그대로 불가능할 것이다.
또한 브라우저의 내부 큐는 페이지에 표시된 순서대로 엔티티를 가져오지 않을 수 있습니다. 어떤 표준에서도 엔티티를 가져올 필요가 없습니다.
(브라우저와 ISP가 네트워크의 부하를 경감하기 위해 사용하는 프록시 캐싱 모두 캐싱하는 것을 잊지 마십시오.
웹 사이트의 속도를 높이고 싶어서 이 질문을 하는 경우 웹 사이트의 속도를 높이는 모범 사례에서 야후의 페이지를 확인하십시오.웹 사이트의 속도를 높이기 위한 많은 베스트 프랙티스가 있습니다.
AFIK는 브라우저(적어도 Firefox)가 해석하는 즉시 모든 리소스를 요구합니다.img 태그가 검출되면 img 태그가 해석되는 즉시 해당 이미지를 요구합니다.HTML 문서 전체를 수신하기도 전에...그때도 HTML 문서를 다운로드하고 있을 수 있습니다.
Firefox의 경우 브라우저 큐가 about:config에서 설정된 방법에 따라 적용됩니다.예를 들어, 같은 서버에서 동시에 8개 이상의 파일을 다운로드하려고 시도하지 않습니다.추가 요청이 대기열에 들어갑니다.도메인별, 프록시별 제한 및 기타 사항이 Mozilla 웹사이트에서 문서화되어 있으며 약:config에서 설정할 수 있습니다.IE에는 그런 제한이 없다는 걸 어디선가 읽었어요.
jQuery ready 이벤트는 기본 HTML 문서가 다운로드되고 DOM 구문 분석되는 즉시 실행됩니다.다음으로 모든 링크된 리소스(CSS, 이미지 등)가 다운로드되고 해석되면 로드이벤트가 실행됩니다.이는 jQuery 설명서에 명시되어 있습니다.
로딩 순서를 제어하려면 JavaScript를 사용하는 것이 가장 신뢰할 수 있는 방법이라고 생각합니다.
Dynatrace AJAX Edition에서는 페이지 로드, 구문 분석 및 실행 순서를 정확하게 보여 줍니다.
선택된 답변은 적어도 Firefox 52에서는 최신 브라우저에는 적용되지 않는 것으로 보입니다.내가 관찰한 것은 예를 들어 HTML 파서가 요소에 도달하기 전에 css, javascript와 같은 자원의 로딩 요청이 발행된다는 것이다.
<html>
<head>
<!-- prints the date before parsing and blocks HTMP parsering -->
<script>
console.log("start: " + (new Date()).toISOString());
for(var i=0; i<1000000000; i++) {};
</script>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript"></script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
css 및 javascript 리소스 로드 요청 시작 시간이 차단되지 않았습니다.Firefox에는 HTML 스캔이 있어 HTML 해석을 시작하기 전에 주요 리소스(img 리소스 미포함)를 식별합니다.
언급URL : https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
'programing' 카테고리의 다른 글
| 'with' 문장에 여러 변수가 있습니까? (0) | 2022.11.08 |
|---|---|
| Firebase 스토리지, vue 앱으로 이미지 검색 (0) | 2022.11.08 |
| --secure-file-priv 인수를 정규화하지 못했습니다. (0) | 2022.11.08 |
| 키=>값 배열을 JavaScript에 저장하는 가장 좋은 방법? (0) | 2022.10.30 |
| 예외를 올바르게 무시하는 방법 (0) | 2022.10.30 |