.. หัวเรื่อง: HTTP/2 กับ HTTP/3 Latency Modeler
.. บุ้ง: http2-http3-latency-modeler
.. วันที่: 27-03-2026 12:00:00 UTC
.. แท็ก: ระบบเครือข่าย, http2, http3, Quic, ประสิทธิภาพ, เครื่องคิดเลข, เครื่องมือ
..หมวดหมู่ : เครื่องคิดเลข
.. ลิงค์:
.. คำอธิบาย: สร้างแบบจำลองผลกระทบของ RTT การบล็อกส่วนหัวของบรรทัด และการสูญเสียแพ็กเก็ตต่อปริมาณงาน HTTP/2 เทียบกับ HTTP/3 และเวลาในการโหลดหน้าเว็บ ค้นหาจุดครอสโอเวอร์ที่ HTTP/3 ชนะ
.. ประเภท: ข้อความ
<style>
/* ── CANONICAL DESIGN SYSTEM ──────────────────────────────────────────────── */
.calc-container { max-width: 900px; margin: 20px auto; padding: 20px; }
.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; }
.calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; }
.calc-header p  { margin: 10px 0; opacity: 0.95; font-size: 15px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { margin-bottom: 8px; font-weight: 600; color: rgba(255,255,255,0.95); font-size: 14px; }
.input-group input, .input-group select, .input-group textarea { padding: 14px; font-size: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
.button-container { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calc-button { padding: 14px 35px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.calc-button:hover  { background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.calc-button:active { background: #3d8b40; transform: translateY(0); }
.result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
.section-content { padding: 20px; background: #fafafa; }
.info-box { margin-top: 15px; padding: 15px; background: #e3f2fd; color: #1565c0; border-radius: 8px; border-left: 4px solid #2196F3; font-size: 14px; line-height: 1.6; }
table { width: 100%; border-collapse: collapse; }
th { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 10px; text-align: left; }
td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; }
tr:hover td { background: #f8fff8; }
@media (max-width: 768px) { .input-grid { grid-template-columns: 1fr; } .calc-header h2 { font-size: 22px; } .calc-container { padding: 10px; } }
/* ── Page-specific ──────────────────────────────────────────────────────── */
.proto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.proto-card { background: white; border-radius: 8px; border: 2px solid #4CAF50; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.proto-card h4 { margin-top: 0; color: #2d6a2d; }
.proto-label { font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.proto-value { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #4CAF50; }
.metric { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.metric:last-child { border: none; }
.metric-val { font-weight: bold; }
.winner-banner { text-align: center; padding: 14px; border-radius: 8px; font-size: 1.1em; font-weight: bold; margin-top: 12px; }
.winner-h2 { background: #e3f2fd; color: #1565c0; border: 2px solid #1976d2; }
.winner-h3 { background: #e8f5e9; color: #2e7d32; border: 2px solid #388e3c; }
.winner-tie { background: #fff8e0; color: #856404; border: 2px solid #f0a500; }
.loss-bar { flex: 1; height: 18px; border-radius: 4px; position: relative; }
.loss-bar-fill { height: 100%; border-radius: 4px; }
.h2bar { background: #1976d2; }
.h3bar { background: #388e3c; }
.loss-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 13px; }
@media (max-width: 600px) { .proto-grid { grid-template-columns: 1fr; } }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>HTTP/2 กับ HTTP/3 Latency Modeler</h2>
<p>โมเดล RTT การบล็อกส่วนหัวของบรรทัด และเอฟเฟกต์การสูญเสียแพ็กเก็ตต่อปริมาณงาน TCP และ QUIC และเวลาในการโหลดเพจ</p>
<div class="input-grid">
<div class="input-group">
<label>RTT (มิลลิวินาที)</label>
<input id="rttMs" max="2000" min="1" type="number" value="80"/>
</div>
<div class="input-group">
<label>อัตราการสูญเสียแพ็คเก็ต (%)</label>
<input id="lossRate" max="50" min="0" step="0.1" type="number" value="1"/>
</div>
<div class="input-group">
<label>แบนด์วิธ (Mbps)</label>
<input id="bwMbps" max="10000" min="0.1" step="any" type="number" value="10"/>
</div>
<div class="input-group">
<label>จำนวนสตรีม HTTP</label>
<input id="streams" max="100" min="1" type="number" value="6"/>
</div>
<div class="input-group">
<label>ขนาดหน้า (KB)</label>
<input id="pageKb" max="100000" min="10" type="number" value="500"/>
</div>
</div>
<div class="button-container">
<button class="calc-button" onclick="model()">แบบอย่าง</button>
</div>
</div>
<div id="modelResult" style="display:none;"></div>
<div class="result-section">
<div class="section-header">อัตราการสูญเสียเทียบกับเวลาในการโหลดหน้าเว็บ</div>
<div class="section-content">
<div class="button-container">
<button class="calc-button" onclick="modelCurve()">สร้างเส้นโค้งการสูญเสีย</button>
</div>
<div id="lossCurve" style="display:none;margin-top:12px"></div>
</div>
</div>
<div class="result-section">
<div class="section-header">การอ้างอิงการเปรียบเทียบโปรโตคอล</div>
<div class="section-content">
<table>
<tr><th>คุณสมบัติ</th><th>HTTP/2 (TCP)</th><th>HTTP/3 (ด่วน)</th></tr>
<tr><td>ขนส่ง</td><td>TCP (เชื่อถือได้, สั่งซื้อ)</td><td>UDP + QUIC (เชื่อถือได้ ไม่ขึ้นกับสตรีม)</td></tr>
<tr><td>การปิดกั้นส่วนหัวของบรรทัด</td><td>HoL ระดับการขนส่งจากการสูญเสีย TCP</td><td>No HoL — แพ็กเก็ตที่หายไปจะบล็อกสตรีมเดียวเท่านั้น</td></tr>
<tr><td>การตั้งค่าการเชื่อมต่อ</td><td>1-2 RTT (TLS 1.3)</td><td>0-1 RTT (เริ่มต้นใหม่ 0-RTT)</td></tr>
<tr><td>มัลติเพล็กซ์</td><td>หลายสตรีม TCP HoL</td><td>สตรีมแบบขนานที่แท้จริง ไม่มี HoL</td></tr>
<tr><td>การกู้คืนการสูญเสีย</td><td>TCP ส่งสัญญาณซ้ำจะบล็อกสตรีมทั้งหมด</td><td>การกู้คืนต่อสตรีม ส่วนอื่นๆ ดำเนินการต่อ</td></tr>
<tr><td>ดีที่สุด</td><td>LAN / ศูนย์ข้อมูลสูญเสียต่ำ</td><td>WAN มือถือที่สูญเสียสูง / WAN ที่สูญเสีย</td></tr>
</table>
</div>
</div>
</div>
<script>
// Model TCP throughput using Mathis equation:
// throughput = (MSS/RTT) * (1/sqrt(loss))
// Effective page load time for HTTP/2:
// = handshake_rtts * RTT + (pageBytes / effective_throughput)
// + HoL penalty: when loss occurs, TCP stalls all streams

function calcH2(rttMs, lossFrac, bwBps, streams, pageBytes) {
    const mss = 1460; // bytes
    const rttS = rttMs / 1000;
    // Mathis throughput per stream
    const mathisBps = lossFrac > 0
        ? Math.min((mss / rttS) * (1 / Math.sqrt(lossFrac)), bwBps / streams)
        : bwBps / streams;
    const totalBw = mathisBps * Math.min(streams, 6); // browser typically 6 TCP connections for HTTP/2

    // Connection setup: 1-RTT TCP + 1-RTT TLS1.3
    const setupRtts = 2;
    const transferS = pageBytes / totalBw;
    // HoL blocking penalty: estimated as avg retransmit timeout * loss probability per stream
    const rtoMs = Math.max(rttMs * 1.5, 200); // RTO ~= 1.5 RTT, min 200ms
    const holPenaltyS = (lossFrac * rtoMs / 1000) * streams;
    const totalS = setupRtts * rttS + transferS + holPenaltyS;
    return { totalMs: totalS * 1000, throughputMbps: (totalBw / 1e6), setupMs: setupRtts * rttMs, transferMs: transferS * 1000, holMs: holPenaltyS * 1000 };
}

function calcH3(rttMs, lossFrac, bwBps, streams, pageBytes) {
    const mss = 1200; // QUIC uses smaller initial PMTU
    const rttS = rttMs / 1000;
    // QUIC per-stream Mathis, but no HoL blocking -- each stream recovers independently
    const mathisPerStream = lossFrac > 0
        ? Math.min((mss / rttS) * (1 / Math.sqrt(lossFrac)), bwBps / streams)
        : bwBps / streams;
    const totalBw = mathisPerStream * streams; // all streams can progress independently

    // 0-RTT resumption for repeat visitors, 1-RTT for new
    const setupRtts = 1;
    const transferS = pageBytes / totalBw;
    // No HoL -- only the one stream with the lost packet stalls briefly
    const rtoMs = Math.max(rttMs * 1.5, 200);
    const holPenaltyS = (lossFrac * rtoMs / 1000) * 1; // only 1 stream stalls
    const totalS = setupRtts * rttS + transferS + holPenaltyS;
    return { totalMs: totalS * 1000, throughputMbps: (totalBw / 1e6), setupMs: setupRtts * rttMs, transferMs: transferS * 1000, holMs: holPenaltyS * 1000 };
}

function model() {
    const rttMs = parseFloat(document.getElementById('rttMs').value);
    const lossPct = parseFloat(document.getElementById('lossRate').value);
    const bwMbps = parseFloat(document.getElementById('bwMbps').value);
    const streams = parseInt(document.getElementById('streams').value);
    const pageKb = parseFloat(document.getElementById('pageKb').value);
    const div = document.getElementById('modelResult');
    div.style.display = 'block';

    if (isNaN(rttMs) || isNaN(lossPct) || isNaN(bwMbps) || rttMs <= 0 || bwMbps <= 0) {
        div.innerHTML = '<strong style="color:red">Invalid input.</strong>';
        return;
    }

    const lossFrac = lossPct / 100;
    const bwBps = bwMbps * 1e6;
    const pageBytes = pageKb * 1024;

    const h2 = calcH2(rttMs, lossFrac, bwBps, streams, pageBytes);
    const h3 = calcH3(rttMs, lossFrac, bwBps, streams, pageBytes);
    const winner = h2.totalMs < h3.totalMs * 0.95 ? 'h2'
        : h3.totalMs < h2.totalMs * 0.95 ? 'h3' : 'tie';

    const fmt = n => n < 1000 ? `${Math.round(n)} ms` : `${(n/1000).toFixed(2)} s`;

    div.innerHTML = `<div class="result-section">
        <div class="section-header">Latency Model Results</div>
        <div class="section-content">
            <div class="proto-grid">
                <div class="proto-card">
                    <h4>HTTP/2 (TCP)</h4>
                    <div class="metric"><span>Total page load</span><span class="metric-val">${fmt(h2.totalMs)}</span></div>
                    <div class="metric"><span>Effective throughput</span><span class="metric-val">${h2.throughputMbps.toFixed(2)} Mbps</span></div>
                    <div class="metric"><span>Handshake overhead</span><span class="metric-val">${fmt(h2.setupMs)}</span></div>
                    <div class="metric"><span>Transfer time</span><span class="metric-val">${fmt(h2.transferMs)}</span></div>
                    <div class="metric"><span>HoL blocking penalty</span><span class="metric-val">${fmt(h2.holMs)}</span></div>
                </div>
                <div class="proto-card">
                    <h4>HTTP/3 (QUIC)</h4>
                    <div class="metric"><span>Total page load</span><span class="metric-val">${fmt(h3.totalMs)}</span></div>
                    <div class="metric"><span>Effective throughput</span><span class="metric-val">${h3.throughputMbps.toFixed(2)} Mbps</span></div>
                    <div class="metric"><span>Handshake overhead</span><span class="metric-val">${fmt(h3.setupMs)}</span></div>
                    <div class="metric"><span>Transfer time</span><span class="metric-val">${fmt(h3.transferMs)}</span></div>
                    <div class="metric"><span>HoL blocking penalty</span><span class="metric-val">${fmt(h3.holMs)}</span></div>
                </div>
            </div>
            <div class="winner-banner winner-${winner}">
                ${winner === 'h2' ? 'HTTP/2 is faster by ' + fmt(h3.totalMs - h2.totalMs) + ' in this scenario'
                : winner === 'h3' ? 'HTTP/3 is faster by ' + fmt(h2.totalMs - h3.totalMs) + ' in this scenario'
                : 'Within 5% -- effectively a tie in this scenario'}
            </div>
            <div class="info-box" style="margin-top:15px">
                Model uses Mathis equation for TCP throughput. HoL blocking penalty: HTTP/2 estimates RTO × loss × streams; HTTP/3 only 1 stream stalls. Actual results vary by congestion algorithm, QUIC implementation, and network conditions.
            </div>
        </div>
    </div>`;
}

function modelCurve() {
    const rttMs = parseFloat(document.getElementById('rttMs').value) || 80;
    const bwMbps = parseFloat(document.getElementById('bwMbps').value) || 10;
    const streams = parseInt(document.getElementById('streams').value) || 6;
    const pageKb = parseFloat(document.getElementById('pageKb').value) || 500;
    const bwBps = bwMbps * 1e6;
    const pageBytes = pageKb * 1024;

    const lossPoints = [0, 0.1, 0.5, 1, 2, 3, 5, 10];
    const div = document.getElementById('lossCurve');
    div.style.display = 'block';

    const maxMs = Math.max(...lossPoints.map(l => {
        const h2 = calcH2(rttMs, l/100, bwBps, streams, pageBytes);
        const h3 = calcH3(rttMs, l/100, bwBps, streams, pageBytes);
        return Math.max(h2.totalMs, h3.totalMs);
    }));

    const rows = lossPoints.map(l => {
        const h2 = calcH2(rttMs, l/100, bwBps, streams, pageBytes);
        const h3 = calcH3(rttMs, l/100, bwBps, streams, pageBytes);
        const h2w = Math.round((h2.totalMs / maxMs) * 100);
        const h3w = Math.round((h3.totalMs / maxMs) * 100);
        const fmt = n => n < 1000 ? `${Math.round(n)}ms` : `${(n/1000).toFixed(1)}s`;
        const winnerLbl = h2.totalMs < h3.totalMs * 0.95 ? '< H2' : h3.totalMs < h2.totalMs * 0.95 ? 'H3 >' : '~tie';
        return `<div class="loss-row">
            <span style="width:50px;font-size:12px">${l}%</span>
            <div class="loss-bar"><div class="loss-bar-fill h2bar" style="width:${h2w}%"></div></div>
            <span style="width:55px;font-size:11px;text-align:center">${fmt(h2.totalMs)}</span>
            <div class="loss-bar"><div class="loss-bar-fill h3bar" style="width:${h3w}%"></div></div>
            <span style="width:55px;font-size:11px;text-align:center">${fmt(h3.totalMs)}</span>
            <span style="width:40px;font-size:11px;color:#555">${winnerLbl}</span>
        </div>`;
    }).join('');

    div.innerHTML = `<div style="display:flex;gap:8px;font-size:12px;margin-bottom:8px;align-items:center;font-weight:bold">
        <span style="width:50px">Loss %</span>
        <span style="flex:1;color:#1976d2">HTTP/2</span>
        <span style="width:55px"></span>
        <span style="flex:1;color:#388e3c">HTTP/3</span>
        <span style="width:40px"></span>
    </div>${rows}`;
}
</script>