Question

所以我对如何实现一些网页有一个问题。由于具有更多＆lt;链接＆gt;会减慢速度，因为更多的HTTP请求=更慢，我决定使用@media规则将桌面，平板电脑和移动设备的样式表放入一个单独的css文件中。但是，我有多个页面，每个页面都有相同的页眉和页脚，但不同的内容部分，所以我需要自定义每个内容的CSS。我的问题和疑问是，是否将所有内容的css放在同一个文件中，因此有一个css文件或拆分它，因此每个页面都有一个共同的css文件和另一个css。差异的示例结构：

Option 1 - One single css file:
  - home.html
      - common.css
  - page-one.html
      - common.css
  - gallery.html
      - common.css

===或===

Option 2 - Split css file:
  - home.html
      - common.css
      - home.css
  - page-one.html
      - common.css
      - p1.css
  - gallery.html
      - common.css
      - gallery.css

原因我无法确定哪种方法我不确定如何解析css文件。我假设Web浏览器遍历整个css文件并从底部到顶部查找html中的标记（即：#myHeader），然后在标记匹配时应用。有点像这样：

while(!End Of *css* File){
    while(!EO *html* F){
        if(cssTag == htmlTag)
            applyCss()
    }
}

所以，如果在这种情况下，我假设即使在当前的html页面中也没有css标签会降低速度，因为它必须经过整个html页面才能应用样式去下一个风格。选项2删除了此问题，但会出现每页都有额外HTTP请求的问题。现在，我的例子只有3页，但实际上我有8-10页。使用那么多页面，在当前页面上应用样式所花费的时间会更长（选项1）但是它是否大于HTTP请求（选项2）？

Answer 1

我认为你不会直接回答这个问题，因为这取决于浏览器，系统，硬件，连接速度，文件内容等......但对于8- 10页网站，或者您似乎正在使用的CSS数量，我怀疑您无论如何都会注意到性能上的任何差异。为了方便起见，我会选择单个文件。

Answer 2

您问题的答案取决于您网站的复杂程度。如果您的网站只有几页并且使用一个css文件非常简单，那么这不是一个问题。

但是，我建议使用多个css文件或大型网站，因为它更好，并保持每个页面分开。

如果你想知道html＆amp; amp;加载，这正是雨果席尔瓦提到的。您的硬件有多好以及您使用的浏览器，包括您的互联网连接速度。

你的html和css文件一起只是1mb。

如果你真的那么关心，那么创建一个预载器，直到每个文件，图像，视频或任何脚本都被完全加载为止。

html＆amp; css效率和性能问题

2 个答案: