2019-10 下旬

  • 创建于：2019-10-21
  • 更新于：2020-04-02

# 2019-10-30: Cookie, Session, jwt 各有什么作用和区别

好好想想先 😌

  • 参考链接

  • 一句话

    • Cookie
      • 保存在客户端
      • Http 是无状态协议
    • Session
      • session 是另一种记录服务器和客户端会话状态的机制
      • session 是基于 cookie 实现的，session 存储在服务器端，sessionId 会被存储到客户端的 cookie 中
    • Token
      • 每一次请求都需要携带 token，需要把 token 放到 HTTP 的 Header 里
      • 基于 token 的用户认证是一种服务端无状态的认证方式，服务端不用存放 token 数据。用解析 token 的计算时间换取 session 的存储空间，从而减轻服务器的压力，减少频繁的查询数据库
      • token 完全由应用管理，所以它可以避开同源策略
    • JWT
      • 客户端登录后服务端发送一个 json
      • 携带数字签名
      • 客户端可以放在请求头或 Cookie 中

# 2019-10-29: Symbol 和 Symbol.for 有什么区别

好好想想先 😌

# 2019-10-28: 哪些框架或库用到了 Proxy，日常业务中能用 Proxy 做什么

好好想想先 😌

# 2019-10-27: Vue 在 Object.defineProperty 中对对象的 get 和 set 做了什么

好好想想先 😌

# 2019-10-26: flex 是合成属性，写一个值表示什么，两个值分别表示什么，三个值分别表示什么

好好想想先 😌

  • 参考链接

  • 一句话

    .item {
  flex: none | [ < 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' > ];
}

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

# 2019-10-25: 递归、非递归实现二叉树的先序、中序、后序遍历

好好想想先 😌

  • 参考链接

  • 一句话

    • 前序遍历：访问根–>遍历左子树–>遍历右子树;
    • 中序遍历：遍历左子树–>访问根–>遍历右子树;
    • 后序遍历：遍历左子树–>遍历右子树–>访问根;
    • 广度遍历：按照层次一层层遍历;

# 2019-10-24: react hooks 原理，react 怎么存储 hooks

好好想想先 😌

# 2019-10-23: setState 什么时候同步，什么时候异步

好好想想先 😌

  • 参考链接

  • 一句话

    • setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
    • setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。
    • setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和 setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

# 2019-10-22: 前端白屏时间如何获取

好好想想先 😌

  • 参考链接

  • 一句话

    • 首屏时间的计算，可以由 Native WebView 提供的类似 onload 的方法实现，在 ios 下对应的是 webViewDidFinishLoad，在 android 下对应的是 onPageFinished 事件。
    • 通常认为浏览器开始渲染 <body> 或者解析完 <head> 的时间是白屏结束的时间点。
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>白屏</title>
    <script>
      // 不兼容 performance.timing 的浏览器
      window.pageStartTime = Date.now()
    </script>
    <!-- 页面 CSS 资源 -->
    <link rel="stylesheet" href="xx.css" />
    <link rel="stylesheet" href="zz.css" />
    <script>
      // 白屏结束时间
      window.firstPaint = Date.now()
      // 白屏时间
      console.log(firstPaint - performance.timing.navigationStart)
    </script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
<!-- 白屏时间 = firstPaint - performance.timing.navigationStart || pageStartTime -->

# 2019-10-21: 什么是宏任务和微任务，如何实现一个微任务

好好想想先 😌

  • 参考链接

  • 一句话

    • 事件循环上的差别
      • 主线程同步任务执行完成后会从事件循环中先执行微任务再执行宏任务
      • Node 中的事件循环分为六个阶段，setInterval 和 setTimeout 在 timer 阶段，setImmediate 在 check 阶段
      • 浏览器有专门的异步线程，Node 采用 libuv
    • 实现微任务需要有一个队列，在同步任务执行完成后再执行这个队列
< 2019-10 中旬 2019-11 上旬 >