如何缓存我的javascript文件以提高性能

How to cache my javascript files to improve performance

本文关键字:文件 javascript 高性能 我的 何缓存 缓存      更新时间:2023-09-26

这是我的页眉:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jdpicker/jquery.jdpicker.js"></script> 
<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script> 
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 
<script type="text/javascript" src="js/visualize/visualize.jQuery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script> 

所有这些都必须加载,这是滞后的我的网站我怎么才能让他们缓存,以便加载时间更快

你的裤子里有一大堆JavaScript !我的建议是(请不要生气,因为我相信你已经采取了很多这样的步骤):

  • 确保页面上需要所有这些js文件。你在用fanybox吗?你正在使用cookie.js吗?如果有任何js文件可以从列表中删除,那么就删除。
  • 是否有任何这些js文件可通过CDN?jQuery。jQuery UI是。这将减少服务器的负载,许多用户可能会带着这些js库的缓存版本来到你的网站!
  • 是否有轻版本的库,你可以交换?如果是的话,交换它们!
  • 对于那些您在本地托管的文件,最小化并切碎。如果你在Visual Studio中工作,你可以使用Chirpy或Combres。如果你没有使用Visual Studio,还有很多其他很酷的工具可以帮助你减少CSS和JS资产的大小。
  • 考虑在CSS中使用Less,在JS中使用 CoffeeScript。他们会加快你的开发周期,他们会预先优化你的很多代码(如果你幸运的话)。
  • 现在你已经有了一个大的,捣碎的,缩小的,优化的JS文件,你可以缓存它。这一步是特定于平台的,所以你可能需要四处搜索。

我错过什么重要的吗?这些是我采取的快速步骤。我想。

我建议将所有这些最小化并合并到一个文件中-更少的HTTP请求=更快的加载时间

参见这里的If-MatchIf-Modified-Since

IIS将为它返回的任何静态内容提供标签和最后修改的头,这意味着像js文件这样的静态资源将在默认情况下被浏览器自动缓存。浏览器将尝试在每次页面加载时获取所有这些文件,但IIS将返回304,浏览器将使用缓存版本。是的,有一些与发出所有这些请求相关的处理时间,但它不太可能对页面加载时间产生重大影响。此外,当你必须下载这些文件时,这对你的第一次页面加载也没有任何帮助。

将第一次加载时间与第二次和第三次加载时间进行比较。您可以在Firebug中轻松检查。如果它们不是很不同,那么问题可能不是js文件的下载大小,而是执行js代码的复杂性(假设HTML加载速度足够快)。

减少全局初始化器(即只在一个页面上使用,但在网站上的所有页面上执行的代码)。将代码移出内联脚本标记并放入窗口加载事件中。如果操作得当,这可能有助于安静一点。

我喜欢mini .

它将做的不仅仅是在用户的本地机器上缓存文件,而且它很容易设置。一个提示:不要尝试在您的最小化代码上进行开发/调试!随身携带一份调试副本。

这是他们首页的简介,看看是否适合你的需要:

[Minify]组合多个CSS或Javascript文件,删除不必要的空白和注释,并提供gzip编码和最佳的客户端缓存头