不会拖慢浏览器的可爱 Chrome 扩展程序

装饰性浏览器扩展程序确实有个名声，而且大多数时候名副其实：又重又啰嗦，安装时带着一份没人读过的权限列表。这实在可惜，因为这个品类本身很有意思，而它的每一个问题其实都可以避免。

值得检查的三件事

• 权限列表。Chrome 会在安装前展示它。storage 只是一个偏好设置文件。而 tabs、cookies、history 和 webRequest，才是能让一个扩展程序窥视你浏览内容的权限。
• 它是否会触碰你页面的布局。一个把元素插入文档流、或在每次滚动事件中测量元素位置的扩展程序，无论它自己画的东西有多少，都可能让一个原本流畅的页面变得卡顿。
• 它把请求发到哪里去。一个网络面板异常繁忙的装饰性扩展程序，正在做一份没人告诉过你的第二份工作。

为什么布局才是真正咬人的那个

读取一个布局属性——一个元素的高度、它在屏幕上的位置——会迫使浏览器先完成所有待处理的布局工作，才能给出答案。要是在滚动事件处理函数里这么做，就相当于要求浏览器在一个还画到一半的页面上，每秒停下来测量六十次。

这正是大多数「这个扩展程序让滚动变卡」抱怨背后的机制，而且在有人对它做性能分析之前，它是看不见的。修复的办法并不光鲜：滚动过程中绝不读取布局，只写入 transform，把移动的工作交给合成器去做。

在这里长什么样

scrolldog 是一只小小的像素宠物，沿着每个页面的边缘以你的滚动速度奔跑。它同时也是上述检查项的一个实际范例，因为它必须先通过这些检查，才配得上被人容忍地留在浏览器里：

• 只有两个权限：storage 和 unlimitedStorage。没有 tabs，没有 cookies，没有 history，没有 webRequest。
• 一个主机权限——api.scroll.dog——只用来验证授权，从不用来触碰你正在浏览的页面。
• 这只宠物生活在一个固定的、尺寸为零的轨道里，从头到尾只写入一个 CSS 的 transform 属性，所以你页面自身的布局永远不会改变。
• 滚动事件以被动方式监听，并被合并为每个动画帧只写入一次。
• 一个开关，能立即把它从所有已打开的标签页中移除。

以上这些都不是在自夸——这只是最低要求。一个存在的全部意义就是好看的东西，没有任何理由让别的什么东西变慢。