FastComments.com Blog

Wed Aug 09 2023
...

評論菜單更新

! 本文包含技術術語

新聞

一些 FastComments 租戶自定義了評論小工具。這創造了您自定義與我們實現之間的合約。我們會盡力不打破這個合約,但作為這次公告的一部分,我們有一項小的破壞性變更。

對開發者的影響

評論菜單的 CSS 選擇器已被更改。

舊版:

.comment .menu .menu-content

新版:

.menu-content

現有租戶

如果您已經在使用 "menu-content" 選擇器 - 恭喜您!我們已經檢查了所有使用此選擇器的租戶,並更新了他們的小工具配置以防止故障。

如果您有任何問題,請告訴我們。

理由

自從評論小工具創建以來,評論菜單是純粹由 CSS 驅動的下拉選單。這是一種簡單、快速的實現下拉菜單的方法,也不需要很多代碼 - 這是 FastComments 的設計目標。

然而,隨著時間的推移,這也帶來了一些問題。

首先,當評論區域具有特定高度並且可以滾動,例如在串流聊天中,訪問靠近底部的菜單變得困難,因為菜單會試圖超出可滾動的內容區域。這使得部分菜單變得不可見,並需要您移動滑鼠並重新懸停在菜單上以完成您剛想要完成的操作。我們認為這樣使用起來非常令人沮喪。

有一些變通方法,例如將菜單方向翻轉 向上,但如果小工具的高度不夠高且菜單中有很多操作項目(如管理員的情況),這也無法正常工作。在這種情況下,最佳做法是將菜單下拉超過可滾動內容區域。

尺寸優勢

這一變更的優勢之一是我們能夠將許多代碼抽象成一個異步加載的模組。這將使我們能夠擴展對評論數據的操作,而不會使小工具的初始加載變得臃腫。這在您第一次懸停在編輯菜單上時會引入一個網絡調用,但初始包非常小(< 1kb),所以這應該不會非常明顯。

不斷演進軟體並在時間上減少其大小是非常困難的。通常,軟體一開始是快的,但會變得緩慢。因此,我們總是樂於努力保持 FastComments 的快速性:

更新前:28.76kb gzipped (108.02kb 總計)
更新後:28.39kb gzipped (105.79kb 總計)

更少的代碼也意味著瀏覽器在頁面加載時需要解析的代碼更少。隨著更多功能的添加,這一影響將會擴大。

性能優勢

舊菜單渲染所有菜單項,並載入所有擴展以查看該擴展是否有項目可以添加,也為每個評論渲染這些項目,以便內容隨時可供您的滑鼠使用。

通常只有 30 - 100 個對象,因此這通常不會造成大問題,但影響在增長。新系統消除了這一擔憂,因為菜單現在僅在需求時渲染。

權衡是新菜單使用 JS 來定位和渲染,以實現我們想要的效果。我們將繼續優化它,但目前表現良好。

總結

感謝我們的客戶在這些變更的推行上的耐心。我們希望您繼續喜愛 FastComments。

乾杯!