2019-07 上旬 ✅

创建于：2019-07-01
更新于：2023-03-16

# 2019-07-10: 什么是 BFF，有哪些应用 ✅✅

好好想想先 😌

参考链接
- 大前端架构思考与选择 (opens new window)
一句话
- BFF(Backend for Frontends，为前端而存在的后端)
  - 从服务器来的数据当做 Model，在 BFF 中针对各种端，提供不同的 ViewModel。如果数据变了，只要修改 Model 就可以了。如果要增加一种端，只要增加一个 ViewModel 就可以了。在这里集中修改，就可以解放各个终端的格式转化工作。
- API 网关
  - API 网关是一个服务器，是系统的唯一入口。从面向对象设计的角度看，它与外观模式类似。API 网关封装了系统内部架构，为每个客户端提供一个定制的 API。它可能还具有其它职责，如身份验证、监控、负载均衡、缓存、请求分片与管理、静态响应处理。API 网关方式的核心要点是，所有的客户端和消费端都通过统一的网关接入微服务，在网关层处理所有的非业务功能。通常，网关也是提供 REST/HTTP 的访问 API。服务端通过 API-GW 注册和管理服务。

# 2019-07-09: Redux 的一些概念 💊✅✅

createStore, combineReducers, bindActionCreators, applyMiddleware, compose
store, action, reducer, mapStateToProps, mapDispatchToProps, connect, container

好好想想先 😌

参考链接
- Redux 中文文档 (opens new window)

一句话

createStore(reducer, [preloadedState], enhancer) => 创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
combineReducers(reducers) => 把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数
applyMiddleware(...middlewares) => Middleware 可以让你包装 store 的 dispatch 方法来达到你想要的目的
compose(fn1, fn2, fn3, ...) => 等同于 fn1(fn2(fn3(...)))
store
- getState() => 返回应用当前的 state 树。
- dispatch(action) => 分发 action。这是触发 state 变化的惟一途径。
- subscribe(listener) => 添加一个变化监听器。
- replaceReducer(nextReducer) => 替换 store 当前用来计算 state 的 reducer。

action action must be a plain object

export const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

reducer reducer 必须为纯函数

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

mapStateToProps 创建映射关系，可在此处进行 computed

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter((t) => t.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter((t) => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

const mapStateToProps = (state) => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

mapDispatchToProps 避免对组件的侵入性

const mapDispatchToProps = (dispatch) => ({
  toggleTodo: (id) => dispatch(toggleTodo(id))
})

bindActionCreators(ActionCreators, dispatch) redux 静态方法，用于将 action 转化成方法，省略 dispatch

connect 注入属性到组件

connect(mapStateToProps, mapDispatchToProps)(TodoList)

# 2019-07-08: addEventListener 的第三个参数有什么作用 ✅✅

好好想想先 😌

参考链接
- 关于 JavaScript 的 addEventListener 第三个参数的注记 (opens new window)
- JavaScript 详说事件机制之冒泡、捕获、传播、委托 (opens new window)
一句话
- 事件的捕获阶段和冒泡阶段
  - 先从最外面开始（也就是 window 开始）向内推进，直到定位到触发的元素 text。这一过程叫“捕获过程”
  - 然后从该元素开始，又向上级冒泡。该过程为“冒泡过程”
  - 执行顺序：window -> document -> ... -> target target -> ... -> document -> window
- 第三个参数为 isCapture 是否在捕获阶段执行回调。默认为 false

# 2019-07-07: Virtual Dom diff 算法 💊✅✅

好好想想先 😌

参考链接
- Virtual DOM 背后的秘密（Diff 篇） (opens new window)
一句话
- tree diff
  - React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较
- component diff
  - 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree
  - 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点
- element diff
  - INSERT_MARKUP，新的 component 类型不在老集合里，即是全新的节点，需要对新节点执行插入操作。
  - MOVE_EXISTING，在老集合有新 component 类型，且 element 是可更新的类型，generateComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。
  - REMOVE_NODE，老 component 类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作。
  - key 绑定元素

# 2019-07-06: Http2 的优点 ✅

好好想想先 😌

参考链接
- http2 简介 (opens new window)
一句话
- 二进制分帧
  - http/1.x 是一个文本协议，http2 是二进制协议
  - http2 的二进制协议被称之为二进制分帧
  - http2 协议的格式为帧，类似 TCP 中的数据报文。
- 头部压缩
  - 在 http/1.x 协议中，每次请求都会携带 header 数据，而类似 User-Agent, Accept-Language 等信息在每次请求过程中几乎是不变的，那么这些信息在每次请求过程中就变成了浪费。
  - http2 中提出了一个 HPACK 的压缩方式，用于减少 http header 在每次请求中消耗的流量。
- 多路复用
  - 在 http/1.x 情况下，浏览器会限制同一个域名下并发请求的个数。
  - 在 http/1.x 的情况下，一个常见的优化手段是把静态资源分布到不同域名下，以此来突破浏览器并发数的限制。
  - 在 http2 的情况下，所有的请求都会共用一个 TCP 连接，这个可以说是 http2 杀手级的特性了。

# 2019-07-05: TCP 和 UDP 原理和区别？ ✅

好好想想先 😌

参考链接
- TCP 和 UDP (opens new window)
一句话
- UDP 的优点
  - 无需建立连接（减少延迟）
  - 实现简单：无需维护连接状态
  - 头部开销小（最小值为 8byte）
  - 没有拥塞控制：应用可以更好的控制发送时间和发送速率
- TCP UDP 区别
  - TCP 是面向连接(Connection oriented)的协议，UDP 是无连接(Connection less)协议；TCP 用三次握手建立连接：1) Client 向 server 发送 SYN；2) Server 接收到 SYN，回复 Client 一个 SYN-ACK；3) Client 接收到 SYN_ACK，回复 Server 一个 ACK。到此，连接建成。UDP 发送数据前不需要建立连接。
  - TCP 可靠，UDP 不可靠；TCP 丢包会自动重传，UDP 不会。
  - TCP 有序，UDP 无序；消息在传输过程中可能会乱序，后发送的消息可能会先到达，TCP 会对其进行重排序，UDP 不会。
  - TCP 无界，UDP 有界；TCP 通过字节流传输，UDP 中每一个包都是单独的。
  - TCP 有流量控制（拥塞控制），UDP 没有；主要靠三次握手实现。
  - TCP 传输慢，UDP 传输快；因为 TCP 需要建立连接、保证可靠性和有序性，所以比较耗时。这就是为什么视频流、广播电视、在线多媒体游戏等选择使用 UDP。
  - TCP 是重量级的，UDP 是轻量级的；TCP 要建立连接、保证可靠性和有序性，就会传输更多的信息，如 TCP 的包头比较大。
  - TCP 的头部比 UDP 大；TCP 头部需要 20 字节，UDP 头部只要 8 个字节
- UDP 的应用
  - 域名系统（DNS）
  - 简单网络管理协议（SNMP）
  - 动态主机配置协议（DHCP）
  - 路由信息协议（RIP）
  - 自举协议（BOOTP）
  - 简单文件传输协议（TFTP）

# 2019-07-04: https 为什么是安全的？ 💊✅✅

好好想想先 😌

参考链接
- 谈谈 HTTPS (opens new window)
- 看完这篇 HTTPS，和面试官扯皮就没问题了 (opens new window)
一句话
- Http 是明文传输的，在 HTTPS 中，使用传输层安全性(TLS)或安全套接字层(SSL)对通信协议进行加密。也就是 HTTP + SSL(TLS) = HTTPS。
- HTTPS 协议提供了三个关键的指标
  - 加密(Encryption)， HTTPS 通过对数据加密来使其免受窃听者对数据的监听，这就意味着当用户在浏览网站时，没有人能够监听他和网站之间的信息交换，或者跟踪用户的活动，访问记录等，从而窃取用户信息。
  - 数据一致性(Data integrity)，数据在传输的过程中不会被窃听者所修改，用户发送的数据会完整的传输到服务端，保证用户发的是什么，服务器接收的就是什么。
  - 身份认证(Authentication)，是指确认对方的真实身份，也就是证明你是你（可以比作人脸识别），它可以防止中间人攻击并建立用户信任。
- TLS(Transport Layer Security) 是 SSL(Secure Socket Layer) 的后续版本，它们是用于在互联网两台计算机之间用于身份验证和加密的一种协议。
- 对称加密
  - 加密和解密时使用的密钥都是同样的密钥
  - 常用加密算法：DES, AES
- 非对称加密
  - 使用公钥加密的文本只能使用私钥解密。
  - 使用私钥加密的文本也可以使用公钥解密。
  - 公钥不需要具有安全性，因为公钥需要在网络间进行传输，非对称加密可以解决密钥交换的问题。
  - 网站保管私钥，在网上任意分发公钥，你想要登录网站只要用公钥加密就行了，密文只能由私钥持有者才能解密。
  - 常用加密算法：RSA
- 混合加密（TLS）
  - 一端用随机算法生成会话秘钥，并用私钥进行加密返回给另一端
  - 另一端用公钥解密来获取对称秘钥
- CA 认证
  - 公钥 + 其它信息 -> hash 算法 -> 信息摘要 -> ca 私钥加密 -> 数字签名
  - 数字证书包含公钥 + 其它信息 + 数字签名

# 2019-07-03: TCP 三次握手和四次挥手，为什么是三次和四次？ 💊✅✅

好好想想先 😌

参考链接
- 图解 TCP 三次握手与四次分手 (opens new window)
- 关于三次握手与四次挥手 (opens new window)
一句话
- 三次握手：
  - 1、第一次握手：客户端给服务器发送一个 SYN 报文。
  - 2、第二次握手：服务器收到 SYN 报文之后，会应答一个 SYN+ACK 报文。
  - 3、第三次握手：客户端收到 SYN+ACK 报文之后，会回应一个 ACK 报文。
  - 4、服务器收到 ACK 报文之后，三次握手建立完成。
- 三次握手的作用
  - 确认双方的接受能力、发送能力是否正常。
  - 指定自己的初始化序列号，为后面的可靠传送做准备。
  - 如果是 https 协议的话，三次握手这个过程，还会进行数字证书的验证以及加密密钥的生成。
- 四次挥手
  - TCP 的连接的拆除需要发送四个包，因此称为四次挥手(four-way handshake)。
  - 客户端或服务器均可主动发起挥手动作，在 socket 编程中，任何一方执行 close()操作即可产生挥手操作。
  - 1、第一次挥手：客户端发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。
  - 2、第二次握手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 + 1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。
  - 3、第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
  - 4、第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 + 1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态
  - 5、服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。
- TCP 释放连接时之所以需要“四次挥手”，是因为 FIN 释放连接报文与 ACK 确认接收报文是分别由第二次和第三次"握手"传输的。
- 为什么客户端发送 ACK 之后不直接关闭，而是要等一阵子才关闭。这其中的原因就是，要确保服务器是否已经收到了我们的 ACK 报文，如果没有收到的话，服务器会重新发 FIN 报文给客户端，客户端再次收到 ACK 报文之后，就知道之前的 ACK 报文丢失了，然后再次发送 ACK 报文。

# 2019-07-02: 网络七层模型与四层模型区别 ✅✅

好好想想先 😌

参考链接
- 网络七层模型与四层模型区别 (opens new window)
- 关于 TCP/IP，必知必会的十个问题 (opens new window)
一句话
- OSI 七层网络模型
  - 物理层：底层数据传输，如网线；网卡标准。
  - 数据链路层：定义数据的基本格式，如何传输，如何标识；如网卡 MAC 地址。
  - 网络层：定义 IP 编址，定义路由功能；如不同设备的数据转发。
  - 传输层：端到端传输数据的基本功能；如 TCP、UDP。
  - 会话层：控制应用程序之间会话能力；如不同软件数据分发给不同软件。
  - 标识层：数据格式标识，基本压缩加密功能。
  - 应用层：各种应用软件，包括 Web 应用。
- 基于 TCP/IP 的参考模型将协议分成四个层次，它们分别是链路层、网络层、传输层和应用层。

# 2019-07-01: 什么是二叉树、二叉查找树、AVL 树、红黑树 💊✅✅

好好想想先 😌

参考链接
一句话
- 二叉树：是一个有限元素的集合，该集合或者为空、或者由一个称为根的元素及两个不相交的、被分别称为左子树和右子树的二叉树组成。
- 二叉查找树：二叉查找树也叫二叉搜索树（BST），它只允许我们在左节点存储比父节点更小的值，右节点存储比父节点更大的值。
- AVL 树（平衡二叉查找树）：
  - AVL 树是一棵二叉搜索树。
  - AVL 树的左右子节点也是 AVL 树。
  - AVL 树拥有二叉搜索树的所有基本特点。
  - 每个节点的左右子节点的高度之差的绝对值最多为 1，即平衡因子为范围为[-1,1]。
- 红黑树：
  - 也是平衡的二叉查找树
  - 节点是红色或黑色。
  - 根节点是黑色。
  - 每个叶子节点都是黑色的空节点（NIL 节点）。
  - 每个红色节点的两个子节点都是黑色。(从每个叶子到根的所有路径上不能有两个连续的红色节点)
  - 从任一节点到其每个叶子的所有路径都包含相同数目的黑色节点。

< 2019-06 下旬 ✅ 2019-07 中旬 ✅ >

小伙伴们

Conan06's blog
联系方式

邮箱：bougie.liu@qq.com

留言：点击留言