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


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

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

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

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

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

2   51   2010-02-26 19:13:12

2 ответа:

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

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

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

  3. Теги скриптов в содержимом, которое вы назначаете элементам после загрузки DOM (через innerHTML и тому подобное) не выполняются вообще, мешает использовать библиотеки, такие как jQuery или Prototype, чтобы сделать это для вас. (за одним исключением, указанным Энди E: на IE, если у них есть он будет выполнять их. Не работает в других браузерах.)

  4. если вы добавляете фактический 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, и некоторые браузеры делают оба, так что вы должны обрабатывать несколько уведомлений для одного и того же скрипта).

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


сказал они не будет выполняться, если вы назначите их innerHTML, а вы лично проверяли?"И у меня не было, поэтому я сделал ... чистки рядов:
<!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 (я не потрудился проверить других, я должен работать :-) ). В то время как если вы добавляете элементы, как показано здесь, скрипт выполняется.

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

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

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