前端性能監控技巧：利用 Image 對象 onerror 事件測量網頁響應時間的原理實現

核心原理

創建 new Image()，設置 src 為目標頁面 URL。瀏覽器發起請求，服務器響應頭返回時會觸發 onerror（因非圖片資源），此時刻記錄的時間即為響應時間（TTFB 近似）。

代碼還原

var tim = 0;
setInterval(function() { tim++; }, 10); // 10ms 精度計時器

var img = new Image();
var start = tim;
img.onerror = function() {
    var latency = (tim - start) * 10; // 毫秒
    console.log("響應時間: " + latency + "ms");
};
img.src = "https://www.baidu.com"; // 目標 URL

關鍵點

• Image 對象：輕量級發起 GET 請求，不污染當前頁面 DOM。
• onerror 觸發時機：服務器返回響應頭後，瀏覽器發現 Content-Type 非圖片，觸發 error 事件。此時 TCP 連接、TLS 握手、服務器處理均已完成。
• 計時器精度：代碼用 10ms 間隔累加 tim，實際可用 performance.now() 獲取高精度時間戳。

現代替代方案

// Navigation Timing API (瀏覽器原生)
var timing = performance.timing;
var ttfb = timing.responseStart - timing.requestStart; // 首字節時間
console.log("TTFB: " + ttfb + "ms");

// Resource Timing API (資源級)
var entries = performance.getEntriesByType("resource");
entries.forEach(r => console.log(r.name, r.duration));

適用場景

• 舊版瀏覽器兼容（IE6+ 支持 Image onerror）。
• 跨域頁面響應時間探測（無需 CORS）。
• 輕量級心跳檢測、CDN 節點質量評估。