2019-09 中旬 ✅

  • 创建于：2019-09-11
  • 更新于：2023-03-16

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

好好想想先 😌

  • 参考链接

  • 一句话

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

# 2019-09-19: cookie path、domain、secure、httpOnly, sameSite 有什么作用 ✅✅

好好想想先 😌

  • 参考链接

  • 一句话

    • domain 的默认值为设置该 cookie 的网页所在的域名，path 默认值为设置该 cookie 的网页所在的目录
    • secure 选项用来设置 cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时，包含 secure 选项的 cookie 才能被发送至服务器
    • httpOnly 这个选项用来设置 cookie 是否能通过 js 去访问，仅能服务端访问
    • sameSite 当请求域名和页面域名一致才会发送 cookie
      • Strict
      • Lax - 不限制静态资源的 Get 请求

# 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: 前端性能监控 ✅✅

好好想想先 😌

  • 参考链接

  • 一句话

    • 使用浏览器 performance API 采集性能数据提交给服务端
      • const timers = performance.getEntriesByType('navigation')
      • 资源加载时间 performance.getEntriesByType('resource')
    • 异步加载，不能阻塞页面渲染

# 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 延迟是什么？怎样消除？ ✅✅

好好想想先 😌
< 2019-09 上旬 ✅ 2019-09 下旬 ✅ >