前言最近手上刚刚拆掉石膏,去楼下房友帮忙。楼下房友领导来自阿里,前端用的是阿里的ant-design,设计将设计图上传到蓝湖,聊天工具也采用阿里的钉钉。有时间我也多多去楼下房友交流学习,多交流,就会有提升。最近也比较忙,好久没有更新博客了。闲言少叙,今天主要谈谈前端性能优化之浏览器缓存。 浏览器缓存我前面写过浏览器缓存的文章,也写过html5离线缓存,关于这些缓存,我们很容易搞不清,例如:200 OK (FROM MemoryCache、FROM DiskCache) 及 304 NOT MODIFIED 还有 application cache (离线缓存)等等。 200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的,当kill进程后,也就是浏览器关闭以后,数据将不存在。但是这种方式只能缓存派生资源 200 from disk cache 不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。这种方式也只能缓存派生资源 304 Not Modified 访问服务器,发现数据没有更新,服务器返回此状态码。然后从缓存中读取数据。 三级缓存原理
一般浏览图片,如下流程:
application cache和上面缓存有点区别,是离线缓存,就是资源可以从硬盘上读取而不用联网,即使断网,用户也可以浏览。 设置浏览器缓存304是协商缓存还是要和服务器通信一次,要想断绝服务器通信,就要强制浏览器使用本地缓存(cache-control/expires), 一般有如下几种方式设置浏览器缓存。 1、通过HTTP的META设置expires和cache-control http-equiv="Cache-Control" content="max-age=7200" /> http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" /> 这样写的话仅对该网页有效,对网页中的图片或其他请求无效。 2、apache服务器配置图片,css,js,flash的缓存 这个主要通过服务器的配置来实现这个技术,如果使用apache服务器的话,可以使用mod_expires模块来实现: 编译mod_expires模块: Cd /root/httpd-2.2.3/modules/metadata /usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译 先打开httpd.conf文件,然后查找expires这个模块,找到后,删除左边的#号,表示打这个模块,并重启apache服务器 编辑httpd.conf配置:添加下面内容 mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType text/html "access plus 1 months" ExpiresByType text/css "access plus 1 months" ExpiresByType image/gif "access plus 1 months" ExpiresByType image/jpeg "access plus 1 months" ExpiresByType image/jpg "access plus 1 months" ExpiresByType image/png "access plus 1 months" EXpiresByType application/x-shockwave-flash "access plus 1 months" EXpiresByType application/x-javascript "access plus 1 months" #ExpiresByType video/x-flv "access plus 1 months" 3、php等设置 php header("Cache-Control: public"); header("Pragma: cache"); $offset = 30*60*60*24; // cache 1 month $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT"; header($ExpStr); ?> 或者 $seconds_to_cache = 3600; $ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT"; header("Expires: $ts"); header("Pragma: cache"); header("Cache-Control: max-age=$seconds_to_cache"); 缓存情况下前端代码部署问题一:有了缓存,如何进行前端代码更新呢? 我们可以在资源文件或者图片后面添加版本号,如下图。
问题二:但是所有文件都加了版本号之后,我们只更改了一个文件,其他文件的缓存不是浪费了吗? 解决这个问题,我们可以用 数据摘要要算法,对文件求摘要信息,摘要信息与文件内容一一对应。如下图:
这样就解决了这个问题。 问题三:新的问题又来了,文件发布怎么办?
如何解决这些问题呢? 这个问题,起源于资源的 覆盖式发布,用 待发布资源 覆盖 已发布资源,就有这种问题。解决它也好办,就是实现 非覆盖式发布,如下图:
看上图,用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。上线过程中,先全量部署静态资源,再灰度部署页面,整个问题就比较完美的解决了。 总结如下:
|