0.缓存好处简述
- 避免冗余的数据传输：
当很多的人去访问一个网站的原始服务器，此时原始服务器会为每个访问着者都发送一份相同的文本。这样就会浪费我们的网络带宽，同时使我们的原始服务器负载加重。假如使用了缓存，此时我们就可以在缓存服务器中备份一份文本，此时再有访问者访问就不用直接和原始服务器对接，让缓存去发送文本。这样可以减少我们的原始服务器的负载压力，同时可以避免一些不必要的数据传输。
- 缓解带宽瓶颈：
缓存还可以缓解带宽瓶颈。我们都知道在网络传输中，数据的传输速率会以路径中最小的的带宽来计算。而大多数的网络一般为本地网络提供的带宽是大于远程网络的带宽。当我们在本地做了缓存之后就不用远程的去向原始服务器请求数据，则避免了远距离传输数据时受到小带宽的限制，这样我们就利用局域网的较大带宽来传输文本。
- 避免瞬间拥塞：
瞬间拥塞问题其实很考验原始服务器的抗压能力，当在网络上有一个热点问题的时候，会在短时间内有巨大的点击量，这样服务器不得不在但时间内处理百万计的网络请求。如果我们不做缓存处理，那么这样的对原始服务器的考验是巨大的。如果我们做了缓存，用户没有必要向服务器请求一些非必要的数据或者文本，这样对于原始服务器来说是一个极大的帮助，减少了服务器去接收访问的数据的次数。
- 距离延迟：
数据传输的过程中，当发送者和接收者两者的距离很远，那么数据传输带来的延迟就越明显。即使是光速传输，也会存在延迟，而缓存能够让远距离数据传输变得很低。
1.常见的本地缓存
1.storage：
- SessionStorage：
临时的会话存储，只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面或者在编辑器中更改了代码，存储的会话信息也不会丢失。
- LocalStorage
如果不主动删除，则会永久的存储在用户本地
封装的小工具方法：localStorage.js
2.cookie（另作介绍）
2.cookie与storage区别
- cookie兼容所有的浏览器（本地cookie谷歌不支持），storage不支持IE6~8；
- 二者对存储的内容均有大小限制，前者同源情况写一般不能存储4kb的内容，后者同源一般能存储只能存储5MB的数据；
- cookie有过期时间，localStorage是永久存储；
- 一些浏览器处于安全的角度可能会禁用cookie,但无法禁用localStorage。
3.手动实现缓存的方法
function memoize(fn) {
const cache = {};
return function (param) {
if (cache[param]) {
console.log('cached');
return cache[param];
} else {
let result = fn(param);
cache[param] = result;
console.log(`not cached`);
return result;
}
}
}
const toUpper = (str ="")=> str.toUpperCase();
const toUpperMemoized = memoize(toUpper);
toUpperMemoized("abcdef");
toUpperMemoized("abcdef");使能接受多个参数：
const slice = Array.prototype.slice;
function memoize(fn) {
const cache = {};
return (...args) => {
const params = slice.call(args);
console.log(params);
if (cache[params]) {
console.log('cached');
return cache[params];
} else {
let result = fn(...args);
cache[params] = result;
console.log(`not cached`);
return result;
}
}
}
const makeFullName = (fName, lName) => `${fName} ${lName}`;
const reduceAdd = (numbers, startingValue = 0) => numbers.reduce((total, cur) => total + cur, startingValue);
const memoizedMakeFullName = memoize(makeFullName);
const memoizedReduceAdd = memoize(reduceAdd);
memoizedMakeFullName("Marko", "Polo");
memoizedMakeFullName("Marko", "Polo");
memoizedReduceAdd([1, 2, 3, 4, 5], 5);
memoizedReduceAdd([1, 2, 3, 4, 5], 5);---END---