一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Frontend - Page 6 | Spark1e的个人博客

#### 在解释事件循环前……

```javascript
function foo(b) {
  var a = 10;
  return a + b + 11;
}

function bar(x) {
  var y = 3;
  return foo(x * y);
}

console.log(bar(7)); // 返回 42
```

这段代码存在这样的过程：

1. console.log调用bar -> 创建了第一个帧

2. bar调用foo -> 创建了第二个帧，并被压倒第一个帧上

3. foo完成并返回 -> 最上层帧弹出栈

4. bar完成并返回 -> 出栈，栈空

#### javascript在什么时候会用到队列呢？

一个 JavaScript 运行时包含了一个 **待处理的消息队列** 。每一个消息都关联着一个用以处理这个消息的函数。

在事件循环期间的某个时刻，运行时从 **最先进入队列的消息开始处理队列中的消息** 。为此，这个消息会被移出队列，并作为输入参数调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。

函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。

#### 回到正题

根据 [HTML Standard](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops). 这里的宏任务（旧称macrotask）现统称为task，其定义为：

> a task is a struct which has:
> \- **Steps**
> A series of steps specifying the work to be done by the task.
> \- **A source**
> One of the task sources, used to group and serialize related tasks.
> \- **A document**
> A Document associated with the task, or null for tasks that are not in a window event loop.
> \- **A script evaluation environment settings object set**
> A set of environment settings objects used for tracking script evaluation during the task.
> A task is runnable if its document is either null or fully active.

翻译过来就是一个具有指定步骤、具有一个源、上下文或者null（此时使用window event loop）、一系列追踪脚本运行的对象的结构。

而微任务依然是microtask，其定义为：

> A microtask is a colloquial way of referring to a task that was created via the queue a microtask algorithm. 译：微任务是指通过队列微任务算法创建的任务的口语方式。

#### 举个例子

这里感谢Jiasm的例子[微任务、宏任务与Event-Loop](https://juejin.im/post/5b73d7a6518825610072b42b),
对于一段JS代码而言，在JS的执行阶段是要逐步执行的，那么执行到一些需要等时的方法时，我就不可能去等待这些方法到来，等到你到来的时候我们再排队；
那么对于一个方法（macrotask）而言，其内部可能存在多个额外的“业务”：

```javascript
setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
})

console.log(2)
// finally log 1,2,3,4
```

这里需要注意，setTimeout是宏任务，而Promise.then是一个标准的微任务，**在同步代码执行完成后才回去检查是否有异步任务完成，并执行对应的回调，而微任务又会在宏任务之前执行。**

> [Promise A+规范](https://promisesaplus.com/#notes)里特别标注，这里Promise要取决于平台和引擎自身：This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick. Since the promise implementation is considered platform code, it may itself contain a task-scheduling queue or “trampoline” in which the handlers are called.

目前比较流行的实现标准里，宏任务有：

|  | Browser | Node.js |
| --- | --- | --- |
| I/O | Yes | Yes |
| setTimeout/setInterval | Yes | Yes |
| setImmediate | No | Yes |
| requestAnimationFrame | Yes | No |

常见的微任务有：`process.nextTick`,`MutationObserver`,`Promise.then/catch/finally`

#### 回到EventLoop-事件循环

有一个非常好的动画来解释为什么是这样的执行顺序 [Who's right?](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#level-1-bossfight)

Task, Job 与 EventLoop

#### 什么时候会触发重排？

- 添加或删除可见的 DOM 元素
- 元素位置改变
- 元素尺寸改变（包括：外边距、内边距、边框厚度、宽度、高度等属性改变）
- 内容改变。例如：文本改变或图片被另一个不同尺寸的图片代替
- 页面渲染器初始化
- 浏览器窗口尺寸改变
- 获取会导致渲染队列刷新的属性（详细介绍如下）

除此之外，一些获取DOM结构和布局的操作也会触发重排，比如：
* offsetTop , offsetLeft , offsetWidth , offsetHeight
* scrollTop , scrollLeft , scrollWidth , scrollHeight
* clientTop , clientLeft , clientWidth , clientHeight
* getComputedStyle() ( currentStyle in IE )

#### 为什么说重排比重绘更耗费性能

当 DOM 的变化影响了元素的几何属性（宽和高） – 比如改变边框宽度或给段落增加文字，导致行数增加 – 浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构建渲染树。这个过程称为 “重排（reflow）”。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为 “重绘（repaint）”。

重排会导致大量的计算，而重绘的区域已经计算好，相对而言开销小一些，但是要注意，两种情况都是需要一定开销的，一定要尽量减少；

#### 我可以怎么做来避免呢？
1. 合并多次对样式属性的操作/使用class
2. 批量修改DOM - 通过生成一个DOM片段后一次性插入文档（可以通过脱离文档流来减少开销）
3. 缓存布局信息减少获取的操作
4. 将需要多次重排的元素，position 属性设置为 absolute 或 fixed

浏览器的重绘（Repaint）与重排（Reflow）机制

#### 先说说Promise

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

一个 Promise有以下几种状态:
* pending: 初始状态，既不是成功，也不是失败状态。
* fulfilled: 意味着操作成功完成。（与rejected统称为settled状态）
* rejected: 意味着操作失败。

>  Javascript中的promise代表一种 __已经发生__ 的状态， 而且可以通过回调方法链在一起。 如果你想要的是表达式的延时计算，考虑无参数的"箭头方法":  `f = () =>表达式` 创建惰性求值的表达式，使用 `f()` 求值。

Promise常用的方法有：
- __all__: 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
- __race__: 当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
- __reject__: 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法.
- __resolve__: 返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。

__注意：Promise直接执行的是宏任务，只有.then和.catch是微任务!__

#### 再说Async/await
`async function` 用来定义一个 __返回 AsyncFunction 对象__ 的异步函数。异步函数是指通过事件循环异步执行的函数，它会 __通过一个隐式的 Promise 返回其结果__ (如果不是通过await返回，那么返回的是一个Promise，返回值为resolve的值）。如果你在代码中使用了异步函数，就会发现它的语法和结构会更像是标准的同步函数。

异步函数可以包含await指令，该指令会暂停异步函数的执行，并等待Promise执行，然后继续执行异步函数，并返回结果。

记住，await 关键字只在异步函数内有效。如果你在异步函数外使用它，会抛出语法错误。

注意，当异步函数暂停时，它调用的函数会继续执行(收到异步函数返回的隐式Promise)

async/await的目的是简化使用多个 promise 时的同步行为，并对一组 Promises执行某些操作。正如Promises类似于结构化回调，async/await更像结合了generators和 promises。

使用async时要注意，如果同时操作多个异步方法，要注意调用的写法：
```javascript
var sequentialStart = async function() {
  console.log('==SEQUENTIAL START==');

  // 1. Execution gets here almost instantly
  const slow = await resolveAfter2Seconds();
  console.log(slow); // 2. this runs 2 seconds after 1.

  const fast = await resolveAfter1Second();
  console.log(fast); // 3. this runs 3 seconds after 1.
}

var concurrentStart = async function() {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds(); // starts timer immediately
  const fast = resolveAfter1Second(); // starts timer immediately

  // 1. Execution gets here almost instantly
  console.log(await slow); // 2. this runs 2 seconds after 1.
  console.log(await fast); // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
}

var parallel = async function() {
  console.log('==PARALLEL with await Promise.all==');
  
  // Start 2 "jobs" in parallel and wait for both of them to complete
  await Promise.all([
      (async()=>console.log(await resolveAfter2Seconds()))(),
      (async()=>console.log(await resolveAfter1Second()))()
  ]);
}
```
#### 那么async/await相比于Promise的区别（优势）？
- 代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调用也会带来额外的阅读负担
- Promise传递中间值非常麻烦，而async/await几乎是同步的写法，非常优雅
- 错误处理友好，async/await可以用成熟的try/catch，Promise的错误捕获非常冗余
- 调试友好，Promise的调试很差，由于没有代码块，你不能在一个返回表达式的箭头函数中设置断点，如果你在一个.then代码块中使用调试器的步进(step-over)功能，调试器并不会进入后续的.then代码块，因为调试器只能跟踪同步代码的『每一步』。

Async/await和Promise的一些区别

- 2XX 成功

200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
206 Partial Content，进行范围请求

- 3XX 重定向

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义相同

- 4XX 客户端错误

400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

- 5XX 服务器错误

500 internal sever error，表示服务器端在执行请求时发生了错误
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

> 作者：yck
> 链接：https://juejin.im/post/5872309261ff4b005c4580d4
> 来源：掘金

HTTP状态码

#### 缓存用来做什么？
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)。对于网站来说，缓存是达到高性能的重要组成部分。缓存需要合理配置，因为并不是所有资源都是永久不变的：重要的是对一个资源的缓存应截止到其下一次发生改变（即不能缓存过期的资源）。

缓存的种类有很多,其大致可归为两类：私有与共享缓存。共享缓存存储的响应能够被多个用户使用。私有缓存只能用于单独用户。本文将主要介绍浏览器与代理缓存，除此之外还有网关缓存、CDN、反向代理缓存和负载均衡器等部署在服务器上的缓存方式，为站点和 web 应用提供更好的稳定性、性能和扩展性。

虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的。然而常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。缓存的关键主要包括request method和目标URI（一般只有GET请求才会被缓存）。

#### HTTP中的缓存控制
HTTP/1.1定义的 `Cache-Control` 头用来区分对缓存机制的支持情况， 请求头和响应头都支持这个属性。通过它提供的不同的值来定义缓存策略。

- 禁止缓存: `Cache-Control: no-store`
- 强制确认缓存: `Cache-Control: no-cache`
- 私有缓存和公共缓存: `Cache-Control: private/public`
- 缓存过期机制: `Cache-Control: max-age=31536000`
- 缓存验证确认: `Cache-Control: must-revalidate`

HTTP的缓存机制

#### OSI七层模型

OSI（Open System Interconnection，开放系统互连）七层网络模型称为开放式系统互联参考模型 ，是一个逻辑上的定义，一个规范，它把网络从逻辑上分为了7层。每一层都有相关、相对应的物理设备，比如路由器，交换机。
OSI七层模型是一种框架性的设计方法，建立七层模型的主要目的是为解决异种网络互连时所遇到的兼容性问题，其最主要的功能就是帮助不同类型的主机实现数据传输。它的最大优点是将服务、接口和协议这三个概念明确地区分开来，通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯。

* **物理层（Physical Layer）**：主要定义物理设备标准，如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输,到达目的地后在转化为1、0，也就是我们常说的数模转换与模数转换），这一层的数据叫做比特，单位是bit比特。
* **数据链路层（Datalink Layer）**：定义了如何让格式化数据以进行传输，以及如何让控制对物理介质的访问，这一层通常还提供错误检测和纠正，以确保数据的可靠传输。交换机(二层)、网桥设备在这一层。数据链路层协议的代表包括：PPP、STP、帧中继等。
* **网络层（Network Layer）**：在位于不同地理位置的网络中的两个主机系统之间提供连接和路径选择，Internet的发展使得从世界各站点访问信息的用户数大大增加，而网络层正是管理这种连接的层。网络层负责在源机器和目标机器之间建立它们所使用的路由。路由器在该层。协议有：IP、ICMP（互联网控制报文协议）、ARP（地址转换协议）、RARP（反向地址转换协议）
* **传输层（Transport Layer）**：O S I 模型中最重要的一层。定义了一些传输数据的协议和端口号（WWW端口80等），如：TCP（传输控制协议，传输效率低，可靠性强，用于传输可靠性要求高，数据量大的数据），UDP（用户数据报协议，与TCP特性恰恰相反，用于传输可靠性要求不高，数据量小的数据，如QQ聊天数据就是通过这种方式传输的）， 主要是将从下层接收的数据进行分段和传输，到达目的地址后再进行重组，常常把这一层数据叫做段。传输协议同时进行流量控制或是基于接收方可接收数据的快慢程度规定适当的发送速率。除此之外，传输层按照网络能处理的最大尺寸将较长的数据包进行强制分割。例如，以太网无法接收大于1 5 0 0 字节的数据包。发送方节点的传输层将数据分割成较小的数据片，同时对每一数据片安排一序列号，以便数据到达接收方节点的传输层时，能以正确的顺序重组。该过程即被称为排序。
* **会话层（Session Layer）**：负责在网络中的两节点之间建立、维持和终止通信。 会话层的功能包括：建立通信链接，保持会话过程通信链接的畅通，同步两个节点之间的对话，决定通信是否被中断以及通信中断时决定从何处重新发送。通过传输层（端口号：传输端口与接收端口）建立数据传输的通路，主要在你的系统之间发起会话或者接受会话请求（设备之间需要互相认识可以是IP也可以是MAC或者是主机名）。
* **表示层（Presentation Layer）**：应用程序和网络之间的翻译官，在表示层，数据将按照网络能理解的方案进行格式化；这种格式化也因所使用网络的类型不同而不同。 　　表示层管理数据的解密与加密，如系统口令的处理。可确保一个系统的应用层所发送的信息可以被另一个系统的应用层读取。例如，PC程序与另一台计算机进行通信，其中一台计算机使用扩展二一十进制交换码（EBCDIC），而另一台则使用美国信息交换标准码（ASCII）来表示相同的字符。如有必要，表示层会通过使用一种通格式来实现多种数据格式之间的转换。
* **应用层（Application Layer）**： 是最靠近用户的OSI层，这一层为用户的应用程序（例如电子邮件、文件传输和终端仿真）提供网络服务。

#### TCP/IP四层模型

TCP/IP协议栈是美国国防部高级研究计划局计算机网（Advanced Research Projects Agency Network，ARPANET）和其后继因特网使用的参考模型。ARPANET是由美国国防部（U.S．Department of Defense，DoD）赞助的研究网络。最初，它只连接了美国境内的四所大学。随后的几年中，它通过租用的电话线连接了数百所大学和政府部门。最终ARPANET发展成为全球规模最大的互连网络-因特网。最初的ARPANET于1990年永久性地关闭。

TCP/IP是一组协议的代名词，它还包括许多协议，组成了TCP/IP协议簇。TCP/IP协议簇分为四层，IP位于协议簇的第二层(对应OSI的第三层)，TCP位于协议簇的第三层(对应OSI的第四层)。
TCP/IP通讯协议采用了4层的层级结构，每一层都呼叫它的下一层所提供的网络来完成自己的需求。这4层分别为：

* 应用层：应用程序间沟通的层，如简单电子邮件传输（SMTP）、文件传输协议（FTP）、网络远程访问协议（Telnet）等。
* 传输层：在此层中，它提供了节点间的数据传送服务，如传输控制协议（TCP）、用户数据报协议（UDP）等，TCP和UDP给数据包加入传输数据并把它传输到下一层中，这一层负责传送数据，并且确定数据已被送达并接收。
* 网络层：负责提供基本的数据封包传送功能，让每一块数据包都能够到达目的主机（但不检查是否被正确接收），如网际协议（IP）。
* 网络接口层：对实际的网络媒体的管理，定义如何使用实际网络（如Ethernet、Serial Line等）来传送数据。

![对比图示](https://cdn.arc-light.fun/P6dgvi/OSI-TCP.jpg)

OSI七层模型&TCP/IP四层模型

#### React的生命周期图谱

v16.3和v16.4+版本的生命周期有着比较大的区别，感谢大神制作了一个[React生命周期图谱](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) 这里截图说明：

![React生命周期](https://cdn.arc-light.fun/gHN3CF/React生命周期_jp8yqw.jpg)

* constructor
  **如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。**

  在 React 组件挂载之前，会调用它的构造函数。在为 `React.Component` 子类实现构造函数时，应在其他语句之前前调用 `super(props)`。否则，`this.props` 在构造函数中可能会出现未定义的 bug。

  通常，在 React 中，构造函数仅用于以下两种情况：
  \- 通过给 `this.state` 赋值对象来初始化内部 state。
  \- 为事件处理函数绑定实例
  在 `constructor()` 函数中不要调用 `setState()` 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 `this.state` 赋值初始 state
* `static getDerivedStateFromProps(props, state)`

`getDerivedStateFromProps` 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。例如，实现 `<Transition>` 组件可能很方便，该组件会比较当前组件与下一组件，以决定针对哪些组件进行转场动画。

**请注意，不管原因是什么，都会在每次渲染前触发此方法。这与 UNSAFE_componentWillReceiveProps 形成对比，后者仅在父组件重新渲染时触发，而不是在内部调用 setState 时。**

* shouldComponentUpdate

根据 `shouldComponentUpdate()` 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

当 props 或 state 发生变化时，`shouldComponentUpdate()` 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 `forceUpdate()` 时不会调用该方法。

此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的 `PureComponent` 组件，而不是手动编写 `shouldComponentUpdate()`。`PureComponent` 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。

* getSnapshotBeforeUpdate

`getSnapshotBeforeUpdate()` 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 `componentDidUpdate()`。

此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

应返回 snapshot 的值（或 `null`）。

* componentDidMount

`componentDidMount()` 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 `componentWillUnmount()` 里取消订阅

你可以在 `componentDidMount()` 里可以直接调用 `setState()`。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 `render()` 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 `constructor()` 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理

* componentDidUpdate

`componentDidUpdate()` 会在更新后会被立即调用。首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

你也可以在 `componentDidUpdate()` 中直接调用 `setState()`，但请注意 **它必须被包裹在一个条件语件里** ，正如上述的例子那样进行处理，**否则会导致死循环**。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。 欲了解更多有关内容，请参阅为什么 props 复制给 state 会产生 bug。

* componentWillUnmount

`componentWillUnmount()` 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 `componentDidMount()` 中创建的订阅等。

`componentWillUnmount()` 中不应调用 `setState()`，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

React 组件中 state 和生命周期

#### Vue更新版生命周期

截止v2.6.10版本，Vue相关的选项/生命周期共有11个：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured

#### 生命周期顺序：

初始化生命周期和方法 -> __beforeCreate__ -> 初始化依赖注入和响应式 -> __created__ -> 模板解析编译 -> __beforeMount__ -> 创建element节点 -> __mounted__ -> 如果数据被更新 -> __updated__ -> 触发重新渲染和patch (-> 如果数据继续更新 -> __beforeUpdate__ -> 调用`destroy`方法 -> __beforeDestroy__ -> 销毁子节点&watcher&事件监听 -> __destroyed__

- activated
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。

- deactivated
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。

- errorCaptured
	__2.5.0+ 新增__
    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

> 这里提一下`keep-alive`, 这是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在` <keep-alive>` 内被切换，它的 `activated` 和`deactivated` 这两个生命周期钩子函数将会被对应执行。

Vue(v2.6.10)的选项 / 生命周期钩子

#### HTTP是什么

HTTP (超文本传输协议) 是用来在 Web 上传输文件的 __基础协议__ ，基于 __TCP/IP通信协议__ 来传递数据，最典型的是在浏览器和服务器之间传递以至于上网人员可以浏览他们。目前HTTP说明文档的版本是HTTP/2。

HTTPS 是 HTTP 协议的安全版本，HTTPS __在 HTTP 上加入套接字 SSL（TLS 为 SSL 最新版）层__ ，对网页进行加密传输。

HTTP 是 __基于文本__ (所有的通信都是以纯文本的形式进行) 以及 __无状态的 (当前通信不会发现以前的通信状态)__ 。这个特点对在www上访问网页的人是很理想的。而且，HTTP也可以让网站更加的灵活多变，利用在AJAX上等。

HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。 __URL是一种特殊类型的 URI__ 。

HTTP是用于传输诸如HTML的超媒体文档的 __应用层__ 协议。它被设计用于Web浏览器和Web服务器之间的通信，但它也可以用于其他目的。 HTTP遵循经典的 __客户端-服务端模型__ ，客户端打开一个连接以发出请求，然后等待它收到服务器端响应。 HTTP是无状态协议，意味着服务器不会在两个请求之间保留任何数据（状态）。该协议虽然通常基于TCP / IP层，但可以在任何可靠的传输层上使用；也就是说，一个不会像UDP协议那样静默丢失消息的协议。RUDP作为UDP的可靠的升级版本，是一种合适的替代选择。

#### 通过定义能够知道的特点

1. 基于TCP/IP通信协议
这部分的知识稍后开篇来讲
2. HTTP位于应用层
这部分的知识稍后开篇来讲
3. 遵循客户端-服务端模型
C/S(客户端/服务器)模型，是常用的服务器模型，包括现在说的B/S(浏览器/客户端)模型，都是对C/S结构的一种变化或者改进的结构。 TCP/IP协议在设计和实现上并没有客户端和服务器的概念，在通信过程中所有服务器都是对等的。但由于资源被数据提供者所垄断，于是产生了C/S模型：所有客户端都通过服务器获取所需资源。
4. 无状态
这里需要区分一下两个概念：
	- __无连接__：每次连接只处理一个请求，服务端处理完客户端一次请求，等到客户端作出回应之后便断开连接；
	- __无状态__：是指服务端对于客户端每次发送的请求都认为它是一个新的请求，上一次会话和下一次会话没有联系；
    
在后续的Web发展中需要带有一定的状态，则通过引入cookie和session体系机制来维护状态信息。即用户第一次访问服务器的时候，服务器响应报头通常会出现一个Set-Cookie响应头，这里其实就是在本地设置一个cookie，当用户再次访问服务器的时候，http会附带这个cookie过去，cookie中存有sessionId这样的信息来到服务器这边确认是否属于同一次会话。

#### HTTP与HTTPS
##### 什么是HTTPS
HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。

##### HTTPS加密机制
HTTP中没有加密机制，可以通过 __SSL（Secure Socket Layer 安全套接层）__ 或 __TLS（Transport Layer Security 安全层传输协议）__ 的组合使用，加密HTTP的通信内容。

HTTPS是 HTTP Secure 或 HTTP over SSL。

SSL（Security Socket Layer）是最初由网景公司（NetScape）为了保障网上交易安全而开发的协议，该协议通过加密来保护客户个人资料，通过认证和完整性检查来确保交易安全。网景公司开发过SSL3.0之前的版本；目前主导权已转移给IETF（Internet Engineering Task Force），IETF以SSL3.0为原型，标准化并制定了TSL1.0，TLS1.1，TLS1.2。但 __目前主流的还是SSL3.0和TSL1.0__ 。

SSL工作在 __OSI七层模型中的表示层__ ，__TCP/IP 四层模型的应用层__ 。

SSL 和 TLS 可以作为基础协议的一部分（对应用透明），也可以嵌入在特定的软件包中（比如Web服务器中的实现）。

SSL 基于TCP，SSL不是简单地单个协议，而是两层协议；SSL记录协议（SSL Record Protocol）为多种高层协议（SSL握手协议，SSL修改密码参数协议，SSL报警协议）提供基本的安全服务。HTTP是为Web客户端/服务器交互提供传输服务的，它可以在SSL的顶层运行；SSL记录协议为SSL链接提供两种服务，机密性：握手协议定义了一个共享密钥，用于SSL载荷的对称加密。 消息完整性：握手协议还定义了一个共享密钥，它用来产生一个消息认证码（Message Authentication Code，MAC）。

SSL/TLS握手阶段分为五步(假定客户端叫做爱丽丝，服务器叫做鲍勃，整个握手过程)：
以下引自 [阮一峰的网络日志](http://www.ruanyifeng.com/blog/2014/09/illustration-ssl.html)
- 第一步，爱丽丝给出协议版本号、一个客户端生成的随机数（Client random），以及客户端支持的加密方法。
- 第二步，鲍勃确认双方使用的加密方法，并给出数字证书、以及一个服务器生成的随机数（Server random）。
- 第三步，爱丽丝确认数字证书有效，然后生成一个新的随机数（Premaster secret），并使用数字证书中的公钥，加密这个随机数，发给鲍勃。
- 第四步，鲍勃使用自己的私钥，获取爱丽丝发来的随机数（即Premaster secret）。
- 第五步，爱丽丝和鲍勃根据约定的加密方法，使用前面的三个随机数，生成"对话密钥"（session key），用来加密接下来的整个对话过程。

直白解释，在HTTPS使用时，客户端首先发起请求，服务端返回证书，客户端确认无误后，选择对应的公钥开始加密，服务端接收到数据后开始使用服务器的私钥解密。

#### HTTP Header
HTTP 消息头允许客户端和服务器通过 request和 response传递附加信息。一个请求头由名称（不区分大小写）后跟一个冒号“：”，冒号后跟具体的值（不带换行符）组成。该值前面的引导空白会被忽略。

根据不同上下文，可将消息头分为：
- 一般头: 同时适用于请求和响应消息，但与最终消息主体中传输的数据无关的消息头。
- 请求头: 包含更多有关要获取的资源或客户端本身信息的消息头。
- 响应头: 包含有关响应的补充信息，如其位置或服务器本身（名称和版本等）的消息头。
- 实体头: 包含有关实体主体的更多信息，比如主体长(Content-Length)度或其MIME类型。

常用的头部主要有：

|应答头|说明|
|--|--|
|Content-Length|表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势，可以把输出文档写入 ByteArrayOutputStream，完成后查看其大小，然后把该值放入Content-Length头，最后通过byteArrayStream.writeTo(response.getOutputStream()发送内容。|
|Content-Type|表示后面的文档属于什么MIME类型。Servlet默认为text/plain，但通常需要显式地指定为text/html。由于经常要设置Content-Type，因此HttpServletResponse提供了一个专用的方法setContentType。|
|Expires|应该在什么时候认为文档已经过期，从而不再缓存它|
|Last-Modified|文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置。|
|Set-Cookie|设置和页面关联的Cookie。Servlet不应使用response.setHeader("Set-Cookie", ...)，而是应使用HttpServletResponse提供的专用方法addCookie。|

前端看HTTP

#### script 标签有哪些属性

* async
* defer
* integrity
* src
* type
* text
* crossorigin

区别如下

![script标签属性区别](https://cdn.arc-light.fun/y04gmB/script-tag-difference.png)

如图可知，async不影响页面解析过程，但是加载完成执行过程会终止parsing；
而defer是在过程中加载，等到页面解析完成后才执行。

**要注意，async无法确定顺序，比较适合不依赖dom结构的，而defer则是顺序执行**

#### 其他的方式

1. 动态创建script标签

```javascript
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);
```

动态创建的script无论在何时执行创建，其源js均会在最后执行

Spark1e

Category: frontend