当您为CSS组合文件时,您会说以下哪种方式:
说我有一个master.css文件,用于我网站上的所有页面(page1.aspx,page2.aspx)
Page1.aspx - 一个特定页面,它有一些唯一的css,只在该页面上使用过,所以我创建了一个page1.css,它还使用了另一个css grids.css
Page2.aspx - 另一个特定页面与网站上的所有其他页面不同,与page1.aspx不同,我将此页面命名为.aspx并制作一个page2.css不使用grids.css
所以你会把脚本组合成:
组合脚本 的 csshandler.axd?d = master.css,page1.css,grids.css 访问page1时 结合 脚本 的 csshandler.axd?d = master.css,page2.css 访问page2时
好处:页面特定,渲染速度更快,因为只有该页面的选择器需要匹配,没有未使用的选择器
缺点:master.css +页面特定的多个组合因此必须为每个页面下载master.css
合并所有脚本,无论页面是否需要它们
csshandler.axd?d = master.css,page1.css,page2.css,grids.css (master,page1和page2)
这样它就会被缓存为一个。问题是渲染可能更慢,因为它必须尝试将css中的每个选择器与页面上的选择器匹配,即使是缺少的选择器,所以在page2.aspx不使用grids.css的情况下,网格中的选择器需要解析.css以查看它们是否在page2中,这意味着渲染速度很慢
好处:一个文件将被下载并缓存与您访问的页面无关
缺点:浏览器需要解析未使用的选择器渲染速度
将主文件保留在自己的文件上并且只合并其他脚本(这样做的好处是因为在所有页面中都使用了master,因此有可能将其缓存,因此不需要继续下载
csshandler.axd?d = Master.css
csshandler.axd?d = page1.css,grids.css
好处:master.css文件可以缓存,无论你访问哪个页面。应用页面设置时没有多少未使用的选择器
缺点:最初必须至少提出2个HTTP请求
你们有什么想法?
干杯
DotnetShadow
答案 0 :(得分:2)
我个人会说选项2 - 合并所有脚本。随着您网站的增长,页面数量将增加,并跟踪哪些CSS文件与哪些文件无法管理。您可能认为某些CSS仅用于一个页面,但我打赌将来不会这样。
一旦用户访问了一个页面,他们将拥有所有CSS,其他页面将更快。 (尽管您可能希望单独优化主页)。想想web 应用程序,而不是web 页面。
答案 1 :(得分:0)
您是否使用Firebug或类似的东西测量了页面加载时间?我问,因为我很好奇,它会产生很大的不同。
无论如何,我只是想指出一个由雅虎开发的CSS框架。他们有一个非常干净的结构,也许你想以类似的方式设计自己的框架。他们使用重置CSS文件为每个浏览器创建相同的前提条件,我发现这是一个聪明的事情。
也许有帮助。