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

(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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizW3s3HghEoobUR5juPl6QpOV-zZR5MQDsHGRlCmAcgGUX7jql6Q19E4Lsd8cBRQeUum9Ltx5luiSMFm1A6s3TzgtH3syX2aDjALB5IaClMtIEd56978kbz60PdGJGjelw-Rk9q2SpP5yG/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 範本的觀念 系列文章：