假设我们有一个带有单个样式表的HTML页面<link>.浏览器如何获取此样式表中的规则并将其应用于HTML？我不是在问如何让它更快,我想知道渲染本身是如何处理的.
它是否逐个应用每个规则,因为它会解析样式表并逐步呈现结果？或者,CSS文件的内容是否已完全下载,然后进行全面评估,然后立即应用于HTML？或者是其他东西？
我问这个上张贴一个答案较早之后关于影响渲染速度CSS规则的顺序问题,与样式被渲染的假设作为加载的样式,所以第一个规则会在最后的前应用,而不是一下子.我不确定我在哪里接受这个想法,这只是我一直想到的.
我在我的服务器上尝试了一个看起来像这样的演示:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body></body>
</html>
test.css 内容:
html { background:green }
/* thousands of lines of irrelevant CSS to make the download slow */
html { background:red }
在Firefox 5中进行测试,我希望首先看到绿色,然后变为红色.它没有发生.我尝试使用两个具有冲突规则的单独样式表并获得相同的结果.很多组合后,我得到了它工作的唯一途径是内嵌<style>在块<head>,与冲突的规则从未来<link>的<body>(身体本身完全除外链接标记为空).即使style在<html>标记上使用内联属性,然后加载此样式表也不会创建我期望的闪烁.
重绘是否受到CSS的任何影响,或者是在下载整个样式表后是否同时应用了最终输出,并且计算了最终输出应该是什么规则？CSS文件是否与HTML本身一起下载或阻止它(如脚本标签那样)？这实际上是如何工作的？
我不是在寻找优化技巧,我正在寻找有关该主题的权威参考资料,以便我将来可以引用它们.如果没有大量不相关的材料,就很难搜索这些信息.摘要:
@import多个<link>内联样式属性,<style>头部块和不同渲染引擎等因素的影响？两部分问题:
具体来说,我想澄清JavaScript和CSS与JavaScript的不同之处或原因,您需要专门等到window.onload,以便解释器可以正确地获取getElementById.但是,在CSS中,您可以选择样式并将样式应用于类和ID.
(如果它甚至重要,假设我指的是一个带有外部样式表的基本HTML页面)
撇开是否应该提供单个或多个样式表的问题,假设您只发送一个样式表,您认为这是一个基本结构？
/*结构体*/
任何模板布局的东西都应放在这里,所以页眉,页脚,正文等.
/*结构结束*/
/*通用组件*/
重复元素,例如注册表单,列表等.
/*公共组件结束*/
/*具体的第1页*/
有些页面可能会有特定的样式.
/*具体Page 1结束*/
/*具体的第2页*/
如上
/*具体Page 2结束*/
/*特定页面等*/
等等.
/*特定页面等结束*/