Традиционно, HTML-парсер в браузерах работает на главной ветке и блокируется после тега </script>, пока скрипт не загрузится и не выполнится. HTML-парсер в Firefox 4 и новее поддерживает рискованный парсинг вне главной ветки. Он продолжает парсить, пока скрипты загружаются и выполняются. В Firefox 3.5 и 3.6 парсер начинает рискованную загрузку скриптов, стилей и изображений, когда он находит их. Однако, в Firefox 4 и новее HTML-парсер также рискованно загружает алгоритм постройки дерева HTML. С одной стороны, когда риск оправдался, нет необходимости в репарсинге части, которая уже была просканирована на скрипты, стили и изображения. С другой стороны, когда риск не оправдался, HTML-парсеру достаётся больше работы.
Эта статья поможет избежать некоторых проблем, которые замедляют загрузку страницы.
Делаем рискованную загрузку успешной
Есть только одно правило, чтобы сделать рискованную загрузку скриптов, стилей и изображений успешной:
- Если Вы используете элемент
<base>, чтобы заменить основной URI страницы, поместите этот элемент в часть страницы без скриптов. Не добавляйте его с помощьюdocument.write()илиdocument.createElement().
Как избежать перестройки дерева страницы
Рискованное построение дерева терпит неудачу в случае, когда функция document.write() изменяет состояния построителя дерева так, что то рискованное состояние после тега </script> более не остаётся прежним после того, как весь контент, добавленный через document.write(), будет распарсен. Только тесколько несколько необычных применений document.write() вызывают эту проблему. Вот, чего необходимо избегать:
- Не пишите незаконченные древа. Вместо
<script>document.write("<div>");</script>лучше написать<script>document.write("<div></div>");</script>. - Не пишите незаконченные теги. Не стоит писать
<script>document.write("<div></div");</script>. - Не заканчивайте строку возратной кареткой (
\r). Вместо<script>document.write("Hello World!\r");</script>лучше написать<script>document.write("Hello World!\n");</script>. - Заметьте, что написание законченных тегов может повлиять на другие теги так, что они станут незаконченными. В том числе,
<script>document.write("<div></div>");</script>внутри<head>будет интерпретировано как<script>document.write("</head><body><div></div>");</script>, что повлияет на<head>так, что он станет незаконченным. - Не форматируйте часть таблицы. Вместо
<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>лучше написать<script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script>.