深圳网站优化:浏览器配置策略和缓存控制简介【技术分享】

小帅帅 5683 0

每次访问网页时,浏览器通常从服务器下载所需的资源,例如HTML文档、图片、CSS、JavaScript,甚至字体文件。这些文件中的许多,如图片,很少被更改,如果每次从服务器重新下载这些文件,它们将不必要地增加网页的加载时间,并给服务器带来一定的压力。通过正确配置缓存策略,浏览器可以某种方式缓存这些静态文件,下次请求相同的资源时,将直接使用本地存储的副本,而不是从服务器重新下载。

启用缓存至少有两个明显的好处:

减少页面加载时间

减少服务器负载

浏览器是否使用缓存以及缓存的持续时间由服务器控制。准确地说,当浏览器请求网页(或其他资源)时,服务器返回的响应的“响应头”部分中的某些字段指示有关缓存的关键信息。

Cache-Control

Cache-ControlHTTP 响应头是 HTTP 1.1 协议新增的指令,每个资源都可以通过设定 Cache-Control 来建立缓存策略。通常,可为它指定一个max-age,表示缓存的最长时间,单位为秒。例如,若设定Cache-Control: max-age=604800,则表示这个资源的有效时间为 7 天。浏览器第一次获取这个资源后,7 天之内若再次请求,通常都不会与服务器进行任何通信,而是直接使用本地副本。

此外,还可以为CacheControl指定公共或专用标记。如果使用专用,则表示资源仅属于请求的最终用户,这将阻止中间服务器(如代理服务器)缓存此类资源。对于包含用户个人信息的文件(例如具有用户名的HTML文档),一方面可以设置专用,因为这些缓存对其他用户没有任何意义,另一方面,用户可能不希望这些文件存储在不受信任的服务器上。应该注意的是,私有不会使缓存更安全,它也会传递到中间服务器(如果站点在传输时高度安全,则应使用传输层安全措施)。对于公共,允许所有服务器缓存资源。通常,对于每个人都可以访问的资源(如徽标、图片、脚本等),将缓存控制设置为公共是合理的。)。

Expires

Expires响应头也用于控制缓存,当资源从另一个角度到期时控制资源 - 指示缓存的特定到期日期。在到期时间内,如果再次启动请求,通常浏览器将不与服务器通信,而是直接使用本地副本。 Apache服务器允许您以多种方式设置Expires的值,例如基于资源的访问时间或上次修改时间。请注意,此处的时间始终使用格林威治标准时间(GMT)而不是当地时间。

当过期和缓存控制同时发生时,后者通常会覆盖前者的设置。因为过期取决于用户的系统时间,所以通常认为使用缓存控制是更好的选择(基本上所有浏览器都支持缓存控制指令)。

Last-Modified 和 ETag

服务器可以在http返回中包含一个铸件-modfix字段或一个etag字段。土地调制表示服务器侧请求资源的最后一次修改时间,而etag是一个唯一的文件标识符,每次修改文件后生成一个新的etag。服务器将这两个字段发送到浏览器,以通知浏览器它所获得的资源的版本。

无论是通过Cache-Control设置缓存,还是在用户单击浏览器刷新按钮时在过期时间内过期,为了确保用户加载的资源是最新的,大多数浏览器不再直接使用缓存中的数据,而是发出条件请求(条件GET请求)。对于这样的请求,浏览器在请求头中包含IF-修改-自或如果-不匹配字段。前者是最后修改的,浏览器最初得到,后者是Etag.浏览器得到的。当服务器发现资源的更新时间晚于IF修改后的更新时间时,或者当资源与服务器端if-None提供的当前ETag不匹配时,它将响应整个资源,否则它将只响应304 Not修改状态代码(因此浏览器将不需要重新下载整个资源)。这种机制可以最小化数据下载。此外,如果缓存资源已过期,浏览器通常有两个选项:重新下载资源或发出条件请求。许多浏览器将采用后者来节省资源。

由于Last-Modified和ETag的效果相同(两者都验证资源是最新的服务器),因此只能使用一个。 Last-Modified通常被认为更好(它与Expires不同,由服务器生成并且不依赖于浏览器时间)。

是否已在我的网站上启用缓存?

使用浏览器开发工具或插件查看

若要确定是否启用缓存,只需检查服务器发送的响应头。许多浏览器和工具可以检查这些信息,让我们以Firefox的插件Firebug为例。如图所示:

让我们看一下没有启用缓存的资源示例:

不包含Cache-Control和Expires信息。

在线检测

还有一些方便的在线检测服务可以提示站点的速度,这将检测缓存设置。就像雅虎!公司的YSlow、百度站长工具等,都有相应的功能。你可以去百度测试,目前,你不需要登录来检测。

使用缓存的策略

为静态资源设置较长的缓存时间

有些资源不会长时间改变,例如网站的徽标图像,jQuery库,字体等,因此您可以设置“永不过期”的缓存时间,例如设置为10年。

确保文件修改生效

有时我们会修改一些资源,例如更新网站的jquery版本或css样式。如果已经缓存了这些资源,那么除非用户手动刷新页面,否则在缓存自然过期之前,用户将无法获得新版本。在这种情况下,如何强制浏览器再次下载?最有效的方法之一是在这些资源的文件名中包含版本信息,并在更改后相应地修改文件名。当浏览器发现文件已被替换时,它将自然无法使用缓存,但将再次下载。

仔细设定html文件的到期时间

在大多数情况下,对其他图像(如CSS、JavaScript)的请求来自单个HTML文档。对于此类页面,通常应设置较短的过期时间,或根本不设置。因为如果这样的页面是高速缓存的,则页面中包含的资源的文件名等将被高速缓存,这使得难以更新以确保它对用户立即生效。

引用静态资源时不要使用Query String

查询字符串是一个字符串,例如?键=val,例如

&; Lt; UNK&P; Gt; &; Lt; UNK&P; Gt; &; Lt; UNK&P; Gt; &; Lt; UNK&P; Gt; Script SRC = "/ Static / j/func. Js? V = a 87 ff8 "

这使得一些旧浏览器(包括IE6)无法缓存资源。

设定缓存的方法

对于Apache服务器,可以通过mod_expires模块设置ExpiresHTTP标头或Cache-ControlHTTP标头的max-age指令。编辑相应目录中的.htaccess文件,或修改Apache配置文件(可能是httpd.conf或apache2.conf,具体取决于服务器系统版本)。

分文件类别设定

ExpiresByType允许您根据文件的mime类型设置一类文件的过期日期。例如:

C "Access" plus 1 week of "access", "access", "access", "access image", "access image", "access image", "access image", "access image", "access image", "access image", "access image" "Image", "6 months", "access image", "access image", "6 months", "access image", "6 months", "access to 6 months", such as: "access", For example: "enter", such as: "enter", such as: "enter", such as: enter "enter", such as: enter "enter", such as: enter "enter", such as: enter "enter", such as: enter "enter", For example, enter "enter", such as: enter "enter", enter "enter", such as: enter "enter", such as: enter "enter", such as: enter "enter"

访问加1周表示缓存过期设置为访问时间后的一周(即当前时间)。如果将访问替换为修改,则缓存过期设置为文件修改时间后的一周。可使用的时间单位包括:

years

months

weeks

days

hours

minutes

seconds

不同的时间也可以进行组合,例如:

Expiresbytype text / HTML "visit plus 1 month, 15 days, 2 hours" expiresbytype image / gif "modify plus 5 hours, 3 minutes"

根据文件扩展名设置

如果要根据扩展名指定缓存规则,可以使用FilesMatch匹配正则表达式。为了简单起见,我只指定ExpiresDefault。这里。它具有较低的优先级,只有在没有其他规则能够匹配相应的文件(包括上层目录中的缓存规则)时才生效。

对某些文件设定

同样,可以为某些文件启用特定的缓存策略。请注意,文件名中的点(.)需要转义。

将所有文件设置在折页下

对于静态文件,将它们全部放在一个目录中并设置目录中的所有文件很方便。但是,在这里您需要小心防止其他规则覆盖ExpiresDefault。

< ifmodule mod EU expires. C > expires active on expires defaults to "visit plus 10 years" < ifmodule >

有用的工具及参考资料

cache控制驱动程序标签(可以检测给定的地址是否已启用cache控制,并将教您如何设置)

Cache tutorials for Web authors and Webmaste

HTTP Cache - Web Fundamentals (from Google Developers)

百度站长工具页优化建议

h5bp/server-configs(HTML5 Boilerplate 提供了所有最流行的服务器的配置文件样例)

标签: 深圳网站优化 深圳网络优化 深圳营销公司 深圳网络推广 深圳网络营销

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~