2014年5月13日

為何部落格最好避免第三方外掛?(二)如何選擇外部工具

A+

(Pic from: pixelportal.com.au)
上一篇」詳述了第三方工具可能的不好影響,那麼對於 Blogger 而言,不算第三方的程式,就比較安全了嗎?

當然不見得,以下先說明原因,並提出針對第三方與非第三方工具,在篩選上的建議。



一、非第三方程式要注意之處


這裡所謂 "非第三方程式" 為 WFU 的定義,是指「上一篇」→「一、何謂第三方工具」→ "存取後台資料的小工具"、"Google 相關產品"、"沒有外部請求的程式" 這三種。這些程式都可能導致以下四個大問題──

1. 範本管理習慣

Blogger 裝了許多非官方程式之後,管理變成一件重要的事。使用者常常會發生以下情事:
  • 看不出哪一段程式碼是從哪裡 copy 來的
  • 看不出程式碼的頭跟尾分別在何處
  • 移除程式碼時沒有完整移除乾淨
  • 要刪除 A 工具時,卻誤刪了 B 工具的部分程式碼

要避免以上的狀況,務必參考「Blogger 範本__(一)各種註解方式」→「一、範本註解方式」,將每個工具的名稱、出處、頭尾都註釋清楚才行。

如果是 WFU BLOG 的讀者,應該會注意到安裝程式的頭、尾之處,會註釋相關資訊,正是為了幫助讀者避免以上的麻煩。


2. 程式碼相互衝突

Javascript(以下簡稱js) 是個自由、隨性的程式語言,隨時能夠宣告變數,因此範本裡安裝的程式一多,就有可能發生不同的程式之間,使用相同的變數,而導致程式當掉。

為了避免這樣的情形,如同「Javascript 設計模式(筆記)__(一)精要」→「二、減少全域變數」所提,WFU BLOG 的程式會自我要求只使用一個變數,甚至完全不使用全域變數,來避免跟其他的程式衝突。


3. jQuery 版本

除了上一點可能產生的變數衝突,不同使用者範本裡放的 jQuery 版本也可能都各不相同,這也增加了程式當掉的機率,解決方法可參考 +Mark X 的這篇「如何使用jQuery版本」。


4. 程式沒有動態載入

js 是個一行一行執行的程式語言,只要其中一行出問題,就會導致頁面之後的內容塞車(例如「上一篇」→「六、程式有問題」)。

因此 js 工具程式要安全的執行,必須盡量使用動態載入的技術,讓程式不是逐行執行,而是在平行的時空同時執行,這也是 WFU BLOG 發佈的工具所採用的方式。



二、如何挑選第三方外掛


以上看完了所有第三方、與非第三方程式可能產生的問題,接下來提出一些建議。在挑選第三方服務時,可先檢視以下三個原則:

1. 是否為世界級的公司

例如 Google、Facebook 都是世界級的龍頭,安裝他們的外掛工具,不但伺服器相對較穩、速度快、程式碼也寫得比較有水準。

使用了規模不夠大的外掛服務,只好戰戰兢兢、要有出問題的心理準備、期望不要無預警收攤,同時最好這個外掛是可有可無的工具。(不過話又說回來,如果是可有可無的工具,何不乾脆移除?還能加快頁面的載入速度!)


2. 程式碼是否來自官網

例如這個「Blogger 中文社群討論串」談到 Line 為何容易遭到詐騙,原因為使用者連到非官網的網址,事實上 Line 的官網為了省錢,找了個不適當的網址也必須自行承擔後果。

總之,安裝第三方服務時,建議最好連上官網安裝,避免隨意從不知名的網頁安裝。


3. 是否資料需要存在第三方

例如留言資料、計數器資料,如果需要存放在第三方服務,那麼最好三思,能夠自己掌握資料庫,才不會受制於人。



三、如何挑選非第三方外掛


這個部分其實有點困難,而且需要花費時間與心力、經驗,畢竟不存在 "世界級" 的非第三方外掛,因此需要自行對這個 "非第三方外掛" 的貼文者進行徵信、審查。

1. 檢查程式碼是否為原創

很多網路上 google 到的工具,其實程式碼只是互相抄來抄去,當出了問題時,去跟貼文者詢問,也是一問三不知。

所以最好能判斷出貼文者是否就是程式的原作者,那麼這個工具才有保障,比較值得安裝。(例如 WFU BLOG 的程式碼會註明出處)


2. 觀察貼文者的留言

從貼文者的留言回答,大致能觀察出其寫程式的程度,再來決定是否使用該工具。


3. 自行留言

如果該貼文者的留言不多、或分析不出來時,那麼我們可以自行留言詢問技術相關問題,除了可以測試斤兩,也可觀察出貼文者回覆的間隔、頻率。


4. 檢查程式碼

這部分對 js 不熟悉的話可跳過。檢查的要點主要是「一、非第三方程式要注意之處」→ 2、4 兩點。
  • 如果原始碼裡面看到一大堆 var、設定了太多的全域變數的話,比較會有發生衝突的風險。
  • 如果主程式使用 <srcript src="xxx.js"> 這樣的載入方式,會延遲頁面載入速度,需要改寫成動態載入的方式較佳。


5. 檢查是否為惡意程式

想辦法找到原始程式網址出處後,然後 google 該網站,檢查是否含木馬或惡意程式,例如下圖:



搜尋關鍵字後,如果該網站的程式有問題,Google 會列出如紅框中的提醒文字 "這個網站可能會損害您的電腦"。從這個範例就可知道,第 1 點 「檢查程式碼是否為原創」,進而找到源頭是一件很重要的事。



四、常見第三方工具的替代方案


為了避免第三方服務可能中斷的影響,列舉一些常見工具的替代品,能夠確保該功能長久運作:

1. 各種外掛留言版

例如 FB、Disqus 等等,可改用 Blogger 原生官方留言板。或許功能不夠強,但網路上可找到各種 hack 來加強功能,例如表情圖案、顯示圖片及影片等等,而如果要排序留言的話,用 js 也是寫得出來。


2. Cbox 即時留言版

可改用「WYBOARD」。


3. AddThis 社交分享按鈕

可改放幾個常用的超連結語法即可,減少 js 外連請求的時間。也可參考這篇「在 Blogger 加上各種推文按鈕」自行製作圖案與連結。


4. LinkWithin 相關文章

可改用「Blogger 相關文章 + 任意尺寸縮圖」。


5. 文章瀏覽數

搜尋 "post views counter" 可以找到非常多的文章瀏覽數小工具,不過都不出名,隨時可能會倒,然後數據歸零。最保險的方法還是參考這篇「Blogger單篇文章計數器」。



五、總結


就像是 Windows 系統,安裝的程式越來越多後,系統會跑得越來越慢。部落格跟作業系統一樣,範本越乾淨就能執行得越有效率。

如果 Blogger 範本還沒整頓過的話,可以參照本篇的內容整理一番,並且去蕪存菁,留下必要的外掛即可。越快的網頁載入速度,絕對能帶來更多訪客、給予讀者最佳印象。


改善網頁效能相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。