網站先後端性能優化(網摘)

時間 2019-11-18

原文原文鏈接

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屬性的方法。php

CSS表達式的問題是它比大多數人指望的執行次數更頻繁。表達式不只僅在頁面展示和從新設置大小的時候執行，在頁面滾動，甚至用戶在頁面上挪動鼠標時都會執行。給CSS表達式添加一個計數器能夠跟蹤CSS在何時和怎樣執行。在頁面上移動鼠標能夠輕易的產生一萬次以上的執行。
8. 使用外部的JavaScript和CSS
在實際應用中使用外部的文件每每產生更快的頁面，由於瀏覽器會緩存JavaScript和CSS文件。若是放在外部文件裏的JavaScript和CSS被瀏覽器緩存，則既不用增長HTTP請求的數量，HTML文檔的體積也會減小。
9. 減小DNS的查詢
DNS查找給定域名的IP地址通常會耗費20-120毫秒。在DNS查找結束前，瀏覽器不會從目標域名那裏下載任何東西。 css

10. 縮小JavaScript和CSShtml

縮小是指從代碼中刪除沒必要要的字母，減小文件體積從而提升加載速度。瀏覽器

縮減代碼時須要移除全部的註釋，以及不須要的空白（空格，新行和tab）。緩存

減少js或css文件的大小，提升響應的性能。服務器

代碼混淆是另外一個可用於源代碼的優化方案。cookie

壓縮內嵌在頁面中的<script>和<style>代碼。網絡

11.避免重定向 併發

重定向狀態碼：301或302異步

301響應的HTTP頭的例子：

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-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 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: 「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代碼和菜單，它們能夠稍後加載，由於用戶在初始呈現以後纔會在頁面上拖動元素。其餘的能夠被後加載的地方包括隱藏的內容（當用戶作某項操做纔會展示的內容）和被摺疊的圖片。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。