blocks|key|2611351|text|加载CSS通常非常快。CSS阻塞是你可能永远抓不到的东西。然而，JavaScript可以使您在视觉上意识到它正在被下载。(呈现页面时的空白)。实际上，由于一个HTTP请求，一个CSS就足够好了。优化应该转向JavaScript，因为您可以在这里看到页面减速。我们说的是一秒的差别，或者更少。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2611352|在这里有个网站中您可以输入URL，它将检查加载时间。在下图中，您可以比较CSS加载时间。|offset|length|2611353|entityMap|0|LINK|mutability|MUTABLE|url|http://tools.pingdom.com/^0|0|1|6|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Loading CSS is usually extremely quick. CSS blocking is something you will probably never catch. Whereas JavaScript could do so that you are visually aware that it's being downloaded. (white spaces while rendering the page).
In reality one CSS is good enough, because of a single HTTP request.
Optimization should go towards JavaScript, because this is where you can see the page slowing down. We are talking about a second-two of a difference or less here.

<a href="http://tools.pingdom.com/" rel="nofollow">Here is a site</a> where you can enter URL and it will check load times. In the graph below you can compare CSS load times.

blocks|key|1291218|text|Google最佳实践文档中需要注意的重要一句话之一是，“很多网站经常对其所有页面重用相同的外部CSS文件，即使其中定义的许多规则不适用于当前页面”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1291219|需要考虑到这一点，就好像css文件有额外的代码一样，如果用户不访问该冗余代码所应用的页面，则永远不会使用这些代码，那么我们肯定是在浪费带宽，这可能不是额外HTTP请求的适当折衷。|1291220|这将导致加载文件的额外时间，加上计算冗余代码所浪费的时间。|1291221|当然，只为一个页面使用多个文件(比如不同的页眉/页脚css文件)将是一种糟糕的做法。|1291222|正如你所知，对于任何问题都没有一个完美的解决方案。你必须选择最适合你需要的东西。|1291223|所以，我要说的是，决定使用多个文件还是一个文件，完全是基于网站的总体结构和其他权衡。|1291224|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

One of the important sentence to note from the Google best practice document is "Often, many web sites reuse the same external CSS file for all of their pages, even if many of the rules defined in it don't apply to the current page".

This needs to be taken into account as if the css file has additional code that is never going to be used if user does not visit the page for which this redundant code applies then we are certainly wasting the bandwidth which may not be a proper trade off for an additional HTTP request.

This leads to additional time to load the file plus the time wasted in evaluation of that redundant code.

Certainly using multiple files for just a single page (like different header/footer css files) would be a bad practice.

And as you know that there is not a perfect solution for any problem. You have to choose the best thing that suits your need.

So, I would say the decision to use multiple files or a single file is solely based on the overall structure of website and other trade offs.

Less HTTP request the better it's, right ?

Regarding to Google best practice explanation, less unused css rules is also better.

<ul>
<li>The browser's CSS engine has to evaluate every rule contained in the file to see if the rule applies to the current page.</li>
<li>Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk.</li>
</ul>

In your opinion what's giving better performance : 

<ul>
<li>One css file per page. </li>
<li>One general css that will be cached (even if there will be +70% unused css / but avoiding any other http requests).</li>
</ul>

<a href="https://developers.google.com/speed/docs/best-practices/payload?hl=fr#RemoveUnusedCSS" rel="nofollow">Google speed best-practice</a>

CSS speed optimisation - Why multiple files are better then only one?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

请求越少，越好，对吗？关于Google的最佳实践解释，少使用css规则也是更好的。浏览器的CSS引擎必须计算文件中包含的每条规则，以查看该规则是否适用于当前页面。即使样式表位于缓存的外部文件中，呈现也会被阻塞，直到浏览器从磁盘加载样式表。在你看来，什么能给你更好的表现：每页一个css文件。一个将被缓存的普通css (即...

问CSS速度优化-为什么多个文件比一个更好？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS速度优化-为什么多个文件比一个更好？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS速度优化-为什么多个文件比一个更好？
EN