公告版位

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


(Pic from: css-javascript-toolbox.com)


然而懶人包的缺點就是──執行效率可能稍差。因此本篇的內容主要提供給進階使用者,瞭解 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 的請求時間,載入速度會稍慢

全文已移往WFU BLOG 主站,請點:「如何讓 Javascript/CSS 執行有效率﹍修改 Blogger 範本的觀念 (2)

創作者介紹
創作者 Wayne Fu 的頭像
Wayne Fu

WFU BLOG

Wayne Fu 發表在 痞客邦 留言(1) 人氣()


留言列表 (1)

發表留言
  • 陳俊尾
  • 上到一課了⋯⋯!