10年网站建设优化实战经验
18217721733

如何查看网站的浏览器缓存有没有设置成功

上海知九信息 缓存设置 2020-07-29

设置网站的浏览器缓存可以减少图片等静态文件的请求和下载量,从而提升网站加载速度。当我们在服务端设置好缓存配置后,如何查看在浏览器上有没有成功生效,方法如下:

(此段需一定基本知识,后面有具体介绍)访问目标网站,查看Response Headers中Cache-Control或Expires的参数,如出现类似Cache-Control:max-age=604800Expires: Thu, 28 July 2020 10:45:11 GMT的参数,表明缓存成功生效。

具体操作方式如下:

浏览器打开一个新的标签页,在键盘按下F12键(部分键盘因F12默认为快捷功能键,需要同时按下Fn+F12键)打开开发者工具,出现如下图所示工具窗口(示例图已加载网页数据):

选择顶部的“Network”菜单,部分浏览器显示为中文“网络”菜单,在浏览器中输入网址访问,稍等几秒钟出现如图的各种数据,任意点击一个已设置过缓存的文件类型(如图片/JS/css文件)在右侧会出现包含“headers / preview / Response”等项目的小窗口,选择“headers”选项。

在headers选项下查看如本文第二段所说的Cache-Control或Expires参数,即可知道缓存是否成功生效。

缓存设置方法见:Apache服务器+阿里云oss设置浏览器缓存