【转】前端缓存介绍
目录
1、一次网页浏览的过程
2、DNS，HTTP，Cookie缓存
3、HTTP缓存
4、HTML5中的缓存
1、一次网页浏览的过程
2、DNS解析
Domain Name Service
将域名转换为网络上的实际ip地址
浏览器DNS缓存
Chrome 为例：1000条，70s
chrome://net-internals/#dns
缓存失效
缓存条数超过上限
- 列表内容
- 超时
- 手动清空
- 重启浏览器
系统DNS缓存
查看：ipconfig /displaydns
缓存时间： MaxCacheEntryTtlLimit TTL
缓存失效：ipconfig /flushdns 或 修改host
3、HTTP缓存
- 不缓存
- 强缓存
- 协商缓存
不缓存
浏览器每次发送接收一个完整的请求
适用于动态页面或接口
强缓存
不发送网络请求直接从缓存读取文件
适用于不常变化的静态文件
协商缓存
浏览器询问服务器本地缓存是否有更新
HTTP 1.0 协议
Expire:Mon, 27 Jun 2016 03:37:44 GMT
Last-Modified:Fri, 17 Jun 2016 07:32:46 GMT
If-Modified-Since:Fri, 17 Jun 2016 07:32:46 GMT
HTTP 1.1 协议
Cache-control:
- max-age =604800
- no-cache
- no-store
ETag/If-None-Match
cookie
存储在浏览器的一段文本
会附到http请求中发送
JS可以对cookie读写
cookie的属性
Expires
Domain
Path
Secure
HttpOnly
Cookie的缺点
4K限制
Domain污染
HTTP头中无用信息增加
Cookie信息泄露
UserData
仅IE支持
XML文件存储
4、HTML5中的缓存
Application Cache
Localstorage & Sessionstorage
WebSQL
IndexedDB
Application Cache
缓存页面和页面内指定的静态资源，使其在无网络情况下也可以正常运行。
如何使用
定义一个缓存清单文件
在页面里指定清单文件
如何更新
与HTTP缓存的区别
Localstorage & Sessionstorage
Key-value形式存储
每个域名下可以存储5M内容
Localstorage永不过期，除非手动删除
Sessionstorage随浏览器关闭而结束
getItem
setItem
removeIte
key
clear
与cookie的对比
Web SQL
一个Html5环境下可以用Js执行CRUD的关系型Web数据库
openDatabase
Transaction
executeSql
IndexedDB
非关系型数据库
异步API
可以建立索引方便查询
支持事务
无大小限制