Javascript 和 CSS - 压缩和缓存
我有一个巨大的缩小的 JavaScript 文件(CSS 同上)。我正在寻找下载和缓存速度方面的一些优化。我想为这两个文件设置过期标头,这样只需 2 个 HTTP 调用我就可以获取它们(并且直到我在 URL 中更改它们的版本号)希望它们被缓存。我的问题是 -
- 在哪里设置过期标头?我是否需要将其设置为对每个请求的响应的一部分?或者我需要在网络服务器设置中进行设置吗?
- 如何压缩这些文件(JS 和 CSS)?在哪里以及如何指定它?是普通的 .zip 或 .tar.gz 压缩吗?如果是这样,另一端的普通浏览器会解压它并使用这些脚本吗?
- 是否可以将 JS+CSS 放在一个文件中,然后缩小并压缩它?这样我就可以通过一个 HTTP 请求来完成?这行得通吗?我的猜测不是,因为 JavaScript 通过
标签运行,CSS 通过
标签运行。但是,这种思路是否可以被探索呢?也许可以使用 Javascript 本身在加载后将 CSS 动态插入到 DOM 中。但这会对页面加载产生什么样的影响。因为浏览器在任何 Javascript 执行之前将 CSS 应用到 DOM。
欢迎任何帮助、建议...
I have a single huge minified JavaScript file (ditto for CSS). I am looking for some optimization in terms of speed of download and caching. I want to set the expiry headers for both these files such that with only 2 HTTP calls I get them (and until I change their version number in the URL) want them to be cached. My question is -
- Where do I set expiry headers? Do I need to set it as part of response to each request? Or do I need to set it in the web server settings?
- How do I compress these files (JS and CSS)? Where and how do I specify it? Is it normal .zip or .tar.gz compression? If so would the normal browser at the other end unzip it and use those scripts?
- Can it be possible to put both the JS+CSS in a single file, minify and compress it? So that I can get by with a single HTTP request? Would this work? My guess is not, since JavaScript runs by
<script>
tag and CSS runs by<link>
tag. But still, could this line of thought be explored? Maybe one could use Javascript itself to dynamically insert CSS into the DOM after it loads. But what kind of impact will this have on the page load. Since browsers apply CSS to DOM before any Javascript execution.
Any help, suggestions are welcome...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
首先,您已经使用 URL 中的版本号走上了正确的道路。 (我假设它不在查询字符串中,而是在实际资源路径中。) V. 聪明。
直接问题的答案:
在您的 Web 服务器配置中。
在您的网络服务器配置中;您应该可以选择启用 gzip 压缩,此时对于现代服务器来说,它就会发生(tm)。
是的,但您可能不想这样做。您可以将CSS作为一堆字符串文字嵌入到JavaScript文件中,然后在页面加载时输出
style
元素(不通过document.write
,这会破坏你明显的页面加载性能,但通过 DOM 方法)。但如果客户端禁用 JavaScript,就会出现问题。 :-) 也可能存在渲染延迟,并且在任何情况下,您可能都没有获得足够的收益来使复杂性值得。其他需要考虑的事项:
First off, you're already on the right track using a version number in the URL. (I assume it's not in the query string, but in the actual resource path.) V. smart.
Answers to your direct questions:
In your web server configuration.
In your web server configuration; you should have the option to enable gzip compression, at which point with modern servers it Just Happens(tm).
Yes, but you probably don't want to. You can embed CSS inside a JavaScript file as a bunch of string literals and then output a
style
element when the page loads (not viadocument.write
, that would kill your apparent page load performance, but via DOM methods). But that would be a problem if JavaScript is disabled on the client. :-) There might be rendering delays as well, and in any case, you're probably not gaining enough to make the complexity worth it.Other things to consider:
这是我真正感兴趣的主题,刚刚开始研究压缩和加速我的网站/节省带宽。
我发现 这篇文章非常有用且有趣:
This is a topic I'm really interested in, just started to look at compression and speeding up my websites/saving bandwidth.
I've found this article pretty useful and interesting: