动态添加CSS减少页面重量？

好吧，这是bizaare，也是我见过的唯一一家店，这样做。我们只有2个开发商在这家店。我的老板认为使用助手方法将css文件单独添加到页面会使我们的网站更加高效，因为在主页面中添加样式引用时，每个页面都会获得使网站加载速度变慢的样式。动态添加CSS减少页面重量？

因此，我们必须

然后他要我去到每一个代码隐藏一个company.css这是我们的主要样式的东西，是全球性的，如主水桶如页眉，页脚，主等可以为我们的某个功能说一定数量的页面，并使用我们创建的实用程序方法来动态地将与产品相关的样式表添加到这些页面。例如，让我们说我们有一个评论&评级功能。我们将所有评论&评分相关的类和ID放入了Reviews.css中。太好了。

因此，例如，在.aspx.cs页面初始化，我们希望把这个：

Util.AddStylesheet("Ratings.css");

现在，他要我包括在我们的评论代码倒是在这些页面的代码隐藏的是样式表。 aspx页面。但是说，不要在主页面上提供对Reviews.css的引用。

我是唯一一个质疑这种方法，并说什么是有一个主页的点？我的意思是，如果你把所有的.css引用放入你的母版页中，现在所有的页面都有这些样式（有些没有使用，因为它们不涉及该页面），所以加重你的加载时间以结束用户？

我的意思是共同的权利？也许人们这样做，但我从来没有见过它，这是一个管理的噩梦，因为你有全局的引用动态地添加某些.css页面到.aspx页面的子集。

对我来说，尽管我们是一个每月接收100万次点击的电子商务网站，但是，我的意思是认真手动添加样式表，并绕过只将它们全部放在主页面中，这让我大开眼界。我是唯一一个认为这是疯狂的人，并质疑他的假设，这样做会使页面过重，因为它们会继承所有样式表，有些会被浪费.css，因为它不一定与该特定页面有关？对我来说，将它们添加到母版页是一个完成的交易...简单，可维护，并且关心。

我可以理解JS的页面权重，但是.css？

来源

2009-11-16 PositiveGuy

根据您的样式表有多大，这可能是有意义的。毕竟，解析CSS确实需要时间。正如Joel Coehoorn所指出的那样，如果你有单独的CSS文件，你就会向服务器发出很多请求，而这些请求也很昂贵。唯一真正知道的方法就是测量它......并且可能沿途测量一个CSS缩小器。 – kdgregory 2009-11-16 16:33:15

你实际上想要做的是尽量减少HTTP请求的总数，以及使用的总带宽。如果您的主站页面链接了您的reviews.css文件，则您需要为网站上的每个页面提供一个额外的http请求，无论您是否使用过这些样式。所以从这个意义上说，你的老板是对的。不要把它放在母版页上，如果它不会在所有或大部分页面中使用。

也就是说，我不会为代码隐藏任何东西，而是一个用户控件，您可以将它放在所需的页面上以渲染样式节或链接。

来源

2009-11-16 16:28:07

有趣.... – PositiveGuy 2009-11-16 16:29:34

一般来说，我同意这一点。如果你可以做动态包含，最好用实际的样式标签而不是通过js来做。但这是一个问题。即使你动态地包含另一个样式标签，它仍然是另一个请求吗？如果它进入页面的头部，无论如何它都会减缓加载时间。 javascript允许加载是异步的，所以页面可以完成加载，无论额外的CSS是否已完成加载。 – Marco 2009-11-16 17:05:02

@Marco：问题在于它未能通过渐进式增强检查。如果javascript被禁用，您根本不会获得样式。对于许多可能不成问题的人来说，可能会再次出现。用户控制方法的好处在于它可以让您将这部分抽象为本质上独立的传输层;只需要一个基本控件，所有其他样式表控件继承自。也就是说，OP的代码隐藏功能实现了很多相同的功能。但个人而言，我尝试将代码保存在标记中，因此更喜欢用户控件。 – 2009-11-16 17:29:04

如何建议妥协？

定义了最常用元素（标题，链接，导航列表等）的一个母版页，然后针对特定位置的样式表（即catalogue.css），这些页面需要这些样式。所以CSS仍然可以被缓存，但并不是强迫所有访问about-us页面的人。

这并不理想，但如果目标是降低单个单片css文件的带宽，它可能会让你有所进步。

事实上，我个人的做法总是使用单片样式表;虽然有想过，但我很想尝试建议的方法。它应该工作？也许... =/

来源

2009-11-16 16:29:12

这就是我们如何做到这一点。良好的.css维护意味着您无论出于何种原因都能按功能分配.css。你不把所有的.css放到一个文件中，这是一个维护头痛。我无法想象任何人都不会在网站上按功能分离出他们的风格。如果你没有明智的维护方式，那么它就是一团糟，无论你的UI模式对于.css类有多清晰和多好，如果对于特定的业务有相当数量的自定义类，总是会分离出一个独立的.css功能/功能 – PositiveGuy 2009-11-16 17:39:01

我必须承认，在发布我的答案后，我重新阅读你的问题，并认为'啊，这就是我刚刚提出的......哎呀。'然后，在某个地方，忘记删除我的答案。啊。我不是丹尼克兰，但我可以声称疯牛吗？ =） – 2009-11-16 21:01:24

请记住，默认情况下，CSS文件在浏览器中处于CACHED状态，所以CSS只会一次加载。

从我的经验更多的单独CSS文件==更多重复规则==更大的混乱。

如果你想节省了带宽位，确保书写时，你压缩你的CSS，所以不是：

#review 
{ 
    margin-top:10px; 
    margin-left:12px; 
    margin-bottom:12px; 
    margin-right:35px; 
    background-color:#ffffff; 
    background-image:url(images/blah.png); 
    background-repeat: repeat-x; 
}

你写：

#review{margin:10px 35px 12px 12px;background:#fff url(images/blah.png) no-repeat;}

来源

2009-11-16 16:34:32 rochal

其实我做妥协常常。

我网站上的大部分页面都使用了masterpage中声明的所有标准css文件，但是这里和那里都有一个奇怪的页面使用特殊的样式表。高分辨率视图，打印视图或jquery lighbox/gallery类型的控件。

我即席样式表加载代码如下：

using System; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 

namespace ExtensionMethods 
{ 
    public static class PageExtensions 
    { 
     public static void AddStyleSheet(this Page page, String Href) 
     { 
      PageExtensions.AddStyleSheet(page, Href, "all"); 
     } 

     public static void AddStyleSheet(this Page page, String Href, String Media) 
     { 
      Href = VirtualPathUtility.ToAppRelative(Href); 

      if (!PageExtensions.StyleSheetAlreadyExists(page, Href)) 
      { 
       HtmlLink htmlLink = new HtmlLink(); 
       htmlLink.Href = Href; 
       htmlLink.Attributes.Add("rel", "stylesheet"); 
       htmlLink.Attributes.Add("type", "text/css"); 
       htmlLink.Attributes.Add("media", Media); 

       page.Header.Controls.Add(htmlLink); 
      } 
     } 

     static private bool StyleSheetAlreadyExists(Page page, String Href) 
     { 
      var preExisting = from Control c in page.Header.Controls 
           where c is HtmlLink && ((HtmlLink)c).Attributes["Href"] == Href 
           select c; 

      return preExisting.Any(); 

     } 
    } 
}

来源

2009-11-16 17:07:39

动态添加CSS减少页面重量？

回答

相关问题