вторник, 18 июня 2013 г.

Какие события и в каком порядке происходят при загрузке HTML-страницы

Объясните пожалуйста, какие события и в каком порядке происходят при загрузке html-страницы.

Ответ.

1) HTML-код страницы начинает загружаться.
2) По мере загрузки HTML-код он начинает сразу распознаваться. В ходе этого распознавания страница много раз перерисовывается, поскольку:
Если встречается тэг <img  />, то на сервер отправляется запрос и начинается загрузка картинки. Место для данной картинки резервируется и разбор HTML-кода продолжается дальше. Когда картинка будет загружена, то она будет вставлена в зарезервированное для неё место.
Если встречается загрузка CSS-файла, то на сервер отправляется запрос и начинается загрузка CSS-файла и его распознание, в результате которого элементы получают свое оформление.
Если встречается загрузка JavaScript-файла, то код файла сначала полностью загружается и потом сразу выполняется. В этот момент JavaScript-код может влиять на загружаемый HTML-код. Если JavaScript-код сработает раньше, чем будет загружен нужный HTML-элемент, с которым работает JavaScript-код, то произойдет ошибка. (Если браузер может, то он старается загружать разные файлы параллельно.)
Если CSS и JavaScript-код содержатся в HTML-файле, то они будут выполнены стразу по мере распознавания, вызывая перерисовку страницы на экране монитора.
3) После того, как все загружено и на элементы навешаны обработчики событий в браузере наступает следующий цикл действий:
(EVENT) Прослушивание событий (например клик по элементу)  -> (SRIPT) Запуск сценария (связанного с данным событием) при возникновения события -> (FLOW) Изменение HTML-кода (например вставка элементов в поток эелементов документа) -> (PAINT) -> Перерисовка изображения на экране монитора -> (EVENT) Прослушивание событий (и так по кругу).

Если какие-то файлы браузером уже были скачены ранее и хранятся в кэше, то они будут взяты из кэша, чтобы не нагружать сервер лишними запросами.

Комментариев нет:

Отправить комментарий