大型網(wǎng)站建設(shè)：前端性能優(yōu)化和規(guī)范
發(fā)布時間：2013-10-30 點(diǎn)擊次數(shù)：

 * 數(shù)據(jù)庫連接超過最大限制，一般表現(xiàn)為程序的連接池滿，拒絕了與數(shù)據(jù)庫的連接。
 * 數(shù)據(jù)庫死鎖
 * Web Server 超過最大連接數(shù)（一般在虛擬主機(jī)上才會限制）
 * 內(nèi)存泄漏
 * Http連接數(shù)太多，即訪問量超過了機(jī)器和軟件設(shè)計(jì)正常所能提供的服務(wù) 
 
而今天分享的主要是比較偏向前端

瀏覽器請求和響應(yīng)的過程

第一步、瀏覽器預(yù)處理

• 目前老頁面可能css和js文件請求數(shù)可能會超標(biāo)

避免內(nèi)部無效的鏈接

 

搜索引擎不友好、 

即時內(nèi)容為空，加載也需要時間、會阻止頁面加載

禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁面。

 

在重定向完畢并且HTML下載完畢之前，是沒有任何東西顯示給用戶的

涉及服務(wù)器負(fù)載、數(shù)據(jù)查詢、服務(wù)器端緩存等

 

優(yōu)化規(guī)則 -- 壓縮組件

HTML文檔、腳本和樣式表、XML和JSON的文本響應(yīng) 壓縮如何工作
壓縮通常能將響應(yīng)的數(shù)據(jù)量減少將近70%

優(yōu)化規(guī)則 -- 精簡Javascript和Css

從代碼中移除不必要的字符以減少其大小，減少加載時間。

規(guī)則規(guī)則– 盡量縮減頁面大小

頁面必須小于150K(不含圖片）
a) 靜態(tài)文件是否gzip
b) 圖片是否壓縮優(yōu)化過

第八步、讀取Cache

優(yōu)化規(guī)則-- 添加Expire或Cache-Control

應(yīng)用于不經(jīng)常變化的組件，包括腳本、樣式表、Flash組件、圖片
Expires和Cache-Control

規(guī)則規(guī)則 -- 使用外部的Js和Css文件

盡可能使用外部Js和Css，因?yàn)槲覀兡壳按蟛糠諮s和Css都做了Gzip和緩存技術(shù)，可以充分利用。

第九步、處理元素

不要對image和pdf等二進(jìn)制文件進(jìn)行g(shù)zip壓縮

 第十步、渲染元素

優(yōu)化規(guī)則 -- 將樣式表放在頂部

 界面原型頁面必須將樣式表置于頁面頂部，開發(fā)人員如無特殊原因也必須將樣式表置于頂部。 

以往多數(shù)是因?yàn)閙asterpage原因無法將所有樣式表置頂，在改版修改masterpage時，盡可能按照此原則進(jìn)行設(shè)計(jì)。 

優(yōu)化規(guī)則 – 建議將腳本放在底部

 一般瀏覽器可以允許并行下載，取決于主機(jī)個數(shù)、帶寬等

（默認(rèn)情況下，IE是2個而FF是8個）

下載腳本時并行下載實(shí)際上是被禁用的。
 

優(yōu)化規(guī)則-- 移除重復(fù)腳本

 必須為0 

優(yōu)化規(guī)則 -- 避免CSS表達(dá)式

影響瀏覽器渲染時間

優(yōu)化規(guī)則 – 優(yōu)化圖像

盡量使用GIF和PNG

盡量使用png/gif格式的圖片，png的圖片優(yōu)先，但是必須注意如要兼容IE6，則png使用一定要注意透明問題。

圖片在上次前一定要先用工具壓縮優(yōu)化（png、jpg）

 Javascript開發(fā)規(guī)范

大型的項(xiàng)目在前端 JS 方面有幾個需要達(dá)成的目標(biāo)： 

1. 代碼邏輯分層
2. 避免全局變量
3. 便于多人協(xié)作開發(fā)
4. 各部分代碼模塊化，可以按需加載
5. 保持全局變量的清潔
6. 可進(jìn)行單元測試