Оптимизация ваших страниц для рискованного парсинга

Традиционно, 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>.