不會拖慢瀏覽器的可愛 Chrome 擴充功能

裝飾性瀏覽器擴充功能確實有個名聲，而且大多數時候名副其實：又重又囉嗦，安裝時帶著一份沒人讀過的權限列表。這實在可惜，因為這個品類本身很有意思，而它的每一個問題其實都可以避免。

值得檢查的三件事

• 權限列表。Chrome 會在安裝前顯示它。storage 只是一個偏好設定檔。而 tabs、cookies、history 和 webRequest，才是能讓一個擴充功能窺視你瀏覽內容的權限。
• 它是否會觸碰你頁面的版面配置。一個把元素插入文件流、或在每次捲動事件中量測元素位置的擴充功能，無論它自己畫的東西有多少，都可能讓一個原本流暢的頁面變得卡頓。
• 它把請求發到哪裡去。一個網路面板異常繁忙的裝飾性擴充功能，正在做一份沒人告訴過你的第二份工作。

為什麼版面配置才是真正咬人的那個

讀取一個版面配置屬性——一個元素的高度、它在螢幕上的位置——會迫使瀏覽器先完成所有待處理的版面配置工作，才能給出答案。要是在捲動事件處理函式裡這麼做，就相當於要求瀏覽器在一個還畫到一半的頁面上，每秒停下來量測六十次。

這正是大多數「這個擴充功能讓捲動變卡」抱怨背後的機制，而且在有人對它做效能分析之前，它是看不見的。修復的辦法並不光鮮：捲動過程中絕不讀取版面配置，只寫入 transform，把移動的工作交給合成器去做。

在這裡長什麼樣

scrolldog 是一隻小小的像素寵物，沿著每個頁面的邊緣以你的捲動速度奔跑。它同時也是上述檢查項的一個實際範例，因為它必須先通過這些檢查，才配得上被人容忍地留在瀏覽器裡：

• 只有兩個權限：storage 和 unlimitedStorage。沒有 tabs，沒有 cookies，沒有 history，沒有 webRequest。
• 一個主機權限——api.scroll.dog——只用來驗證授權，從不用來觸碰你正在瀏覽的頁面。
• 這隻寵物生活在一個固定的、尺寸為零的軌道裡，從頭到尾只寫入一個 CSS 的 transform 屬性，所以你頁面自身的版面配置永遠不會改變。
• 捲動事件以被動方式監聽，並被合併為每個動畫影格只寫入一次。
• 一個開關，能立即把它從所有已開啟的分頁中移除。

以上這些都不是在自誇——這只是最低要求。一個存在的全部意義就是好看的東西，沒有任何理由讓別的什麼東西變慢。