XHTML 渲染时间线与 WebKit 中的 HTML 不同？答案

【问题标题】：XHTML rendering timeline different from HTML in WebKit?XHTML 渲染时间线与 WebKit 中的 HTML 不同？
【发布时间】：2012-03-08 00:10:29
【问题描述】：

我正在做一个项目，我们从 XHTML 到 HTML 再到 XHTML，关于加载 CSS 之前的页面渲染和在加载 CSS 之前读取样式的脚本有一些明确的行为变化.谁能解释为什么会发生以下情况以及可以采取什么措施？

基本上，我的页面结构如下：

<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 渲染模式时，页面会阻塞在预期点的渲染。当我们点击 Source A CSS 时，渲染暂停（空白屏幕）；当我们点击 Source B CSS 时，渲染暂停（标题可见）。当我们点击 Source A JavaScript 时，渲染暂停（显示整页），脚本从渲染状态读取元素样式。（实际上，当然，WebKit 不会在 CSS 加载时停止解析 DOM 或执行 JavaScript，但它会在脚本需要读取样式的第一个点停止执行。）

当我们处于 XHTML 模式时，页面根本不会停止渲染，而是会完全无样式地渲染整个页面。之后，它似乎按加载顺序处理脚本和样式表，或者更确切地说，它按顺序执行脚本，但在执行加载的脚本之前不等待样式表加载。这意味着页面将呈现 3 次（无格式、一个样式表和两个样式表），并且脚本可能会推断出完全不准确的元素大小值。

有人可以解释一下吗？这发生在我测试过的所有 WebKit 浏览器中，包括 Chrome 17、Mobile Safari 5 和 Android Browser 2.1。有什么方法可以确保 HTML 呈现顺序而不使用 text/html mime 类型？

【问题讨论】：

标签： html xhtml webkit mobile-safari

【解决方案1】：

WebKit 使用libxml2 处理XML，将解析后的XHTML 发送回WebCore and JavaScriptCore 以进行CSS 渲染和JavaScript 执行。

样式表和脚本标签链接到 XML 术语中所谓的外部实体。这意味着它们是最后处理的。 XML spec 说：

除非standalone="yes"，否则它们不得处理在引用未读取的参数实体后遇到的实体声明或属性列表声明，因为该实体可能包含覆盖声明；当standalone="yes" 时，处理器必须处理这些声明。

由于 standalone="yes" 指定 XML 文档应由 DTD 验证，因此会触发不同的处理模型。

链接标签的处理方式与 xml-stylesheet 处理指令不同。 XML stylesheet spec 说：

任何指向文档外部指定的样式表的链接（例如，某些版本的 HTTP [RFC2068] 中的链接头）都被认为会创建在 xml-stylesheet 处理指令指定的关联之前发生的关联。应用程序负责获取所有关联并确定它们的顺序（如果有的话）如何影响其处理。

尝试注释掉脚本标签并将链接标签转换为 xml-stylesheet 指令。另外，尝试在 XML 声明中添加standalone="yes"：

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

此外，特殊字符、实体和 XSLT 的使用会使情况进一步复杂化，因为 HTML 和 XHTML 等 XML 方言之间的处理模型不同：

XML 中允许的字符范围由 XML 规范定义，并且该范围由 libxml2 完全检查。不用担心，除非你解析例如，使用 HTML 解析器并将预解析的树提供给 libxml2 序列化回来。我希望你没有像 XSLT 那样这样做一种 XML 语言，必须由 XML 解析器解析。

参考文献

【讨论】：

令人着迷。您是在建议基于 XML 的使用，没有考虑样式表或脚本的渲染顺序？ XML 将首先呈现，脚本和 CSS 将按照加载顺序执行（除了 JavaScript 可能会按顺序加载）。总的来说，我们决定改用 HTML，因为它的行为更容易理解并且符合预期。
@BrianNickel XML 渲染的想法首先是有意义的。例如，如果您的样式表超时，这将使用户在等待永远不会到达的 CSS 时查看内容。但实际上，浏览器在屏幕上显示内容之前等待样式表超时是有意义的。