JavaScript : DOM로드 이벤트, 실행 순서 및 $ (document) .ready ()
페이지가 브라우저에로드 될 때 정확히 어떤 일이 발생하는지에 대한 기본적인 지식이 부족하다는 것을 방금 깨달았습니다.
다음과 같은 구조가 있다고 가정합니다.
<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>
내가 가진 질문은 다음과 같습니다.
무슨 일이 일어나고 있습니까? 먼저 DOM이 실행 된 다음 JS가 실행됩니다. 그 반대입니까? 아니면 동시입니까 (또는 DOM에 관계없이 JS 파일 다운로드가 완료되는 즉시)? 스크립트가 순서대로로드된다는 것을 알고 있습니다.
어디에
$(document).ready()적합합니까? Firebug의 Net 탭에서DOMContentLoaded이벤트와load이벤트를 볼 수 있습니다. 이벤트 가$(document).ready()발생하면 트리거DOMContentLoaded됩니까? 이에 대한 구체적인 정보를 찾을 수 없습니다 (모든 사람이 "DOM이로드 될 때"라고만 언급 함)."DOM이로드 될 때"는 정확히 무엇을 의미합니까? 모든 HTML / JS가 브라우저에 의해 다운로드되고 파싱 되었습니까? 아니면 HTML 만?
다음 시나리오가 가능 합니까?
$(document).ready()에서 코드를 호출last.js하지만 last.js가로드되기 전에 실행되는 시나리오가 있습니까? 가장 가능성이 높은 위치 (first.js인라인 코드 블록 또는 인라인 코드 블록)는 어디입니까? 이 시나리오를 어떻게 방지 할 수 있습니까?
나는 언제 무슨 일이 일어나고 무엇에 달려 있는지에 대한 큰 그림을 이해하고 싶다.
자바 스크립트는 보이는대로 실행됩니다. 일반적으로 브라우저는 <script>태그를 확인하고 스크립트를 다운로드 및 실행 한 다음 계속 진행 하는 즉시 페이지 구문 분석을 중지 합니다. 이것이 바로 <script>하단 에 태그 를 배치하는 것이 일반적으로 권장되는 이유입니다 . 따라서 브라우저가 스크립트 다운로드를 기다리는 동안 사용자는 빈 페이지를 가지지 않습니다.
그러나 Firefox 3.5부터는 나머지 페이지가 렌더링되는 동안 스크립트가 백그라운드에서 다운로드됩니다. 스크립트가 사용하는 비정상적인 이벤트 document.write에서 Firefox는 필요에 따라 백업하고 다시 그립니다. 지금은 다른 브라우저가이 작업을 수행하지 않는다고 생각합니다.하지만 앞으로 나올 것이라해도 놀라지 않을 것입니다. IE는 적어도 페이지가로드 될 때까지 스크립트로드를 지연 defer시키는 <script>태그 의 속성을 지원합니다 .
DOMContentLoaded정확히 그것은 DOM이로드되는 즉시 실행됩니다. 즉, 브라우저가 모든 HTML을 파싱하고 내부적으로 트리를 생성하자마자. 이미지, CSS 등이로드 될 때까지 기다리지 않습니다. DOM은 일반적으로 원하는 Javascript를 실행하는 데 필요한 전부이므로 다른 리소스를 기다릴 필요가없는 것이 좋습니다. 그러나 Firefox 만 지원한다고 생각합니다 DOMContentLoaded. 다른 브라우저에서는 ready()일반 오래된 onload.
자바 스크립트는 HTML에 표시되는 순서대로 실행되므로 이벤트에 첨부하기 전에 함수가 정의되어 있는지 확인하십시오.
- 모든 스크립트 포함은 html에 나타나는 순서대로 발생하며 html이 구문 분석 될 때로드됩니다.
- 이는 모든 dom 객체가로드되었으며 모두 스크립트와 CSS를 포함 함을 의미합니다. (아직 이미지가 아닐 수도 있습니다).
- 2 참조.
- $ (document) .ready ()는 모든 스크립트와 dom 객체가로드 된 후에 만 호출을 받으므로 괜찮습니다.
http://javascript.about.com/od/hintsandtips/a/exeorder.htm 은 이에 대한 답변을
기본적으로 : 먼저 모든 데이터가로드되고 (html), js는 함수에 없거나 준비되지 않은 헤드 / 본체 내의 코드가 먼저 실행됩니다. 거기에서 스크립트에 대해 순차적으로 진행됩니다.
js가 ie보다 우선한다는 점에 유의하는 것이 중요합니다. css 로딩-성능 관점을 형성하려면 페이지 하단에 js가 있어야합니다.
그래서 @ 4 : first.js는 항상 last.js보다 먼저 읽히거나 실행되기 때문에 시나리오를 막을 필요가 없습니다.
'Development Tip' 카테고리의 다른 글
| 부분보기에 JavaScript를 넣어도 괜찮습니까? (0) | 2020.12.05 |
|---|---|
| NPM으로 패키지를 설치할 때 종속성 중 하나의 다른 버전을 사용하도록 지정할 수 있습니까? (0) | 2020.12.05 |
| CSS 전환과 JS 애니메이션 패키지의 성능 (0) | 2020.12.05 |
| createElement 대 createElementNS (0) | 2020.12.05 |
| 퀴즈로 C #의 중첩 된 제네릭 클래스 이해 (0) | 2020.12.05 |