系統架構摘要 (Executive Summary)
本報告統整了「網速競技場 (Speed Insights)」的專案開發與優化脈絡。我們將探討如何利用現代瀏覽器的 HTML5 Fetch API，在不依賴笨重後端套件的情況下，於前端沙盒內精準計算下載速率 (Mbps)、延遲 (Ping) 與網路抖動 (Jitter)。同時解析如何透過 Google Apps Script (GAS) 建立輕量級資料流，打造出具備極高回訪率的「全網 ISP 戰力排行榜」。
「我的網路到底有沒有被降速？」這是每個現代人都曾有過的靈魂拷問。市面上的測速網站雖然多，但往往充斥著滿滿的蓋版廣告，或是需要載入龐大且吃資源的第三方測速引擎。
Gemify 「網速競技場」的設計初心，是打造一款極致輕量、無廣告干擾、且演算法完全透明的連線品質診斷儀表板，並透過群眾外包 (Crowdsourcing) 的力量，還原各大電信商 (ISP) 最真實的連線品質。
一、 揚棄笨重套件：純前端 Fetch API 測速引擎
本章核心：數學與網路封包的優雅結合
分析為何傳統測速需要依靠 WebSocket 或 Flash，以及我們如何利用 Performance.now() 結合資源串流計算，達成毫秒級精度的純 JS 測速引擎。
早期網頁測速高度依賴 Flash 外掛，後來演進為建立 WebSocket 雙向通道。但在微型 Web App 的架構中，維護長連線伺服器的成本過高。
架構師決策：「最純粹的測速，就是計算一段已知大小的封包，下載它到底花了多少毫秒。」
我們在前端直接採用現代瀏覽器原生支援的 Fetch API。系統會從 CDN 節點請求一個固定大小的靜態檔案 (Dummy Payload)，並使用精度高達亞毫秒級的 performance.now() 記錄請求開始與結束的時間差。
透過公式 (位元組 × 8 / 1024 / 1024) / (經過毫秒 / 1000)，我們在客戶端沙盒內即可瞬間推算出精準的 Mbps (每秒百萬位元)，徹底達成伺服器零負擔的完美境界。
圖 1.1：前端 JS 沙盒毫秒級運算的網速診斷儀表板
async function measurePing() {
const url = "https://cloudflare-dns.com/dns-query";
let times = [];
for (let i = 0; i < 5; i++) {
const start = performance.now();
try { await fetch(url, { method: 'GET', mode: 'no-cors', cache: 'no-store' }); } catch(e) {}
times.push(performance.now() - start);
}
const ping = times.reduce((a, b) => a + b) / times.length;
let jitterSum = 0;
for (let i = 1; i < times.length; i++) jitterSum += Math.abs(times[i] - times[i-1]);
const jitter = jitterSum / (times.length - 1) || 1;
return { ping, jitter };
}
二、 遊戲玩家的靈魂：精算 Ping 值與 Jitter 抖動率
本章核心：超越單純速度的網路品質檢測
探討如何連續發送微型封包，運用統計學中的「變異數」概念，精準計算出決定遊戲與視訊品質的關鍵指標——網路抖動率 (Jitter)。
對於電競玩家或遠端視訊會議者來說，穩定度遠比極速更重要。如果下載速度高達 500 Mbps，但 Ping 值忽高忽低，依然會面臨嚴重的瞬移與卡頓 (Lag)。
為了量化這種「不穩定感」，我們在底層實作了 Jitter (網路抖動率) 演算法。
系統會在極短的時間內連續發送 10 次極小的 Header 請求，並記錄每一次往返時間 (Round Trip Time, RTT)。接著，計算相鄰兩次 Ping 值的絕對時間差，最後取其平均值。這個精密的陣列運算完全在用戶的瀏覽器內執行， 這與我們在 飆股基因探測器 中利用 JS 陣列毫秒精算技術線圖的思維如出一轍，將繁重運算優雅地下放至前端。
圖 2.1：連續微型封包回波測試與 Jitter 變異數分析
三、 流量與社群閉環：全網 ISP 戰力排行榜
隱私去識別化寫入
測速完成後，系統會透過免費的 IP-API 抓取使用者的電信商名稱（如：中華電信、台灣大哥大），並將「去識別化」的測速成績透過 GAS 寫入 Google Sheets，成為排行榜的珍貴養分。
高回訪率的數據護城河
首頁即時渲染「全台各電信商平均網速排行榜」。這種「比拼與對照」的社群心理學，促使使用者為了看自己有沒有「拖後腿」而反覆回訪，極大地拉升了工具頁面的停留時間與廣告曝光。
四、 結語：回歸純粹的網路工具
「網速競技場」成功證明了：最實用的工具，往往源自於最純粹的數學運算與瀏覽器底層 API。
透過揚棄依賴外部測速套件，我們利用 Fetch 串流計算、微型封包往返時間陣列，以及輕量級的 GAS 資料庫，打造了一款兼具極致效能、零維運成本與社群黏著度的微型 SaaS 產品。這正是現代前端工程在資源邊界下，所能展現出的極簡暴力美學。