網(wǎng)站設(shè)計(jì)制作中如何提高網(wǎng)站的訪問(wèn)速度？專(zhuān)業(yè)知識(shí)介紹
發(fā)布日期：2021-03-14 訪問(wèn)次數(shù)：
（1）減少HTTP請(qǐng)求數(shù)量。
80%的用戶響應(yīng)時(shí)間被花費(fèi)在下載頁(yè)面中的圖片、樣式表、腳本以及Flash這些組件。減少這些組件的數(shù)量就可以減少展示頁(yè)面所需的請(qǐng)求數(shù)，而這是提高網(wǎng)頁(yè)響應(yīng)速度的關(guān)鍵。
（2）使用內(nèi)容分布式網(wǎng)絡(luò)。
用戶連接網(wǎng)站服務(wù)器的速度影響響應(yīng)的快慢。把你的網(wǎng)站布置在多臺(tái)分布于不同地域的服務(wù)器上，會(huì)讓用戶覺(jué)得你的頁(yè)面加載速度更快。
（3）給頭部添加一個(gè)失效期或者Cache-Control。
給頭部添加far future失效期，可以增加瀏覽器緩存的組件數(shù)量并重復(fù)用于隨后的頁(yè)面瀏覽而不需要通過(guò)用戶的網(wǎng)絡(luò)發(fā)送哪怕一個(gè)字節(jié)。
（4）Gzip壓縮組件。
壓縮文件會(huì)減少HTTP響應(yīng)的大小從而減少響應(yīng)的時(shí)間。
（5）把樣式表放在前面。
（5）把樣式表放在前面。
把樣式表挪到文檔的頭部可以讓頁(yè)面的加載顯得更快。因?yàn)榘褬邮奖矸旁陬^部可以讓頁(yè)面逐步呈現(xiàn)。
（6）把腳本放在最后。
腳本可能會(huì)堵塞并發(fā)的下載。通常的建議是使用延遲腳本。如果一個(gè)腳本可以被延遲，那么它也可以被放在頁(yè)面的底部。這會(huì)讓你的頁(yè)面加載得更快。
（7）不使用CSS表達(dá)式。
CSS表達(dá)式的問(wèn)題是它比大多數(shù)人期望的執(zhí)行次數(shù)更頻繁。
（8）使用外部的JavaScript和CSS.
在實(shí)際應(yīng)用中使用外部的文件往往產(chǎn)生更快的頁(yè)面，因?yàn)闉g覽器會(huì)緩存JavaScript和CSS文件。
（9）減少DNS的查詢。
減少不同域名的數(shù)量可能減少頁(yè)面并行的下載數(shù)量。
（10）縮小JavaScript和CSS。
（10）縮小JavaScript和CSS。
縮小是指從代碼中刪除不必要的字母，減少文件體積從而提高加載速度。
（11）避免重定向。
重定向降低了用戶體驗(yàn)。在用戶和HTML文檔之間插入的重定向延誤了頁(yè)面的呈現(xiàn)和組件下載，因?yàn)樗鼈兌疾豢赡茉讷@得HTML文檔之前開(kāi)始。
（12）移除重復(fù)的腳本。
在同一個(gè)頁(yè)面中包含兩個(gè)相同的腳本文件降低了性能。當(dāng)腳本被重復(fù)包含時(shí)，由于增加了不必要的HTTP請(qǐng)求和JavaScript的執(zhí)行，影響了性能。
（13）設(shè)定ETags。
ETag的問(wèn)題是它們往往在網(wǎng)站的一個(gè)服務(wù)器中被設(shè)為唯一的，當(dāng)瀏覽器從一個(gè)服務(wù)器得到了組件并在稍后試圖到另一個(gè)服務(wù)器驗(yàn)證時(shí)，ETag會(huì)不匹配，而這在使用多個(gè)服務(wù)器來(lái)處理請(qǐng)求的網(wǎng)站中是很常見(jiàn)的。
（14）讓Ajax可以緩存。
Ajax的好處之一是它能給用戶提供瞬間的響應(yīng)，因?yàn)樗鼜姆?wù)端異步請(qǐng)求數(shù)據(jù)。為了提高性能，優(yōu)化Ajax響應(yīng)很重要。提高Ajax性能最重要的方式是使響應(yīng)緩存。
（15）更早地刷新緩沖區(qū)。
當(dāng)用戶請(qǐng)求一個(gè)頁(yè)面，服務(wù)端會(huì)花費(fèi)200至500毫秒的時(shí)間組合HTML頁(yè)面。
（16）在Ajax請(qǐng)求中使用GET方法。
（17）后加載組件。
當(dāng)你確保頁(yè)面工作正常時(shí)，通過(guò)延后加載的那些更花哨的腳本比如拖放和動(dòng)畫(huà)，可以來(lái)增強(qiáng)你的頁(yè)面。
（18）預(yù)先加載組件。
預(yù)先加載組件讓你可以利用瀏覽器的空閑時(shí)間來(lái)加載之后需要的組件（比如圖片，樣式表和腳本)。這樣當(dāng)用戶瀏覽下一個(gè)頁(yè)面的時(shí)候，大部分組件都已經(jīng)在緩存里了而頁(yè)面會(huì)加載得更快。
（19）減小DOM元素的數(shù)量。
復(fù)雜的頁(yè)面意味著更多的字節(jié)需要被下載。你在頁(yè)面中添加一個(gè)事件，讓它在500或者5000個(gè)DOM元素中循環(huán)，它們的效率是不同的。
（20）分域部署部件。
將部件分割能使你獲得最大的并行下載效率。但你同時(shí)需要注意不使用多于2~4個(gè)域名，以避免DNS查詢導(dǎo)致的問(wèn)題。
（21）減少lframe的數(shù)量。
lframes能夠使HTML文檔被插入進(jìn)父級(jí)文檔中。
（22）避免404錯(cuò)誤。
（22）避免404錯(cuò)誤。
一個(gè)獲得沒(méi)用的404響應(yīng)的HTTP請(qǐng)求對(duì)于寶貴的HTTP請(qǐng)求資源來(lái)說(shuō)是完全不必要的，而且這樣還會(huì)減慢用戶的體驗(yàn)。
（23）減少Cookie的大小。
有多種理由讓我們應(yīng)用HTTP Cookie，比如身份驗(yàn)證，或者個(gè)性化設(shè)置。Cookie中的信息在服務(wù)端和瀏覽器間被放在HTTP頭中交換。盡量減少Cookie的體積對(duì)減少用戶獲得響應(yīng)的時(shí)間十分重要。
（24）為部件使用沒(méi)有Cookie的域名。
當(dāng)瀏覽器請(qǐng)求一個(gè)靜態(tài)圖片并一同發(fā)送Cookie時(shí)，服務(wù)器并不需要這些Cookie。這樣只是毫無(wú)益處地創(chuàng)建了多余的網(wǎng)絡(luò)流量。應(yīng)當(dāng)保證靜態(tài)的部件在請(qǐng)求時(shí)沒(méi)有攜帶Cookie，所以需要把你的靜態(tài)部件放在另一個(gè)子域名下。
（25）減少DOM的讀取。
利用Javascript讀取DOM元素很慢，所以為了獲得響應(yīng)更快的頁(yè)面，你應(yīng)該:·緩存被讀取的元素引用。
●脫機(jī)更新節(jié)點(diǎn)，然后把它們加回到樹(shù)結(jié)構(gòu)中。·避免利用Javascript定位布局。
（26）開(kāi)發(fā)靈巧的事件處理程序。
如果有太多的事件處理邏輯部署在DOM樹(shù)的不同元素上，它們的頻繁執(zhí)行會(huì)拖慢頁(yè)面的響應(yīng)速度。
（27）選擇而不是@。
前面提到把CSS應(yīng)當(dāng)放在最頂端來(lái)提供預(yù)顯。在lIE中，放在頁(yè)面底部的@import和效果是一樣的，所以最好不要用它。
（28）不使用過(guò)濾器。
IE專(zhuān)有的AlphalmageLoader過(guò)濾器是為了解決半透明真色PNG圖片在IE7之前的版本中顯示的問(wèn)題。這個(gè)過(guò)濾器會(huì)在圖片下載時(shí)堵塞住展示。而且它會(huì)消耗內(nèi)存并影響每個(gè)元素而不僅僅是每張圖片，所以這個(gè)過(guò)濾器的問(wèn)題很多。
（29）優(yōu)化圖片。
（30）優(yōu)化CSS精靈。
橫向布局Sprite中的圖片往往比縱向布局會(huì)減少文件大小。
（31）不要在HTML中縮放圖片。
不要使用大小超過(guò)需要的圖片，即使你能夠在HTML中設(shè)置它的屬性。
（32）使用小的可緩存的Favicon.ico。
Favicon.icon是放在服務(wù)器根目錄的一個(gè)圖片，它麻煩卻不得不處理，因?yàn)榧词鼓悴魂P(guān)心，瀏覽器依然會(huì)請(qǐng)求這張圖片，所以最好不要提供一個(gè)404的錯(cuò)誤。而且由于它是在同一服務(wù)器下的，Cookie也會(huì)隨著每次請(qǐng)求一并發(fā)送。這張圖片同樣干擾下載隊(duì)列，比如在IE中，當(dāng)你在onload事件中請(qǐng)求額外的組件時(shí)，F(xiàn)avicon會(huì)在這些額外組件之前下載。
（33）保證組件大小小于25K。
（34）把組件打包進(jìn)多部分文檔中。
掃描添加好友
免費(fèi)提供：網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣解決方案
已幫助
人
人
您的鼓勵(lì)是站長(zhǎng)的最大動(dòng)力
標(biāo)簽：網(wǎng)站設(shè)計(jì)
轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.szyfw.cn/news/1842.html
1 次
11 次
