我想打印我的样式内联在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秒内装好了,快得像闪电一样!