Question

我是HTML和CSS的新手，我正在构建我的第一个网站。我的头标记看起来像这样：

<head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
    <meta name = "apple-mobile-web-app-capable" content = "yes" /> 
    <link type="text/css" rel="stylesheet" href="css/normalize.css">
    <link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/739d414f-2430-436c-b2cf-5b84cc45995c.css">
    <link type="text/css" rel="stylesheet" href="css/mobile.css"> 
    <link type="text/css" rel="stylesheet" href="css/projects2.css">
    <link type="text/css" rel="stylesheet" media="screen and (min-width:680px)" href="css/tablet.css">
    <link type="text/css" rel="stylesheet" media="screen and (min-width:1400px)" href="css/desktop.css">
    <title>Yulie Wollman | Projects </title>
</head>

我有两个关于CSS的问题：首先，多个外部CSS文件会影响我的加载时间吗？将它们合并到一个大的CSS文件中会更好吗？

其次，媒体屏幕css链接标签会影响我在小于680px / 1400px的分辨率下的加载时间吗？

谢谢你， Boaz Keren Gil

Answer 1

对于HTTP 1.0 / 1.1，每个HTTP请求都会带来开销，因此请求越少越好。

你应该努力保持CSS的隔离，以便于在服务器上编码，但是将它们结合起来然后然后提供单个CSS编译的文件＆＃34;给客户。

<?php
header('Content-Type: text/css; charset=UTF-8');
include('css/normalize.css');
include('css/mobile.css');
include('css/projects2.css');
?>

如果你正在运行Apache，你需要确保你可以在你使用的文件类型中执行PHP（例如.css）......

AddType application/x-httpd-php5 .css

...当您执行此操作时，请确保为文件本身提供正确的mime FROM 。

Answer 2

根据我的经验，我会说一个请求总是更好，因为很多请求，所以一个大css，在这种情况下更好，但是如果你有真的大css文件对于很多页面，即使99％的风格都没有必要，你也会在每一页上加载它 - 这根本不是很好。因此，根据您自己的情况决定：少量页面，小型CSS - 将其合并为一个，大项目，大量页面 - 每个页面都有单独的请求。

而对于次要的，他们不会。

Answer 3

总体问题是的，它确实会影响加载时间。每个外部css文件都是一个额外的请求，因此它会增加开销。

但是，浏览器会缓存css，因此下一个请求不会受到太大影响。

通常，如果站点中的所有页面都使用相同的css，我会将它们组合在一起，并在部署到生产环境后将其最小化

有一些工具可供使用，例如来自雅虎的YSlow或来自Google的Page Speed，可让您深入了解正在发生的事情。

https://developer.yahoo.com/yslow/

https://developers.google.com/speed/pagespeed/?hl=nl

您也可以使用插件浏览器查看效果。

Answer 4

通常建议减少http请求的数量，尤其是针对移动浏览器的网站。移动网络通常具有高延迟（每个请求可能是300毫秒），然后对于10个引用文件（css，javascript），它是300 * 10 = 3秒加载时间。

CSS如何影响加载时间

4 个答案: