Я работаю над проектом, в котором мы перешли с XHTML на HTML обратно на XHTML, и есть некоторые определенные поведенческие изменения, относящиеся к рендерингу страницы до загрузки CSS и скриптов, которые читают стили, читающие их перед загрузкой CSS. Может ли кто-нибудь пролить свет на то, почему происходит следующее и что можно сделать по этому поводу?Временная шкала рендеринга XHTML отличается от HTML в WebKit?
В принципе, у меня есть страница со следующей структурой:
<body>
<!-- Content from Source A -->
<link href="http://a.example.com/style.css" />
<header>...</header>
<!-- Content from Source B -->
<link href="http://b.example.com/style.css" />
<div>...</div>
<!-- Content from Source A -->
<footer>...</footer>
<script src="http://a.example.com/script.js">
/* e.g. */
alert($('header').offset().height);
</script>
</body>
Когда мы были в режиме рендеринга HTML, блоки страниц рендеринга в ожидаемых точках. Когда мы попадаем в CSS источника, рендеринг приостанавливается (пустой экран); когда мы попадаем в исходный CSS-код, рендеринг приостанавливается (заголовок видимый). Когда мы сталкиваемся с JavaScript-кодом источника, рендеринг приостанавливается (отображается полная страница), и скрипт считывает стили элементов из своего отображаемого состояния. (На самом деле, WebKit не перестает анализировать DOM или выполнять JavaScript при загрузке CSS, но он останавливает выполнение в первой точке, где сценарий должен читать стиль.)
Когда мы находимся в XHTML, страница вообще не останавливает рендеринг и полностью очищает всю страницу. После этого он обрабатывает скрипты и таблицы стилей в загруженном порядке или, скорее, выполняет сценарии по порядку, но не дожидается загрузки таблицы стилей перед выполнением загруженного сценария. Это означает, что страница будет отображаться три раза (неформатированная, с одной таблицей стилей и с двумя таблицами стилей), и сценарий может вывести полностью неточные значения для размеров элементов.
Может кто-то пролить свет на это? Это происходит во всех браузерах WebKit, которые я тестировал, включая Chrome 17, Mobile Safari 5 и Android Browser 2.1. Есть ли способ обеспечить упорядочение HTML-рендеринга без использования типа mime text/html
?
Захватывающий. Вы предполагаете, что на основе использования XML не учитываются таблицы стилей или сценарии в отношении порядка визуализации? Сначала XML будет визуализировать, а скрипты и CSS будут выполняться в том порядке, в котором он загружен (за исключением того, что JavaScript будет, по-видимому, загружаться в порядке). В целом, мы решили переключиться на HTML, поскольку его поведение намного лучше понято и соответствует ожиданиям. –
@BrianNickel Идея рендеринга XML сначала имеет смысл; если ваша таблица стилей, например, тайм-аут, это позволит пользователю просматривать содержимое во время ожидания CSS, который никогда не появится. Практически, однако, для браузеров было бы целесообразно иметь тайм-аут ожидания для стилей перед отображением содержимого на экране. – Hawken