2012-03-08 3 views
1

Я работаю над проектом, в котором мы перешли с 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?

ответ

1

WebKit использует libxml2 для обработки XML, который отправляет проанализированный XHTML обратно на WebCore and JavaScriptCore, чтобы выполнить рендеринг CSS и выполнение JavaScript.

Webkit Architecture

Stylesheet и сценарий теги ссылаются на то, что называется внешняя сущность в терминологии XML. Это означает, что они обрабатываются последним. XML spec говорит:

исключения случаев, когда автономный = «да», они должны не декларации процесса сущностей или декларация списков атрибутов встречаются после ссылки на сущность параметра, который не читает, так как объект может содержавшее переопределение декларации ; когда standalone = «да», процессоры должны обрабатывать эти объявления.

С standalone="yes" указывает, что документ XML должен быть проверен DTD, это вызывает другую модель обработки.

Теги тегов обрабатываются иначе, чем инструкции обработки xml-stylesheet. XML stylesheet spec говорит:

Любые ссылки на таблицы стилей, которые указаны снаружи документа (например, заголовки Link в некоторых версиях HTTP [RFC2068]) рассматриваются для создания ассоциаций, которые возникают перед ассоциациями, указанных XML- инструкции по обработке стилей. Заявка несет ответственность за принятие всех ассоциаций и определение того, как, если вообще, их порядок влияет на его обработку.

Попробуйте прокомментировать теги сценария и преобразовать теги ссылок xml-stylesheet. Кроме того, попробуйте добавить автономный = «да» к декларации XML:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<?xml-stylesheet href="foo.css"?> 

Кроме того, использование специальных символов, структур и XSLT может еще более усложнить картину, так как модель обработки отличается от HTML и XML диалект, как XHTML:

диапазон допустимых символов в XML определяется XML спецификации и диапазон полностью проверяется libxml2. Не беспокойтесь, если вы не разобрали это, например, с помощью парсера HTML и дайте готовое дерево libxml2 для сериализации. Надеюсь, вы не делаете этого, так как XSLT - это язык XML и должен анализироваться синтаксическим анализатором XML.

XSLT Processing Model Список литературы

+0

Захватывающий. Вы предполагаете, что на основе использования XML не учитываются таблицы стилей или сценарии в отношении порядка визуализации? Сначала XML будет визуализировать, а скрипты и CSS будут выполняться в том порядке, в котором он загружен (за исключением того, что JavaScript будет, по-видимому, загружаться в порядке). В целом, мы решили переключиться на HTML, поскольку его поведение намного лучше понято и соответствует ожиданиям. –

+0

@BrianNickel Идея рендеринга XML сначала имеет смысл; если ваша таблица стилей, например, тайм-аут, это позволит пользователю просматривать содержимое во время ожидания CSS, который никогда не появится. Практически, однако, для браузеров было бы целесообразно иметь тайм-аут ожидания для стилей перед отображением содержимого на экране. – Hawken

Смежные вопросы