2014年10月24日

如何讓 Javascript/CSS 執行有效率﹍修改 Blogger 範本的觀念 (2)

A+

(Pic from: css-javascript-toolbox.com)
網頁載入速度是影響訪客對網站印象的重要一環(參考「網頁載入速度 黃金三秒」),而 Javascript(以下簡稱 js) 與 CSS 在範本中如何配置,關係著網頁執行的效率。不過對於初心者而言,這些知識未免太過複雜,為了讓不懂語法的新手站長們都能享受架站的樂趣、順利地安裝各種網頁小工具, WFU 製作了各種懶人包,以期讓安裝過程無腦化。

然而懶人包的缺點就是──執行效率可能稍差。因此本篇的內容主要提供給進階使用者,瞭解 JS/CSS 的執行原理,並據以調整適當的擺放位置,讓網頁載入及執行速度加分。



一、CSS 的正確擺放位置


1. CSS 的寫法

如果將 CSS 樣式寫在標籤之內,那麼將是最快的執行方式,例如:

<div style="font-size: 20px; color: red;">WFU BLOG</div>
但是行內樣式一多,除非這些樣式永遠不修改,否則日後管理 CSS 會很麻煩,因此實務上會將樣式放在標籤 style 之間,並給予 class 名稱呼叫,例如:

<style>
.blog_name {
font-size: 20px;
color: red;
}
</style>
<div class="blog_name">WFU BLOG</div>

日後只要在範本中搜尋字串 "blog_name",就能找到這個 CSS 樣式的位置來修改,可以看出這是較佳的管理方式。


2. 瀏覽器的運作方式

當瀏覽器讀取到 class="blog_name" 以後,會怎麼尋找 "blog_name" 這個 class 的 CSS 樣式內容呢?瀏覽器會從網頁的最前面開始尋找 → 這也是為何 "style" 標籤通常放在範本中 </head> 之前的原因。

能讓瀏覽器花費較短的時間搜尋 class 樣式的位置,網頁的執行速度就越快,因此我們可以檢查一下範本、以及所有小工具的內容,是否有 "style" 標籤放在執行效率比較差的位置。


3. CSS 外部引用

比較大型的網頁,CSS 的管理會複雜許多,因此 CSS 常使用外部連結的方式引用,例如以下是 Blogger 的官方 CSS 連結:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />
如果範本中有一部分的 CSS 內容確定不會變更,那麼可將內容打包、壓縮為一個 .css 檔,放在外連空間(例如「Google Drive」),再用以上語法引用,放在範本中 </head> 之前即可。

這麼做的好處是,範本可以比較清爽;而壞處是,需要花費 http 的請求時間,載入速度會稍慢



二、JS 的正確擺放位置


有關 JS 如何執行能夠最有效率、這個主題太過龐大,有機會再專文討論,本篇只簡要說明一些重要的基本概念。

1. HTML 執行原理

頁面上的 HTML 碼是逐行執行,不過需要載入外部資料時,瀏覽器並不會停下來等待,而是同時執行後續的 HTML 碼,這可確保網頁能先將重要的內容先顯示出來,而未顯示的內容會等外部資料載入完畢後顯示。例如:

<img class="blog_logo" src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s200/wfublog-logo-8abeb7.png"/>
<div class="blog_name">WFU BLOG</div>
<div class="blog_description">Blogger 調校資料庫</div>

雖然第一行的 HTML 代表載入圖片的意思,但瀏覽器並不會等待圖片載入完畢,而會直接執行後面二、三行,先把網站名稱與網站敘述顯示出來,避免頁面的渲染(render)被這張圖片給塞住;等到圖片完整載入後,再回頭將第一行的內容顯示出來。


2. JS 執行原理

JS 一樣是逐行執行,但是瀏覽器一讀到 JS 碼時,整個頁面就凍結住了,完全停止顯示 JS 後面的 HTML 碼。這樣會有什麼缺點呢?例如「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」,若是 JS 內含外部連結,而不巧外部伺服器不穩,遲遲無法回應時,不但這些 JS 無法執行,連帶其後的所有 HTML 也全部塞車。


3. JS 最佳擺放位置

為了避免以上的窘狀,網頁的 JS 擺放位置,與 CSS 恰恰相反,擺的越後面越好。除了可以防止網頁開天窗,也可加快網頁載入的速度。

如果沒有特殊狀況,所謂 "越後面越好",就是代表放在範本中 </body> 的前一行,這是所有能擺放之中、最後面的位置。本站的忠實讀者應該會發現,大部分的工具都是安裝在這個地方。


4. 實務上的抉擇

大部分 JS 碼都是有辦法放在範本最後面的位置,只不過需要加工處理,改成 "動態執行" 的形式。然而實務上每個 JS 都寫成動態執行或許不是那麼容易,如果不需要引用外部連結的話,那麼就不一定非得放在後面的位置。

另外有些 JS 碼就是一定得先執行,例如「圖片延遲載入外掛 Lazy Load」,放得太後面就失去 Lazy Load 的效用。因此 JS 該放哪裡沒有一定,還是得視情況而定。



三、懶人包如何調整


說完了大致的概念,以下舉個實例,來看看某些懶人包應該如何最佳化。對於懼怕碰程式碼的讀者而言,使用懶人包沒什麼不好,拿一點點的網頁執行效率,來換取需求的實現。而了解原理的讀者,就可以既實現需求、又增加執行效能。

1. 最新回應懶人包

這篇「Blogger 最新回應+留言者頭像+文章標題」為了讓安裝無腦化,將所有的 HTML/CSS/JS 全部擠在一起,只要一個複製貼上的動作,就完成了這個小工具的安裝。

這麼做的好處是,讀者要安裝失敗還真是困難!而其缺點,相信讀完本篇後大家都已經非常清楚了。對於進階的讀者而言,可以做以下的動作:

  • 將 CSS 搬到 </head> 之前 → 也就是 D~AB 行的部份
  • 將 JS 搬到 </body> 之前 → 也就是 AC~AS 行的部份

這樣就能讓頁面的執行效率最佳化。


2. JS 的陷阱

將程式碼拆成三個部份、在三個位置安裝,對於初心者而言,出錯的機率一定增加很多;對於熟練的站長而言,應該不會有太大問題,也能增加網頁執行效率。

不過,Blogger 範本的眉角沒有這麼簡單,仍請注意以下兩點:

  • 四處散落的程式碼,日後管理一定會出問題,請務必參考「備份範本的訣竅」→「二、如何正確備份範本」→「1. 誤刪程式碼及忘記出處」,將各處的程式碼加上註解。
  • 原本在小工具沒問題的 JS 程式碼,改放在範本中八成會有問題,連儲存都會失敗。請參考「Blogger 範本裡為何這麼多亂碼?」→「二、避免字元被轉換的方法」,在 JS 的前後加上 "不解析語法",否則很多 JS 碼都無法成功儲存。



四、小結


瞭解 HTML / JS / CSS 各自的執行特性後,我們可以讓範本中的內容,藉由擺放到正確的位置,來執行地有效率,到目前為止我們可說是完成了 80% 的工作。

剩下的 20% 會是什麼呢?由於範本中仍有大量不必要的字元,也就是不會去執行的字元、或是可以更精簡的字串、變數等等,系列文最後一篇會介紹各種 HTML / JS / CSS 工具,來讓執行效率達到百分百。


修改 Blogger 範本的觀念 系列文章:

3 則留言:

  1. 感恩 趕緊買本java參考課本來看 看完再來這拜讀大大的文章 ~

    回覆刪除
    回覆
    1. 是 "Javascript" 喔,別買錯書了,"Java" 更難看懂的 ~~ XD

      刪除

張貼留言注意事項:

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