CSS在单独的文件或不? [英] CSS on a separate file or not?

查看:115
本文介绍了CSS在单独的文件或不?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是一个更好的选择:将CSS存储在单独的文件或同一页面上?

Which is a better option: to store CSS on a separate file or on the same page?

让我们忘记改变文件上的CSS直接应用所有HTML页面。我使用动态语言生成整个输出 - 所以没关系。

Let's forget the fact that changing the CSS on a file makes it to apply all HTML pages directly. I am using dynamic languages to generate the whole output - so that does not matter.

我可以想到的几件事:


  1. 单独文件上的CSS会产生较少的带宽负载。

  2. 单独文件上的CSS需要另一个HTTP请求。

另一方面,如果我使用Zlib压缩数据传输,在同一页上的CSS在带宽方面不重要,是否正确?

On the other hand, if I compress the data transmission with Zlib, the CSS on the same page should not matter in terms of bandwidth, correct? So, I get one less HTTP request?

推荐答案

如果你动态生成HTML(比如从模板),嵌入CSS允许您使用与生成HTML时相同的上下文(数据,程序状态)动态生成CSS,而不必在生成CSS的后续请求中再次设置相同的上下文。

If you're generating HTML dynamically (say, from templates), embedding CSS allows you the opportunity to also generate the CSS dynamically using the same context (data, program state) as you have when you're producing the HTML, rather than having to set that same context up again on a subsequent request to generate the CSS.

例如,假设一个页面使用几百个图像之一作为背景,这取决于计算成本昂贵的状态。您可以

For example, consider a page that uses one of several hundred images for a background, depending on some state that's expensive to compute. You could


  1. 在单独的静态CSS文件中列出规则中的所有几百个图像,然后在动态中生成相应的类名HTML或

  2. 使用单个类名生成HTML,然后在后续请求中生成包含使用所需图片的规则的CSS,或

  3. Do(2),但在单个请求中生成嵌入在HTML中的CSS

昂贵的状态计算,但是对流量的更大命中(更多的数据包移动更大的CSS文件)。 (2)状态计算两次,但服务一个较小的CSS文件。只有(3)执行一次状态计算,并在单个HTTP请求中提供结果。

(1) avoids redoing the expensive state computation, but takes a larger hit on traffic (more packets to move a much larger CSS file). (2) Does the state calculation twice, but serves up a smaller CSS file. Only (3) does the state calculation once and serves the result in a single HTTP request.

这篇关于CSS在单独的文件或不?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆