前端性能優化和規範

Web性能涉及的範圍太廣，但通常web開發者在程序上線之後不少都曾遇到過性能的問題。廣泛表現爲頁面速度開始急劇變慢，正常訪問時間變的很長，或則乾脆給你拋出異常錯誤頁面。這裏會涉及到不少可能發生的狀況，舉例幾個最主要發生的狀況：

 * 數據庫鏈接超過最大限制，通常表現爲程序的鏈接池滿，拒絕了與數據庫的鏈接。

 * 數據庫死鎖

 * Web Server 超過最大鏈接數（通常在虛擬主機上纔會限制）

 * 內存泄漏

 * Http鏈接數太多，即訪問量超過了機器和軟件設計正常所能提供的服務 

 

而今天分享的主要是比較偏向前端

瀏覽器請求和響應的過程

 

第一步、瀏覽器預處理

查詢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

b) css文件不超過4個，各頻道首頁和全站首頁不超過3個。

 

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 方面有幾個須要達成的目標： 

1. 代碼邏輯分層
2. 避免全局變量
3. 便於多人協做開發
4. 各部分代碼模塊化，能夠按需加載
5. 保持全局變量的清潔
6. 可進行單元測試