iT邦幫忙

2

請問~有甚麼方法讓網頁依照使用者的網速載入呢 ??

TB 2018-03-29 16:34:194867 瀏覽

可能標題描述的不太清楚
最近小第在研究網頁載入優化的方法
學習了基本的延遲載入,CDN,Elixir,css 切圖
以及伺服器方面的條校,快取,檔案壓縮,負載均衡,資料庫分散...
(ㄜ~不過我只有一台 VPS 這個幫助不大)
跟比較新奇的(對我來說) HTTP2,PJAX 等等...... O.O

忽然想起來
gmail 好像有個功能
就是當使用者的網路速度太慢的時候
會問你要不要轉換成基本 HTML 模式
想請問他是怎麼偵測的原理呢??
這種技術有專有名詞嗎?
能夠設計這種網站嗎?
(比如將我的部落格改成,使用者慢網速時就載入精簡版的樣式)

另外
請問大大們還知道甚麼優化網頁載入的方法嗎?

感謝~

1 個回答

9
暐翰
iT邦大師 5 級 ‧ 2018-03-29 18:31:54
最佳解答

這邊提供一個JS + Server配合的方式跟思路
Server部分需要自己去實作

JS部分

先上結果圖:

原理:

利用讓使用者載入時,對伺服器已知大小圖片(圖-1)發出下載請求(圖-2)

接著利用監聽器,監聽結束下載的時間點

依照時間差得出網速

Code:

//要把圖片換成你伺服器的圖片
var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg"; 
var downloadSize = 4995374; //bytes

function InitiateSpeedDetection() {
    console.log("藉由下載圖片,偵測網速中....");
    window.setTimeout(MeasureConnectionSpeed, 1);
};    

//藉由監聽器
if (window.addEventListener) {
    window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', InitiateSpeedDetection);
}

function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime(); //紀錄下載完時間
        showResults(); //顯示網速
    }
    
    download.onerror = function (err, msg) {
        ShowProgressMessage("伺服器錯誤");
    }
    
    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;
    
    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        
        console.log(
        	"連線速度:"+
            "網速: " + speedBps + " bps"+
            "網速: " + speedKbps + " kbps"+
            "網速: " + speedMbps + " Mbps"
            
        );
    }
}

Server部分

依照得出的網速,跳出alert詢問使用者是否要開啟低速模式
假如同意在url的參數帶一個特徵參數,讓server做對應的低速版渲染View

舉例:

function showResults() {
    var duration = (endTime - startTime) / 1000;
    var bitsLoaded = downloadSize * 8;
    var speedBps = (bitsLoaded / duration).toFixed(2);
    var speedKbps = (speedBps / 1024).toFixed(2);
    var speedMbps = (speedKbps / 1024).toFixed(2);

    if(speedMbps < 1){
        alert("是否更換低速介面");
        //實作你的網頁重導,並帶GET參數
    }

    console.log(
        "連線速度:"+
        "網速: " + speedBps + " bps"+
        "網速: " + speedKbps + " kbps"+
        "網速: " + speedMbps + " Mbps"

    );
}

參考 :How to detect internet speed in Javascript?


至於為甚麼不在server做網速判斷
因為這沒有安全性問題,不需要耗費server珍貴資源來做邏輯判斷

假如連Server判斷都想省略
可以用可以在使用者使用低速模式時保存在cookie
再配合JS動態載入資源方式,載入低速資源模板
可以參考之前回答問題: 請問如何JS動態載入JS檔案

先提供思路給你,假如有問題再跟我說 :-)

haoming iT邦好手 1 級 ‧ 2018-03-30 08:38:08 檢舉

cool~

TB iT邦新手 4 級 ‧ 2018-03-30 09:31:14 檢舉

學習了~

優悠 iT邦新手 5 級 ‧ 2018-03-30 14:17:34 檢舉

用計時會比較好,畢竟有時候直接段網路,30秒無反應,提示是否切換。

當然這是另一種想法,找出自己要的吧。

我要發表回答

立即登入回答