成都網站制作：網站優化中如何提高網絡性能？

為何提高網絡效果？
Web性能黃金指南：只有10？o 20%的最終用戶響應時間用于下載html文檔，剩下的90%花費在下載頁面組件上。
根據著名的“2-5-8”原則，網絡性能對用戶體驗有重要影響：
當用戶在2秒內得到響應時，系統會感覺非常快。當用戶在2-5秒內收到響應時，系統將感受到響應速度。
當用戶在5-8秒內得到響應時，系統會感覺非常慢，但這是可以接受的。
當用戶在8秒后沒有得到響應時，即使系統掛了，系統也感覺很糟糕;要么打開競爭對手的網站，要么重新發起第二個請求。
一切都需要研究，通過科學研究，我們可以找到事物發展的規律。我要感謝雅虎工程師總結了14項前端優化規則，以便我們能夠站在巨人的肩膀上。 “高性能網站建設”一書中的14個優化原則總結如下：
減少HTTP請求
頁面內部優化
啟用緩存
減少下載量
優化網絡連接
為什么減少HTTP請求可以提高Web性能？
要回答這個問題，我們需要了解當瀏覽器向服務器發送http請求以了解如何獲取數據時會發生什么：
打開一個鏈接（tcp / ip三次握手過程） - 發送請求 - 等待（網絡延遲和服務器處理時間） - 下載數據
我們來看看每個階段在百度主頁上http請求所花費的時間。上面的不同顏色代表下圖中的不同階段。
可以看出，除了圖片之外，大多數http請求事件都花費在建立連接和等待階段上。
http協議建立在TIC / IP協議之上。在TCP / IP協議中，TCP協議提供可靠的連接服務，并使用三次握手建立連接。
簡單來說，三次握手是一個身份驗證過程：
（第一次握手：主機A發送一個syn = 1的位代碼，隨機生成一個seq number = 1234567的數據包到服務器，主機B由SYN = 1知道，A請求建立連接;）
（第二次握手：收到請求后，主機B應確認在線信息并向A發送確認。
Number =（主機A的seq + 1），syn = 1，ack = 1，隨機生成一個seq = 7654321的數據包）
（第三次握手：主機A接收到它后，檢查確認號是否正確，即第一次發送的序號+ 1，以及位碼ack是否為1.如果正確，則為Host A將再次發送ack。
Number =（主機B的seq + 1），ack = 1，在主機B收到seq值并且ack = 1之后，連接成功建立。 ）
言歸正傳，這個過程也需要時間。在百度主頁上找到一個極端的例子：
等待時間通常大于內容下載的時間。這也是一個極端的例子：
由此我們可以得出結論，http請求的絕大部分時間都花在建立連接和等待時間上。優化是減少http請求。
如何提高網絡性能？
1，減少HTTP請求
通常有兩種縮小圖像的方法：css sprites，內嵌圖像和IconFont。
CSS Sprites：將多個圖像合并為一個圖像，使用css的background-position屬性將html元素的背景圖像放入sprite中
圖中所需的位置。使用這種技術的另一個優點是它減少了下載量，并且合并的圖片小于分離的圖片，因為它減少了圖片本身的開銷（顏色表，格式信息等）。 Css在實際項目中
精靈是一種身體活動，因為在開發過程中需要保持這種大局（增加和減少圖片）。張新旭的文章描述了如何管理精靈圖像作為參考（這里）。如果你需要提供大量的圖像為背景，鏈接，頁面上的導航欄，CSS
Sprites絕對是一個很好的解決方案（干凈的標簽，更少的圖像，更短的響應時間）。
內聯圖像：通過使用數據：URL模式，您可以在頁面中包含圖像，而無需任何其他請求。成都網站制作缺點是IE8以下的瀏覽器不支持這種方法，IE8的數據量有限，只能支持23kb以內的數據。對于較小的圖像，您可以直接內嵌到網頁中，但將大圖像內嵌到頁面中會導致頁面變大。使用css是明智的，使用內嵌圖像作為背景，并將其放在外部樣式表中，這意味著數據可以緩存在樣式表中。使用外部樣式表添加了一個http請求，但瀏覽器可以緩存該樣式以獲得額外收益。另一點需要注意：base64是有損壓縮。
IconFont：Icon字體，這是近年來用字體替換圖片的一種新流行技術。它可以適應任何分辨率而不會出現圖像模糊，并且它比圖像具有更小的容量和更大的靈活性（圖標可以設置為圖標大小，顏色，透明度，懸停狀態，反轉等）。IE8以上的瀏覽器支持這項技術。在使用IconFont之前，首先需要確定您選擇的字體庫是否收費。有關詳細信息，請參閱此文章：Icon Fontization
減少腳本和樣式表請求的主要原則是合并。在實際開發中，我們遵循模塊化原則將代碼分散到許多小文件中。根據軟件開發的原理，這是完全正確的，但對于在線頁面，每個文件都會生成一個http請求，嚴重影響性能。和css
像精靈一樣，將這些小文件組合到一個文件中可以減少http請求的數量并減少最終用戶的響應時間。在合并過程中我們還需要使用工具來簡化（刪除不必要的字符以減少文件大小以減少下載時間）和混淆（除了刪除不必要的字符外，它還會重寫源代碼，如函數和變量名使用短標題名稱）Javascript代碼。對于使用AMD或CMD進行模塊化開發的學生，依賴于它的其他模塊通常在合并過程中打包到文件中，模板html通常作為字符串內聯到Javascript文件中。目前最常用的前端構建工具是glup，這里有一個初步的應用文章：前端
| gulp包require.js模塊依賴
2，頁面內部優化
關心性能的工程師希望頁面盡快顯示在用戶面前。對于頁面上包含大量內容的頁面，我們希望可以逐步加載內容以為用戶提供視覺反饋。在底部放置樣式表會導致瀏覽器阻成都網站制作止逐步呈現內容。為避免在頁面更改時重新繪制頁面元素，瀏覽器會阻止頁面呈現，直到解析樣式表為止（有關詳細信息，請參閱我的博客）。因此，如果將樣式表放在頂部并且不減少資源的加載時間，則會縮短頁面的呈現時間。小米主頁犯了這樣一個錯誤：
將樣式表放在底部會阻止頁面的逐步呈現，并且將腳本文件放在頁面頂部也會阻止頁面的逐步呈現。 script元素將阻止后續內容的解析，因為腳本可用于使用document.write更改頁面。解決方案是將腳本標記放在頁面底部。這將允許逐步呈現內容，以及增加下載中的并行度。如果我們確定我們不需要document.write，我們可以將asyn屬性添加到腳本標記（dee添加到Ie）以改進并行下載。
CSS表達式是IE支持動態更改css屬性的一種方式。

我們不需要太了解。她寫道如下。一旦在產品中找到了表達式關鍵字，就必須完全消除它。

使用外部腳本和樣式，我認為有經驗的工程師也會這樣做。
刪除重復的腳本：這主要是為了避免在頁面中多次添加相同的Javascript代碼。如果在我們的開發中存在AMD和CMD等依賴管理方法，則不會發生這種情況。
3，啟用緩存
關于緩存的使用這里有兩種情況：expires / If-Modified-Since，Cache-Control / Etag;前者是HTTP1.0中的緩存方案，后者是HTTP1.1中的緩存方案，如果http報頭在同一個中出現，則后者具有更高的優先級。
If-modified-since的方式通常被稱為條件Get。文件的副本保存在瀏覽器緩存中，但您需要詢問服務器是否有此副本。 If-Modified-Since是瀏覽器向服務器發送最后修改時間，服務器比較Last-Modified頭; if If-Modified-Since

當前題目：成都網站制作：網站優化中如何提高網絡性能？
本文路徑：http://www.js-pz168.com/news/241838.html

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

廣告

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