Ajax使用CSS加载页面

我想知道人们如何去附加CSS以及如何删除相关的CSS。Ajax使用CSS加载页面

目前我加载页面并附加到我的文档通常是一些其他股利。这往往会导致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的内容。

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

来源

2015-12-30 Sir

通常，所有需要的CSS都会在加载页面时加载。开发人员不会删除它。他们正在改变元素的类名称以根据需要应用适当的CSS。 – Bindrid

那么为什么优化网站经常说删除未使用的CSS？ =/ – Sir

“unused css”like，未在所有网站中使用，不在给定页面中。例如，如果您使用Bootstrap，通常会有很多css在您的网站中从未被调用过。这是“未使用的CSS” –

我一直被告知，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独特非常小的块到该网页，然后把它放在head

回到你的代码例子中，我从来没有使用过这样的东西，从来没有见过这样的用途，你可以把使用的内联样式放在外部的.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文档数的缓存频率。这个因素尽管难以量化，但可以使用各种指标进行衡量。如果您的网站上的用户每个会话有多个页面浏览量，并且许多网页重复使用相同的脚本和样式表，则缓存的外部文件可能带来更大的潜在收益。

来源

2015-12-30 23:12:36

大多数分析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的一小部分通常是有益的，这意味着所有影响用户在视口中第一次加载时看到的内容的样式这一页。

是讨论 “倍以上” 有些文章的优化可以在这里找到：

的话题谷歌的讨论：Optimize CSS Delivery
维基百科条目：Above the fold
PonyFoo的文章：Inlining Critical CSS

来源

2015-12-30 23:17:51 zero298

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

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

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

BigPipe打破了页面生成过程分为几个阶段：

请求解析：Web服务器解析和理智检查HTTP请求。

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

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

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

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

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

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

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

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

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

但是，如果您想要领先一步，您可以看看https://github.com/bigpipe/bigpipe，它是Node.JS的Web框架级解决方案。就“去除”不必要的CSS而言，开发人员必须小心去除不再需要的CSS类。许多开发人员会同意删除一个CSS类有多大的噩梦。它可能会破坏你从未想过的其他地方。这是所有关于组织你的CSS类的聪明方式，这是超出了写在一个SO答案。如果你想在AJAX之后动态移除CSS，那永远不可能，恕我直言。

来源

2015-12-30 23:22:40 droidbot

Ajax使用CSS加载页面

回答

相关问题