2019-07 上旬

作者: Bougie 创建于: 2019-07-01 | 成长
  • 2019-07-10: 什么是 BFF,如何设计
好好想想先 😌
  • 参考链接
  • 一句话
    • 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
好好想想先 😌
  • 参考链接

  • 一句话

    • 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))
    })
    
    • connect
    connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList)
    

  • 2019-07-08: addEventListener 的第三个参数有什么作用
好好想想先 😌

  • 2019-07-07: Virtual Dom diff 算法
好好想想先 😌
  • 参考链接
  • 一句话
    • tree diff
      • React 对树的算法进行了简洁明了的优化,即对树进行分层比较,两棵树只会对同一层次的节点进行比较
    • component diff
      • 如果是同一类型的组件,按照原策略继续比较 virtual DOM tree
      • 如果不是,则将该组件判断为 dirty component,从而替换整个组件下的所有子节点

  • 2019-07-06: Http2 的优点
好好想想先 😌
  • 参考链接
  • 一句话
    • 二进制分帧
      • http/1.x 是一个文本协议,而 http2 是一个彻彻底底的二进制协议,这也是 http2 可以折腾出那么多新花样的原因。http2 的二进制协议被称之为二进制分帧。http2 协议的格式为帧,类似 TCP 中的数据报文。
    • 头部压缩
    • 服务端推送
    • 多路复用 - 在 http/1.x 情况下,每个 http 请求都会建立一个 TCP 连接,这就意味着每个请求都需要进行三次握手。这样子就会浪费比较多的时间和资源,这点在 http/1.x 的情况下是没有办法避免的。并且浏览器会限制同一个域名下并发请求的个数。所以,在 http/1.x 的情况下,一个常见的优化手段是把静态资源分布到不同域名下,以此来突破浏览器并发数的限制。 在 http2 的情况下,所有的请求都会共用一个 TCP 连接,这个可以说是 http2 杀手级的特性了。 👊 因为这点,许多在 http/1.x 时代的优化手段都可以退休了
    • 优化手段

  • 2019-07-05: TCP 和 UDP 原理和区别
好好想想先 😌
  • 参考链接

  • 一句话

    • 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 网址,此时客户端发起 HTTPS 请求,通过 TCP 和服务器建立连接(443 端口)。
    • 第二步,服务器存放 CA 证书进行处理,注意的是采用 HTTPS 协议的服务器必须要有一套数字证书,这套证书其实就是一对公钥和私钥。
    • 第三步,服务器向客户端返回证书。证书里面包含了很多信息:比如域名,申请证书的公司,公钥等。以下是一个淘宝网的 CA 证书。
    • 第四步,客户端对证书进行解析。这部分工作是有客户端的 TLS 来完成的,首先会验证公钥是否有效,比如颁发机构,过期时间等,如果发现异常,则会弹出一个警告框,提示证书存在问题。如果证书没有问题,那么就生成一个随机数,然后用证书对该随机数进行加密。
    • 第五步,向服务器发送证书加密后的随机数。
    • 第六步,服务器用它的私钥进行解密,得到了客户端传过来的随机数。
    • 第七步,服务器用客户端的随机数加密后的信息发送给客户端。
    • 第八步,客户端用之前生成的密钥解密服务端传过来的信息。

  • 2019-07-03: TCP 三次握手和四次挥手,为什么是三次和四次
好好想想先 😌
  • 参考链接
  • 一句话
    • 三次握手,确保双向互通:
      • 1、第一次握手:客户端给服务器发送一个 SYN 报文。
      • 2、第二次握手:服务器收到 SYN 报文之后,会应答一个 SYN+ACK 报文。
      • 3、第三次握手:客户端收到 SYN+ACK 报文之后,会回应一个 ACK 报文。
      • 4、服务器收到 ACK 报文之后,三次握手建立完成。
    • 四次挥手,
      • 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 状态。
    • 为什么客户端发送 ACK 之后不直接关闭,而是要等一阵子才关闭。这其中的原因就是,要确保服务器是否已经收到了我们的 ACK 报文,如果没有收到的话,服务器会重新发 FIN 报文给客户端,客户端再次收到 ACK 报文之后,就知道之前的 ACK 报文丢失了,然后再次发送 ACK 报文。

  • 2019-07-02: 网络七层模型与四层模型区别
好好想想先 😌
  • 参考链接
  • 一句话
    • OSI 七层网络模型
      • 物理层:底层数据传输,如网线;网卡标准。
      • 数据链路层:定义数据的基本格式,如何传输,如何标识;如网卡 MAC 地址。
      • 网络层:定义 IP 编址,定义路由功能;如不同设备的数据转发。
      • 传输层:端到端传输数据的基本功能;如 TCP、UDP。
      • 会话层:控制应用程序之间会话能力;如不同软件数据分发给不同软件。
      • 标识层:数据格式标识,基本压缩加密功能。
      • 应用层:各种应用软件,包括 Web 应用。
    • 基于 TCP/IP 的参考模型将协议分成四个层次,它们分别是链路层、网络层、传输层和应用层。

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