可能標題描述的不太清楚
最近小第在研究網頁載入優化的方法
學習了基本的延遲載入,CDN,Elixir,css 切圖
以及伺服器方面的條校,快取,檔案壓縮,負載均衡,資料庫分散...
(ㄜ~不過我只有一台 VPS 這個幫助不大)
跟比較新奇的(對我來說) HTTP2,PJAX 等等...... O.O
忽然想起來
gmail 好像有個功能
就是當使用者的網路速度太慢的時候
會問你要不要轉換成基本 HTML 模式
想請問他是怎麼偵測的原理呢??
這種技術有專有名詞嗎?
能夠設計這種網站嗎?
(比如將我的部落格改成,使用者慢網速時就載入精簡版的樣式)
另外
請問大大們還知道甚麼優化網頁載入的方法嗎?
感謝~
這邊提供一個JS + Server配合的方式跟思路
Server部分需要自己去實作
利用讓使用者載入時,對伺服器已知大小圖片
(圖-1)發出下載請求(圖-2)
接著利用監聽器,監聽結束下載的時間點
依照時間差得出網速
//要把圖片換成你伺服器的圖片
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"
);
}
}
依照得出的網速,跳出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檔案
先提供思路給你,假如有問題再跟我說 :-)