web缓存学习+H5自定义属性+observe

1.web缓存
(参考https://segmentfault.com/a/1190000006741200)
（https://my.oschina.net/leejun2005/blog/369148）
一般针对静态资源如CSS,JS,图片等使用缓存，原因如下：
（1）请求更快：通过将内容缓存在本地浏览器或距离最近的缓存服务器（如CDN），在不影响网站交互的前提下可以大大加快网站加载速度。
（2）节省带宽：对于已缓存的文件，可以减少请求带宽甚至无需请求网络。
（3）降低服务器压力

缓存分为服务端侧和客户端侧。常用的服务端缓存有CDN缓存，客户端缓存就是指浏览器缓存。

浏览器缓存：
1.Cache-Control描述的是一个相对时间，一般使用Cache-Control: max-age=秒，读取缓存数据条件：上次缓存时间（客户端的）+max-age < 当前时间（客户端的）。
2.Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。
3.Expires策略，过时。

详细方式参考文章

H5自定义属性:
(参考：http://blog.csdn.net/qq_31851435/article/details/53100691)
H5为我们提供了一个data属性——“data-”前缀，可以让所有的HTML元素支持自定义属性，只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>  

一、使用getAttribute来获取
var myDiv = document.getElementById(“myDiv”);
var theValue = myDiv.getAttribute(“user-defined-attribute”);
二、使用Html5自定义属性对象Dataset来获取
var myDiv = document.getElementById(“myDiv”);
var theValue = myDiv.dataset.attribute;

2、删掉一个data属性
delete myDiv.dataset.attribute;
3、增加一个data属性
myDiv.dataset.attribute4 = ‘value4’;

三 observe.
参考：（https://www.w3ctech.com/topic/1097）
是一个用于异步监听JavaScript对象变化的方法，并且无需使用额外的JavaScript库。它允许监听器接受一个按时间顺序排列的变更记录序列，这些变更记录描述了被监听对象所发生变化的内容的集合。

chrome30之后支持，但是新的chrome又取消了支持；

// 假设我们这里有个数据模型
var model = {};
// 我们来对它进行监听
Object.observe(model, function(changes){
    // 这个异步回调函数将被执行
    changes.forEach(function(change) {
        // 我们知道了都发生了哪些变化
        console.log(change.type, change.name, change.oldValue);
    });
});

数据模型发生的任何变化都会被记录下来：
通过Object.observe()我更喜欢称它为O.o()，你可以在不使用任何框架的前提下轻松实现双向数据绑定。而且速度很快。