Question

我想知道人们如何附加CSS以及在相关时删除CSS。

目前我加载页面并将其附加到我的文档中，通常是其他div。这通常会导致CSS混入页面，例如它看起来像这样：

<div id="parent">
   <style>
       .child {
           position:absolute;
           width: 100%;
           height:250px;
           border: 1px solid black;
        } 
   </style>

   <div class="child"></div>
</div>

现在，虽然这有效，但我总是被告知CSS应该在页面的头部而不是与HTML混合在一起。我还没有真正明白为什么，但我认为有正当理由？许多网站优化工具似乎“推荐”将CSS放在头脑中，以及删除未使用的CSS。

我想知道人们如何将相关的CSS附加到页面头部以加载内容，然后在他们不再需要它时删除所述CSS，例如通过用新的html页面替换它来移除parent中的内容例如。

有人甚至这样做，或者人们只是追加我目前的方式吗？

Answer 1

我一直被告知CSS应该在页面的头部而不是与HTML混合...网站优化工具似乎“推荐”将CSS放在头部，以及删除未使用的CSS

通常，将所有CSS放在外部.css文件中要好得多，因为：

大多数网站都有多个网页，网站中的网页使用了大多数CSS规则和属性，head中的CSS意味着您需要更改head中的某些特定值如果您决定更改该值，所有网页的各个部分，如果您的CSS在外部文件中，您只需要在一个地方更改该值，如果您有太多网页，请想象一下这个网页。
如果您在页面大小中添加额外大小的每页重复了50行CSS。
许多网站为缓存周期提供静态内容，如javascript文件，CSS文件字体和图像。
建议将html保持为html，保持布局css与数据和HTML结构分开 - *对于javascript内联事件onclick，onmouseenter等同样的事情，更好地保留它们在外部.js文件中或在script标记之间作为事件监听器。

实际上网页速度建议您将CSS放在外部文件中，除非您只有非常小的 CSS unique 块，然后将其放入head < / p>

回到你的代码示例我从来没有使用过这样的东西而且从未见过这样的用法，你可以将使用的内联样式放在外部.css文件中，它就可以正常工作，而不需要像这样包含它。

以及删除未使用的CSS。

如果它没有被使用，你首先不会写它们，除非你使用像Bootstrap，Foundation，Pure.css等框架。正如@Adrian Tombu的评论中所述。

来自https://developer.yahoo.com/performance/rules.html

在现实世界中使用外部文件通常会产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS位于浏览器缓存的外部文件中，则HTML文档的大小会减少，而不会增加HTTP请求的数量。

因此，关键因素是外部JavaScript和CSS组件相对于请求的HTML文档数量的缓存频率。这个因素虽然难以量化，但可以使用各种指标进行衡量。如果您站点上的用户每个会话有多个页面查看，并且您的许多页面重复使用相同的脚本和样式表，则缓存的外部文件可能会带来更大的潜在好处。

Answer 2

大多数分析CSS使用情况的工具只分析页面上使用的CSS，以及当时。该工具将查看页面上的所有标记，并查看CSS文件中的哪些类被占用和使用。

这意味着该工具只会查看您要告诉它的内容。如果您告诉它在您的花哨的个人资料页面（页面A）上看到未使用的CSS，而不是地图页面（页面B），该工具将考虑您的样式表中未使用的任何地图CSS。

从优化的角度来看，它是未使用的，并且您浪费带有与页面B加载相关的CSS的带宽与页面A并且如果您的用户只访问页面A，那么您可能应该考虑不加载额外的CSS 。但是，如果您在多个页面上使用该CSS，那么利用CSS进行缓存可能是有益的，即使它并未在每个页面上使用，以便从长远来看节省带宽。

现在，当你说：

现在，虽然这有效，但我总是被告知CSS应该是在页面的头部没有与HTML混合。我还没有理解为什么，但我认为有正当理由？

并且您显示使用内联<style>标记的代码，我认为您误解了将CSS放在head标记中的目标。

许多网站将CSS放在与页面分开加载的外部样式表中。例如：

<link rel="stylesheet" href="/some/place/on/server.css">

浏览器会加载/some/place/on/server.css处的任何文件，并尝试将其用作显示HTML内容的规则。它会在不停止呈现HTML的情况下执行此操作，因为这意味着您的用户不必等待加载该文件才能看到内容。这可能很糟糕，因为这意味着在外部样式表加载之前，内容可能看起来很奇怪。

因此，为页面上的内容内嵌一小部分CSS通常是有益的。表示影响用户首次加载页面时在视口中看到的内容的所有样式。

有些文章讨论＆＃34;以上＆＃34;优化可以在这里找到：

Google对该主题的讨论：Optimize CSS Delivery
维基百科条目：Above the fold
PonyFoo的文章：Inlining Critical CSS

Answer 3

在AJAX调用中为部分页面加载CSS并不是一种广泛使用的做法。大多数较小的网站在页面加载时加载所有CSS。将浏览器缓存用于较小的网站是有意义的。

建议较大的网站将CSS分解为多个文件，以便不同的页面混合搭配不同的CSS文件。但是必须要非常小心有多少文件要打破它。关键是尽可能地利用浏览器缓存。

另一种模式是BigPipe。这正是你所询问的。摘自文章：

BigPipe将页面生成过程分为几个阶段：
请求解析：Web服务器解析并完整性检查HTTP请求。

数据获取：Web服务器从存储层获取数据。

标记生成：Web服务器为响应生成HTML标记。

网络传输：响应从Web服务器传输到浏览器。

CSS下载：浏览器下载页面所需的CSS。

DOM树构造和CSS样式：浏览器构造文档的DOM树，然后对其应用CSS规则。

JavaScript下载：浏览器下载页面引用的JavaScript资源。

JavaScript执行：浏览器执行页面的JavaScript代码。

在将第一个响应刷新到客户端后，Web服务器将继续逐个生成pagelet。生成pagelet后，其响应会立即在JSON编码的对象中刷新到客户端，该对象包括pagelet所需的所有CSS，JavaScript资源及其HTML内容，以及一些元数据。例如：
<script type="text/javascript">
big_pipe.onPageletArrive({id: “pagelet_composer”, content=<HTML>, 
css=[..], js=[..], …})</script>
在客户端，通过“onPageletArrive”调用收到pagelet响应后，BigPipe的JavaScript库首先下载其CSS资源;下载CSS资源后，BigPipe会通过将相应的占位符div的innerHTML设置为pagelet的HTML标记来显示pagelet。

好处是它不需要特殊的服务器或对堆栈的任何修改。 https://github.com/garo/bigpipe是一个很好的简单例子。

但是如果你想提前一步，你可以看看https://github.com/bigpipe/bigpipe这是Node.JS的Web框架级解决方案。

至于＆＃34;删除＆＃34;不必要的CSS，开发人员必须小心删除不再需要的CSS类。许多开发人员都会同意删除CSS类的噩梦是多么大。它可能会打破你从未想到的其他地方。这完全是关于组织CSS类的巧妙方法，这超出了在SO答案中的写作。如果你想在AJAX之后动态删除CSS，那将永远不可能，恕我直言。

Ajax使用CSS加载页面

3 个答案: