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

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

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

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

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

分享標(biāo)題：成都網(wǎng)站制作：網(wǎng)站優(yōu)化中如何提高網(wǎng)絡(luò)性能？
URL地址：http://www.bm7419.com/news38/241838.html

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

廣告

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