记得有一次做一个移动端网页时，无论是上线还是chrome F12移动端查看都无法正常响应式展现，只有在PC浏览器上缩放才行。后来才发现需要在head的meta里加一个viewport。这也让我第一次注意到了不起眼的meta，原来它暗藏许多的玄机，这里我们来总结一下！
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他web服务。
name - 把content属性关联到一个名称
主要用于一些SEO优化
- author 网站作者
- description 网站描述
- keywords 网站关键词
- …
例如:
<meta name="description" content="the blog of Blackganglion">
<meta name="author" content="BlackGanglion">
http-equiv - 把content属性关联到HTTP头部
http-equiv类似HTTP头部协议，回应给浏览器有用的信息，列举一些常见的:
Content-Type和Content-Language 显示字符集的设定
<meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN">
Refresh 让网页多长时间(s)刷新自己，或在多长时间后让网页自动链接到其它网页
<meta http-equiv="Refresh" content="30">
<meta http-equiv="Refresh" content="5; Url=http://www.xia8.net">
其中的5是指停留5秒钟后自动刷新到URL网址。
Cache-Control 网页缓存控制
<meta http-equiv="Cache-Control" content="max-age=7200" />
max-age(单位为s)指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。
s-maxage(单位为s)同max-age，只用于共享缓存（比如CDN缓存)。如果存在s-maxage，则会覆盖掉max-age和Expires header。
public多用户间共享一份缓存。如果没有指定public还是private，则默认为public。
private响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。
no-cache指定不缓存响应，表明资源不进行缓存。Cache-Control: private, max-age=0, no-cache。
no-store绝对禁止缓存，每次请求资源都从服务器上获取。
Expires 指定网页在缓存中的过期时间，是服务器端的具体时间点。一旦网页过期，必须到服务器上重新调阅。
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器可以直接从浏览器缓存读取数据，而无需再次请求，Cache-Control的优先级更高。
必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。
Cache-Control与Expires的区别在于Cache-Control下浏览器不会向服务器发送请求，Expires仍要向服务器发送请求
X-UA-Compatible 指定网页的兼容性模式设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.
viewport 能优化移动浏览器的显示
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- width：宽度（数值 或 device-width)（范围从200到10,000，默认为980像素）
- height：高度（数值 或 device-height）（范围从223到10,000）
- initial-scale：初始的缩放比例（范围从>0到10）
- minimum-scale：允许用户缩放到的最小比例
- maximum-scale：允许用户缩放到的最大比例
- user-scalable：用户是否可以手动缩放 (no 或 yes)
关于浏览器缓存
Last-modified 服务器端文件的最后修改时间
当浏览器再次进行请求时，会向服务器传送If-Modified-Since报头，询问Last-Modified时间点之后资源是否被修改过。
如果没有修改，则返回码为304，使用缓存。
如果修改过，则再次去服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。
ETag
当客户端发送请求该页面后，服务器返回该页面与对应的ETag，当客户端再次请求该页面时，使用if-None-Match将ETag传回原服务器，服务器会对ETag进行检查（一定程度上会增加服务器的开销），一致的话，返回304+空响应，使用本地缓存。
使用ETag可以解决Last-modified存在的一些问题：
- 某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新
- 如果资源修改非常频繁，在秒以下的时间内进行修改，而Last-modified只能精确到秒
- 一些资源的最后修改时间改变了，但是内容没改变，使用ETag就认为资源还是没有修改的。
LocalStorage与sessionStorage
LocalStorage是一种本地存储的公共资源，遵守跨域安全策略，如果有多个等价域名之间的LocalStorage不互通，则会造成多份相同缓存。缓存是以数据库文件的形式存放在本地的。
LocalStorage在PC上的兼容性不太好，而且当网络速度快、协商缓存响应快时使用localStorage的速度比不上304，并且不能缓存css文件。而移动端由于网速慢，使用localStorage要快于304。
注意: Cache-Control、Expires是本地缓存，Last-modified、ETag是协商缓存。