web開發的性能準則（減小頁面加載時間方面）

準則（概述）

• 減小 HTTP 請求
• 使用CDN加速
• 避免空的src或href屬性值
• 增長過時頭
• 啓GZIP壓縮
• 把css文件放到頭部
• 把javascript放到尾部
• 避免使用css表達式
• 刪除不使用的css語句
• 對javascript、css代碼進行壓縮
• 減小重繪

減小HTTP請求

減小HTTP請求是上面性能準則中最爲顯著的一條，咱們能夠分爲三個主要方面來討論

• 使用並行鏈接
  開發人員每每只考慮服務器端對性能的影響卻疏忽了瀏覽器端的限制，好比有多少資源能夠在同一時間加載。HTTP1.1協議明確的限制了單個用戶在同一時間不能保持兩個以上的鏈接，可是，現代瀏覽器大部分都突破了這個限制，不少瀏覽器能夠支持四個甚至六個並行的鏈接。一樣的，你也能夠將資源文件散列到不一樣的域名下面，這種作法充分的利用了瀏覽器併發，因此能夠提升加載效率，可是因爲DNS的查詢有耗時，太多的域名解析又會使性能下降。
• 合併資源文件
  並行連接的討論得出一個結論，大一些的文件比小一些的文件好，雖說這個說法聽起來有些彆扭，可是在現今的網絡環境裏，這個說法能夠獲得證明（體積大的文件比多個小文件加載快）。此外每一個HTTP請求在時間上和帶寬上至少會產生一些開銷，若是能夠合併資源，減小HTTP請求，會提高必定的性能。
• 使用圖片精靈（css sprite）
  這個名詞應該比較熟悉和經常使用，它的意思就是把幾張圖片合併成一張。這是一種有效減小HTTP請求的方法，在使用圖片的時候你只須要使用一些css的定位來決定這個圖片的位置便可。當咱們使用其中的一個圖標時，其餘的圖片也會被緩存（不須要再次請求）若是有100個圖標則能夠減小99次HTTP請求。

使用CDN加速（內容分發系統）

CDN是一個擁有不少服務器、通過策略性部署的、能夠覆蓋全球的網絡系統，當用戶訪問一個比較大的網站時，CDN會從最近的一個節點爲用戶提供服務。可是動態數據的處理最好放在集中的服務器中，由於跨地域同步數據庫是一個令開發者頭痛的問題，全部大多數互聯網公司都把購買、登錄等數據相關的事物放到一個地方處理。另外，CDN服務是很貴的，若是網站的流量值得去付出這麼多錢，它無疑會給性能帶來提高。

避免空的src和href屬性

咱們使用javascript給空的src賦值時，javascript放在文檔的最後，此時雖然src是空的仍然會發出一個HTTP請求。當咱們點擊一個空的href屬性的連接時，一樣會發出一個HTTP請求，雖然這個HTTP請求不會有影響加載時間可是會給服務端形成必定的流量浪費。咱們能夠建立一個帶有描述性信息的很href屬性，並阻止此次HTTP請求
<a href="#SometingDescriptive" id="TriggerName">TriggerName</a> <script type="text/javascript"> $("#TriggerName").click(function (e) { e.prventDefaulet(); // 取消默認行爲 ... }); </script>
另外，空的src和href也是會產生報錯的

增長過時頭

增長了過時頭以後瀏覽器便會緩存這些文件，當用戶第二次訪問這個網站的時候就不會再像服務端請求這個文件。關於緩存的詳細介紹能夠點這裏

啓用GZIP壓縮

HTTP協議1.1引入了Accept-Encoding這個功能（代表HTTP請求的內容是壓縮過的），GZIP就是其中的一種壓縮方式，它是如今壓縮比率最高的，據雅虎的統計它減少了大約70%的響應大小。它不只僅會減少文件傳輸時間，同時也節省了帶寬。

把css放在頭部

瀏覽器並不會等所有HTML解析完成以後才渲染元素，而是同時進行，把css放到前面就會保證先渲染的那一部分元素的顯示樣式是正確的，這麼寫在性能方面也有很大的意義，你毫不但願引發大量的瀏覽器重繪。若是你的樣式文件放到頁面的底部，那麼瀏覽器就會等全部文件都加載完纔會繪製頁面，那麼用戶頗有可能盯着白屏一長段時間，

把javascript放在尾部

腳本會阻止並行加載（link支持最大限度的並行加載），也就是說，當瀏覽器加載一個腳本的時候時，它不會加載其餘文件。若是腳本在頭部那他會阻止頁面的渲染。咱們能夠用script標籤上的DRFFER屬性通知瀏覽器去異步的加載其餘文件，可是這麼作會出現兩個問題。

• 不是全部瀏覽器都認識這個屬性
• 用了DEFFER屬性的腳本不可使用document.write()

避免使用css表達式

• 只有部分瀏覽器支持CSS表達式（IE五、六、7）
• 在打包壓縮後CSS表達式會比正常的CSS長得多
• 執行頻率高得多（每每當用戶移動鼠標或滾動頁面時它就會執行）

減小頁面的迴流與重繪

關於這個問題能夠去我博客園的 博客 來查看。