Greasy Fork

可以將 GM_registerMenuCommand 註冊的菜單, 可持續調整的功能, autoClose 設置為 false 嘛, 或是使用快捷鍵調整

GM_registerMenuCommand(`🔼 ${t.increase}`, () => changeFontSize(fontIncrement), {autoClose: false});

希望預設的語言可以用 navigator.language 來適應

還有一些網站, 無法在重新整理後, 正確的套用先前的設置, 且設置存在 localStorage, 導致不同網站又要重新設置, 這也挺麻煩的, 如果能提供全局設置, 和 個別設置, 這樣可能會更方便

感谢朋友的反馈，已提交新版本。优化了菜单点击的体验，以及新增了局部、全局的保存功能。

看了一下腳本代碼，提出幾個小建議供參考：

---

1. 避免重複使用 getComputedStyle

getComputedStyle 是比較高開銷的操作，尤其在處理大量元素時，應該盡量避免重複調用。建議可以先取得一次結果並重複使用，以減少 layout 計算次數

---

1. 使用 querySelectorAll('*') 遍歷並逐個修改 style 的效能問題

目前調整字體和大小是使用 querySelectorAll('*') 遍歷頁面所有元素並逐一修改 style，這在大型 DOM 結構下效能會變差，且會造成不必要的 reflow

真的要一個一個節點改, 使用 document.createTreeWalker 直接查找和過濾所需元素是更高效的

---

1. 使用 el.style.xxx 的優先權問題

直接對元素設置內聯 style（例如 el.style.fontFamily = 'xxx'）的優先權，是無法覆蓋掉使用 !important 的 class 樣式的。如果網站本身使用了：

body {
  font-family: 'Arial' !important;
}

那腳本的變更就會完全失效

建議可以用像是上面那樣的方法, 直接對 body 本身做全局修改, 那麼你要做的事就只是需要在 head 添加 <style>

如果真的想一個一個添加, 也是一樣用 document.createTreeWalker, 然後對每個元素添加 Class 就好 要修改時就先用一個變數取得 <style> 的 sheet.cssRules, 直接對其修改, 那麼套用該 Class 的元素, 就會全局同步變更

---

1. 關於 requestAnimationFrame 的誤用

目前的寫法中對每個子節點使用 rAF 進行遞迴：

Array.from(el.children).forEach(child => {
    requestAnimationFrame(() => applyFontRecursively(child, increment));
});

這樣其實會造成 多次排程與多層遞迴堆疊，效能不一定更好，反而可能拖慢速度

---

我就不提太多點, 總之主要就是如果可以, 不要對 DOM 本身有過多的操作, 這包含了查找 與 直接修改 Style, 這在大型網站時, 電腦性能不夠好的, 有可能造成明顯卡頓