如何提升網(wǎng)頁加載速度，提高用戶體驗

優(yōu)秀的網(wǎng)站加載速度，就是網(wǎng)頁的打開速度，可以說網(wǎng)站打開速度越快，對于用戶體驗越好，對于搜索引擎來說，抓取也就越快。今天長春SEO優(yōu)化網(wǎng)站長就和大家說說如何提升，網(wǎng)頁的加載速度。

性能黃金法則：

只有10%~20%的最終用戶響應(yīng)時間花在了下載HTML文檔上。其余的80%~90%時間花在了下載頁面中的所有組件上。

提升加載速度的方式：

一、減少HTTP請求

(1).合并腳本和樣式表

將多個樣式表或者腳本文件合并到一個文件中，可以減少HTTP請求的數(shù)量從而縮短效應(yīng)時間。不過：合并所有的樣式文件或者腳本文件可能會導(dǎo)致在一個頁面加載時加載了多于自己所需要的樣式或者腳本，對于只訪問該網(wǎng)站一個頁面的人來說反而增加了下載量，所以大家應(yīng)該自己權(quán)衡利弊。

(2).字體圖標(biāo)

(3).雪碧圖

(4).圖片地圖

知識點鏈接：www.js-pz168.com，將所有點擊提交到同一個url，同時提交用戶點擊的x、y坐標(biāo)，服務(wù)器端根據(jù)坐標(biāo)映射響應(yīng)

二、使用CDN

CDN（內(nèi)容發(fā)布網(wǎng)絡(luò)）是一組分布在多個不同地理位置的Web服務(wù)器，如果應(yīng)用程序web服務(wù)器離用戶更近，那么HTTP請求的響應(yīng)時間將縮短。

三、使用緩存Expires和Cache-Control

瀏覽器在第一次訪問頁面時加載的資源會緩存起來，第二次訪問判斷在緩存中是否已有該資源并且有沒有更新過，如果已有該資源且沒有更新過，則去緩存去取，這樣減少了下載資源的時間。原理上是通過HTTP Rquest Header中的 if-modified-since 和Response Headers中的last-modified來實現(xiàn)，HTTP請求把if-modified-sincede 時間傳給服務(wù)端，服務(wù)端把last-modified時間與之對比，如果相同，則意味著文件沒有改動，則返回304，瀏覽器則從緩存中獲取資源，無需下載。雖然這種方法減少了已緩存資源的下載時間，但是仍然發(fā)起了一次http請求。

而HTTP的Expires和Cache-Control就是來免去該資源的http請求。

Cache-Control在服務(wù)端配置文件緩存有效期（3個月，1年...），有效期內(nèi)讀緩存數(shù)據(jù)，不HTTP請求。

expires在服務(wù)端配置，添加的是該資源過期的日期，瀏覽器會根據(jù)該過期日期與客戶端時間對比，到期了再重新讀取，expires時間可能存在客戶端時間跟服務(wù)端時間不一致的問題，最好與Cache-Control結(jié)合使用。更多詳細(xì)請參考：www.js-pz168.com

四、對HTTP傳輸進(jìn)行壓縮

在HTTP請求中，accept-encoding: gzip, deflate, sdch, br是指客戶端瀏覽器（這里是我的chrome瀏覽器）支持的壓縮方式。參考Yahoo！工程師的說法，支持gzip的瀏覽器范圍最廣，使用gzip的壓縮效果最佳。客戶端不用任何配置，在服務(wù)端配置即可，服務(wù)器不同，配置方法也不盡相同。

Accept-Encoding: gzip,deflate...如果Web服務(wù)器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進(jìn)行壓縮。

代理緩存

五、樣式表放頭部

放在頭部對于實際頁面加載的時間并不能造成太大影響，但可以減少頁面首屏出現(xiàn)的時間，使頁面內(nèi)容逐步呈現(xiàn)，改善用戶體驗，防止“白屏”。

我們總是希望頁面能夠盡快顯示內(nèi)容，為用戶提供可視化的回饋，這對網(wǎng)速慢的用戶來說是很重要的。

將樣式表放在文檔底部會阻止瀏覽器中的內(nèi)容逐步出現(xiàn)。為了避免當(dāng)樣式變化時重繪頁面元素，瀏覽器會阻塞內(nèi)容逐步呈現(xiàn)，造成“白屏”。這源自瀏覽器的行為：如果樣式表仍在加載，構(gòu)建呈現(xiàn)樹就是一種浪費，因為所有樣式表加載解析完畢之前不需繪制任何東西

六、腳本放底部

與樣式表相同，腳本放在底部對于實際頁面加載的時間并不能造成太大影響，但是這會減少頁面首屏出現(xiàn)的時間，使頁面內(nèi)容逐步呈現(xiàn)。

js的下載和執(zhí)行會阻塞Dom樹的構(gòu)建（嚴(yán)謹(jǐn)?shù)卣f是中斷了Dom樹的更新），所以script標(biāo)簽放在首屏范圍內(nèi)的HTML代碼段里會截斷首屏的內(nèi)容。

因為腳本可能修改頁面內(nèi)容，因此瀏覽器會等待；另外，也是為了保證腳本能夠按照正確的順序執(zhí)行，因為后面的腳本可能與前面的腳本存在依賴關(guān)系，不按照順序執(zhí)行可能會產(chǎn)生錯誤。

七、合理使用外部js/css

內(nèi)聯(lián)腳本或者樣式可以減少HTTP請求，按理來說可以提高頁面加載的速度。然而在實際情況中，當(dāng)腳本或者樣式是從外部引入的文件，瀏覽器就有可能緩存它們，從而在以后加載的時候能夠直接使用緩存，而HTML文檔的大小減小，從而提高加載速度。

這時候就要分情況來看，如果一個用戶每個月只訪問你的網(wǎng)站一兩次，那么這種情況下內(nèi)聯(lián)將會更好。而如果該用戶能夠產(chǎn)生很多頁面瀏覽量，那么緩存的樣式和腳本將會極大減少下載的時間，提交頁面加載速度。

八、減少DNS查找

當(dāng)我們在瀏覽器的地址欄輸入網(wǎng)址（譬如： www.js-pz168.com），然后回車，回車這一瞬間到看到頁面到底發(fā)生了什么呢？

域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請求 --> 服務(wù)器響應(yīng)http請求，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，并請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶

域名解析是頁面加載的第一步，那么域名是如何解析的呢？見文章：（后面補(bǔ)上，or自行百度）

DNS也是開銷，通常瀏覽器查找一個給定域名的IP地址要花費20~120毫秒，在完成域名解析之前，瀏覽器不能從服務(wù)器加載到任何東西。那么如何減少域名解析時間，加快頁面加載速度呢？

當(dāng)客戶端DNS緩存（瀏覽器和操作系統(tǒng)）緩存為空時，DNS查找的數(shù)量與要加載的Web頁面中唯一主機(jī)名的數(shù)量相同，包括頁面URL、腳本、樣式表、圖片、Flash對象等的主機(jī)名。減少主機(jī)名的數(shù)量就可以減少DNS查找的數(shù)量。

而減少唯一主機(jī)名的數(shù)量會潛在減少頁面中并行下載的數(shù)量，這樣減少主機(jī)名和并行下載的方案會產(chǎn)生矛盾，需要大家自己權(quán)衡。建議將組件放到至少兩個但不多于4個主機(jī)名下，減少DNS查找的同時也允許高度并行下載。

九、懶加載

對于一些圖片，費首屏的，后面scroll到的時候再加載

十、按需加載

模塊化開發(fā)，只需加載用到的資源

十一、預(yù)加載

新聞名稱：如何提升網(wǎng)頁加載速度，提高用戶體驗
鏈接地址：http://www.js-pz168.com/article36/dghejsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、云服務(wù)器、外貿(mào)建站

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

猜你還喜歡下面的內(nèi)容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

如何提升網(wǎng)頁加載速度，提高用戶體驗