2019-09 中旬 ✅

# 2019-09-20: 什么是 k8s ✅

好好想想先 😌
  • 参考链接

  • 一句话

    • K8S,就是基于容器的集群管理平台,它的全称,是 kubernetes。
    • 一个 K8S 系统,通常称为一个 K8S 集群(Cluster)。
      • 一个 Master 节点(主节点)
      • 一群 Node 节点(计算节点)

好好想想先 😌
  • 参考链接

  • 一句话

    • domain 的默认值为设置该 cookie 的网页所在的域名,path 默认值为设置该 cookie 的网页所在的目录
    • secure 选项用来设置 cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时,包含 secure 选项的 cookie 才能被发送至服务器
    • httpOnly 这个选项用来设置 cookie 是否能通过 js 去访问,仅能服务端访问

# 2019-09-18: 前端错误监控 ✅

好好想想先 😌
  • 参考链接

  • 一句话

    • 当 JavaScript 运行时错误(包括语法错误)发生时,window 会触发一个 ErrorEvent 接口的 error 事件,并执行 window.onerror()
    window.onerror = (message, source, lineno, colno, error) =>
      logErrorToServer(error)
    
    • 全局捕获 Promise 异常
    window.addEventListener('unhandledrejection', (event) =>
      logErrorToServer(event.reason)
    )
    
    • try catch 捕获局部异常

# 2019-09-17: 前端性能监控 ✅

好好想想先 😌

# 2019-09-16: 如何分析网页性能瓶颈 ✅

好好想想先 😌
  • 参考链接

  • 一句话

    • Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

# 2019-09-15: 什么是 WorkBox ✅

好好想想先 😌
  • 参考链接

  • 一句话

    Workbox 是 sw-precache 和 sw-toolbox 的继任者。它是一组内容库和工具,用于生成 Service Worker、预缓存、路由以及运行时缓存。另外,Workbox 还附带模块,可轻松地将后台同步和 Google analytics 集成到 Service Worker。


# 2019-09-14: 清除浮动的所有方法 ✅

好好想想先 😌

# 2019-09-13: React Diff 算法 💊✅

好好想想先 😌
  • 参考链接

  • 一句话

    • tree diff
      • React 对树的算法进行了简洁明了的优化,即对树进行分层比较,两棵树只会对同一层次的节点进行比较。
      • 当出现节点跨层级移动时,以该节点为根节点的 Tree 被重新创建
    • component diff
      • 如果是同一类型的组件,按照原策略继续比较 virtual DOM tree。
      • 如果不是,则将该组件判断为 dirty component,从而替换整个组件下的所有子节点。
      • 对于同一类型的组件,有可能其 Virtual DOM 没有任何变化,如果能够确切的知道这点那可以节省大量的 diff 运算时间,因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。
    • element diff
      • INSERT_MARKUP,新的 component 类型不在老集合里, 即是全新的节点,需要对新节点执行插入操作。
      • MOVE_EXISTING,在老集合有新 component 类型,且 element 是可更新的类型,generateComponentChildren 已调用 receiveComponent,这种情况下 prevChild=nextChild,就需要做移动操作,可以复用以前的 DOM 节点。
      • REMOVE_NODE,老 component 类型,在新集合里也有,但对应的 element 不同则不能直接复用和更新,需要执行删除操作,或者老 component 不在新集合里的,也需要执行删除操作。
      • 通过 key 来优化调整节点顺序。

# 2019-09-12: touch 事件 ✅

好好想想先 😌
  • 参考链接

  • 一句话

    • 执行顺序

      • touchstart -> touchmove -> touchend -> click
    • event

      • event.touches 数组,多点触摸时包含含多个对象
      • event.targetTouches 相当于 currentTarget

# 2019-09-11: 移动端点击 300ms 延迟是什么?怎样消除? ✅

好好想想先 😌