大型網站--前端效能優化和規範
瀏覽器請求和響應的過程
第一步、瀏覽器預處理
查詢Cache：讀取Cache 或者傳送304請求
第二步、查詢DNS
優化規則--減少DNS查詢
DNS快取
瀏覽器DNS快取 計算機DNS快取 伺服器DNS快取（TTL）
使用Keep-Alive特性
減少DNS查詢
當客戶端的DNS快取為空時，DNS查詢的數量與Web頁面中唯一主機名的數量相等。減少唯一主機名的數量就可以減少DNS查詢的數量。
較少的域名來減少DNS查詢（2-4個主機）
第三步、建立連線
優化規則-- 使用內容分發網路
美國十大Internet網站和CDN服務提供商
頁面靜態化,取決於釋出系統
Ctrip使用的China-Cache和網宿
優化規則--用域名劃分頁面內容
按頁面內容劃分域名，在合適的資源伺服器上存放檔案
第四步、傳送請求
優化規則-- 減少HTTP請求
HTTP請求30-40,合併檔案,圖片地圖,內聯影象
a)js檔案（不超過7個）
1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js) 2.資料檔案js（1-2個） 3.頻道公用js(1個）和頁面私有js（1-2個）不含ga.js、uiscript.asp和外鏈其他網站的js
c) 目前無法解決的是allyes廣告的請求數。
• • 大量的廣告和產品圖片可能會造成，圖片請求數很大，可能造成總請求數指標吃緊，這個只能從設計上搞定，需要權衡
• 目前老頁面可能css和js檔案請求數可能會超標
優化規則- – 優化CSS Spirite
圖片地圖 Ctrip首頁例子
優化規則– 避免404錯誤
規則優化 –不要使用frameset，少使用iframe
搜尋引擎不友好、即時內容為空，載入也需要時間、會阻止頁面載入
禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁面。第五步、等待響應
優化規則 --避免重定向
在重定向完畢並且HTML下載完畢之前，是沒有任何東西顯示給使用者的
涉及伺服器負載、資料查詢、伺服器端快取等
第七步、接收資料
優化規則 -- 壓縮元件
HTML文件、指令碼和樣式表、XML和JSON的文字響應 壓縮如何工作
壓縮通常能將響應的資料量減少將近70%
優化規則 -- 精簡Javascript和Css
從程式碼中移除不必要的字元以減少其大小，減少載入時間。
規則規則– 儘量縮減頁面大小
頁面必須小於150K(不含圖片）
a) 靜態檔案是否gzip
b) 圖片是否壓縮優化過
第八步、讀取Cache
優化規則-- 新增Expire或Cache-Control
應用於不經常變化的元件，包括指令碼、樣式表、Flash元件、圖片
Expires和Cache-Control
規則規則 -- 使用外部的Js和Css檔案
儘可能使用外部Js和Css，因為我們目前大部分Js和Css都做了Gzip和快取技術，可以充分利用。
第九步、處理元素
不要對image和pdf等二進位制檔案進行gzip壓縮
第十步、渲染元素
優化規則 -- 將樣式表放在頂部
介面原型頁面必須將樣式表置於頁面頂部，開發人員如無特殊原因也必須將樣式表置於頂部。
以往多數是因為masterpage原因無法將所有樣式表置頂，在改版修改masterpage時，儘可能按照此原則進行設計。
優化規則 – 建議將指令碼放在底部
一般瀏覽器可以允許並行下載，取決於主機個數、頻寬等
（預設情況下，IE是2個而FF是8個）
下載指令碼時並行下載實際上是被禁用的。
優化規則-- 移除重複指令碼
必須為0
優化規則 -- 避免CSS表示式
影響瀏覽器渲染時間
優化規則 – 優化影象
儘量使用GIF和PNG
儘量使用png/gif格式的圖片，png的圖片優先，但是必須注意如要相容IE6，則png使用一定要注意透明問題。
圖片在上次前一定要先用工具壓縮優化（png、jpg）
Javascript開發規範
大型的專案在前端 JS 方面有幾個需要達成的目標：
- 程式碼邏輯分層
- 避免全域性變數
- 便於多人協作開發
- 各部分程式碼模組化，可以按需載入
- 保持全域性變數的清潔
- 可進行單元測試
推薦書籍
Steve Souders (Yahoo! Chief Performance)
Greyhound 靈緹犬 (世界上跑的最快的狗)