一些編寫高效能HTML應用的建議_HTML/Xhtml_網頁製作

你怎麼能提升網頁效能？

　　大多數開發者會透過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:

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3. head>  
4.  title>Recipes: pestoRecipes: pestoRecipes: pesto title
>
5.    head
>
6.    body
>
7.   
8.      h1>PestoPesto 🎜>>
9.      p>Pesto.p>  
10.   
11. body>  
12. html>  

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

CSS Code複製內容到剪貼簿

1.   
2.      
3.    "/css/global.css">   
4.    "css/local.css">   
5.   

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

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

JavaScript Code複製內容到剪貼簿

1.   
2.   ...   
3.   <script><span class="string">"/js/global.js"</script>>   
4.   <script><span class="string">"js/local.js"</script>>   
5.