CSS优化，更快
您认为哪个更快，有一个“main.css”样式表，然后为网站的每个部分提供一个附加样式表，或者有一个“main.css”样式表，然后为整个其余部分提供一个附加样式表网站？附加样式表将通过主体 ID 和类挂钩元素，并且需要更长的选择器。例如，#body-id .page-wrap。
问题归结为：为该部分的特定样式（10 - 20 个唯一元素）添加额外的选择器是否比为非缓存样式表添加额外的 HTTP 请求更慢？
Which do you think is faster, have a 'main.css' style sheet then an additional style sheet for EACH section of the site, or having a 'main.css' style sheet and then having one additional style sheet for the entire rest of the site? The additional style sheet would hook elements via body IDs and classes and would require a longer selector. For example, #body-id .page-wrap.
The question boils down to: Does adding an additional selector for the section particular styles (10 - 20 unique elements) slow the site more than an additional HTTP request for a non-cached style sheet?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
不会。由于网络延迟，HTTP 请求总是会变慢。这就是为什么您会看到页面逐渐加载和渲染 - 这是因为浏览器非常擅长计算和渲染样式，在下载页面时会发生这种情况。
不过，这完全取决于您。如果服务器端性能至关重要，那么最好将 HTTP 请求保持在最低限度，但不要为此牺牲可维护性。忘记选择器解析或渲染性能，因为这些东西通常由浏览器来担心。
No. The HTTP request will invariably be slower because of network latency. This is why you see pages load and render progressively — it's because browsers are so good at computing and rendering styles that it happens while a page is being downloaded.
This is entirely up to you, though. If server-side performance is critical, it would be best to keep HTTP requests to a minimum, but don't sacrifice maintainability for it. Forget about selector parsing or rendering performance, as that stuff is usually up to the browser to worry about.
您应该选择选项 2：“拥有一个 'main.css' 样式表，然后为网站的整个其余部分提供一个附加样式表”。
因为只有第一次它才会加载 CSS，然后从浏览器缓存中提供它。发出 http 请求总是成本高昂，因为它带有一些额外字节的 cookie (aprx:270b)、标头信息、请求/响应时间（网络延迟）以及 apache 上的额外请求。
确保您的服务器上启用了缓存标头，用于 css/js/images 的浏览器缓存，希望您已经拥有此功能。
You should go for the option 2: "having a 'main.css' style sheet and then having one additional style sheet for the entire rest of the site".
Because only first time it will load the CSS and then serve this from the browser cache. Making an http request is always costly as it comes with some extra bytes of cookies (aprx:270b), header information, request/response time (network latency) and an extra request on apache.
Make sure cache headers are enabled on your server, for browser cache for css/js/images, hope you already have this.
根据经验，我有一个 main.css，其中包含在网站的多个页面上使用的任何样式。对于其他所有内容，我将样式放在相应页面的头部。
As a rule of thumb, I have a main.css that contains any styles that are used on more than one page in the website. For everything else, I put the styles in the head of the respective page.