Когда браузер выполняет Javascript? Как движется курсор выполнения?

Мне было интересно, есть ли доступные ресурсы, которые описывают, как курсор браузера выполняет Javascript.

Я знаю, что он загружает и выполняет теги при загрузке страницы и что вы можете прикреплять функции к различным событиям окна, но там, где вещи становятся нечеткими, когда я, например, извлекаю удаленную страницу через AJAX и помещаю ее содержимое в дела.

Если эта удаленная страница загрузила библиотеки script, такие как <script src="anotherscript.js" />, когда загружается "anotherscript.js" и ее содержимое выполняется?

Что произойдет, если я включил "anotherscript.js" на мою текущую страницу, а затем загрузите какой-то удаленный контент с дубликатом этого script? Переписывает ли он оригинальный? Что, если у исходного "anotherscript.js" есть var, значение которого я изменил, а затем перезагрузите этот файл... потерять ли исходное значение или второе включение этого script игнорируется?

Если я загружаю некоторый процедурный Javascript через AJAX, когда он выполняется? Сразу после того, как я делаю mydiv.innerHTML(remoteContent)? Или он выполняется до этого?

Ответы

Ответ 1

Ответ зависит от того, где находится тег script и как вы его добавили:

  • Script теги, встроенные в вашу разметку, выполняются синхронно с обработкой этой разметки браузером (кроме, см. № 2), и поэтому, если - например, те теги ссылаются на внешние файлы, они имеют тенденцию замедлить обработку страницы. (Это значит, что браузер может обрабатывать операторы document.write, которые изменяют разметку, которую они обрабатывают.)

    Теги

  • Script с атрибутом defer могут в некоторых браузерах не выполняться до тех пор, пока DOM не будет полностью отображен. Естественно, они не могут использовать document.write. (Аналогично, существует атрибут async, который делает асинхронным script, но я мало знаю об этом или насколько хорошо он поддерживается; details.)

  • Script теги в содержимом, который вы назначаете элементам после загрузки DOM (через innerHTML и тому подобное), вообще не выполняются, запрещая использование библиотеки jQuery или Prototype для этого. (С одним исключением, указанным Энди Е: В IE, если у них есть атрибут defer, он будет выполнять их. Не работает в других браузерах.)

  • Если вы добавите фактический элемент script в документ через Element#appendChild, браузер начнет загрузку этого script немедленно и выполнит его, как только загрузка будет завершена. Сценарии, добавленные таким образом, не выполняются синхронно или обязательно в порядке. Первое добавление <script type="text/javascript" src="MyFct.js"></script>, а затем добавление <script type="text/javascript">myFunction();</script> вполне может выполнить встроенный (второй) один перед удаленным (первым). Если это произойдет, и MyFct.js объявит myFunction(), он не будет определен, когда мы попытаемся использовать его со встроенным script. Если вам нужно что-то сделать, вы можете узнать, когда загружен удаленный script, наблюдая за событиями load и readyStateChange в добавляемом элементе script (load - это событие в большинстве браузеров, readyStateChange в некоторых версиях IE, а некоторые браузеры делают оба, поэтому вам нужно обрабатывать несколько уведомлений для одного и того же script).

  • Script внутри обработчиков событий по атрибутам (<a href='#' onclick='myNiftyJavaScript();'>), а не в теге script, выполняется соответствующее событие.

Я работал в своей реальной работе, и вдруг мой задний мозг сказал: "Знаете, вам сказали, что они не будут выполнены, если вы назначили их 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>

Предупреждение от script не отображается в IE7, FF3.6 или Chrome4 (я не удосужился проверить других, я должен работать:-)). Если вы добавили элементы, как показано здесь, выполняется script.

Ответ 2

Если вы просто введете блок HTML, содержащий теги script в свой DOM с помощью "innerHTML", теги script не будут выполнены вообще. Когда вы загружаете материал с чем-то вроде jQuery, код в этой библиотеке явно обрабатывает поиск и выполнение скриптов.

Это не точно точно, но вы можете в принципе думать об обработке тега <script>, как если бы все содержимое тега (т.е. тело script) выполнялось с помощью eval(). Если script объявляет глобальные (оконные) переменные, тогда старые значения будут перезаписаны.

Теги

Script обрабатываются в том порядке, в котором они отображаются. Конечно, код внутри блоков script может быть настроен таким образом, чтобы при первоначальном выполнении он должен отложить реальную обработку до конца. Это сделает код установки/инициализации jQuery.