前言

前端性能优化系列，记录在优化过程中的问题，可能有十万个为什么，待以后懂了再记录，毕竟太菜啥都不懂。
而且部分优化（设置缓存、gzip压缩、使用CDN加速服务）非开发人员来控制，而是网站服务器管理员的职责。

一、缓存分为两类

强缓存：

不向服务器发送请求，直接使用客户端本地缓存数据

协商缓存：

向服务器发送请求，由服务器判断请求文件是否发生改变。若未发生改变，则返回304状态码，通知客户端直接使用本地缓存；如果发生改变，则直接返回请求文件。

参见下图：

200(from memory cache)和304(Not Modified)

1、强缓存

强缓存，又有Expires和Cache-Control之分。

差别如下：

Expires：（该时间是一个绝对时间）
其值直接是绝对时间

Cache-Control：（该时间是一个相对时间）
值为：

max-age：即最大有效时间，在上面的例子中我们可以看到
no-cache：表示没有缓存，即告诉浏览器该资源并没有设置缓存
s-maxage：同max-age，但是仅用于共享缓存，如CDN缓存
public：多用户共享缓存，默认设置
private：不能够多用户共享，HTTP认证之后，字段会自动转换成private。

比如：Cache-Control: max-age=2592000

缺点：

如果上线的一个图片设置的强制缓存，图片更新了部署到服务器，但是用户那边始终读到的缓存里的原图，你没法要求用户清空浏览器缓存。
当然了，你可以修改图片的名字解决这个问题。

2、协商缓存

协商缓存，又有Last-Modified和If-Modified-Since、Etag和If-None-Match。
差别如下：

Last-Modified和If-Modified-Since：

服务器会将If-Modified-Since的值与Last-Modified字段进行对比，如果相等，则表示未修改，响应304；反之，则表示修改了，响应200状态码，返回数据。

缺点：

如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。
如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。

Etag和If-None-Match：

服务器存储着文件的Etag字段，可以在与每次客户端传送If-no-match的字段进行比较，如果相等，则表示未修改，响应304；反之，则表示已修改，响应200状态码，返回数据。

3、缓存的优先级

强缓存优先级 > 对比缓存优先级
cache-control优先级 > expires优先级
ETag优先级 > Last-Modified优先级

二、对比初次加载与从缓存中加载

接下来对比一下，一个资源的初次加载和从缓存中加载，如图所示：

此处注意，虽然size=178B<3.0KB，但是time=321ms>291ms。
这……

我猜：

1、因为本地部署，机器性能好、网络环境好，所以直接读取或缓存读取差别不大，时间有浮动保持在300ms左右。
2、因为文件大小本身很小，导致直接读取或缓存读取差别不大。
3、因为从缓存中读取经历了两步，多了比较ETag的时间。

问题来了：

很明显从缓存加载速度竟然还比较慢，但是这里是通过协商缓存进行了比较，如果直接强制缓存，是不是更快呢？

我也不知道怎么设置Expires，哎……满脑子疑问如下：

1、本地，ETag在哪里配置？？似乎默认都有
2、本地，Expires在哪里配置？？

webpack.base.conf.js里配置加上ico并没有什么差别

{test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},

3、服务器，nginx上配置ETag？配置了ETag: off但并没有什么作用？

4、服务器，nginx上配置Expires？.svg和.glb明明没有配置默认有Expires，ico配置了似乎不起作用

配置加上了Cache-Control “public”，request确实加上了public，但是response里Cache-Control 始终是no-cache。

换火狐浏览器看，虽然写着请求200 OK，且消息头有no-cache，但仍然显示已缓存如下图，费解。

# Media: images, icons, video, audio, HTC
#location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
#  root   E:/svn-workspace/pro/dist/;
#  expires 1M;
#  access_log off;
#  add_header Cache-Control "public";
#}
# CSS and Javascript
#location ~* \.(?:css|js)$ {
#  root   E:/svn-workspace/pro/dist/;
#  expires 1y;
#  access_log off;
#}

总而言之

缓存就默认吧，似乎浏览器自己有一套比较好的设置，只需自己调整这些资源的Expires时间。

三、关于ico的缓存问题

服务器端nginx.conf配置中

location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {root   E:/svn-workspace/pro/dist/;expires 30d;
}

确实对ico配置了过期时间30天，然而查看资源请求时发现：

1、直接输入地址访问是没有favicon.ico资源请求的
2、刷新时有favicon.ico资源请求，虽然加了过期时间expires30天没问题，但是请求消息头中有个no-cache不知道在哪配置的啊，同时查看其它png|jpg资源都不存在这个no-cache，为什么呢？

四、参考文档

浏览器缓存和webpack缓存配置：（https://juejin.im/post/5b3da02551882519eb6573e2）
http缓存机制（200还是304）：
（http://kailian.github.io/2016/07/17/web-cache）

前端性能优化 - 设置缓存相关推荐

使用缓存实现前端性能优化——浏览器缓存机制、缓存分类
前端性能优化探讨及浏览器缓存机制一.缓存如何实现前端性能优化 1.什么是浏览器缓存 2.js请求,一般会有哪些地方有缓存处理? 3.静态资源 ① 什么是静态资源 ② 静态资源的缓存策略二.缓存的类 ...
前端性能优化之缓存技术
缓存一直以来都是用来提高性能的一项必不可少的技术 , 利用这项技术可以很好地提高web的性能. 缓存可以很有效地降低网络的时延,同时也会减少大量请求对于服务器的压力. 接下来这篇文章将会详细地介绍在w ...
聊天室软件源码前端性能优化，缓存角度的相关分析
在我们考虑提高聊天室软件源码页面渲染速度之前先来思考一个问题,一个页面的速度由什么决定?显而易见,这里主要包含两方面的影响因素. 1.资源传输时间(tcp链接时间和响应时间) 2.dom渲染时间这两 ...
nginx 开启gzip 配置js_前端性能优化之缓存与GZIP
最近疫情,着实无聊.简单总结点东西,打发时间. 这篇文章主要记录如何在tomcat或nginx中配置前端静态资源的缓存策略,力求简洁明了,不参杂其他无关配置项. 压缩对于HTTP的压缩,是一种使用C ...
前端性能优化基础知识--幕课网
作为一个前端小码农,在页面样式都能实现以后,就开始考虑:同一个效果,我该用什么样的方式和代码去实现它比较规范?前两天逛幕课网发现了两门课程–<前端性能优化-基础知识认知>和<前端性能 ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...
大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...

前端性能优化 - 设置缓存