web前端優化之常規優化(1)

　頁面打開速度(Fully Loaded)

　     1  網站首頁(或列表頁)之 First View ：打開速度應在 3秒+0.5秒 內;

　     2  對 Repeat View 時的各項指標暫不做要求;

　　首屏打開時間(Start Render)

　    1  網站首頁(或列表頁) 之 First View ：首屏渲染速度應在 1秒+0.5秒 內;

　　文檔解析完畢時間(Document Complete)：

　     對此指標暫不做要求。

　　常規優化建議：

　　1   javascript 外聯文件引用放在 html 文檔底部：具體如何擺放內聯JS/CSS和外聯JS/CSS，請參考 優化第二階段;

　　2   css 外聯文件引用在 html 文檔頭部：位於 header 內;

　　3   http 靜態資源儘可能用多個子域名：充分利用現代瀏覽器的多線程併發下載能力。瀏覽器的多線程下載能力，參考 附錄C;

　　      具體建議：

JS、CSS、CSS背景圖片、CSSSprite圖片分散在 s0～s2.haoyangshiimg.com 下;

業務類圖片分散在 p0～p3.haoyangshi.com 下;

　　4   服務器端提供 html 文檔和 http 靜態資源時，儘可能開啓 gzip 壓縮;

json/xml 等格式的文本響應，也建議開啓 gzip ;

jepg/png 等圖片，能夠選擇不開啓 gzip，由於可能服務器端圖片無損壓縮算法已經很強悍了，不須要依賴於 gzip;

　　5  在 js、css、image 等資源響應的 http headers 裏，設置 expires、last-modified;
             nginx以下設置：        

location ~ .*\.(js|css)${
expires 30d;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp)${
expires 1M;
} 

    　6 儘可能減小 HTTP Requests 的數量;

　　        經過 combo handler 合併 js 和 css 的下載，參考 優化第三階段;

　　       本階段請儘可能減小外聯 js/css 文件數，儘可能減小 ajax 調用;

　　7 js/css 的 minify：可統一經過 combo handler 作到壓縮加合併;

　　8 減小沒必要要的 301/302 跳轉：別讓頁面打開時間浪費在302屢次跳轉上(每次可能幾十毫秒);

　　9 請大量使用 CSS Sprites：這樣作能夠大大地減小CSS背景圖片的HTTP請求次數;

　　10 首屏不須要展現的較大尺寸圖片，請使用 LazyLoad ;

　　11 避免404錯誤：請求一個外聯 js 失敗時得到的404錯誤，不但會堵塞並行的下載，並且瀏覽器會嘗試分析404響應的內容，來辨識它是不是有用的Javascript代碼;

　　12 減小 cookies 的大小：儘可能減小 cookies 的體積對減小用戶得到響應的時間十分重要;

　     　去除沒必要要的 cookie ;

　　    儘可能減小 cookie 的大小;

　　    留心將 cookie 設置在適當的域名下，避免影響到其餘網站;

　　    設置適當的過時時間。一個較早的過時時間或者不設置過時時間會更快地刪除 cookie，從而減小響應時間。

　　13 使用無 cookies 的域：

　　當瀏覽其請求一個靜態圖片並一同發送 cookie 時，服務器並不須要這些 cookies 。這樣只是毫無益處地建立了多餘的網絡流量。應當保證靜態資源在請求時沒有攜帶 cookies，因此須要把你的靜態資源放在另外一個子域名下。

　　若是你的域名是 www.example.org，你能夠將你的靜態資源放在 static.example.org 中。若是你把 cookie 設置在頂級域名 example.org 上而不是 www.example.org，那麼全部發送至 static.example.org 的請求會包括那些 cookies。在 這種狀況下，你能夠用一個全新的沒有 cookie 的域名來放置你的靜態資源。

　　14 避免使用 javascript 來定位佈局