第一期

公众号同步

构造函数与class的区别

如果碰到类似的题，最好细分一下区别，一般先从定义上做对比，再从行为上、功能上等等做比较。

首先，构造函数本质上是函数，而class本质是类，这是不同的两个概念；但是他们都可以通过new来创建实例，内部通过this来指向实例。

功能上区别：实现的继承的方式不同，构造函数常用原型连和call或apply等方式实现继承，而class的继承比较特殊，需要通过extends和super来实现。而且类内部定义的方法是不可枚举的。

使用上的区别：构造函数可以直接调用，而类必须通过new来调用；类的所以方法都定义在prototype上，所以调用其实例上的方法即调用其原型上的方法。

怎么通过css来优雅的调节元素顺序

例如一个大盒子里面有10个小盒子，怎么可以方便的通过css来回调顺序呢？

答案就是flex布局的order属性，order的定义就是设置或检索弹性盒模型对象的子元素出现的順序。

order

所以我们很容易就可以实现如上效果：

#main {
  width: 400px;
  height: 150px;
  border: 1px solid #000000;
  display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

#myGreenDIV {
    animation: mymove 0.5s ease infinite forwards;
}

@keyframes mymove {
    100% {
        order: 5;
    }
}

<div id="main">
  <div style="background-color:lightgreen;order:1;" id="myGreenDIV">
  </div>

  <div style="background-color:coral;order:2;"></div>

  <div style="background-color:lightblue;order:3;"></div>

  <div style="background-color:pink;order:4;"></div>
</div>

flex的概念是用于设置或检索弹性盒模型对象的子元素如何分配空间。简而言之，就是分配弹性空间的子元素；

flex的属性是flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex的默认值是0 1 auto；

flex:1表示让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。

flex的取值有这么几种情况：

none：则计算值为 0 0 auto；

auto：则计算值为 1 1 auto；

具体的长度或百分比：表示 flex-basis 的值；

数字：表示flex-grow,后面的两个属性都取默认值；

浏览器和服务器的缓存机制

这道题主要想说的是通过HTTP实现的缓存，浏览器有浏览器缓存，服务器一般是指反向代理服务器和cdn缓存。

我们可以分成这么几步来记忆：

缓存位置
缓存过程
缓存机制
实际应用场景的缓存策略
用户行为对缓存的影响

先说缓存位置：

Service Worker(HTTPS) >>> Memory Cache >>> Disk Cache >>>Push Cache(HTTP2) ;

Service Worker：是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。而且协议必须是HTTPS。

Memory Cache：也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。 Disk Cache：也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

Push Cache（推送缓存）：是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

再看缓存过程：浏览器与服务器通信的方式为应答模式；

第一次发起HTTP请求会先从缓存中读取，如果缓存中没有标识，就会从服务器请求，然后服务器返回结果以及缓存规则，浏览器再存在浏览器缓存中。

浏览器的缓存机制有两种：强缓存和协商缓存；

强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

协商缓存：就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

1、协商缓存生效，返回304和Not Modifie；

2、协商缓存失效，返回200和请求结果；

协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。

对于实际应用场景中的缓存策略：

对于频繁变动的资源，我们可以设置Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。

而对于不常变化的资源，我们可以给它们的 Cache-Control 配置一个很大的 max-age=31536000(一年)，这样浏览器之后请求相同的 URL 会命中强制缓存。但如果你想要更新的话，可以通过添加hash使强缓存失效。

用户行为对缓存的影响：常见的有：

打开网页，地址栏输入地址：查找 disk cache 中是否有匹配。如有则使用；如没有则发送网络请求。
普通刷新 (F5)：因为 TAB 并没有关闭，因此 memory cache 是可用的，会被优先使用(如果匹配的话)。其次才是 disk cache。
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache(为了兼容，还带了 Pragma: no-cache),服务器直接返回 200 和最新内容。
作者：浪里行舟来源：简书

transtion、animation都有哪些属性，颜色渐变怎么实现

transtion：偏向过度，侧重于起始状态与结束状态；

transition常见的有4个值：

property css属性名称
duration 指定过度时间
timing-function 指定速度曲线
delay 延迟时间

常用在hover上，除了前两个属性必须以外，其他属性不规定顺序。

animation：偏动画，侧重于流程的控制；

常用的属性有：

name是通过@keyframes定义的名字，
duration执行时长
Timing-f 速度曲线默认ease ，常用的取值有linear(匀速)，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)（贝塞尔曲线）
delay 延迟时间
iteration-count 播放次数常用数字或infinite
direction 方向
fill-mode 动画不播放时的状态，常用forwards（停留在终点）
play-state 指定动画运行状态 paused/running

除了前两个属性必须以外，其他属性不规定顺序

Gradients：颜色渐变，分两种线性渐变和径向渐变

线性渐变linear-gradient 可以向上/向下/向右/向左/对角；默认自上而下渐变

background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

径向渐变radial-gradient 由中心定义

background: radial-gradient(center/shape, shape size, start-color, ..., last-color);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

聊一聊浏览器的事件循环机制和node的事件循环机制

这道题出现的概率是越来越多，而且还会有后续的宏任务与微任务。简单的说：浏览器的EventLoop是在程序中主线程的任务执行完之后，会一直循环查看存放在任务队列里的事件任务是否被触发。

Node中EventLoop有一个具体的流程：外部输入数据–>轮询阶段(poll)–>检查阶段(check)–>关闭事件回调阶段(close callback)–>定时器检测阶段(timer)–>I/O 事件回调阶段(I/O callbacks)–>闲置阶段(idle, prepare)–>轮询阶段（按照该顺序反复运行）…

poll 阶段：获取新的 I/O 事件, 适当的条件下 node 将阻塞在这里；

check 阶段：执行 setImmediate() 的回调；

close callbacks 阶段：执行 socket 的 close 事件回调；

timers 阶段：这个阶段执行 timer（setTimeout、setInterval）的回调；

I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调；

idle, prepare 阶段：仅 node 内部使用；

详细的可以查看这里浏览器的事件循环机制和node的事件循环机制。

← 面试第二期 →

# 第一期

# 构造函数与class的区别

# 怎么通过css来优雅的调节元素顺序

# 浏览器和服务器的缓存机制

# 先说缓存位置：

# 再看缓存过程：浏览器与服务器通信的方式为应答模式；

# 浏览器的缓存机制有两种：强缓存和协商缓存；

# 对于实际应用场景中的缓存策略：

# 用户行为对缓存的影响：常见的有：

# transtion、animation都有哪些属性，颜色渐变怎么实现

# transtion：偏向过度，侧重于起始状态与结束状态；

# animation：偏动画，侧重于流程的控制；

# Gradients：颜色渐变，分两种线性渐变和径向渐变

# 聊一聊浏览器的事件循环机制和node的事件循环机制

第一期