브라우저는 언제 Javascript를 실행합니까? 실행 커서는 어떻게 움직입니까?
브라우저 커서가 Javascript를 실행하는 방법을 설명하는 사용 가능한 리소스가 있는지 궁금합니다.
페이지가로드 될 때 태그를로드하고 실행하고 다양한 창 이벤트에 함수를 연결할 수 있다는 것을 알고 있지만, 예를 들어 AJAX를 통해 원격 페이지를 검색하고 그 내용을 div에 넣는 경우가 흐릿 해집니다.
원격 페이지가와 같은 스크립트 라이브러리를로드 <script src="anotherscript.js" />해야하는 경우 "anotherscript.js"는 언제로드되고 해당 내용이 실행되고 있습니까?
현재 페이지에 "anotherscript.js"를 포함시킨 다음이 스크립트의 중복 포함이있는 일부 원격 콘텐츠를로드하면 어떻게됩니까? 원본을 덮어 쓰나요? 원래 "anotherscript.js"에 내가 값을 변경 한 var가있는 경우 해당 파일을 다시로드합니다 ... 원래 값을 잃거나이 스크립트의 두 번째 포함이 무시됩니까?
AJAX를 통해 절차 적 자바 스크립트를로드하면 언제 실행됩니까? 내가 한 직후 mydiv.innerHTML(remoteContent)? 아니면 그 전에 실행됩니까?
대답은 스크립트 태그의 위치와 추가 방법에 따라 다릅니다.
마크 업과 인라인 스크립트 태그는 브라우저의 해당 마크 업 처리와 동시에 실행되므로 (예를 들어 # 2 참조) 이러한 태그가 외부 파일을 참조하는 경우 페이지 처리 속도가 느려지는 경향이 있습니다. (이는 브라우저가 처리
document.write중인 마크 업을 변경하는 명령문 을 처리 할 수 있도록하기위한 것 입니다.)defer속성이 있는 스크립트 태그는 일부 브라우저에서 DOM이 완전히 렌더링 될 때까지 실행되지 않을 수 있습니다. 당연히 이들은 사용할 수 없습니다document.write. (마찬가지로async스크립트를 비동기로 만드는 속성이 있지만 이에 대해 잘 모르거나 얼마나 잘 지원되는지 잘 모르겠습니다. 세부 정보 .)DOM로드 후 (
innerHTML및 이와 유사한 방식을 통해) 요소에 할당 한 콘텐츠의 스크립트 태그는 jQuery 또는 Prototype과 같은 라이브러리를 사용하지 않는 한 전혀 실행되지 않습니다. (Andy E가 지적한 예외가 있습니다. IE에서는defer속성 이 있으면 실행합니다. 다른 브라우저에서는 작동하지 않습니다.)script를 통해 문서에 실제 요소를 추가하면Element#appendChild브라우저는 해당 스크립트를 즉시 다운로드하기 시작하고 다운로드가 완료되는 즉시 실행합니다. 이 방법으로 추가 된 스크립트는 동 기적으로 또는 반드시 순서대로 실행되지 않습니다. 먼저를 추가 한<script type="text/javascript" src="MyFct.js"></script>다음 추가<script type="text/javascript">myFunction();</script>하면 원격 (첫 번째) 항목보다 먼저 인라인 (두 번째) 항목을 실행할 수 있습니다. 이런 일이 발생하고MyFct.js선언myFunction()하면 인라인 스크립트와 함께 사용하려고 할 때 정의되지 않습니다. 순서대로 수행해야하는 경우 추가 한 요소 의load및readyStateChange이벤트를 확인하여 원격 스크립트가로드 된시기를 알script수 있습니다 (load대부분의 브라우저에서 이벤트입니다.readyStateChange일부 버전의 IE와 일부 브라우저에서는 둘 다 수행하므로 동일한 스크립트에 대해 여러 알림을 처리해야합니다.<a href='#' onclick='myNiftyJavaScript();'>관련 이벤트가 발생하면 스크립트 태그가 아닌 속성 ( )의 이벤트 핸들러 내부 에있는 스크립트가 실행됩니다.
내 진짜 직업에서 멀리 일하고 갑자기 내 후뇌 말했다 "당신은 당신이 봤는데, 알고 말했다 당신이 그들에게 할당하는 경우가 실행되지 않습니다 innerHTML,하지만 당신은 개인적으로 확인했다?" 그리고 그렇게하지 않았으므로 FWIW :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Script Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function addScript()
{
var str, div;
div = document.getElementById('target');
str = "Content added<" + "script type='text/javascript'>alert('hi there')<" + "/" + "script>";
alert("About to add:" + str);
div.innerHTML = str;
alert("Done adding script");
}
</script>
</head>
<body><div>
<input type='button' value='Go' onclick='addScript();'>
<div id='target'></div>
</div></body>
</html>
스크립트의 경고는 IE7, FF3.6 또는 Chrome4에 표시되지 않습니다 (다른 사람을 확인하지 않고 작업 중입니다. :-)). 여기 에 표시된대로 요소를 추가 하면 스크립트가 실행됩니다.
If you just stuff a block of HTML containing script tags into your DOM with "innerHTML", the script tags won't be executed at all. When you load stuff with something like jQuery, code in that library explicitly handles finding and executing the scripts.
It's not precisely accurate, but you can basically think of the processing of a <script> tag as if the whole contents of the tag (i.e., the script body) were executed with eval(). If the script declares global (window) variables, then old values are overwritten.
Script tags are processed in the order that they appear. Of course the code inside the script blocks may be set up so that what it does upon initial execution is to defer the real processing until later. Lots of jQuery setup/initialization code will do that.
ReferenceURL : https://stackoverflow.com/questions/2342974/when-does-the-browser-execute-javascript-how-does-the-execution-cursor-move
'Development Tip' 카테고리의 다른 글
| 한 jupyter 노트북에서 다른 노트북으로 셀을 복사 할 수 있습니까? (0) | 2021.01.08 |
|---|---|
| SQL Server (C # 클라이언트)에 많은 데이터를 대량 삽입하는 가장 빠른 방법은 무엇입니까? (0) | 2021.01.08 |
| Firebase 저장소 비디오 스트리밍 (0) | 2021.01.08 |
| nvidia-smi 휘발성 GPU 활용 설명? (0) | 2021.01.08 |
| iPhone에서 UIView 대 UIViewController를 언제 사용합니까? (0) | 2021.01.08 |