成都網(wǎng)站制作：網(wǎng)站優(yōu)化中如何提高網(wǎng)絡性能？

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

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

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

當前題目：成都網(wǎng)站制作：網(wǎng)站優(yōu)化中如何提高網(wǎng)絡性能？
本文路徑：http://www.rwnh.cn/news/241838.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站制作等

廣告

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