Javascript 和 CSS - 压缩和缓存

发布于 2024-09-18 18:30:15 字数 604 浏览 4 评论 0原文

我有一个巨大的缩小的 JavaScript 文件(CSS 同上)。我正在寻找下载和缓存速度方面的一些优化。我想为这两个文件设置过期标头,这样只需 2 个 HTTP 调用我就可以获取它们(并且直到我在 URL 中更改它们的版本号)希望它们被缓存。我的问题是 -

  1. 在哪里设置过期标头?我是否需要将其设置为对每个请求的响应的一部分?或者我需要在网络服务器设置中进行设置吗?
  2. 如何压缩这些文件(JS 和 CSS)?在哪里以及如何指定它?是普通的 .zip 或 .tar.gz 压缩吗?如果是这样,另一端的普通浏览器会解压它并使用这些脚本吗?
  3. 是否可以将 JS+CSS 放在一个文件中,然后缩小并压缩它?这样我就可以通过一个 HTTP 请求来完成?这行得通吗?我的猜测不是,因为 JavaScript 通过

欢迎任何帮助、建议...

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 -

  1. 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?
  2. 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?
  3. 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

旧人 2024-09-25 18:30:15

首先,您已经使用 URL 中的版本号走上了正确的道路。 (我假设它不在查询字符串中,而是在实际资源路径中。) V. 聪明。

直接问题的答案:

  1. 在您的 Web 服务器配置中。

  2. 在您的网络服务器配置中;您应该可以选择启用 gzip 压缩,此时对于现代服务器来说,它就会发生(tm)。

  3. 是的,但您可能不想这样做。您可以将CSS作为一堆字符串文字嵌入到JavaScript文件中,然后在页面加载时输出style元素(通过document.write,这会破坏你明显的页面加载性能,但通过 DOM 方法)。但如果客户端禁用 JavaScript,就会出现问题。 :-) 也可能存在渲染延迟,并且在任何情况下,您可能都没有获得足够的收益来使复杂性值得。

其他需要考虑的事项:

  • 如果您的站点设置了 cookie,您需要避免从 cookie 将发送回的路径提供 JS 和 CSS,因为请求中 cookie 的存在可能会破坏某些缓存。这就是为什么您经常看到从不同域或子域加载此类资源的原因。
  • 看看 JS 和 CSS 缩小器,如果你还没有——你知道,那些删除不必要的空白的东西,诸如此类的东西。
  • 如果您非常关心速度,请考虑为您的 JS 和 CSS 使用 CDN。它们比以前便宜很多。这是一个查看它们的有趣地方: http://cloudharmony.com/speedtest 到目前为止(还早)天)MaxCDN 的 39.95 美元介绍(通常为 99 美元)给我留下了深刻的印象。

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:

  1. In your web server configuration.

  2. In your web server configuration; you should have the option to enable gzip compression, at which point with modern servers it Just Happens(tm).

  3. 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 via document.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:

  • If your site sets cookies, you want to avoid serving the JS and CSS from a path that the cookie will be sent back to, because the presence of the cookie in the request can defeat some caches. That's why you frequently see these sorts of resources loaded from a different domain or subdomain.
  • Look at JS and CSS minifiers, if you haven't already -- you know, things that remove unnecessary whitespace, that kind of thing.
  • Look at using a CDN for your JS and CSS if you're this concerned with speed. They're a lot less expensive than they used to be. This is a fun place to look at them: http://cloudharmony.com/speedtest So far (it's early days) I've been very impressed with MaxCDN's $39.95 intro (normally $99).
似狗非友 2024-09-25 18:30:15

这是我真正感兴趣的主题,刚刚开始研究压缩和加速我的网站/节省带宽。

我发现 这篇文章非常有用且有趣:

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:

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文