2009-08-20 3 views
55

페이지가 브라우저에로드 될 때 정확히 무슨 일이 발생했는지에 대한 기본적인 지식이 부족하다는 것을 깨달았습니다. 여기

<head> 

<script src="jquery.js" type="text/javascript"></script> 
<script src="first.js" type="text/javascript"></script> 
</head> 
<body> 
... 
<script type="text/javascript" id="middle"> 
    // some more JS here... 
</script> 
... 
<script src="last.js" type="text/javascript"></script> 
</body> 

내가 가지고있는 질문은 다음과 같습니다 :

내가이 같은 구조를 가지고 가정

  1. 일이 일어나고 무엇 순서 ? 먼저 DOM이 실행 된 후 JS가 실행됩니다. 그 반대의 경우입니까, 아니면 동시에 실행중인 경우 (또는 JS 파일 다운로드가 끝나자 마자 DOM에 관계없이)? 스크립트가 순서대로로드된다는 것을 알고 있습니다.

  2. $(document).ready()은 어디에 있습니까? Firebug의 Net 탭에서 DOMContentLoaded 이벤트와 load 이벤트가 표시됩니다. DOMContentLoaded 이벤트가 발생하면 $(document).ready()이 트리거됩니까? 이에 대한 구체적인 정보를 찾을 수 없습니다 (모든 사람들은 "DOM로드 시점"을 언급합니다).

  3. 정확히 "DOM로드시"는 무엇을 의미합니까? 모든 HTML/JS가 브라우저에 의해 다운로드되고 구문 분석 되었습니까? 아니면 그냥 HTML?

  4. 다음 시나리오를 사용할 수 있습니다. last.js에 코드를 호출하지만 last.js가로드되기 전에 실행되는 $(document).ready()이 있습니까? 어디에서 가장 가능성이 높을까요 (first.js 또는 인라인 코드 블록)? 이 시나리오를 방지하려면 어떻게해야합니까?

나는의 큰 그림을 알아 보았 싶은 일이 무엇 무엇을 (만약에 전혀)에 따라 달라집니다.

답변

36

전에 실행/그 scenarion을 방지하기 위해 필요 없어요.보통, 브라우저가 <script> 태그를보고 즉시 페이지 구문 분석을 중지하고 스크립트를 다운로드하여 실행 한 다음 계속합니다. 이 때문에 일반적으로 하단에 <script> 태그를 넣는 것이 좋습니다 : 브라우저가 스크립트 다운로드를 기다리는 동안 사용자가 빈 페이지를 갖지 않도록합니다.

그러나 Firefox 3.5부터는 나머지 페이지가 렌더링되는 동안 스크립트가 백그라운드에서 다운로드됩니다. 스크립트가 document.write 또는 이와 유사한 것을 사용하는 지금과 같은 비정상적인 이벤트에서 Firefox는 필요한만큼 백업하고 다시 그립니다. 나는 다른 브라우저가 지금 당장이 방법을 사용하지 않는다고 생각하지만, IE가 나오면 놀랄 일이 아니며 적어도 IE가 이라는 속성을 지원한다. <script> 태그는 페이지가로드 될 때까지 스크립트 로딩을 연기 할 것이다.

DOMContentLoaded은 DOM이로드되는 즉시 발생합니다. 즉, 브라우저가 HTML을 모두 파싱하고 내부적으로 트리를 생성하자 마자. 이미지, CSS 등이로드 될 때까지 기다리지 않습니다. DOM은 원하는 자바 스크립트를 실행하기 위해 일반적으로 필요한 것이므로 다른 리소스를 기다릴 필요가 없습니다. 그러나, 나는 Firefox가 DOMContentLoaded을 지원한다고 믿습니다. 다른 브라우저에서 ready()은 일정한 이전의 onload에 이벤트를 첨부합니다.

자바 스크립트가 HTML에 나타나는 순서대로 실행되도록 보장되므로 함수를 이벤트에 첨부하기 전에 함수가 정의되어 있는지 확인하십시오.

+0

매우 흥미 롭습니다. 미래 지향적 인 관점에 감사드립니다! – montrealist

+0

실제로 스크립트를 맨 아래에 놓는 것은 도움이되지만 페이지가로드되기 전에 스크립트를 실행해야합니다. 비동기 적으로로드하는 것이 훨씬 낫습니다. 즉, 브라우저를 맨 위에 올려 놓더라도 브라우저는 계속 페이지를 파싱하고 스크립트를 병렬로로드합니다. 유일한 문제는 더 이상 스크립트가 실행되는 순서를 알지 못한다는 것입니다. – Jens

+0

나는의 시작에서 의 끝으로 옮겨진 스크립트로 IE9에서 aspx 페이지를 테스트했으며 스크립트가 머리 속에있을 때 더 빠른로드 시간을 발견했다. 사용자 경험을 측정하기 위해로드하는 비디오를 기록했습니다. 나에게 확실한 승자가 없다. – mishal153

6
  1. 모든 스크립트는 html에 나타나는 순서대로 발생합니다. html이 구문 분석 될 때로드됩니다.
  2. 모든 DOM 개체가로드되었고 모두 스크립트와 CSS가 포함되어 있음을 의미합니다. (아마도 이미지가 아닐 수도 있습니다).
  3. 2.
  4. $ (document) .ready()는 모든 스크립트와 DOM 객체가로드 된 후에 만 ​​호출됩니다. 괜찮을 것입니다.
4

http://javascript.about.com/od/hintsandtips/a/exeorder.htm 당신이 답한다

기본적으로 그 : 먼저 모든 데이터를로드합니다 (HTML), 다음 JS 함수에없는 머리/몸 안에있는 코드 또는 준비 또는 그런 것이 먼저 실행됩니다. 거기서부터 순차적으로 스크립트에 대해 간다.

js가 ie보다 우선한다는 점에 유의해야한다. CSS 로딩 - 그래서 당신은 페이지의 하단에 js가 있어야 성능 관점을 형성.

그래서 4 @ : 당신이 first.js 항상 읽어되고 있기 때문에 last.js

는 알 수 있듯이 자바 스크립트가 실행
관련 문제