2012-03-08 51 views
1

我正在从一个项目中,我们从XHTML到HTML返回到XHTML,并且在CSS加载之前的页面渲染和读取在加载CSS之前读取它们的样式的脚本方面有一些明确的行为变化。任何人都可以点亮一下为什么会发生以下情况,并且可以做些什么?XHTML渲染时间线与WebKit中的HTML不同?

基本上,我有以下结构的网页:

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

当我们在XHTML模式下,页面根本不会停止渲染,并且会使整个页面完全无风格。之后,它似乎按加载的顺序处理脚本和样式表,或者按照顺序执行脚本,但不会在执行加载的脚本之前等待样式表加载。这意味着页面将呈现三次(未格式化,带有一个样式表和两个样式表),脚本可能会推断出元素大小的完全不准确的值。

有人可以解释这一点吗?这在我测试过的所有WebKit浏览器中都有发生,包括Chrome 17,Mobile Safari 5和Android Browser 2.1。有什么方法可以确保HTML呈现顺序,而不诉诸text/html MIME类型?

回答

1

WebKit使用libxml2来处理XML,该XML将解析的XHTML发送回WebCore and JavaScriptCore以执行CSS呈现和JavaScript执行。

Webkit Architecture

样式表和脚本标签链接到什么叫做在XML术语外部实体。这意味着他们最后被处理。该XML spec说:

除了当独立=“是”,他们不得以未读的参数实体的引用后遇到的过程实体声明或属性表声明,因为实体可能包含覆盖声明;当standalone =“yes”时,处理器必须处理这些声明。

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

链接标签的处理方式与xml样式表处理指令不同。该XML stylesheet spec说:

任何链接样式表是外部指定的文件(在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解析器,并给予preparsed树 libxml2的序列化回来。我希望你不会这样做,因为XSLT是一种XML语言,必须由XML解析器进行分析。

XSLT Processing Model 参考

+0

引人入胜。您建议基于XML的使用,在渲染顺序方面不考虑样式表或脚本? XML将首先渲染,脚本和CSS将按照它所加载的顺序执行(除了JavaScript可能会按顺序加载)。总体而言,我们决定转用HTML,因为它的行为更加理解,符合预期。 – 2012-05-23 22:25:57

+0

@BrianNickel XML渲染的想法首先是有道理的;如果你的样式表超时例如,这将让用户查看内容,同时等待将永远不会到达的CSS。实际上,浏览器在显示屏幕上的内容之前有一个等待样式表超时是有意义的。 – Hawken 2013-09-10 00:40:27