你怎麼能提升網頁效能?
大多數開發者會透過JavaScript和圖片來優化,透過伺服器配置,壓縮檔案和合併檔案 - 甚至調整CSS(合併小圖片)。
# 可憐的HTML老是被忽視,儘管它一直是網路的核心語言。
HTML正在變得越來越大。前100名的網站每個HTML頁面大多在40K左右。亞馬遜和雅虎使用上千個HTML頁面。在youtube.com主頁面,HTML元素高達3500個。
減少的HTML複雜性和一個頁面的元素數量並不會明顯提高解析時間 - 但HTML是建立極速網頁,和適應不同設備並影響成功的一個關鍵性的因素。
# 在本文中,您將了解如何編寫簡潔乾淨的HTML,使您能夠建立快速載入並支援多種裝置的網站,將易於調試和維護。
寫程式的方法並不是只有一種-尤其是HTML。這裡只是講解一般經驗,但不是唯一正確的選擇。
# HTML是一種標記語言,用來表示結構和內容。
HTML不應用來顯示風格和樣式。不要為了顯得「更大」把文字寫在標題標籤(h1~h6)中,或只是為了縮排而使用blockquotes元素。相反,使用CSS來改變元素的外觀和佈局。
HTML元素的預設外觀是透過瀏覽器的預設樣式實現的:Firefox,Internet Explorer和Opera均不一樣。例如,在Chrome中預設h1元素呈現為32px的大小。
三個基本原則:
使用HTML表示結構,CSS用來表現不同樣式的風格和主題。 JavaScript來回應使用者行為。
使用HTML,必要時藉助CSS,並且在不得己時再加入JavaScript。例如:在許多情況下,你可能會使用HTML表單進行驗證,使用CSS或SVG來實作動畫。
將CSS和JavaScript從你的HTML程式碼中分離出來。讓他們能夠緩存,這使程式碼更易於調試。在生產中,CSS和JavaScript是可以壓縮合併的,應該作為你Build系統的一部分。 附註* 參考 JavaScript建構(編繹)系統大比拼
# 使用 HTML5的document type:
Recipes: pesto Pesto
Pesto is good!
在頁面最頭部引用CSS文件,如在head元素中:
My pesto recipe
這樣,瀏覽器就可以在解析HTML前預先載入樣式而不會呈現一個混亂的頁面佈局。
把JavaScript放在頁面的最底部, 在body封閉之前。這將提高頁面渲染時間,因為瀏覽器可以在JavaScript載入前將頁面渲染出來:
... ... ...
這樣就好多了:
... ... ...