前端

往后退一步

往后退 N 步

例子

解析

转换

生成

301 和 302 都会在响应头里使用 Location 表明后续要跳转的 URI，最终效果相似，浏览器都会重定向到新的 URI，但是语义上有根本的区别，所以用法和场景差距很大

301：比如当前服务做迁移，原来的服务不使用了，所以要配置 301，把所有流量切换到新的服务去

302：比如网站系统需要维护，服务暂时不可用，可以配置 302，把流量临时切换到别的资源去，而浏览器看到 302 时，不会做缓存优化

hsts全称HTTP严格传输安全（HTTP Strict Transport Security，縮寫：HSTS），
功能是要求浏览器下次访问该站点时使用https来访问， 而不再需要先是http再转https。
这样可以避免ssl剥离攻击，
即攻击者在用户使用http访问的过程中进行攻击，
对服务器冒充自己是用户，在攻击者和服务器中使用https访问，在用户和服务器中使用http访问。
具体使用方法是在服务器响应头中添加 Strict-Transport-Security，可以设置 max-age

ssl 剥离攻击
大概就是信任第三方的安全证书，这点被利用于代理软件监听https。

第一次client -> server 只能server判断出client具备发送能力

第二次 server -> client client就可以判断出server具备发送和接受能力。
此时client还需让 serve r知道 自己接收能力 没问题于是就有了第三次

第三次 client -> server 双方均保证了自己的接收和发送能力没有问题

其中，为了保证后续的握手是为了应答上一个握手，每次握手都会带一个标识 seq，后续的ACK都会对这个seq进行加一来进行确认。

Client -> Server A(主动方)发起[1]断开链接的请求告诉A所有数据发送完毕可以关闭接收数据的接口 (只是说明A将要关闭发送接口，此时A正常接收数据)

Server (被动方)接收到请求关闭接收数据的接口

Server 如果没有数据传输给 Client 了会 发送[3] 一条关闭发送接口的消息给 Client  让 Server 关闭自己的接收数据的接口。

Server 收到 Client 的消息后会关闭自己的接收数据接口，并且发送[4]一条确认消息告诉 Client 不要再次发送关闭接口的通知了。

处理传入的方法 判断是否为方法 如果不是方法，
修改是默认的方法 value => return value

定义一个全新的 promise2 new 当前实例返回

定义当前 微任务的 成功和失败的方法 将 resolve 方法执行 value值的结果 用 x 存起来 
继续在 resolvePromise中继续执行 ，拒绝的微任务同理

resolvePromise 接收参数有 promise2 x resolve reject

比较 Promise2 与 x 如果 Promise2 与 x 相同
则返回错误信息 类型错误 Promise 和 返回值相同

判断 x 是否属于 当前的 MyPromise 继续递归 x.then 继续执行将返回值
传到 resolvePromise中继续传递

如果是对象 或者是方法

不是 Promise,对象,函数 直接执行 resolve(x) x是 字符串 数字 布尔值 undefined

判断是否循环引用

定拷贝容器

将拷贝的对象放入 数组中用于循环应用检测

遍历 目标对象，如果目标对象 key 也是对象 进行深拷贝，否则原始类型的值，直接复制

返回最终的结果

Pending

Fulfilled

Rejected

参数要求

onFulfiilled 特性

onRejected 特性

onFulfilled 和 onRejected 应该是微任务

then 方法可以被调用多次

then 返回值 是一个 promise

resolvePromise

这两个方法要更改 status 从 pending变更 fulfilled / reject

入参 分别 是 value / reason. 

入参 是函数

接收 resolve 和 reject 两个参数

初始化 promise的时候 需要同步执行函数，有错误的时候马上抛出 reject 中接收

then 接收两个参数 onFulfilled 和 onRejected

检查并处理参数，如果参数不是函数的话 就忽略掉

根据当前 Promise状态 调用不同的函数

首先我们要拿到所有的回调，新建2个数组 分别存储失败和成功的回调，调用 then 如果还是pending状态，就存入数组

在status 发生变化的时候，执行回调，用到es6 getter 和 setter 监听状态

如果 onFulfilled 活着 onRejected 抛出一个异常e，那么新的 promise 必须 rejected

return 返回值应该是一个 Promise

如果 onFulfilled 不是函数，且 Promise1 成功执行，Promise2 必须返回同样的状态 和 Value

如果 onRejected 不是函数，且 Promise1 拒绝执行， Promise2 必须返回同样的状态和 Value

如果 onFulfilled 或者 onRejected 返回一个值 x ， 运行 resolvePromise 方法

块级作用域

没有变量提升

暂时性死区

块级作用域

暂时性死区

必须变量初始化

不可重新复制改地址值

初始化的时候必须复制，不能分开初始化和赋值

const fn = a => a

const sum = (a, b) => a + b

this 指向

声明未知的参数

构造函数方法Array.from()

实例方法

模版字符串

实例方法

add，delete，clear，是否有该值的has

可用forEach遍历

管理私有变量

Get/Set 优缺点

静态方法

核心API

窗口位置

窗口大小

定时器

hash

host

hostname

href

pathname

port

protocol

search

width

height

availWidth

availHeight

availLeft

availTop

colorDepth

pixelDepth

go

back

forword

length

pushState

onPopState

属性: 对象的状态

方法: 对象的行为

函数体内使用 this this指所要生成的实例

生成对象通过 new 来实例化

可以做初始化传参

兼容方法

源码实现

构造函数中的方法，会存在于每个生成的实例中 通用的方法没办法通用

在原型对象的所有属性和方法，都能被实例所共享

父类属性一旦赋值给子类的原型属性，此时属性就 属于子类的共享属性

实例化子类的时候，不能向父类传参

经典继承，在子类的构造函数中调用父类的构造函数

原型链上的共享方法无法被读取继承，如何解决呢？

无论什么场景都会调用两次父类构造函数

利用 Object.create API 避开 new 构造函数执行多一次

利用 Object.assign 组合多个对象

this 指向的是调用堆栈的上一级

在执行函数时候，如果函数被上一级所调用，那么上下文（this）指向上一级

否则则为全局孤立，指向window

bind

apply

call

new

优先级

函数外部获取到了函数作用域内的变量值

立即执行函数，调用外部作用域的 i，i值不会被垃圾回收机制回收

使用 let 设置块级作用域变量

立即执行遇上块级作用域

a 不会被垃圾回收，依然引用外部作用域参数 a

实现私有变量

一开始a.html给c.html传一个hash值

然后c.html收到hash值后，再把hash值传递给b.html

最后b.html将结果放到a.html的hash值中。

同样的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

a.html

b.html

c.html

实例化阶段，构建依赖图

加载阶段，加载对应的资源

执行阶段

批量生产相同类型应用满足 频繁使用同一种类型需求

当我们需要模块化拆分一个大模块，同事使模块之间独立解耦分工（header）拆分多个

全局只需要一个实例，注重统一一体化（路由Router）

中间转换参数，保持模块间独立

附再 多个组件上 批量动态赋予功能的时候

将代理对象与调用对象分离，不直接调用目标对象

通过模板定义执行顺序，独立操作

通过观察者 可以被观察者统一发生变化，触发相应的依赖值统一更新

单元链式调用执行，操作流程

HTTP/2 支付覆盖率问题，还需要实际权衡

brotli 默认参数，有比gzip 更加好的压缩率

性能慢

阻塞load事件

新的 CSS 属性 Containment 允许开发者限制浏览器样式，布局和paint 工作的范围，而不是默认全局

减少 css 文件大小

延迟顺序执行

评论框

语法高亮

立即下载延后无序执行

统计代码量

去除不必要 Cookie

尽量压缩使用 cookie

浏览器主动将一些特性告诉服务端，以便服务端更有针对性输出内容，比如不同分辨率的图片

图床

递归方式：一路查下去中间不返回，得到最终结果才返回信息（浏览器到本地DNS服务器的过程）

迭代方式，就是本地DNS服务器到根域名服务器查询的方式。

什么是 DNS 劫持

前端 dns-prefetch 优化

根据以太网协议将数据分为以“帧”为单位的数据包，每一帧分为两个部分：

标头：数据包的发送者、接受者、数据类型
数据：数据包具体内容

以太网规定了连入网络的所有设备都必须具备“网卡”接口，数据包都是从一块网卡传递到另一块网卡，网卡的地址就是 Mac 地址。每一个 Mac 地址都是独一无二的，具备了一对一的能力。

发送数据的方法很原始，直接把数据通过 ARP 协议，向本网络的所有机器发送，接收方根据标头信息与自身 Mac 地址比较，一致就接受，否则丢弃。

注意：接收方回应是单播。

最常见的 HTTPD 有 Linux 上常用的 Apache 和 Nginx，以及 Windows 上的 IIS。

它会监听得到的请求，然后开启一个子进程去处理这个请求。

接受 TCP 报文后，会对连接进行处理，对HTTP协议进行解析（请求方法、域名、路径等），并且进行一些验证：

验证是否配置虚拟主机
验证虚拟主机是否接受此方法
验证该用户可以使用该方法（根据 IP 地址、身份信息等）

假如服务器配置了 HTTP 重定向，就会返回一个 301永久重定向响应，浏览器就会根据响应，重新发送 HTTP 请求（重新执行上面的过程）。

然后会查看 URL 重写规则，如果请求的文件是真实存在的，比如图片、html、css、js文件等，则会直接把这个文件返回。

否则服务器会按照规则把请求重写到 一个 REST 风格的 URL 上。

然后根据动态语言的脚本，来决定调用什么类型的动态文件解释器来处理这个请求。

以 PHP 语言的 MVC 框架举例，它首先会初始化一些环境的参数，根据 URL 由上到下地去匹配路由，然后让路由所定义的方法去处理请求。

传输回来的其实都是一些二进制字节数据，浏览器需要根据文件指定编码（例如UTF-8）转换成字符串，也就是HTML 代码。

预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。

符号化是词法分析的过程，将输入解析成符号，HTML 符号包括，开始标签、结束标签、属性名和属性值。

它通过一个状态机去识别符号的状态，比如遇到<，>状态都会产生变化。

在上一步符号化中，解析器获得这些标记，然后以合适的方法创建DOM对象并把这些符号插入到DOM对象中。

你从来没有在浏览器看过类似"语法无效"的错误，这是因为浏览器去纠正错误的语法，然后继续工作。

当整个解析的过程完成以后，浏览器会通过DOMContentLoaded事件来通知DOM解析完成。

在匹配一个节点对应的 CSS 规则时，是按照从右到左的顺序的，例如：div p { font-size :14px } 会先寻找所有的p标签然后判断它的父元素是否为div。

所以我们写 CSS 时，尽量用 id 和 class，千万不要过度层叠。

通过计算让任何尺寸值都减少到三个可能之一：auto、百分比、px，比如把rem转化为px。

浏览器需要一种方法来确定哪些样式才真正需要应用到对应元素，所以它使用一个叫做specificity的公式，这个公式会通过：
然后得出一个权重值，取最高的那个。

当遇到一个script标签时，DOM 构建会被暂停，直至脚本完成执行，然后继续构建 DOM 树。

但如果 JS 依赖 CSS 样式，而它还没有被下载和构建时，浏览器就会延迟脚本执行，直至 CSS Rules 被构建。

所有我们知道：

当浏览器发现某个部分发现变化影响了布局时，需要倒回去重新渲染，会从html标签开始递归往下，重新计算位置和大小。
reflow基本是无法避免的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变化。

改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时，就会发生重绘。
每次重绘后，浏览器还需要合并渲染层并输出到屏幕上。
回流的成本要比重绘高很多，所以我们应该尽量避免产生回流

词发分析

预编译

执行

编译相关

Vue 核心代码组成

跨平台代码

服务器端渲染

.vue 文件解析器

共享工具方法

init

$set

$delete

$watch

$on

$emit

$off

$once

$forceUpdate

$destroy

_update

mountComponent

installRenderHelpers

$nextTick

_render

根节点校验

判断是否存在 render方法

createComponent

initInteralComponent

/src/core/util/options.js

initState => initProps/initState

defineReactive

React Hooks 是一种能让你在函数组件中使用state和组件生命周期的一种方式

在Hooks出来之前，你必须把函数组件改成class组件才能用到这些特性

而且，Hooks特性是完全兼容老版本代码的，所以不会对已有代码造成任何影响。并且官网也不推荐为了用Hooks而重构老代码

State Hooks

Effect Hooks

其他

React 实现Hook的基本原理，是通过一个数组记录，必须严格保证调用顺序始终不变。

在组件中用Hook，每个组件其实都有隔离的state

Custome Hook

所有的Hooks其实执行原理都一样，Custom Hook 和 内置的 useState/useEffect 等没有本质区别

封装 用户的登录状态

ahooks

swr 请求 hooks

最重要的原因是为了解决逻辑复用的问题，相比对 HoC 或者 render props，他能用更少更简洁的代码实现逻辑复用

放在顶层代码，不要放在任何循环、条件、嵌套分支中，原因后面会讲到

只能从react组件调用Hooks，不要在其他自定义函数中调用Hook

React会给Custom Hook创建隔离的环境，所以他在运行时，显然和我们调用其他的自定义函数是有区别的，这也是为什么我们的Hook必须以 “use” 开头，不能随便取名字，不然React就不知道函数到底是不是Hook了，毕竟他们在JS语法上没区别

React的函数式组件和类组件之间根本的区别： 在心智模型上。

状态同步问题，函数组件会捕获当前渲染时，所用的值

函数组件useEffect与类组件生命周期

性能优化

代码复用上差异

合成事件与原生事件区别

React 事件与原生事件执行顺序

合成事件的事件池

setState 以后 React 更新调度过程

在 setTimeout等 宏任务的异步代码中是 同步的，在宏任务的同步代码中是异步的

面试题

对象不方便命名

函数组件代码逻辑复用的问题

useEffect 在渲染时是异步执行，要等到浏览器将所有变化渲染到屏幕后才会被执行。

useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行，

可以使用 useLayoutEffect 来读取 DOM 布局并同步触发重渲染

尽可能使用标准的 useEffect 以避免阻塞视图更新

useLayoutEffectDestory -> useLayoutEffect -> 渲染 -> useEffectDestory -> useEffect

useMemo 看起来和 useEffect 很像，但是如果你想在 useMemo 里面 setCount 或者其他修改了 DOM 的操作，那你可能会遇到一些问题。因为传入 useMemo 的函数会在渲染期间执行，你可能看不到想要的效果，所以请不要在这个函数内部执行与渲染无关的操作

useMemo 还返回一个 memoized 值，之后仅会在某个依赖项改变时才重新计算 memoized 值

useMemo 代码用例

useEffect 执行过程

map

forEach

for(let item of items){}

timer

pending callbacks

idle prepare

poll 执行 与 i/O 相关回调

check

close