Очерёдность событий и синхронизация в JavaScript
Проблемы с очерёдностью исполнения являются источником некоторых наиболее коварных багов в JavaScript-приложениях. Ошибки, которые не проявлялись во время разработки, внезапно начинают приводить к проблемам, когда приложение используется конечным пользователем на старом компьютере или с медленным доступом в интернет. Эти проблемы могут проявляться случайным образом. В этом случае их довольно сложно воспроизвести.
Простой пример: рассмотрим кнопку с обработчиком нажатия мышью, которая изменяет некоторый элемент, находящийся ниже её. Если пользователь нажимает кнопку до того, как исходный текст элемента был распарсен (декодирован и преобразован во внутреннее представление), скрипт вызовет ошибку. Разработчик никогда не столкнётся с этой проблемой, поскольку он тестирует страницу на быстром компьютере с быстрым подключением, на котором вся страница загружается в одно мгновение.
Данная статья является попыткой описать всевозможные проблемы с очерёдностью исполнения в современных браузерах.
Окно браузера использует единственный поток исполнения, который производит разпознавание HTML-кода, управление событиями и выполнение кода на JavaScript.
Код на JavaScript исполняется в одном из двух режимов:
- Код высшего уровня (основная программа) выполняется в процессе загрузки страницы
- Функции-обработчики событий выполняются в процессе управления событиями
Оба типа исполнения инициируются браузером, и они выполняются в одном и том же потоке таким образом, что только одна единица кода выполняется в один момент времени.
Как правило, исполнение кода в браузере управляется событиями (т.е. является реакцией на пользовательский ввод), но во время загрузки страницы оно управляется ещё и потоком парсинга страницы.
Событие является сигналом от браузера, говорящим о каком-то изменении в окне страницы, которое уже произошло или должно произойти в ближайшем времени, если вы не предпримете каких-либо мер.
Обработчик события - функция на JavaScript, которая назначается в соответствие некоторой паре из объекта и названия события. Когда соответствующее событие происходит для данного объекта, выполняются все обработчики событий, назначенные этому узлу.
Все функции-обработчики событий выполняются последовательно, и каждое событие обрабатывается полностью (включая всплывание сквозь DOM и выполнение действия по умолчанию) перед тем, как будет выполнено следующее событие.
Действие по умолчанию является особенностью модели событий браузера: это действие, которое происходит, если JavaScript не перехватывает событие. Например, действие по умолчанию для события click на ссылке является переход на URL. Событием по умолчанию для нажатия мышью на чекбоксе является включение галочки, и так далее.
Действие по умолчанию не является само по себе обработчиком события, и мы не можем его удалить или переопределить, в отличие от пользвательских обработчиков событий. Однако, мы можем отменить его выполнение во время обработки события, используя preventDefault() (или event.returnValue в IE). Если действие по умолчанию отменено, все прочие обработчики событий всё равно будут выполнены, но действие по умолчанию после этого выполнено не будет.
Такие события как load возникают только для соответствующего объекта (в данном случае, window или document ). Однако, для событий, происходящих для отдельных элементов документа, возможно также выполнение обработчиков событий для элементов-предков.
До того как событие возникнет для целевого объекта, имеет место фаза перехвата, во время которой предки целевого узла могут перехватить событие. Однако, перехватывание событий работает неодинаково в разных браузерах.
Некоторые события всплывают, что означает, что после того как они возникли для целевого элемента, они по очереди возникают для каждого предка в DOM-дереве, вплоть до объекта document включительно. Этот процесс идентичен в различных браузерах.
Весь процесс возникновения события для всех соответствующих элементов и вызова действия по умолчанию называется управлением событиями.
Для невсплывающего события порядок управления событиями является таким:
- Фаза перехвата: все "перехватывающие" обработчики событий выполняются для всех элементов-предков, сверху вниз по иерархии.
- Событие возникает для целевого элемента, что означает, что выполняются все обработчики события, назначенные данному элементу для данного события (в неопределённом порядке).
- Выполняется действие по умолчанию (если оно не было отменено одним из обработчиков).
Для всплывающего события порядок таков:
- Фаза перехвата: все "перехватывающие" обработчики событий выполняются для всех элементов-предков, сверху вниз по иерархии.
- Событие возникает для целевого элемента.
- Фаза всплывания: событие возникает для всех событий-предков, начиная с целевого и выше.
- Выполняется действие по умолчанию (если оно не было отменено одним из обработчиков).
Всплывание события возможно отменить используя stopPropagation() (cancelBubble() в IE), однако действие по умолчанию всё равно будет выполнено. Таким образом, отмена всплывания и отмена действия по умолчанию являются отдельными и независимыми операциями.
Отдельные этапы работы модели событий объясняются гораздо более подробно в спецификации DOM 3 Events.
Существуют некоторые интересные ситуации, в которых действие по умолчанию на самом деле происходит до управления событиями - но всё равно может быть отменено. Например, когда происходит нажатие на чекбоксе, отображение галочки и установка атрибута checked происходят ещё до активации обработчиков события. Однако, если действие по умолчанию отменяется, эти изменения откатываются во время фазы действия по умолчанию. Галочка снова снимается, а атрибут checked переключается обратно.
Некоторые события активируются группами: т.е. одно действие пользователя приводит к вызову нескольких событий.
Например, когда фокус переходит от одного поля к другому, событие blur возникает для одного поля, а focus - для другого. В принципе, это происходит одновременно (поскольку это является реакцией на одно действие пользователя), однако события всё равно возникают по очереди.
Если событие всплывает, вся последовательность перехвата-всплывания событий и вызов действия по умолчанию происходят перед обработкой следующего события.
Примером такого случая является отпускание кнопки мыши над кнопкой на странице. В этом случае возникают события mouseup и click . Выполняются следующие этапы:
- Фаза перехвата для
mouseup – выполняются все перехватывающие обработчики.
- Событие возникает для целевого элемента.
- Фаза всплывания для
mouseup - событие возникает для всех родительских элементов
- (Для
mouseup нет действия по умолчанию).
- Фаза перехвата – выполняются все перехватывающие обработчики.
- Событие
click возникает для целевого элемента.
- Фаза всплывания - событие
click возникает для всех родительских элементов
- Выполняется действие по умолчанию для
click .
В каждом случае обработки события возможна отмена только текущего события. Например, в обработчике события mouseup отмена действия по умолчанию не возымеет никакого эффекта, поскольку для mouseup нет действия по умолчанию. Это не остановит возникновение события click, поскольку они являются различными событиями.
Однако действие по умолчанию может привести к возникновению другого события. В случае события click для кнопки отсылки формы действием по умолчанию является отсылка текущей формы, которая, в свою очередь, породит событие submit . В этом случае отмена события по умолчанию предотвратит возникновение следующего события.
События возникают в ответ на пользовательский ввод (с мыши или клавиатуры) или в ответ на внутренние события, например окончание загрузки страницы. Однако, вызов событий асинхронен породившему его вводу.
Пользовательский ввод может случиться в тот момент, когда обработчик другого события всё ещё выполняется. В таком случае действия пользователя буферизуются, и когда модуль обработки событий вновь свободен, происходит обработка событий, соответствующих буферизованным действиям. События всегда возникают в правильном порядке, но между действием и вызовом события может произойти заметная задержка, если код некоторого обработчика события займёт продолжительное время.
Internet Explorer и Mozilla совершенно не реагируют на пользовательские действия в течение выполнения скриптов-обработчиков. Даже панели инструментов браузеров блокируются. Хотя пользователь по-прежнему может, например, нажимать на кнопки, и эти действия заносятся в буфер, никакой наблюдаемой реакции они не вызывают. Это может дезориентировать пользователя, который, не осознав, что его действие было учтено, вероятно, попробует нажать кнопку несколько раз, что может привести к нежелательным последствиям. Пользователь даже может решить, что браузер завис вследствие ошибки.
Opera же продолжает визуально реагировать на действия пользователя (например, нажатия кнопок) даже во время исполнения другого скрипта. Однако действия по-прежнему буферизуются и обрабатываются последовательно, как и в других браузерах. Таким образом, действия по умолчанию для события не производятся до тех пор, пока обработчик событий не доберётся до него. Это тоже может озадачить пользователя, хотя, наверное, не так сильно, как полная блокировка IE и Mozilla.
Отсюда следует сделать вывод, что скрипты-обработчики событий никогда не должны занимать много времени. С особой осторожностью следует отнестись к синхронным запросам XMLHttpRequest , так как они могут вызвать заметную задержку, которая заблокирует браузер или окно документа.
Существует особый случай, когда события обрабатываются не последовательно, а "вложенно". Если событие активируется непосредственно из скрипта с использованием метода dispatchEvent() (fireEvent() в Internet Explorer), то событие обрабатывается немедленно. Исходный скрипт продолжит выполняться только тогда, когда закончится обработка вложенного события (и будет выполнено действие по умолчанию).
Также события изменения DOM, которые не поддерживаются в Internet Explorer, будут обработаны синхронно, непосредственно в момент изменения DOM, например при вызове appendChild() .
Производимые скриптом изменения в DOM или наборе стилей могут быть отображены не сразу. Это зависит от браузера.
Например, если цвет фона элемента меняется при помощи DOM, изменения немедленно будут отражены в структуре DOM (и событие изменения DOM будет немедленно синхронно обработано), но мы не можем знать наверняка, когда движок рендеринга браузера сподобится реально отобразить эти изменения на экране. Похоже, что в Mozilla и Internet Explorer изменения откладываются до окончания текущей обработки событий, а в Opera они отображаются немедленно.
Метод setTimeout() позволяет "заказать" выполнение функции через определённый промежуток времени:
window.setTimeout(someFunction, 1000);
Отложенные скрипты работают в некотором роде аналогично скриптам обработки событий. Хотя они и выполняются по прошествии определённого количества времени, а не в ответ на пользовательский ввод, они так же последовательно обрабатываются потоком обработки событий, как и пользовательские действия.
По этой причине не следует ожидать, что отложенное действие будет выполнено точно в указанный момент. Если выполняются другое событие или пакет, отложенный скрипт будет просто поставлен в очередь. Фактически, мы можем быть уверены только в том, что функция будет выполнена через как минимум секунду. На самом деле времени может пройти гораздо больше.
Это удивительно полезная особенность. Если обработчик отложен на время 0, он не выполняется, но немедленно добавляется к очереди. Он не будет выполнен до тех пор, пока не отработает обработка текущего события (включая действие по умолчанию).
Если отложенное выполнение создаётся в обработчике события, являющегося частью пакета событий (например blur /focus , mouseup /click ), то отложенный код будет выполнен после завершения обработки всех событий в пакете.
К прочим событиям, не вызываемым действиями пользователя, относятся:
- События загрузки страницы
- Отложенные события
- Обработчики результатов асинхронных запросов
XMLHttpRequest
Эти события добавляются в очередь обработки событий аналогично событиям, вызываемым действиями пользователя. Это, например, означает, что обработчик ответа XMLHttpRequest не выполняется непосредственно в момент получения данных, но всего лишь становится в очередь обработки событий.
Диалоговые окна alert (а также confirm и prompt ) обладают некоторыми странными свойствами.
Они синхронны в том смысле, что выполнение скрипта, вызвавшего этот диалог, замораживается до закрытия диалога. Скрипт ожидает завершения функции alert() , прежде чем продолжить выполнение.
Однако некоторые браузеры позволяют производить обработку событий до тех пор, пока диалог виден на экране и ожидает пользовательских действий. Это означает, что пока один скрипт заморожен, ожидая конца выполнения функции alert , другая функция может быть выполнена в процессе обработки другого события.
События пользовательского интерфейса, такие как mouseup и click , не будут возникать в момент исполнения alert , поскольку диалог является модальным и перехватывает весь пользовательский ввод, однако не-пользовательские события, такие как загрузка страницы, отложенный код и обработчики результата асинхронных запросов XMLHttpRequest , могут возникнуть в это время.
Страницы HTML парсятся и отображаются прогрессивно, т.е. по мере скачивания документа браузером.
Большая часть внешних ресурсов, таких как изображения и встраиваемые медиа-объекты, загружается асинхронно. Когда парсер встречает элементы img , embed , iframe или object , создаётся новый поток. Он скачивает и отображает внешний ресурс независимо от парсинга основной страницы. Страницы во фреймах и встроенных фреймах (iframe ) также загружаются асинхронно.
Внешние таблицы стилей являются особым случаем. Некоторые браузеры загружают их асинхронно (как изображения), некоторые браузеры загружают их синхронно, предположительно чтобы избежать повторного рендеринга всей страницы, когда таблица стилей догрузится. (Это позволяет избежать проблемы мерцания не использующего стили контента, которая была свойственна ранним браузерам.) Другими словами, полагаться на какое-либо конкретное поведение здесь не следует.
Элементы script парсятся синхронно. Когда элементы script ссылаются на внешние скрипты, парсинг страницы останавливается до тех пор, пока внешние скрипты не будут подгружены, распарсены и выполнены.
Блоки JavaScript, содержащие код, парсятся и выполняются в тот момент, когда встречается закрывающий тег.
Блок JavaScript (содержащий встроенный код или ссылающийся на внешний файл) обрабатывается в два этапа. Сначала он парсится и выполняется. В процессе парсинга производится проверка базового синтаксиса кода. Если обнаруживается синтаксическая ошибка, выполнение скрипта не производится.
На этапе исполнения выполняется весь код высшего уровня (т.е. не принадлежащий функциям). Инструкции высшего уровня могут содержать внешние ссылки на функции, объявленные в том же блоке, так как объявления функций загружаются на этапе парсинга. Этот код будет работать:
var x = getMagicNumber();
function getMagicNumber() { return 117; }
Однако следующий код работать не будет, поскольку выражения function вычисляются только в ходе выполнения:
var x = getMagicNumber(); // ОШИБКА! getMagicNumber не определена!
var getMagicNumber = function() { return 117; }
Следующий код также не будет работать, поскольку каждый блок script исполняется непосредственно после того, как будет встречен закрывающий тег:
<script>
alert(getMessage());
</script>
<script>
function getMessage() { return "Hello!"; }
</script>
Скрипт может выводить HTML-код непосредственно в текущий документ, используя метод document.write() . Сгенерированный код будет буферизован до завершения выполнения текущего блока. После этого буферизованный код будет распарсен. Этот код, в свою очередь, может (как всё сложно!) содержать блоки script , которые выполняются в ходе парсинга.
Сгенерированный HTML-код вставляется в документ непосредственно после сгенерировавшего его блока script .
По ходу загрузки страницы парсер последовательно выстраивает дерево DOM. Пустой элемент вставляется в DOM когда парсится соответствующий тег. Непустой элемент вставляется, когда парсится открывающий тег. Например, элемент body появляется в DOM, как только парсер начинает парсить содержимое элемента.
Заметим, что DOM не обязательно точно соответствует входному HTML-коду. Такие элементы как html и head будут созданы в DOM даже если они не встречаются в HTML.
Если исходный код HTML некорректен (например, элемент title появляется внутри body ), браузер перестроит DOM так, чтобы он был корректным. В этом случае нельзя положиться на то, что дерево DOM будет выстроено по порядку.
У синхронной загрузки скриптовых блоков есть существенный недостаток: если в ходе парсинга заголовка страницы требуется загрузить и выполнить большое количество кода, перед началом отрисовки страницы может наблюдаться существенная задержка.
Чтобы устранить эту проблему, мы могли бы использовать в элементах script атрибут defer . Он означает, что браузеру разрешается загружать этот скрипт асинхронно. Однако мы не можем быть уверены, когда скрипт в действительности будет загружен. Это может произойти как до, так и после окончания рендеринга страницы. Opera полностью игнорирует атрибут defer .
<script defer>
alert("это сообщение появится в непредвиденный момент во время загрузки страницы");
</script>
Отложенные скрипты не могут использовать document.write() , поскольку они не синхронизированы с парсером.
Существует ещё одна тонкость: скриптовые блоки всегда выполняются в том порядке, в котором они появились в документе, вне зависимости от наличия атрибута defer . Так что если элемент script без атрибута defer следует за скриптом с атрибутом defer , парсер должен закончить загрузку и выполнение отложенного скрипта до исполнения не-отложенного скрипта. При этом теряется весь смысл использования атрибута defer . Это означает, что всегда необходимо располагать не-отложенные блоки скриптов перед отложенными.
По этим причинам атрибут defer нельзя использовать для задания очерёдности выполнения скриптовых блоков. Он всего лишь позволяет некоторым браузерам продолжить парсинг документа после блока script .
Ход рендеринга страницы на экране не всегда синхронизирован с построением DOM. Порядок рендеринга в ходе загрузки страницы является довольно непредсказуемым. В зависимости от скорости подключения и размера страницы, браузер может, прежде чем начать рендеринг, ждать загрузки всей страницы, либо, в случае медленного соединения, может рендерить страницу по частям.
Следует иметь в виду, что интерфейс реагирует на пользовательские события с того момента, как страница начинает рендериться. Это может привести к проблемам с "ссылками вперёд", если обработчик события ссылается на элемент, который встречается далее по ходу документа.
Пример опасного кода:
<button
onclick="document.getElementById('lamp').backgroundColor = 'yellow'">
Жми сюда, чтобы включить лампу!
</button>
<div id='lamp'>O</div>
Проблема здесь в том, что элемент 'lamp' может быть ещё не распарсен в тот момент, когда кнопка нажата. Обработчик события никогда не должен ссылаться на элементы, определённые далее в документе.
В более сложных пользовательских интерфейсах отказ от ссылок вперёд между элементами интерфейса может быть неприемлем. Вместо этого следует сделать все элементы управления отключенными по умолчанию и активировать их только в обработчике события onload , где мы можем быть уверены, что загрузка всей страницы завершена.
Заметим, что onload также ждёт окончания загрузки всех изображений (и фреймов, и т.п.). Если на странице есть большие изображения, это может занять длительное время. Обходным решением является активация страницы посредством встроенного скрипта внизу страницы. Он будет выполнен при окончании загрузки страницы, но не будет дожидаться загрузки внешних ресурсов.
В идеале, код на JavaScript никогда не должен выполняться слишком долго, поскольку это доставляет неудобства пользователю. Но в некоторых ситуациях это неизбежно. В этом случае следует показать сообщение вроде "Пожалуйста, подождите" или индикатор прогресса выполнения, чтобы сообщить пользователю, что браузер не завис. Задача состоит в том, что сообщение должно быть показано до начала выполнения длительного процесса.
Вот пример в псевдо-коде:
headlineElement.innerHTML = "Пожалуйста, подождите...";
performLongRunningCalculation();
headlineElement.innerHTML = "Закончено!";
В Internet Explorer и Mozilla текст "Пожалуйста, подождите..." никогда не будет показан пользователю, поскольку изменения будут отображены только после окончания работы скрипта. С другой стороны, в Opera текст "Пожалуйста, подождите..." будет отображён во время работы длительных вычислений.
Для того чтобы отобразить сообщение в Internet Explorer и Mozilla, необходимо на время передать управление интерфейсу браузера, чтобы сообщение было отрисовано до начала вычислений:
headlineElement.innerHTML = "Пожалуйста, подождите...";
function doTheWork() {
performLongRunningCalculation();
headlineElement.innerHTML = "Закончено!";
}
setTimeout(doTheWork, 0);
Фокус с setTimeout гарантирует, что сообщение будет отображено до того, как браузер будет заблокирован длительной работой. Конечно, во время вычислений браузер всё равно заблокирован, поэтому это является не очень элегантным решением. Если мы хотим избежать блокировки, следует разбить вычисления на несколько функций, соединённых вместе через setTimeout . Однако на этом пути возникает множество сложностей.
Каждое окно (и фрейм) обладает собственной очередью.
В Opera каждое окно обладает собственным потоком JavaScript. Это включает окна в iframe . Результатом этого является то, что обработчики событий, запущенные из различных фреймов, могут выполняться одновременно. Если эти одновременные скрипты обращаются к разделённым данным (например, свойствам главного окна), появляется возможность возникновения состояний гонок (race conditions).
Я не стану углубляться в возможные опасности состояний гонок, просто укажу на то, что они могут приводить к крайне загадочным багам.
В качестве решения можно всегда добавлять обработчики событий в очередь событий основного окна, даже если они были вызваны событиями в других фреймах.
Рассмотрим страницу с iframe . Элемент iframe обладает обработчиком onload , который будет выполнять функцию в содержащей его странице:
// плохая функция onload в frame:
window.top.notifyFrameLoaded()
Это опасно, поскольку onload может выполниться в тот момент, когда содержащая его страница выполняет другой скрипт. Однако функция может быть поставлена в очередь:
// хорошая функция onload в frame
window.parent.setTimeout(window.top.notifyFrameLoaded, 0)
Важно использовать метод setTimeout для родительского окна, чтобы занести функцию в очередь событий родительского окна.
- Избегать долго выполняющихся скриптов.
- Избегать синхронных запросов
XMLHttpRequest .
- Не позволять скриптам из разных фреймов управлять одним и тем же глобальным состоянием.
- Не использовать диалоги
alert для отладки, так как они могут совершенно изменить логику программы.
|
Хорошая серия статей. Спасибо.
Не понятно только почему не использовать alert для отладки. В некоторых ситуациях только алёртами и можно отследить что же не нравится этой прекрасной IEшке =)
Думаю потому что при алерте дается время на отработку не-пользовательских событий...
Верно, поэтому лучше использовать самодельную консольку с дивом и выводом туда отладочной инфы. (Либо консолями для браузеров)
Означает ли это , что элементы страницы парсятся в том порядке, в котором они стоят в тексте страницы (от начала к концу текста) ?
Да, так и есть.
HTML парсятся и отображаются прогрессивно, т.е. по мере скачивания документа браузером.
Огромное спасибо. За эту статью в частности, и за весь учебник в целом.
Кажется, в каком-то и пунктов опечатка. На мой взгляд во втором, по идее должно быть снизу вверх. Или я не прав?
На фазе перехвата - всегда сверху вниз. Просто некоторые события (например onfocus) не всплывают, для них последующая фаза всплытия (которая снизу вверх) отсутствует.
Не, автор, не верно. Сравни направление передачи события в ФФ и ИЕ, возможно это вас удивит.. а статья так себе
почему при onclick Button выполняются еще и onclick'и TD,TR
подскажите, как избежать такого, охота сохранить и onclick TR и onclick button
Происходит всплытие событий от child наверх
сначала выполняется событие на button, далее так как мышка находиться "внутри" td выполняется событие и на td, и т.д.
Сделать stopPropagation когда обрабатываете событие на кнопке. Тогда оно не будет распространятся дальше.
this seems right to me! fence company near me
Такой вопрос, у меня долго выполняющийся скрипт, пробую в нём вместо (точнее после)
headlineElement.innerHTML = "Пожалуйста, подождите..." ;
установить, например, фоном кнопки, двигающийся кружок загрузки(анимированный gif)., но он в момент выполнения долгого скрипта, двигается только в опере, а в IE и FF статичен.
setTimeout(doTheWork, 0); устанавливаю....
В ИЕ пока управление передано браузеру, он не будет выполнять никаких анимации или перерисовки страницы, видимо все сделано для оптимизации скорости работы.
Под FF такого не замечено.
Похоже. что IE и FF просто зависают на время выполнения скрипта.(вкладки броузеров не работают) Видимо с этим ничего не сделать?
> Автор: GABRIEL_, дата: пт., 11/09/2009 - 13:06
> Кажется, в каком-то и пунктов опечатка. На мой взгляд во втором, по идее
> должно быть снизу вверх. Или я не прав?
"Перехват" и "всплытие" - это разные методы обработки вложенных событий (порядок противоположный).
Вот тут подробно описано:
http://javascript.ru/tutorial/events/intro#poryadok-srabatyvaniya-sobyti...
>Этот код будет работать:
>Однако следующий код работать не будет, поскольку выражения function >вычисляются только в ходе выполнения:
Видимо, опечатка.
Оба куска кода абсолютно одинаковы.
Наверное, в первом случае должно быть:
book с чего ты это взял, что они одинаковы?
Это правда, что между function g() и var g = function() есть разница.
Попробуй этот блок
и этот блок
А в FF 3.6.2 возникают...
К сожалению эта статья так и не разъяснила мне как синхронизировать потоки.
Я хотел что-то типа synchonized в джава SE
Ну или что-то что может заблокировать объект или функцию для выполнения только в одном объекте
Эх!
Придется кастыль писать!
event.cancelBubble = true;
Здравствуйте, Илья. Хорошая статья, многие не очевидные моменты насчет очередности событий стали понятнее, но есть один вопрос, почему не срабатывает событие onclick, при нажатии на кнопку. Я понимаю, что из-за того, что элемент скрывается, но какова суть процесса?
Вот поэтому и отказался от жабных скриптов, что глючат и ведут себя на разных броузерах по-разному. И другим советую, не захламлять себе этой дрянью голову. PHP рулит!
Сами поняли, что сказали:-))))?????????
"Отложенные скрипты не могут использовать document.write(), поскольку они не синхронизированы с парсером."
Что значит фраза "не могут"? В них нежелательно использовать document.write() или они этот метод просто "не заметят"?
Понимаю что тема давно минувших дней. Но есть вопрос, может удастся получить здесь ответ. Ситуация такова: выводится форма и на событие on-load правятся некие моменты в отображении, а именно метки располагаются на элементах формы а не рядом/над ними. И есть обработчики событий которые метки скрывают/показывают на событиях onfocus/onblur.
Всё бы хорошо, и, в принципе, при обращении к странице я не вижу первого варианта отображения, браузеры успевают стартовые скрипты прогнать до отображения и пользователь видит форму, как и задумывали дизайнеры.. НО! при обновлении страницы, происходит более шустрый процесс отображения, а следовательно сначала видно форму с метками над элементами, а через секунду-другую все становиться на свои места... это конечно не критично, но не очень приятно. Может подскажете можно ли как-то избежать этого?
P.S. 1. Про то что в HTML5 есть простое решение для этой задачи я в курсе, в моём случае не подходит, ибо требования к кросс-браузерности высокие, да и CMS формирует XHTML разметку, а валидность тоже в требованиях.
2. Сохранение стандартной разметки для меток/элементов при выключенном JS опять же важно.
Полезно
Нужен скрипт отображения времени загрузки страницы и функцией выполнения определенный действий при определенных значениях... Например: Скрипт показывает, что время загрузки страницы меньше секунды, а действие при этом будет следующее: выводится текст типа "отличная скорость" или если больше двух, трех секунд - сообщение "скорость хорошая"...
Есть что-то, что может перехватить выполнение кода dispatchEvent()?
Здравствуйте! Подскажите пожалуйста...
Я вот вызываю в цикле запросы через XMLHttpRequest, всего штук 8-12, и мне надо как-то дождаться момента когда они выполнятся ВСЕ, а дальше уже выполнить код оперирующий с результатами одновременно ВСЕХ запросов.
Как бы это корректно сделать?
Спасию, за помощью обращаться сюда, быстрая разработка ПО.
Roksa zory
Ogloszenia towarzyskie roksa
This article has brought a lot of useful information to me and I am very happy about it. It as mapquest directions a fascinating subject. It greatly aided me in resolving several issues.
Israel withdrew ufa1688 from Gaza in 2005 but, ufabet เข้า สู่ระบบ with the help of Egypt, clamps 1688.com down on the borders of the ทางเข้า Ufa 1688 enclave now governed by แทงบอลออนไลน์ Hamas Islamists. Dream Gaming Palestinian Big gamingauthorities have limited self-rule ลิงค์รับทรัพย์ in the West Bank บาคาร่าwhich is dotted หวยออนไลน์with Israeli settlements.
Hi there, what's your favorite activity in your leisure time? Do you often play online games? I know an interesting sports game named basketball stars. I really like this game. It helps me relax a lot after stressful working hours. Let's try it, you will like it!
This wordle new is a fun and creative way to learn the meaning of words.
The wordle is a visual representation of text. It's an interactive graphic that uses the power of clustering to show how words are related to each other in a sentence or paragraph.
It can be used as an educational tool for students, writers, or anyone else who wants to see how their writing is structured.
You should also join fnaf 4, the best horror game out there!
wow, I went crazy reading your post, it's very good and informative. and if you have free time then I invite you to play the game smash karts with me.
Best Maternity Dress For Photoshoot
Best Maternity Dress For Photoshoot
Has this document been updated to the latest version for slope ball
The objective of the timeless puzzle game 2048 is simple: fill in the number 2048.
I'm glad you shared this information. I really like your wonderful post. You have really given everyone a blog post that is both informative and interesting.
poppy playtime
Thanks for sharing! cheap windshield replacement near me houston tx
Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks. Nice post author. Thank you. Keep it up.This article is very informative. It is very useful for me.Kindly share more articles with me. I shall be very thankful to you. This particular papers fabulous, and My spouse and i enjoy each of the perform that you have placed into this. I’m sure that you will be making a really useful place. I has been additionally pleased. Good perform! I extremely enjoyed the standard information an individual provide for your visitors? Is gonna be back frequently in order to inspect new posts
Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks. Nice post author. Thank you. Keep it up.This article is very informative. It is very useful for me.Kindly share more articles with me. I shall be very thankful to you. This particular papers fabulous, and My spouse and i enjoy each of the perform that you have placed into this. I’m sure that you will be making a really useful place. I has been additionally pleased. Good perform! I extremely enjoyed the standard information an individual provide for your visitors? Is gonna be back frequently in order to inspect new posts
안전놀이터
It’s a great and helpful piece of information. I am glad that you simply shared this information with us. I also refer to our article about these sources are trustworthy to use as tools for research. thank you so much for sharing this, it is extremely useful. Thanks again . Thanks for providing such good training. & Thank you for giving us such a great information. Thank you for sharing the information. Looking for such more content in the future. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.
먹튀사이트
my loved one! I wish to say that this article is awesome, nice written and come with almost all significant infos. I¡¦d like to look extra posts like this . lets start work on this write-up, I seriously think this excellent website needs far more consideration. I’ll likely to end up again to learn a lot more, many thanks for that information. Valuable information. Fortunate me I discovered your website by accident, and I am stunned why this coincidence didn’t came about earlier! I bookmarked it. You’re the best, I was doing a google search and your site came up for real estate in Longwood, FL but anyway, I have enjoyed reading it, keep it up!
oh my goodness! Superb article dude! Many thank you, but i'm going through problems with your rss. I don’t understand the cause why i can not be part of it. Is there each person else having the identical rss troubles? All and sundry who knows the solution will you kindly reply? Thank you!! Oh my goodness! Remarkable article dude! Many thank you, but i am going via troubles together with your rss. I don’t recognize the reason why i can not join it. Is there all of us else having the identical rss issues? Anyone who knows the solution will you kindly reply? Thank you!! Became searching on aol for some thing else, though i am right here now and would just like to
I have been searching to find a comfort or effective procedure to complete this process and I think this is the most suitable way to do it effectively. I am really enjoying reading your well written articles. It looks like you spend a lot of effort . thank for dropping this story. I am definitely tired of struggling to find relevant and intelligent commentary on this subject. Everyone nowadays seem to go to extremes to either drive home their viewpoint or suggest that everybody else in the globe is wrong. thank for your concise and relevant insight. This is such a great resource that you are providing and you give it away for free.
메이저사이트
I like visiting your site since I always come across interesting courses like this one. Great Job, I greatly appreciate that. Very informative post! There is a lot of information here that can help I love the way you write and share your niche! Very interesting and different! Keep it coming!
메이저놀이터
most of anything you say is astonishingly legitimate and it makes me ponder the reason why i hadn’t looked at this with this light before. This particular piece surely did flip the light on for me in my view as far as this difficulty is going. Though there is clearly one aspect i'm not too comfortable with so at the same time as i take some time to reconcile that with the middle theme of your function, permit me observe simply what all of the rest of the readers have to say. Well done. I’m simply digging the template/theme of this weblog. It’s easy, yet effective. A variety of instances it’s very tough to get that “best balance” between usability and look. I should say which you’ve achieved a amazing task with this. Additionally, the weblog loads very fast for me on chrome. Outstanding weblog ! Amazing work ! That is the form of facts which might be speculated to be shared throughout the net.
oh my goodnes am going via troubles together with your rss. I don’t recognize the reason why i can not join it. Is there all of us else having the identical rss issues? Anyone who knows the solution will you kindly reply? Thank you!! Became searching on aol for some thing else, though i am right here now and would just like to
온라인카지노
howdy, i do believe your internet web site may be having browser compatibility problems. When i take a look at your web web site in safari, it looks satisfactory however, if beginning in net explorer, it’s got some overlapping troubles. I simply desired to give you a brief heads up! Besides that, notable website online! I weblog frequently and i significantly respect your content material. This extremely good article has certainly peaked my hobby. I am going to take a observe of your blog and preserve checking for brand spanking new information about once per week. I subscribed for your feed too. This is a first rate tip specially to those new to the blogosphere. Easy however very precise data… thanks for sharing this one. A ought to read article!
먹튀검증업체
an remarkable proportion! I’ve simply forwarded this onto a colleague who changed into engaging in a bit homework on this. And he in truth offered me breakfast due to the reality that i stumbled upon it for him… lol. So allow me to reword this…. Thanks for the meal!! However yeah, thanx for spending time to speak approximately this difficulty right here in your blog. Wow, excellent weblog layout! How lengthy have you ever been running a blog for? You made blogging look easy. The general appearance of your website is exceptional, in addition to the content! Howdy! I could have sworn i’ve visited this blog before but after browsing via a number of the posts i realized it’s new to me. Though, i’m in reality satisfied i got here across it and that i’ll be e book-marking it and checking again regularly! Well i’m not writing all that yet again. In any case, just desired to mention notable blog!
simply unadulterated magnificence from you right here. I've in no way anticipated some thing not as a great deal as this from you and you have not baffled me with the aid of any enlarge of se. This unique is usually clearly fundamental and in addition remarkable fact alongside surely affordable and besides in truth treasured my business is looking for locate ahead of time intended for this precise useful stuffs
먹튀사이트
.
color blind test an app you shouldn't miss. It gives quick and accurate results
Do you mind if I quote a few of your articles as long as I provide credit and sources back to your website? My website is in the exact same niche as yours and my users would certainly benefit from some of the information you provide here. Please let me know if this ok with you. Thanks! 온라인카지노
Do you mind if I quote a few of your articles as long as I provide credit and sources back to your website? My website is in the exact same niche as yours and my users would certainly benefit from some of the information you provide here. Please let me know if this ok with you. Thanks! 온라인카지노
I must say that you are my favourite author. You always bring surprised things for me everytime I see your articles. Great efforts!! 슬롯사이트
Do you mind if I quote a few of your articles as long as I provide credit and sources back to your website? My website is in the exact Thanks for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently writhing on, and I have been on the look out for such great information. 온라인카지노
will be praised anywhere. I am a columnist This post is really the best on this valuable topic 온라인카지노
It's always coming. This blog is great but I believe it will help a lot in my country 온라인바카라
Good website! I truly love how it is easy on my eyes it is. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day! 온라인바카라
Hello there, You have done a great job. I will definitely digg it and personally suggest to my friends. I’m sure they will be benefited from this site.
香港網頁設計
I recently came across your blog and have been reading along. I found your website via Google while searching for a related topic, your website came up, it looks great. I have bookmarked it. Great info! I recently came across your blog and have been reading along. I especially appreciate content that has to do with beauty and fitness, so it’s of particular interest to me to see what you have here. Thanks for sharing this informative post with us, Keep sharing it in future also. There. I found your blog using msn. This is a really well written article. l make sure to bookmark it and return to read more of your useful info. Thanks for the post. 먹튀검증커뮤니티
Thank you for posting this information. I just want to permit you to recognize that i simply test out your web site and that i find it very thrilling and informative . I additionally wrote a piece of writing on a similar difficulty will discover it at write what you watched. That is truely the sort of data i have been attempting to find. Thanks for scripting this data. I am incapable of reading articles online very often, however i’m glad i did nowadays. It is thoroughly written, and your points are well-expressed. I request you warmly, please, don’t ever prevent writing. I think this is an informative post and it's miles very beneficial and knowledgeable. Therefore, i would like to thank you for the efforts you have made in writing this article. Acknowledges for paper this type of useful composition, i stumbled beside your weblog besides decipher a restricted announce. 실시간배팅
I found your this post while searching for some related information on blog search...Its a good post..keep posting and update the information. Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. This is very informative and you are obviously very knowledgeable in this area. You will find a lot of approaches after visiting your post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Thanks for sharing. This is a fabulous post I seen because of offer it. It is really what I expected to see trust in future you will continue in sharing such a mind boggling post. 스포츠토토
my loved one! I wish to say that this article is awesome, nice written and come with almost all significant infos. I¡¦d like to look extra posts like this . lets start work on this write-up, I seriously think this excellent website needs far more consideration. I’ll likely to end up again to learn a lot more, many thanks for that information. Valuable information. Fortunate me I discovered your website by accident, and I am stunned why this coincidence didn’t came about earlier! I bookmarked it. You’re the best, I was doing a google search and your site came up for real estate in Longwood, FL but anyway, I have enjoyed reading it, keep it up! 안전카지노
Thanks for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently writhing on, and I have been on the look out for such great information. .Excellent blog here! Also your web site loads up fast! What host are you using? Can I get your affiliate link to your host? Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I get actually enjoyed account your blog posts. Thanks for the post and great tips: even I also think that hard work is the most important aspect of getting success.
토토핫
very beneficial information shared in this text, nicely written! I could be reading your articles and using the informative guidelines. Searching ahead to examine such informed articles. Superb post! This submit has uncovered hidden treasures on blog commenting. Just saying thank you will no longer simply be enough, for the fantasti c lucidity in your writing. I can right away grasp your rss feed to stay knowledgeable of any updates . 파워볼사이트
Extraordinary blog. I extremely joyful in perusing your articles. That is virtually an remarkable perused for me. I have bookmarked it and i'm looking ahead to perusing new articles. Interesting submit. I've been wondering about this issue, so thanks for posting. Pretty cool post. It 's actually very fine and beneficial submit. Thank you. very first-rate submit, i truely love this website, maintain on it . I’m inspired, i must say. Truly not often will i come across a weblog that’s each educative and pleasing, and allow me inform you, you could have hit the nail approximately the pinnacle. Your concept is high-quality; the seize is some thing that no longer sufficient folks are talking intelligently about. I am very glad which i discovered this at my are trying to find out some issue concerning this. I found your this submit at the same time as taking a gander at for some related facts on weblog search... It is a now not all that horrendous post.. Hold posting and invigorate the facts. I’m going to study this. I’ll make sure to return lower back. 먹튀
Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also . Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.. Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also…I’m happy to find so many useful info here in the post, we need work out more techniques in this regard, thanks for sharing. You are very cool! I dont suppose I have read something similar to this before. So nice to search out somebody with authentic applying for grants this subject. 메이저사이트
This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. Thanks for taking the time to discuss this, I feel strongly that love and read more on this topic. If possible, such as gain knowledge, would you mind updating your blog with additional information? It is very useful for me . You actually make it look so easy with your performance but I find this matter to be actually something which I think I would never comprehend. It seems too complicated and extremely broad for me. I'm looking forward for your next post, I’ll try to get the hang of it! 메이저사이트
This is an interesting post that I'll like to share with you
paint by numbers for adults
What a post I've been looking for! I'm very happy to finally read this post. 카지노사이트 Thank you very much. Can I refer to your post on my website? Your post touched me a lot and helped me a lot. If you have any questions, please visit my site and read what kind of posts I am posting. I am sure it will be interesting.
SFDS
Excellent post. I waѕ checking constantlү this blog ɑnd I am inspired! https://totosoda.com/
I needed to thank you for this wonderful read!! I absolutely loved every little bit of it. https://totoward.com/
I have read so many articles concerning the blogger lovers however this article is actually a pleasant article, keep it up. 메이저사이트
Can you tell us more about this? I’d want to find out some additional information. https://mtnamsan.com/
I've been looking for photos and articles on this topic over the past few days due to a school assignment, 온라인카지노 and I'm really happy to find a post with the material I was looking for! I bookmark and will come often! Thanks
This is an excellent post I seen thanks to share it. It is really what I wanted to see hope in future you will continue for sharing such a excellent post
Schlüsseldienst Magdeburg
Travel provides you with something to anticipate..
Schlüsseldienst Helmstedt
Looking at your witty article, I also came up with an idea. I want to learn that. I will visit your blog often.먹튀검증
I agree with your opinion. And this article is very helpful to me. 먹튀검증업체
I can't believe I was unaware of your post before now. I value the material you give greatly because it contains crucial documents that support the subject Pokemon Showdown I am currently studying.
This is the perfect post.바카라사이트 It helped me a lot. If you have time, I hope you come to my site and share your opinions. Have a nice day.
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.