웹 기반 프로젝트를 수행했지만 일반 웹 페이지의로드 및 실행 순서에 대해서는별로 생각하지 않습니다. 그러나 이제 세부 사항을 알아야합니다. Google 또는 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는 언제 실행됩니까?
- 언제 $ (document) .ready가 실행됩니까?
- abc.jpg가 다운로드됩니까? 아니면 그냥 kkk.png를 다운로드합니까?
다음과 같은 이해가 있습니다.
- 브라우저는 처음에 html (DOM)을로드합니다.
- 브라우저는 외부 리소스를 위에서 아래로 한 줄씩로드하기 시작합니다.
- a
<script>가 충족되면로드가 차단되고 JS 파일이로드되어 실행될 때까지 기다린 후 계속합니다. - 다른 리소스 (CSS / 이미지)는 병렬로로드되고 필요한 경우 (예 : CSS) 실행됩니다.
아니면 다음과 같습니다.
브라우저는 html (DOM)을 구문 분석하고 외부 리소스를 배열 또는 스택 형 구조로 가져옵니다. html이로드 된 후 브라우저는 모든 리소스가로드 될 때까지 구조에서 외부 리소스를 병렬로로드하고 실행하기 시작합니다. 그러면 JS에 따라 사용자의 행동에 따라 DOM이 변경됩니다.
누구나 HTML 페이지의 응답을 받았을 때 어떤 일이 발생하는지 자세히 설명 할 수 있습니까? 브라우저마다 다릅니 까? 이 질문에 대한 언급이 있습니까?
감사.
편집하다:
Firebug를 사용하여 Firefox에서 실험했습니다. 다음 이미지로 표시됩니다.
11
Steve Souders는이 분야에서 많은 작업을 수행했습니다. steve + souders + high + performance를위한 Google을 살펴보십시오.
—
anddoutoi 09
성능 조정을 의미하지는 않습니다. 세부 사항을 알고 싶습니다.
—
Zhu Tao
그의 작품을 읽음으로써 "그것"이 어떻게 작동하는지에 대한 나의 이해는 10 배가되었으므로 여전히 유효한 의견입니다. 나는 저작권에 의해 여기에 그의 전체 책을 인용하는 것이 허용되지 않으므로 여전히 그의 작품을 찾아 볼 것을 제안합니다.
—
anddoutoi