我正在从一个项目中,我们从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类型?
引人入胜。您建议基于XML的使用,在渲染顺序方面不考虑样式表或脚本? XML将首先渲染,脚本和CSS将按照它所加载的顺序执行(除了JavaScript可能会按顺序加载)。总体而言,我们决定转用HTML,因为它的行为更加理解,符合预期。 – 2012-05-23 22:25:57
@BrianNickel XML渲染的想法首先是有道理的;如果你的样式表超时例如,这将让用户查看内容,同时等待将永远不会到达的CSS。实际上,浏览器在显示屏幕上的内容之前有一个等待样式表超时是有意义的。 – Hawken 2013-09-10 00:40:27