Что мешает HTML-страницам использовать прогрессивный рендеринг?

Question

Я заметил, что некоторые страницы начинают визуализироваться почти сразу, в то время как другим иногда приходится ждать, пока не будут загружены многие или все ресурсы (javascript, image, css). В худшем случае, похоже, для большой страницы, на медленном соединении или сервере. Одна конкретная страница, на которую я смотрю, достигает почти 2 МБ, с 30 различными файлами .js, десятком файлов .css и 80 изображений.

Я знаю о предложениях в http://developer.yahoo.com/performance/rules.html, но что мешает браузеру пытаться отобразить страницу до тех пор, пока последний элемент не будет загружен?

Answer 1

Существует несколько причин, по которым это может произойти. Наиболее распространенным я вижу большие таблицы.

Например, Internet Explorer не хочет отображать таблицу до завершения загрузки.

Каждый браузер немного отличается, но в том, как они отображают вещи, которые все еще загружаются.

Answer 2

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

Имея это в виду:

1. Таблицы должны rearely (? Никогда) использоваться для целей компоновки.
2. Детали, которые должны быть обоснованно отображены первыми (боковые панели, панели инструментов и все, что обрамляет страницу), должны быть размещены в верхней части документа HTML.

Огромные библиотеки JavaScript, используемые сегодня, отличаются тем, что их нужно только загружать (и кэшировать) один раз.