缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。

接下来的内容我们将通过以下几个部分来探讨浏览器缓存机制：

• 缓存位置
• 缓存策略
• 实际场景应用缓存策略

事件机制

涉及面试题：事件的触发过程是怎样的？知道什么是事件代理吗？

事件触发的三阶段

事件触发有三个阶段：

• window 往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

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

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

手写 call、apply 及 bind 函数

涉及面试题：call、apply 及 bind 函数内部实现是怎么样的？

首先从以下几点来考虑如何实现这几个函数

• 不传第一个参数，那么上下文默认是 window
• 改变了 this 指向，让新的对象可以执行该函数，并能接受参数

那么我们先来实现 call

进程与线程

涉及面试题：进程与线程区别？JS 单线程带来的好处？

相信大家经常会听到 JS 是单线程执行的，但是你是否疑惑过什么是线程？

讲到线程，那么肯定得说一下进程。本质上来说，两个名词都是 CPU 工作时间片 的一个描述。

进程描述了 CPU 在运行指令及加载和保存上下文所需的时间放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需要的时间。

把这些概念拿到浏览器中来说，当你打开一个 tab 页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、HTTP 请求线程等待。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。

上文说到了 JS 引擎线程和渲染线程，大家应该都知道，在 JS 运行的时候可能会阻止 UI 渲染，这说明了两个线程是互斥的。这其中的原因是因为 JS 可以修改 DOM，如果在 JS 执行的时候 UI 线程还在工作，就可能导致不能安全的渲染 UI。这其实也是一个单线程的好处，得益于 JS 是单线程运行的，可以达到节省内存，节约上下文切换时间，没有锁的问题的好处。当然前面两点在服务端中更容易体现，对于锁的问题，形象的来说就是当我读取一个数字 24 的时候，同时有两个操作对数字进行了加减，这时候结果就出现了错误。解决这个问题也不难，只需要在读取的时候加锁，知道读取完毕之前都不能进行写入操作。

实现一个简易版 Promise

在完成符合Promise/A+ 规范的代码之前，我们可以先来实现一个简易版 Promise，因为在面试中，如果你能实现出一个简易版的 Promise 基本可以过关了。

那么我们先来搭建构建函数的大体框架

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

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
    const that = this
    that.state = PENDING
    that.value = null
    that.resolvedCallbacks = []
    that.rejectedCallbacks = []
    // 待完善的 resolve 和 reject 函数
    // 待完善执行 fn 函数
}

并发 (concurrency) 和并行 (parallelism) 区别

涉及面试题：并发与并行的区别？

异步和这小姐的知识点其实并不是一个概念，但是这两个名词确实是很多人都会混淆的知识点。其实混淆的原因可能只是两个名词在中文上相似，在英文上来说完全是不同的单词。

并发是宏观概念，我分别有任务A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。

并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。

var、let 及 const 区别

涉及面试题：什么是提升？什么是暂时性死区？var、let 及 const 区别？

对于这个问题，我们应该先了解提升(hoisting)这个概念。

1
2

console.log(a) // undefined
var a = 1

从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。

== VS ===

涉及面试题：== 和 === 有什么区别？

对于 ==来说，如果对比双方的类型不一样的话，就会进行类型转换

假如我们需要对比x和y是否相同，就会进行如下判断流程：

1. 首先会判断两者类型是否相同。相同的话就是比较大小了
2. 类型不相同的话，那么就会进行类型转换
3. 会先判断是否在对比null和undefined，是的话就会返回true
4. 判断两者类型是否为string和number，是的话就会将字符串转换为number
5. 判断其中一方是否为boolean，是的话就会把boolean转为number再进行判断
6. 判断其中一方是否为object且另一方为string、number或者symbol，是的话就会把object转为原始类型再进行判断

原始(Primitive)类型

涉及面试题：原始类型有哪几种？null是对象吗？

在 JS 中，存在着6种原始值，分别是：

• Boolean
• null
• undefined
• number
• string
• symbol

1. 获取url的参数