浏览器的 16ms 渲染帧
由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能。 浏览器会利用这个间隔 16ms(1000ms/60)适当地对绘制进行节流, 因此 16ms 就成为页面渲染优化的一个关键时间。 尤其在异步渲染中,要利用 流式渲染 就必须考虑到这个渲染帧间隔。
TL;DR
为方便查阅源码和相关资料,本文以 Chromium 的 Blink 引擎为例分析。如下是一些分析结论:
- 一个渲染帧内 commit 的多次 DOM 改动会被合并渲染;
- 耗时 JS 会造成丢帧;
- 渲染帧间隔为 16ms 左右;
- 避免耗时脚本、交错读写样式以保证流畅的渲染。
注意那些 Promise 反模式
JavaScript 作为天生的客户端脚本,编写异步逻辑有着天然的优势, 比如嵌套函数(很自然的闭包机制),事件模型(多数宿主都有提供),回调函数(函数是一等公民)。 Promise 用来更好地组织异步代码, 与其他设计模式类似,未能理解其设计意图之前容易误用和滥用。本文列举其中常见的反模式。
读者有更精彩的反模式例子,欢迎评论或者邮件。本文中的代码仅用于示例,未必存在这样的接口。
Promise 回调的执行时机分析
Promise 是 JavaScript 中处理异步的一种模式, 可以大幅简化异步代码和增加可读性,基于 Promise 的单元测试 也更加可读。 本文参考了 Promises/A+、ECMA 2015 等文档, 测试了 Bluebird, Chrome 58.0.3029.110,Node.js 6.9.2 等环境,给出 Promise 异步行为。
TL; DR
Promise.prototype.then
传入的回调会在 NextTick(异步)执行- 构造 Promise 时传入的
executor
会立即执行 - Promise 的各种实现表现一致
Vim、Tmux、系统共用剪切板
在 Tmux 终端复用 中介绍过 Tmux 的使用, 当你同时有系统剪切板、Tmux Clipboard、Vim Yank Buffer 时互相拷贝是不是很困难? 本文介绍如何让它们共用一个剪切板。
在 CentOS 6 上编译 Vim 8
十年后 Vim 发布了 8.0 版本,为了尝鲜只能手动编译 Vim 8。本文记录了整个过程以及其中的坑,最终达到这几个目的:
- Vim 8.0 版本(YouCompleteMe 要求 7.4.1578 以上,且编译有 Python 支持)
- CentOS 6(CentOS 7 貌似已经有 相应的Repo 文件 了)
Git 配置:使用 Vim 来做 diff
vimdiff 命令相当于 vim -d a.txt b.txt
,用来查看两个文件的 diff。
可以通过 :highlight
命令来进行 diff 配色,也可以将 vimdiff 设置到 Git 的 diff 工具。