首頁 > 開發者 > JavaScript
網站前後端效能最佳化(網摘)，效能最佳化網摘
1.減少http請求數
合并檔案，通過把所有指令碼置於一個指令檔裡或者把所有樣式表放於一個樣式表檔案中，從而減少Http請求的數量。
CSS Sprites是減少圖片請求的首選方案。把所有的背景圖片合并到一張圖中，使用CSS的background-image 和background-position 屬性去控制展現恰當的圖片地區。
內聯圖片使用data: URL scheme 把圖片資料嵌入頁面，但這會增加Html文檔的大小。
2.使用內容分布式網路
內容分布式網路（CDN）是一系列分布在不同地區的伺服器的集合，能夠更有效給使用者發送資訊。它會根據一種衡量網域距離的方法，選取為某個使用者發送資料的伺服器。比如，到達使用者最少跳或者最快相應速度的伺服器會被選中。
3.給頭部添加一個失效期或者Cache-Control
對於靜態組件：把頭部的緩衝期設為某個遙遠的未來，使其能夠“永不到期”。
對於動態組件：使用適當的Cache-Control頭部協助瀏覽器執行特定的請求。
4.Gzip壓縮組件
在HTTP請求的頭部中Accept-Encoding指定的壓縮格式：
νAccept-Encoding: gzip, deflate
νContent-Encoding: gzip
5.把樣式表放在前面
把樣式表挪到文檔的頭部可以讓頁面的載入顯得更快。因為把樣式表放在頭部可以讓頁面逐步呈現。
6.把指令碼放在最後
指令碼可能會堵塞並發的下載。HTTP/1.1規範建議瀏覽器在每個網域名稱下只進行兩個並發下載。
設定消極式載入指令碼，也可以放在頁面底部
7.不使用CSS運算式
CSS運算式是一種有力的（同時也很危險的）動態設定CSS屬性的方法。
CSS運算式的問題是它比大多數人期望的執行次數更頻繁。運算式不僅僅在頁面展現和重新設定大小的時候執行，在頁面滾動，甚至使用者在頁面上挪動滑鼠時都會執行。給CSS運算式添加一個計數器可以跟蹤CSS在什麼時候和怎樣執行。在頁面上移動滑鼠可以輕易的產生一萬次以上的執行。
8.使用外部的JavaScript和CSS
在實際應用中使用外部的檔案往往產生更快的頁面，因為瀏覽器會緩衝JavaScript和CSS檔案。如果放在外部檔案裡的JavaScript和CSS被瀏覽器緩衝，則既不用增加HTTP請求的數量，HTML文檔的體積也會減少。
9.減少DNS的查詢
DNS尋找給定網域名稱的IP地址一般會耗費20-120毫秒。在DNS尋找結束前，瀏覽器不會從目標網域名稱那裡下載任何東西。
10. 縮小JavaScript和CSS
縮小是指從代碼中刪除不必要的字母，減少檔案體積從而提高載入速度。
縮減代碼時需要移除所有的注釋，以及不需要的空白（空格，新行和tab）。
減小js或css檔案的大小，提高響應的效能。
代碼混淆是另一個可用於原始碼的最佳化方案。
壓縮內嵌在頁面中的<script>和<style>代碼。
11.避免重新導向
重新導向狀態代碼：301或302
301響應的HTTP頭的例子：
HTTP/1.1 301 Moved PermanentlyLocation: http://example.com/newuriContent-Type: text/html
瀏覽器會自動把使用者轉向Location域中指明的Url地址。HTTP頭裡包含了重新導向所需的所有資訊。響應的主體一般是空的。301或者302響應都不會被實際緩衝，除非添加額外的頭部，比如 Expires或者Cache- Control指明了它應該被緩衝。meta refresh標籤和JavaScript也可以將使用者重新導向到不同的URL，但如果你必須執行重新導向，最好的方法是使用標準的3XX HTTP狀態碼，以便使後退按鈕工作正常。
重新導向會影響使用者體驗，在使用者和HTML文檔之間插入的重新導向延誤了頁面的呈現和組件下載，因為它們都不可能在獲得HTML文檔之前開始。
一種最浪費效能的重新導向頻繁發生而網路開發人員們卻往往沒有意識到，那就是當地址中應當有一個斜線符號（/）卻沒有的時候。比如，訪問http://astrology.yahoo.com/astrology會導致一個301效應並重新導向到http://astrology.yahoo.com/astrology/（注意這裡加了一個斜線符號）。在Apache中，這可以使用mod_rewrite,或者在Apache事件處理中使用DirectorySlash指令來修補。
12.移除重複的指令碼
在同一個頁面中包含兩個相同的指令檔降低了效能。
13.設定ETags
實體標籤（ETags）是伺服器和瀏覽器用於確定瀏覽器中緩衝的組件和伺服器中的是否對應的一種機制。（”entity”是組件的另一種說法：圖片、指令碼、樣式表等等）添加 ETags用於辨別組件提供了比單純利用“最後修改時間”更為靈活的機制。ETag是一個唯一標識組件的特定版本的字串。它的唯一格式規範是字串必須被引號引用。來原始伺服器使用ETag回應標頭來設定一個組件的ETag：
HTTP/1.1 200 OKLast-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: “10c24bc-4ab-457e1c1f”Content-Length: 12195
ETag的問題是它們往往在網站的一個伺服器中被設為唯一的。
14.讓Ajax可以緩衝
Ajax 的好處之一是它能給使用者提供瞬間的響應，因為它從服務端非同步請求資料。但Ajax不能保證使用者在等候那些非同步JavaScript和XML響應返回時什麼都不做。
為了提高效能，最佳化Ajax響應很重要。提高Ajax效能最重要的方式是使響應緩衝，可以添加一個到期期限和緩衝控制頭。下面這些原則同樣適用於Ajax。
* Gzip組件
* 減少DNS查詢
* 壓縮JavaScript
* 避免重新導向
* 設定ETag
15.更早的重新整理緩衝區
當使用者請求一個頁面，服務端會花費200至500毫秒的時間組合HTML頁面。在這期間，瀏覽器會靜靜等待資料到來。PHP中有flush（）函數，它允許你向瀏覽器發送部分就緒的HTML響應，這樣瀏覽器可以在伺服器處理餘下的HTML頁面時去擷取組件。這樣的好處主要在忙碌的後台和輕鬆的前台間可以看到。
在HEAD後面是放置重新整理操作的好地方，因為頭部的HTML代碼更容易產生，而且可以讓你放置任何CSS和JavaScript檔案，以便瀏覽器在後台工作依然進行時並行開始擷取組件。
例子：
… <!– css, js –>
</head>
<?php flush(); ?>
<body>
… <!– content –>
Yahoo! search先行研究並且進行了真人測試證明了使用這項技術的好處。
16.在Ajax請求中使用GET方法
Yahoo! Mail 團隊發現進行XMLHttpRequest的時候，POST方法在瀏覽器中分兩步執行：先發送頭部，然後發送資料。所以最好使用只發送一個TCP包（除非你有很多的cookie）的GET方法。IE中URL的最大長度是2000，所以如果你發送超過 2000的資料就不能使用GET方法。
一個有趣的現象是，POST方法並不像GET那樣實際發送資料（而Get則名副其實）。基於 HTTP規範，GET方法意味著取回資料，所以當你只是請求資料時使用GET方法更為有意義（從語義上來說），而在發送需要儲存在伺服器端的資料時則相反使用POST。
17.後載入組件
你可以仔細端詳下你的頁面然後自問：“什麼是在頁面初始化時必須的？”那麼其餘的內容和組件可以放在後面。
JavaScript是理想的用來分割onload事件之前和之後的選擇。例如你有執行拖放、下拉和動畫的JavaScript代碼和菜單，它們可以稍後載入，因為使用者在初始呈現之後才會在頁面上拖動元素。其他的可以被後載入的地方包括隱藏的內容（當使用者做某項操作才會展現的內容）和被摺疊的圖片。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
