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

WBOY
發布: 2016-05-16 16:36:28
原創
1058 人瀏覽過

你怎麼能提升網頁效能?

  大多數開發者會透過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. >
  6.    head
  7. >
  8.    body
  9. >
  10.   
  11.      h1>PestoPesto 🎜>>
  12.      p>Pesto.p>  
  13.   
  14. body>  
  15. html>  
  在頁面最頭部引用CSS文件,如在head元素中:

CSS Code複製內容到剪貼簿
  1.   
  2.   My pesto recipe   
  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.   
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!