海淘科技分享了14條網(wǎng)站性能改進的原則,單獨每次讀取原理,與樣品。大部分的這些原則是非常實用,適合網(wǎng)站架構(gòu)師,前端工程師。前端工程師的重要性要居于其中很多。

原則1 減少HTTP請求數(shù)

結(jié)構(gòu)要求,等待響應(yīng)需要時間,所以請求的數(shù)量,越少越好。下降的整體思路是結(jié)合資源,減少請求的數(shù)量通過根據(jù)文檔的減少頁面數(shù)量。

1. Image Map

通過設(shè)置usemap屬性,可以使用標記標簽圖像分割的多個區(qū)域,來指向不同的鏈接。而不是使用多個形象建設(shè)鏈接分別減少請求的數(shù)量。

2. CSS Sprite(CSS貼圖整合/貼圖拼合/貼圖定位)

通過設(shè)置元素background-position的css樣式來設(shè)置。常用的界面圖標。一個典型的可以參考以上小按鈕TinyMCE編輯器。許多個小圖從一個統(tǒng)一的大圖來設(shè)置不同的偏移量分離而來，這個接口加載事實上只要請求許多按鈕一次更大的(請求),從而減少HTTP請求。

3. Inline Image(內(nèi)聯(lián)圖片)

在Inline Image的SRC的內(nèi)聯(lián)圖像不是外部圖像文件中指定的URL,但是直接的將圖片信息直接的導(dǎo)入。如數(shù)據(jù):SRC = " data:image/gif;base64,R0lGODlhDAAMAL...”有用在某些特殊情況下(如一個小圖片僅用于當(dāng)前頁面)。

原則2 利用多線路CDN

為你的網(wǎng)站提供各種線路(例如,國內(nèi)電信、聯(lián)通、移動),設(shè)置多個位置(北、南、西),可以快速訪問所有用戶。

原則3 利用HTTP Cache

對于一些不是頻繁更新資源的(比如一個靜態(tài)圖片)有更長的Expires標題信息,這些資源緩存后,未來不能重復(fù)傳播了很長一段時間。

原則4 使用Gzip壓縮

使用Gzip壓縮HTTP消息,減小體積,減少傳輸時間。

原則5 將樣式表置于頁面前部

加載樣式表,這個頁面呈現(xiàn)渲染是從早期開始,給用戶的感覺頁面加載速度更快。

原則6 將腳本置于頁面尾部

原因同5，首先,處理頁面，頁面渲染就可以早些時候完成,腳本邏輯執(zhí)行將在后期,因此,給用戶頁面加載速度就會更加的快速。

原則7 避免使用CSS表達式

不簡單的JS邏輯,DOM查找,選擇操作將降低處理效率。

原則8 將JavaScript與CSS作為外聯(lián)資源

這似乎是與合并的想法原則1相反,但事實上不是這樣:考慮每一頁介紹了常見的JavaScript資源(如jQuery或ExtJS JavaScript庫),單在一個頁面性能的情況下,內(nèi)聯(lián)JavaScript(嵌入HTML頁面加載速度比拓展。但是如果有很多頁介紹常見的JavaScript資源,所以內(nèi)聯(lián)的解決方案將導(dǎo)致重復(fù)傳輸(因為資源嵌入在每個頁面,所以每次你打開一個頁面的這一部分資源轉(zhuǎn)移,導(dǎo)致浪費網(wǎng)絡(luò)資源)。但是這種資源拓展參考可以解決這個問題。

原則9 減少DNS查找

1. 使用Keep-Alive保持連接

如果連接斷開,然后下一個連接執(zhí)行DNS查找,即使對應(yīng)的域名,IP映射緩存,搜索也需要一些時間

2. 減少域名

新域名請求每次都應(yīng)該要通過不同的DNS查找，DNS緩存卻不能發(fā)揮作用。所以你應(yīng)該試著組織網(wǎng)站統(tǒng)一域名下,避免使用太多的子域名

原則10 壓縮你的JavaScript

使用JS壓縮工具壓縮你的JS吧，效果使很不錯的。根據(jù)jQuery兩個不同的發(fā)行版本就能發(fā)現(xiàn)他們之間的區(qū)別:

http://code.jquery.com/jquery-1.6.2.js 閱讀版jQuery代碼，230KB

http://code.jquery.com/jquery-1.6.2.min.js 壓縮版jQuery代碼(用于實際部署)，89.4KB

原則11 盡量避免重定向

重定向意味著在實際訪問你想看到首頁加入輪額外的HTTP請求(客戶端發(fā)起HTTP請求→HTTP服務(wù)器返回重定向響應(yīng)→客戶端對新URL發(fā)起請求→HTTP服務(wù)器返回內(nèi)容，下劃線部分為額外的請求)，因此消耗更多的時間(也對人的感覺反應(yīng)慢)。所以,除非必要,不要使用重定向。幾個“必要”:

1. 避免URL失效

遷移后的舊網(wǎng)站,為了避免舊URL失敗,往往舊URL的請求重定向到一個新系統(tǒng)相應(yīng)的地址。

2. URL美化

可讀性好的URL和實際資源URL之間的轉(zhuǎn)換,比如,谷歌工具欄,用戶記住http://toolbar.google.com這豐富的語義地址在人類身上,但很難記住,真正的源地址http://www.google.com/tools/firefox/toolbar/FT3/intl/en/index.html。所以有必要保持前,將被重定向到后者根據(jù)前者要求。

原則12 移除重復(fù)的腳本

不要一個頁面重復(fù)的使用相同的版本。B和C都依賴于一個腳本,例如,在頁面中使用B和C可能存在反復(fù)的引用。解決方案,對于簡單的網(wǎng)站依賴手動檢查,消除重復(fù)的介紹,對于復(fù)雜的網(wǎng)站你需要網(wǎng)站建設(shè)知識建立自己的版本的依賴管理/控制機制。

原則13 小心處理ETag

除了last - modified ETag是另一個HTTP緩存。由hash方法確定資源是否被修改。但是在某種程度上說還是存在一定的問題：

1. 不一致：不同的Web服務(wù)器(Apache,IIS等)ETag格式定義是不同的

2. ETag的計算是不穩(wěn)定的(由于考慮過多因素)，例如：

1) ETag在不同的服務(wù)器上，具有相同的資源，大型Web應(yīng)用程序通常由多個服務(wù)器提供服務(wù),這將導(dǎo)致服務(wù)器上的客戶端緩存資源顯然仍然有效,當(dāng)下一次請求B被認定為失敗由于不同的ETag,導(dǎo)致相同的重復(fù)傳播資源。

2) 資源不變,是其他因素導(dǎo)致的變化,比如配置文件變化,使ETag的變化。直接后果是系統(tǒng)更新后端緩存失效,導(dǎo)致運輸數(shù)量、網(wǎng)站性能下降。

原則14 在Ajax中利用HTTP Cache

Ajax是一個異步請求,異步請求將不會阻止你現(xiàn)在操作,當(dāng)請求完成時,你可以立即看到結(jié)果。但異步不代表可以瞬時完成,也不代表可以寬容需要無限的時間完成。所以對于Ajax請求的性能也需要注意。