哪个结合css技术?

时间:2010-04-19 09:53:23

标签: css

当您为CSS组合文件时,您会说以下哪种方式:

说我有一个master.css文件,用于我网站上的所有页面(page1.aspx,page2.aspx)

Page1.aspx - 一个特定页面,它有一些唯一的css,只在该页面上使用过,所以我创建了一个page1.css,它还使用了另一个css grids.css

Page2.aspx - 另一个特定页面与网站上的所有其他页面不同,与page1.aspx不同,我将此页面命名为.aspx并制作一个page2.css不使用grids.css

所以你会把脚本组合成:

选项1:

  

组合脚本       的 csshandler.axd?d = master.css,page1.css,grids.css       访问page1时       结合       脚本       的 csshandler.axd?d = master.css,page2.css       访问page2时

好处:页面特定,渲染速度更快,因为只有该页面的选择器需要匹配,没有未使用的选择器

缺点:master.css +页面特定的多个组合因此必须为每个页面下载master.css

选项2:

合并所有脚本,无论页面是否需要它们

  

csshandler.axd?d = master.css,page1.css,page2.css,grids.css   (master,page1和page2)

这样它就会被缓存为一个。问题是渲染可能更慢,因为它必须尝试将css中的每个选择器与页面上的选择器匹配,即使是缺少的选择器,所以在page2.aspx不使用grids.css的情况下,网格中的选择器需要解析.css以查看它们是否在page2中,这意味着渲染速度很慢

好处:一个文件将被下载并缓存与您访问的页面无关

缺点:浏览器需要解析未使用的选择器渲染速度

选项3:

将主文件保留在自己的文件上并且只合并其他脚本(这样做的好处是因为在所有页面中都使用了master,因此有可能将其缓存,因此不需要继续下载

  

csshandler.axd?d = Master.css
  csshandler.axd?d = page1.css,grids.css

好处:master.css文件可以缓存,无论你访问哪个页面。应用页面设置时没有多少未使用的选择器

缺点:最初必须至少提出2个HTTP请求

你们有什么想法?

干杯

DotnetShadow

2 个答案:

答案 0 :(得分:2)

我个人会说选项2 - 合并所有脚本。随着您网站的增长,页面数量将增加,并跟踪哪些CSS文件与哪些文件无法管理。您可能认为某些CSS仅用于一个页面,但我打赌将来不会这样。

一旦用户访问了一个页面,他们将拥有所有CSS,其他页面将更快。 (尽管您可能希望单独优化主页)。想想web 应用程序,而不是web 页面

答案 1 :(得分:0)

您是否使用Firebug或类似的东西测量了页面加载时间?我问,因为我很好奇,它会产生很大的不同。

无论如何,我只是想指出一个由雅虎开发的CSS框架。他们有一个非常干净的结构,也许你想以类似的方式设计自己的框架。他们使用重置CSS文件为每个浏览器创建相同的前提条件,我发现这是一个聪明的事情。

YUI 2: Grids CSS

也许有帮助。