使用php在头部加载样式后丢失样式 - Missing styles after load them in head using php

我想打印我的样式内联在head标签使用php。我几乎完成了，但我发现我的样式在IE8上消失了(我想在更早的版本上也是如此)。我发现，当打印3个样式表(无论顺序如何)- bootstrap.min.css, font-awesome.min.css和theme-style.css时，问题就出现了。最后一个来自我的模板。当我评论其中的一个或两个时，不管是哪个，那么一切都很顺利(我指的是上面的三个选择)。另一个事实是，如果我link他们，一切又好了。

为什么我需要这个?为了提高我的页面速度。

上面我从index.php粘贴了我的源代码。我在测试网站上发布了一个例子，你可以看到它是如何显示的。

<!DOCTYPE html>
<html>
   <head>
      <title>test</title>
      <meta charset="utf-8">
      <?php
      $styles = '';
      $styles .= file_get_contents('bootstrap.min.css');
      $styles .= file_get_contents('theme-style.css');
      $styles .= file_get_contents('font-awesome.min.css');
      ?>
      <style type="text/css">
         <?php echo $styles; ?>
         .test1{color: #F00; background: #ccc;}.test2{color: #0F0;}.test3{color: #00F;}
      </style>
      <!--[if lt IE 9]>
          <script src="/html5shiv/dist/html5shiv.js"></script>
          <script src="/respond/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="test1">
         testing something
      </div>
      <div class="test2">
         Lorem ipsum
      </div>
      <div class="test3">
         John Doe
      </div>
   </body>
</html>

我害怕回答这个问题…

谷歌的页面速度只是一个想法。这是一个概念。这不是互联网的现实。将文件包含在索引页中可能会严重损害您的站点。为什么?因为这样做会增加索引页的大小。它将增加到如此大的尺寸，以至于需要多次检索。这样做，你将引入一个问题，而不是解决一个问题。

当浏览器向你的网站询问信息时，会发生几件事。我将把它们分解成简单的概念。

浏览器:给我http://www.example.com服务器:这是索引页:浏览器:我看到我需要抓取页面，它是200K，因为样式表是页面的一部分。给我索引页。服务员:给您。服务器和索引页之间的跳转:我们看到这个数据很大。我们要把它分成几块。确切地说是三个。Browser:哦，天哪!等待. .等待……等待. .好了，现在我有了这三个部分。让我们渲染一下我所拥有的!

这就是为什么页面速度不是在谷歌中获得好结果的最终目的。举个例子，看看你的竞争对手，他们拥有你想要达到的结果。他们的分数可能是64分、78分、82分、90分……所有这些，甚至是红色的64，在搜索结果中都比你强。

你能实现的是用户体验，让他们不断回来，这可能就是为什么你的竞争对手以64分击败你。

他在做什么:

浏览器:给我索引页。服务器:给你，但是它有样式表链接，和javascript一样。Browser:没问题!因为它们都是分开的，所以我将同时请求它们:index.php, file1.css, file2.css, file3.css, javascript.js

在它们之间跳:酷，你想要一堆小块。我们可以通过用户和服务器之间的各种开放网关将它们路由，并在更短的时间内将它们全部包含在索引页中。

用户:啊……所有东西都在0.8秒内装好了，快得像闪电一样!