4 月

[cfour-hi]

很遗憾今年未能如愿加入阿里，确实是自身实力不足，还无法达到 P6 级别，还需继续沉淀。打击和收获皆有，说不上谁多谁少，更多的是让我看到和思考了一些东西，调整好心态，依然还要健步前行。

阅读

• 滑向未来（现代 JavaScript 与 CSS 滚动实现指南）

滚动条对页面的影响和如何让滚动行为更加优雅

js 让 DOM 元素平滑滚动到视图：scrollIntoView

elem.scrollIntoView({ behavior: 'smooth' })

css 锚点平滑滚动：scroll-behavior

scroll-behavior: smooth;

粘性定位: position: sticky，相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

{
  position: sticky;
  top: 30px; /* 元素距离 top 距离大于 30px 时为相对定位，等于 30px 时为固定定位 */
}

节流函数

function throttle (action, wait = 1000) {
  let time = Date.now()
  return function () {
    if (time + wait - Date.now() < 0) { // 与 0 比较会比较快
      action()
      time = Date.now() // 执行 action 会耗费一定时间
    }
  }
}

rAF 节流函数

function throttle (action, wait = 1000) {
  let isRunning = false
  return function () {
    if (isRunning) return
    isRunnin = true
    window.requestAnimationFrame(_ => {
      action()
      isRunning = false
    })
  }
}

由于获取元素位置信息方法 getBoundingClientRect 会造成重流，短时间内使用次数过多会造成性能问题。所以使用 Intersection Observer API 确定目标元素与 viewport 或指定祖先元素的交叉状态 - polyfill，常用于图片懒加载和无限滚动。

const observer = new IntersectionObserver(callback, options) // 声明观察对象
observer.observer(targetElement) // 观察目标元素

• 精读《Compilers are the New Frameworks》

值得关注的是 UmiJS，前端框架不再仅仅关注视图层或是数据层，而是整体，包括开发、运行、编译、构建、性能、扩展、数据、路由、语法等等。

• 如何快速成长为技术大牛？阿里资深技术专家的总结亮了

learning、trying、teaching！

I hear and I forget. I see and I remember. I do and I understand

• 为什么Vue使用异步更新队列？

DOM 操作是昂贵的，在一次 micro 或 macro 内只对 DOM 进行一次更新，期间会对相同任务进行去重。

• 淘宝新势力周H5性能优化实战

chrome 开发者工具 performance 监测页面性能实践，阮一峰老师去年有一篇文章：《如何读懂火焰图？》非常只得一看。

• 用代码生成Glitch Art风格的抖音字体

canvas 生成字体内容，gif.js 利用 web workers 渲染每一帧。

• 更加高效加载 WebAssembly 模块

利用异步 API 避免阻塞主线程，利用流式 API 更快的编译和初始化。

WebAssembly

• 你应该知道的requestIdleCallback

requestIdleCallback

利用浏览器空闲时间调用函数，什么时候是浏览器空闲时间？如果 js 执行的时间在一帧内不到 16.7 ms，则属于空闲时间。

• 聊聊V8引擎的垃圾回收

以前只知道垃圾回收的两种算法：引用计数和引用标记，这篇文章详细描述了 V8 引擎的垃圾回收策略。
扩展阅读：浅谈V8引擎中的垃圾回收机制

• CSS如何实现内凹角效果

利用伪元素和 box-shadow 实现的复杂 css 效果

• 精读《插件化思维》

这篇文章其实我也没有看太明白，但是 插件化 在开发领域真的是一门哲学，如 webpack、babel 都支持插件机制。
本身只提供核心功能，对外暴露插件接口提供扩展，借助他人完善自己。
另外阅读 webpack 插件机制的源码让我理解到 发布/订阅 模式在插件化机制中起到的作用。

发现

• 语雀 - 阅读阮一峰老师博客所获

语雀是一款知识创作工具，通过它你可与团队一起编写文档、交流想法、沉淀知识，让企业、团队、个人轻松拥有自己的在线知识库

工作

今年依然无缘去阿里，面了两次都挂了，很遗憾。自己能力依然不够，认了，还得沉淀沉淀。
月中决定加入潭州教育，至于为何选择这里，原因有二：第一，HR 小姐姐的关心，第二，潭州在长沙还算比较靠谱的公司。
其它就不多说了，进来之后的第一个任务是对 PC 端直播页面进行重构，因为之前是基于 avalon 开发的，说是有很多坑，然后司徒正美大大貌似精力有限，维护方面...。
花了一周时间熟悉了解其中的业务流程，本想着只需将 avalon 拆出来，其它照用，可后来发现 IM 功能的代码与 avalon 的耦合太强，完全没办法进行拆分，没办法只能重写。
后来的方案是利用事件机制，依靠发布/订阅模式将 IM 相关与框架解耦。
还有一个值得思考的地方，针对不同的第三方 IM SDK 所提供的 API，如果在不修改业务代码的情况下完成无痛转换？
其中的难点在于数据转换上，如何使用中间层机制对 IM API 返回的数据进行处理，在项目已经设计好的数据结构上接纳被中间层处理的数据，这点会在重构完成之后再仔细思考。