Wil*_*lem 13 html css optimization rendering minify
虽然这可能会导致一个简单的是或否答案,但无论如何我都会去
请考虑以下示例:
HTML
<html>
<head>
</head>
<body>
<div class="foo">
<span class="bar">Hello world!</span>
<p>Some really interesting text.</p>
</div>
</body>
</html>
CSS
html {
/* some css */
}
body {
/* some css */
}
div.foo {
/* some css */
}
div.foo span.bar {
/* some css */
}
div.foo p {
/* some css */
}
css规则出现的顺序是否会影响浏览器如何(快速)呈现页面？(在这个例子中它并不重要,但考虑一个带有html和css负载的真实网站)
因此,上述css脚本将比以下内容更快或更轻松地呈现:
div.foo p {
/* some css */
}
div.foo span.bar {
/* some css */
}
div.foo {
/* some css */
}
body {
/* some css */
}
html {
/* some css */
}
浏览器关心吗？我们应该吗？
在询问前阅读:
我不能说规则的顺序,因为它与速度有关.
但是,由于CSS代表Cascading Stylesheets,我认为这是一个没有实际意义,因为规则的顺序确实很重要.所以你不一定可以自由地移动它们.当然,除非您持续提供更具体的选择器(即html body div.foo),我认为这会对性能产生影响.如果没有其他文件大小.
最后,请记住,过早优化是万恶之源.此外,还有其他事情会对速度(缩小,静态域等)产生比规则顺序更大的影响.更不用说有代码可读性的东西了.
经过更多测试和阅读后，我得出以下结论：不，没关系。即使经过一些 \xe2\x80\x98extreme\xe2\x80\x99 测试，我也找不到任何支持顺序很重要的想法的内容。
\n\n没有“闪烁的无样式内容”或类似内容，只是加载页面花费了更长的时间（更长的时间：D）
\n\n我运行的测试\n我创建了一个包含 60.000 个 div 元素的测试页，每个元素都有一个唯一的 ID 属性。每个 ID\xe2\x80\x99 都应用了自己的 css 规则。下面我有一个带有 CLASS 属性的 span 元素，它也有一个链接到它的 css 规则。
\n\n这些测试创建了 2MB 的 html 文件和相应的 6MB 的 css 文件。
\n\n起初，我尝试使用 1.000.000 个 div 和 css 规则进行这些测试，但 Firefox 不同意并开始哭泣，求我停止。
\n\n我使用以下简单的 php 片段生成了这些元素及其 css。
\n\n<?PHP\n\n for ($i = 0; $i < 60000; $i++) {\n echo "\n#test$i {\n position: absolute;\n width: 1px;\n height: 1px;\n top: " . $i . "px;\n left: 0;\n background: #000;\n} <br />\n";\n }\n\n?>\n和
\n\n<?PHP\n\n for ($i = 0; $i < 60000; $i++) {\n echo "\n<div id=\\"test$i\\"></div>\n";\n }\n\n?>\n之后将结果放入html和css文件中检查结果。
\n\n请注意，我的浏览器（Firefox 5）真的不喜欢我玩这个，它在生成输出时确实遇到了一些问题，偶尔这个程序不响应消息并不害怕展示它的面孔。
\n\n这些测试在本地主机上运行，通过简单的 XAMPP 安装运行，外部服务器可能会产生不同的结果集，但我目前无法对此进行测试。
\n\n我测试了上面的一些变体：
\n\n哦，我可以建议：http://www.youtube.com/watch? v=a2_6bGNZ7bA 虽然它没有完全涵盖这个问题，但它确实提供了一些关于 Firefox（可能还有其他浏览器）如何与我们扔给它的东西。
\n