如何提升頁面的訪問速度

網(wǎng)頁打開的速度對于網(wǎng)站的體驗是非常重要的，每個訪客都希望能夠秒打開網(wǎng)頁，那么怎么才能提升網(wǎng)頁的訪問速度下面小編來告訴大家?guī)讉€實際方法。

一. 減少對服務器的文件請求

HTTP請求屬于“請求”-“應答”形式的短連接，每一個獨立的資源我們都會向服務器發(fā)去一份get請求，再等服務端將我們需要的文件傳回來。每一次資源的請求都實實在在地耗費了一次“連接-等待-接收”的時間(當然將http請求設(shè)為keep-alive長連接狀態(tài)可以減少“連接”的次數(shù)和時間)，如果我們能有效減少對服務器文件的請求次數(shù)，便意味著我們可以從這塊省下一些頁面等待時間，順便減少服務器的負擔。

解決方案：

1. 使用css sprite技術(shù)合并多個圖片為單個圖片文件，實際使用時通過background-po sition來定位背景位置，推薦閱讀：CSS Sprites:圖片整合技術(shù);

2. 合并多個css樣式文件為單個樣式文件，合并多個腳本為單個腳本。

3.將小塊的css、js代碼段直接寫在頁面上，而非在頁面引入獨立的樣式/腳本文件。相信有的朋友看慣了“保持結(jié)構(gòu) (標記)、表現(xiàn) (樣式)、行為 (腳本)三者分離”的規(guī)范，對此觀點可能有些意見。只能說規(guī)范不是教條，適合自己的才是硬道理。直接把小段的、復用率低的樣式/腳本直接寫于頁面上帶來的利還是大于弊的(弊可能也就是增大了頁面代碼量、不那么好維護了點)。

二. 減少文件大小

文件太大(特別是圖片)導致加載時間較長，往往都是影響頁面加載體驗的頭號大敵，要盡可能減少請求文件的大?。?/p>

1. 壓縮樣式/腳本文件，可以使用gulp或者grunt來實現(xiàn)，它們均能很好地減少css/js文件的大小(對于js還能起到混淆變量、函數(shù)名的作用);推薦!在線js、CSS、網(wǎng)頁壓縮工具

2. 針對性選擇圖片格式，在無透明背景需求下，對于顏色較單一、無色彩漸變的圖片僅使用gif格式，對于jpg圖片也可按照其清晰度要求，在導出jpg的時候選擇對應的“品質(zhì)”進行優(yōu)化，還有背景單一的圖片嘗試使用PNG格式能大大減小圖片大小;

三. 延遲請求、異步加載腳本

在各主流瀏覽器下，我們的腳本文件跟隨其它資源文件一樣都是異步下載的，但這里存在一個問題——比如FireFox下載好腳本后的一小段時間內(nèi)會有“執(zhí)行阻塞”的情況發(fā)生，也就是說瀏覽器下載好腳本后執(zhí)行它的這段時間里，瀏覽器的其它行為被阻塞，導致頁面上的其它資源都是無法被請求和下載的。

如果你頁面里存在js代碼執(zhí)行時間過長的情況，那么用戶就會明顯感覺到頁面的延遲。解決這個問題有一個簡單的方法——將腳本請求標簽放置到結(jié)束標簽前，使得頁面上的腳本成為最后被請求的資源，自然也不會阻塞其它頁面資源的請求事件了。

四. 延遲請求首屏外的文件

先解釋下，“首屏”指的是頁面初始化時候的頁面內(nèi)容顯示區(qū)域，也就是頁面一加載，用戶就首先看到的區(qū)域。

比如像京東啊淘寶啊，對于需要滾動頁面才能看到的圖片內(nèi)容，都做了類似lazyload的處理，這些無非都是走了代理模式的理念，但的確給用戶一個錯覺——這個頁面更快地加載完了，因為我很快就看到了屏幕上的內(nèi)容(即使我還沒下拉滾動條，而頁面后方的文件其實還沒真正加載呢)。

網(wǎng)頁名稱：如何提升頁面的訪問速度
網(wǎng)頁URL：http://www.bm7419.com/news41/121391.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、服務器托管、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、網(wǎng)站導航、用戶體驗

廣告

聲明：本網(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)