怎樣編寫高效能HTML網頁

巴扎黑
發布: 2017-04-08 11:30:59
原創
1373 人瀏覽過

  你怎麼能提升網頁效能?

  大多數開發者會透過JavaScript和圖片來優化,透過伺服器配置,壓縮檔案和合併檔案 - 甚至調整CSS(合併小圖片)。

#   可憐的HTML老是被忽視,儘管它一直是網路的核心語言。

  HTML正在變得越來越大。前100名的網站每個HTML頁面大多在40K左右。亞馬遜和雅虎使用上千個HTML頁面。在youtube.com主頁面,HTML元素高達3500個。

  減少的HTML複雜性和一個頁面的元素數量並不會明顯提高解析時間 - 但HTML是建立極速網頁,和適應不同設備並影響成功的一個關鍵性的因素。

#   在本文中,您將了解如何編寫簡潔乾淨的HTML,使您能夠建立快速載入並支援多種裝置的網站,將易於調試和維護。

  寫程式的方法並不是只有一種-尤其是HTML。這裡只是講解一般經驗,但不是唯一正確的選擇。

#  HTML, CSS 與 JavaScript

#   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建構(編繹)系統大比拼

#  Document文檔結構

#   使用 HTML5的document type:

   Recipes: pesto 
  

Pesto

Pesto is good!

登入後複製

  在頁面最頭部引用CSS文件,如在head元素中:

 My pesto recipe   
登入後複製

  這樣,瀏覽器就可以在解析HTML前預先載入樣式而不會呈現一個混亂的頁面佈局。

  把JavaScript放在頁面的最底部, 在body封閉之前。這將提高頁面渲染時間,因為瀏覽器可以在JavaScript載入前將頁面渲染出來:

 ... 
  ...  ... 
登入後複製

  這樣就好多了:

 ... 
  ...  ...