網站前後端效能優化(網摘)

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>程式碼。 </script>

11.避免重定向 

重定向狀態碼：301或302

301響應的HTTP頭的例子：

<span style="color: #000000;">HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html</span>

浏览器会自动把用户转向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：

<span style="color: #000000;">HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195</span>

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文件，以便浏览器在后台工作依然进行时并行开始获取组件。
例子：
…



…
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代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。