通过网络提取内容既速度缓慢又开销巨大。 较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。 因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面

昨天正好面试到了，所以也是对自己知识的一个补充吧，下面就对http缓存进行介绍。

所谓缓存，可以理解为中间的存储。在请求资源的时候，不通过网络，而是直接使用磁盘或者内存中已经在上一次请求中所下载到的资源，这样就避免了网络传输的延迟，优化了页面加载速度。

在了解Http的缓存机制之前，先来看看http中有哪些缓存

http缓存中有两种缓存

• 强制缓存
• 协商缓存

对象的浅拷贝与深拷贝

javascript原生里并没有对对象拷贝的函数，要实现对象的拷贝，可以使用以下方法。

浅拷贝

只拷贝对象的值，即将该对象的属性复制给另一个对象，如果对象里面包含另一个对象，只是将引用复制了而已。所以浅拷贝也可以理解为只拷贝一层。

要实现浅拷贝，可以通过遍历将属性赋值给另一个对象，也可以直接使用Object.assign()方法
使用Object.assign()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let Oa = {
  a: 1,
  b: 2,
  Oc: {
    d: 3,
    e: 4
  }
}

let Ob = Object.assign({}, Oa)
console.log(Ob)
// { a: 1, b: 2, Oc: { d: 3, e: 4 } }
console.log(Ob.Oc === Oa.Oc)
// true

这里Ob的属性Ob.Oc === Oa.Oc即两个对象是相等的，复制的引用

深拷贝

数组扁平化

数组扁平化是讲一个多维数组编程一个一维数组

1
2

[1, 2, 3, [4, 5, [6, 7]]] // 转换前
[1, 2, 3, 4, 5, 6, 7] 	// 转换后

下面介绍几种数组扁平化的方式

HTML 5提供了一个新的API：history，它能够操纵浏览器的历史记录信息

下面就对其进行简单的介绍

居中页面元素有很多种方式

利用flex、grid、绝对定位+负边距或者transform、text-align等等方式，他们适用于不同的场景，比如text-align就只能对inline元素起作用，vertical-align在默认情况下只是对行框内容进行对齐

下面介绍两种块级元素的居中方式 display: table\table-cell

块级上下文挺起来很抽象，W3C 中是这样解释的：

1. floats, absolute定位, 不是块级元素的块级容器(列如inline-block, table-cells, table-captions)，以及display为overflow等不是visible属性的元素，会为它们包含的内容建立新的block formatting context
2. 在block formatting context中，以容器的顶端为开始，Box一个接一个的垂直排列，两个相邻box之间的距离由margin决定，在相同的block formatting context中，两个相邻的块级Box会产生外边距合并 (这是重点)
3. 在block formatting context中，每一个Box的左边界紧挨着容器左边界(如果是从右到左的布局，那么触碰到右边界)。 在floats元素依然满足此要求(但是Box内的行框由于float可能会变窄)，除非建立了新的block formatting context(这种情况下box会由于float元素而变窄)

上面的话可以总结为：

block formatting context就是页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素。反之如此

看了这么多，是不是感觉很抽象，没关系，我们与其去研究这些抽象的文字，不如来看看block formatting context能做什么。

这个东西其实很简单

使用css

1
2
3
4
5

.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

灵魂配图

在es6中，新增了Promise对象

其中有两个方法

• Promise.all()
• Promise.race()

都是用于将多个Promise实例包装成另一个实例

下面我会对两种方法进行介绍，以及自己使用js实现他们的方法

通常，你想要通过css transition来过渡属性，然后使用了下面代码transition: height 0.5s linear

然后又使用了 height: auto来自适应高度height: 0 -> height: auto

然后发现动画就像没发生一样，直接就在0和auto两个状态之间直接切换

你可能会认为出现了什么bug，或者代码写错了，其实不然

消抖(debounce):

• 当函数被调用后，n秒之后才会触发该函数，如果在此期间函数再次被调用，则重新开始计时，n秒之后才会触发该函数。

其作用是为了避免某个事件在短时间内连续触发从而影响性能，也可用于避免在一定时间内重复提交表单等。

节流(throttle):

• 函数被调用后，立即触发该函数，在之后的n秒之内不能再次重复触发。

该函数可以用于限制浏览器scroll，mousemove等高频触发事件的触发频率

下面介绍debounce和throttle的实现方式