創新互聯分享了14條網站性能改進的原則,單獨每次讀取原理,與樣品。大部分的這些原則是非常實用,適合網站架構師,前端工程師。前端工程師的重要性要居于其中很多。

原則1 減少HTTP請求數

結構要求,等待響應需要時間,所以請求的數量,越少越好。下降的整體思路是結合資源,減少請求的數量通過根據文檔的減少頁面數量。

1. Image Map

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

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

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

3. Inline Image(內聯圖片)

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

原則2 利用多線路CDN

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

原則3 利用HTTP Cache

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

原則4 使用Gzip壓縮

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

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

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

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

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

原則7 避免使用CSS表達式

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

原則8 將JavaScript與CSS作為外聯資源

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

原則9 減少DNS查找

1. 使用Keep-Alive保持連接

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

2. 減少域名

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

原則10 壓縮你的JavaScript

使用JS壓縮工具壓縮你的JS吧，效果使很不錯的。根據jQuery兩個不同的發行版本就能發現他們之間的區別:

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請求(客戶端發起HTTP請求→HTTP服務器返回重定向響應→客戶端對新URL發起請求→HTTP服務器返回內容，下劃線部分為額外的請求)，因此消耗更多的時間(也對人的感覺反應慢)。所以,除非必要,不要使用重定向。幾個“必要”:

1. 避免URL失效

遷移后的舊網站,為了避免舊URL失敗,往往舊URL的請求重定向到一個新系統相應的地址。

2. URL美化

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

原則12 移除重復的腳本

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

原則13 小心處理ETag

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

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

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

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

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

原則14 在Ajax中利用HTTP Cache

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

網頁題目：高性能網站建設原則
網頁路徑：http://www.js-pz168.com/news35/162285.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯