HTTP Evolution: HTTP/1.1 to HTTP/3

// HTTP/1.1 era optimizations that browsers and developers used:
// 1. Domain sharding
const domains = ["cdn1.example.com", "cdn2.example.com", "cdn3.example.com"]

// 2. File concatenation
const megaBundle = css1 + css2 + css3 + js1 + js2 + js3

// 3. Image spriting
const spriteSheet = combineImages([icon1, icon2, icon3, icon4])

// 4. Connection pooling implementation
class HTTP11ConnectionPool {
  constructor(maxConnections = 6) {
    this.connections = new Map()
    this.maxConnections = maxConnections
  }

  async getConnection(hostname) {
    if (this.connections.has(hostname)) {
      const conn = this.connections.get(hostname)
      if (conn.isAvailable()) return conn
    }

    if (this.connections.size < this.maxConnections) {
      const conn = await this.createConnection(hostname)
      this.connections.set(hostname, conn)
      return conn
    }

    // Wait for available connection
    return this.waitForAvailableConnection()
  }
}

GET /index.html HTTP/1.1
Host: example.com
Connection: keep-alive

HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text/html

// HTTP/2 frame structure showing the problem
const http2Frame = {
  length: 16384, // 16KB frame
  type: 0x0, // DATA frame
  flags: 0x1, // END_STREAM
  streamId: 1, // Stream identifier
  payload: "...", // Actual data
}

// When a packet is lost, TCP retransmission affects all streams
class TCPRetransmission {
  handlePacketLoss(lostPacket) {
    // TCP must retransmit before delivering subsequent packets
    // This blocks ALL HTTP/2 streams, not just the affected one
    this.retransmit(lostPacket)
    this.blockDeliveryUntilRetransmit()
  }
}

// HTTP/2 stream prioritization can't overcome TCP HOL
const streamPriorities = {
  critical: { weight: 256, dependency: 0 }, // CSS, JS
  important: { weight: 128, dependency: 0 }, // Images
  normal: { weight: 64, dependency: 0 }, // Analytics
}

// Browser initiates TLS connection with ALPN extension
const tlsConnection = {
  clientHello: {
    supportedProtocols: ["h2", "http/1.1"],
    alpnExtension: true,
  },
}

// Server responds with its preferred protocol
const serverResponse = {
  serverHello: {
    selectedProtocol: "h2", // Server chooses HTTP/2
    alpnExtension: true,
  },
}

GET /index.html HTTP/1.1
Host: example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload>

# Accepts upgrade
HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: h2c

# Rejects upgrade
HTTP/1.1 200 OK
Content-Type: text/html
# ... normal HTTP/1.1 response

// QUIC stream structure and independence
class QUICStream {
  constructor(streamId, type) {
    this.streamId = streamId
    this.type = type // unidirectional or bidirectional
    this.state = "open"
    this.flowControl = new FlowControl()
  }

  sendData(data) {
    // Each stream has independent flow control and retransmission
    const packet = this.createPacket(data)
    this.sendPacket(packet)
  }

  handlePacketLoss(packet) {
    // Only this stream is affected, others continue
    this.retransmitPacket(packet)
    // Other streams remain unaffected
  }
}

// QUIC connection manages multiple independent streams
class QUICConnection {
  constructor() {
    this.streams = new Map()
    this.connectionId = this.generateConnectionId()
  }

  createStream(streamId) {
    const stream = new QUICStream(streamId)
    this.streams.set(streamId, stream)
    return stream
  }

  // Packet loss on one stream doesn't block others
  handlePacketLoss(streamId, packet) {
    const stream = this.streams.get(streamId)
    if (stream) {
      stream.handlePacketLoss(packet)
    }
    // Other streams continue processing normally
  }
}

// QUIC enables seamless connection migration
const quicConnection = {
  connectionId: "unique-cid-12345",
  migrateToNewPath: (newIP, newPort) => {
    // Connection persists across network changes
    // No re-handshake required
    return true
  },
}

// Detailed QUIC connection migration implementation
class QUICConnectionMigration {
  constructor() {
    this.connectionId = this.generateConnectionId()
    this.activePaths = new Map()
    this.preferredPath = null
  }

  // Handle network interface changes
  async migrateToNewPath(newIP, newPort) {
    const newPath = { ip: newIP, port: newPort }

    // Validate new path
    if (!this.isPathValid(newPath)) {
      throw new Error("Invalid path for migration")
    }

    // Send PATH_CHALLENGE to validate connectivity
    const challenge = await this.sendPathChallenge(newPath)

    if (challenge.successful) {
      // Update preferred path
      this.preferredPath = newPath
      this.activePaths.set(this.getPathKey(newPath), newPath)

      // Notify all streams of path change
      this.notifyStreamsOfMigration(newPath)

      return true
    }

    return false
  }

  // Streams continue operating during migration
  notifyStreamsOfMigration(newPath) {
    this.streams.forEach((stream) => {
      stream.updatePath(newPath)
      // No interruption to data flow
    })
  }
}

// Example: WiFi to cellular handover
const migrationExample = {
  scenario: "User moves from WiFi to cellular",
  steps: [
    "1. QUIC detects network interface change",
    "2. Sends PATH_CHALLENGE to new IP/port",
    "3. Validates connectivity on new path",
    "4. Updates preferred path without re-handshake",
    "5. All streams continue seamlessly",
  ],
}

// QUIC handshake implementation
class QUICHandshake {
  constructor() {
    this.state = "initial"
    this.psk = null // Pre-shared key for 0-RTT
  }

  // 1-RTT handshake for new connections
  async perform1RTTHandshake() {
    // Client sends Initial packet with key share
    const initialPacket = {
      type: "initial",
      connectionId: this.generateConnectionId(),
      token: null,
      length: 1200,
      packetNumber: 0,
      keyShare: this.generateKeyShare(),
      supportedVersions: ["0x00000001"], // QUIC v1
    }

    // Server responds with handshake packet
    const handshakePacket = {
      type: "handshake",
      connectionId: this.connectionId,
      keyShare: this.serverKeyShare,
      certificate: this.certificate,
      finished: this.calculateFinished(),
    }

    // Connection established in 1 RTT
    this.state = "connected"
    return true
  }

  // 0-RTT resumption for returning clients
  async perform0RTTHandshake() {
    if (!this.psk) {
      throw new Error("No PSK available for 0-RTT")
    }

    // Client can send data immediately
    const zeroRTTPacket = {
      type: "0-rtt",
      connectionId: this.connectionId,
      data: this.applicationData, // Can include HTTP requests
      psk: this.psk,
    }

    // Server validates PSK and processes data
    this.state = "connected"
    return true
  }
}

// Performance comparison
const handshakeComparison = {
  "TCP+TLS1.2": { rtts: 3, latency: "high" },
  "TCP+TLS1.3": { rtts: 2, latency: "medium" },
  "QUIC+TLS1.3": { rtts: 1, latency: "low" },
  "QUIC+0RTT": { rtts: 0, latency: "minimal" },
}

// CUBIC vs BBR performance characteristics
const congestionControl = {
  CUBIC: {
    type: "loss-based",
    behavior: "aggressive increase, drastic reduction on loss",
    bestFor: "stable, wired networks",
  },
  BBR: {
    type: "model-based",
    behavior: "probes network, maintains optimal pacing",
    bestFor: "lossy networks, mobile connections",
  },
}

// Pluggable congestion control implementation
class QUICCongestionControl {
  constructor(algorithm = "cubic") {
    this.algorithm = this.createAlgorithm(algorithm)
    this.cwnd = 10 // Initial congestion window
    this.ssthresh = 65535 // Slow start threshold
  }

  createAlgorithm(type) {
    switch (type) {
      case "cubic":
        return new CUBICAlgorithm()
      case "bbr":
        return new BBRAlgorithm()
      case "newreno":
        return new NewRenoAlgorithm()
      default:
        return new CUBICAlgorithm()
    }
  }

  onPacketAcked(packet) {
    this.algorithm.onAck(packet)
    this.updateWindow()
  }

  onPacketLost(packet) {
    this.algorithm.onLoss(packet)
    this.updateWindow()
  }
}

// CUBIC implementation
class CUBICAlgorithm {
  constructor() {
    this.Wmax = 0 // Maximum window size before loss
    this.K = 0 // Time to reach Wmax
    this.t = 0 // Time since last congestion event
  }

  onAck(packet) {
    this.t += packet.rtt
    const Wcubic = this.calculateCubicWindow()
    this.cwnd = Math.min(Wcubic, this.ssthresh)
  }

  onLoss(packet) {
    this.Wmax = this.cwnd
    this.K = Math.cbrt((this.Wmax * 0.3) / 0.4) // CUBIC constant
    this.t = 0
    this.cwnd = this.Wmax * 0.7 // Multiplicative decrease
  }

  calculateCubicWindow() {
    return 0.4 * Math.pow(this.t - this.K, 3) + this.Wmax
  }
}

// BBR implementation
class BBRAlgorithm {
  constructor() {
    this.bw = 0 // Estimated bottleneck bandwidth
    this.rtt = 0 // Minimum RTT
    this.btlbw = 0 // Bottleneck bandwidth
    this.rtprop = 0 // Round-trip propagation time
  }

  onAck(packet) {
    this.updateBandwidth(packet)
    this.updateRTT(packet)
    this.updateWindow()
  }

  updateBandwidth(packet) {
    const deliveryRate = packet.delivered / packet.deliveryTime
    this.bw = Math.max(this.bw, deliveryRate)
  }

  updateRTT(packet) {
    if (packet.rtt < this.rtt || this.rtt === 0) {
      this.rtt = packet.rtt
    }
  }

  updateWindow() {
    // BBR uses bandwidth-delay product
    this.cwnd = this.bw * this.rtt
  }
}

GET / HTTP/1.1
Host: example.com
Connection: Upgrade
Upgrade: h2c

example.com. 3600 IN HTTPS 1 svc1.example.net. (
  "alpn=h2,h3"
  "port=8443"
  "ipv4hint=192.0.2.1,192.0.2.2"
  "echconfig=..."
)

// TLS handshake with ALPN extension
const tlsHandshake = {
  clientHello: {
    supportedProtocols: ["h2", "http/1.1"],
    alpnExtension: true,
  },
  serverHello: {
    selectedProtocol: "h2", // Server chooses HTTP/2
    alpnExtension: true,
  },
}

GET / HTTP/1.1
Host: example.com
Connection: Upgrade
Upgrade: h2c
HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload>

# Accepts upgrade
HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: h2c

# Rejects upgrade
HTTP/1.1 200 OK
Content-Type: text/html
# ... normal HTTP/1.1 response

# HTTP/1.1 response with Alt-Svc header
HTTP/1.1 200 OK
Content-Type: text/html
Alt-Svc: h3=":443"; ma=86400

# HTTP/2 response with ALTSVC frame
HTTP/2 200 OK
ALTSVC: h3=":443"; ma=86400

// Browser protocol upgrade logic
const upgradeToHTTP3 = async (altSvcHeader) => {
  const quicConfig = parseAltSvc(altSvcHeader)

  try {
    // Attempt QUIC connection to same hostname
    const quicConnection = await establishQUIC(quicConfig.host, quicConfig.port)

    if (quicConnection.successful) {
      // Close TCP connection, use QUIC
      closeTCPConnection()
      return "HTTP/3"
    }
  } catch (error) {
    // Fallback to existing TCP connection
    console.log("QUIC connection failed, continuing with TCP")
  }

  return "HTTP/2" // or HTTP/1.1
}

// DNS resolver implementation for SVCB/HTTPS records
class DNSResolver {
  constructor() {
    this.cache = new Map()
    this.resolvers = ["8.8.8.8", "1.1.1.1"]
  }

  async resolveHTTPS(domain) {
    const cacheKey = `https:${domain}`
    if (this.cache.has(cacheKey)) {
      return this.cache.get(cacheKey)
    }

    const response = await this.queryDNS(domain, "HTTPS")
    const parsed = this.parseHTTPSRecord(response)

    this.cache.set(cacheKey, parsed)
    return parsed
  }

  parseHTTPSRecord(record) {
    return {
      priority: record.priority,
      target: record.target,
      alpn: this.parseALPN(record.alpn),
      port: record.port || 443,
      ipv4hint: record.ipv4hint?.split(","),
      ipv6hint: record.ipv6hint?.split(","),
      echconfig: record.echconfig,
    }
  }

  parseALPN(alpnString) {
    return alpnString?.split(",") || []
  }

  // Validate that advertised protocols match endpoint capabilities
  async validateEndpoint(domain, ip, protocols) {
    try {
      const connection = await this.testConnection(ip, protocols)
      return connection.successful
    } catch (error) {
      console.warn(`Endpoint validation failed for ${ip}:`, error)
      return false
    }
  }
}

// Load balancing with protocol awareness
class ProtocolAwareLoadBalancer {
  constructor() {
    this.endpoints = new Map()
    this.dnsResolver = new DNSResolver()
  }

  async selectEndpoint(domain, clientIP) {
    // Get HTTPS record
    const httpsRecord = await this.dnsResolver.resolveHTTPS(domain)

    // Filter endpoints by protocol support
    const compatibleEndpoints =
      this.endpoints.get(domain)?.filter((ep) => ep.supportsProtocols.some((p) => httpsRecord.alpn.includes(p))) || []

    // Apply load balancing logic
    return this.balanceLoad(compatibleEndpoints, clientIP)
  }

  balanceLoad(endpoints, clientIP) {
    // Geographic load balancing
    const geoEndpoint = this.findClosestEndpoint(endpoints, clientIP)

    // Health check
    if (geoEndpoint.isHealthy()) {
      return geoEndpoint
    }

    // Fallback to next best endpoint
    return this.findNextBestEndpoint(endpoints, geoEndpoint)
  }
}

// TLS handshake with ALPN extension
const tlsHandshake = {
  clientHello: {
    supportedProtocols: ["h2", "http/1.1"],
    alpnExtension: true,
  },
  serverHello: {
    selectedProtocol: "h2", // Server chooses HTTP/2
    alpnExtension: true,
  },
}

HTTP/2 200 OK
Alt-Svc: h3=":443"; ma=86400

// Browser always starts with TCP + TLS
const initialConnection = {
  transport: "TCP",
  protocol: "TLS 1.3",
  alpn: ["h2", "http/1.1"], // Note: no h3 in initial ALPN
  purpose: "discover HTTP/3 support",
}

# HTTP/1.1 response with Alt-Svc header
HTTP/1.1 200 OK
Content-Type: text/html
Alt-Svc: h3=":443"; ma=86400

# HTTP/2 response with ALTSVC frame
HTTP/2 200 OK
ALTSVC: h3=":443"; ma=86400

// Browser protocol upgrade logic
const upgradeToHTTP3 = async (altSvcHeader) => {
  const quicConfig = parseAltSvc(altSvcHeader)

  try {
    // Attempt QUIC connection to same hostname
    const quicConnection = await establishQUIC(quicConfig.host, quicConfig.port)

    if (quicConnection.successful) {
      // Close TCP connection, use QUIC
      closeTCPConnection()
      return "HTTP/3"
    }
  } catch (error) {
    // Fallback to existing TCP connection
    console.log("QUIC connection failed, continuing with TCP")
  }

  return "HTTP/2" // or HTTP/1.1
}

const performanceProfile = {
  "stable-broadband": {
    http1: "baseline",
    http2: "significant improvement",
    http3: "minimal additional benefit",
  },
  "mobile-lossy": {
    http1: "baseline",
    http2: "moderate improvement",
    http3: "dramatic improvement",
  },
  "high-latency": {
    http1: "baseline",
    http2: "good improvement",
    http3: "excellent improvement",
  },
}

// Comprehensive browser protocol selection logic
class ProtocolSelector {
  constructor() {
    this.dnsResolver = new DNSResolver()
    this.connectionManager = new ConnectionManager()
    this.protocolCache = new Map()
  }

  async selectProtocol(hostname) {
    const cacheKey = `protocol:${hostname}`
    if (this.protocolCache.has(cacheKey)) {
      return this.protocolCache.get(cacheKey)
    }

    // 1. Check DNS SVCB/HTTPS records
    const dnsInfo = await this.dnsResolver.resolveHTTPS(hostname)
    if (dnsInfo && dnsInfo.alpn.includes("h3")) {
      const quicSuccess = await this.tryQUIC(hostname, dnsInfo)
      if (quicSuccess) {
        this.protocolCache.set(cacheKey, "HTTP/3")
        return "HTTP/3"
      }
    }

    // 2. Fallback to TCP + TLS ALPN
    const tlsInfo = await this.establishTLS(hostname)
    if (tlsInfo.supportsHTTP2) {
      // 3. Check for Alt-Svc upgrade
      const altSvc = await this.checkAltSvc(hostname)
      if (altSvc && (await this.tryQUIC(hostname))) {
        this.protocolCache.set(cacheKey, "HTTP/3")
        return "HTTP/3"
      }
      this.protocolCache.set(cacheKey, "HTTP/2")
      return "HTTP/2"
    }

    this.protocolCache.set(cacheKey, "HTTP/1.1")
    return "HTTP/1.1"
  }

  async tryQUIC(hostname, dnsInfo = null) {
    const config = {
      hostname,
      port: dnsInfo?.port || 443,
      timeout: 5000,
      retries: 2,
    }

    for (let attempt = 0; attempt < config.retries; attempt++) {
      try {
        const connection = await this.connectionManager.createQUICConnection(config)
        if (connection.isEstablished()) {
          return true
        }
      } catch (error) {
        console.warn(`QUIC attempt ${attempt + 1} failed:`, error)
      }
    }
    return false
  }

  async establishTLS(hostname) {
    const tlsConfig = {
      hostname,
      port: 443,
      alpn: ["h2", "http/1.1"],
      timeout: 10000,
    }

    const connection = await this.connectionManager.createTLSConnection(tlsConfig)
    return {
      supportsHTTP2: connection.negotiatedProtocol === "h2",
      supportsHTTP11: connection.negotiatedProtocol === "http/1.1",
    }
  }

  async checkAltSvc(hostname) {
    // Make initial request to check for Alt-Svc header
    const response = await this.connectionManager.makeRequest(hostname, "/")
    return response.headers["alt-svc"]
  }
}

// Connection manager for different protocols
class ConnectionManager {
  constructor() {
    this.activeConnections = new Map()
  }

  async createQUICConnection(config) {
    const connection = new QUICConnection(config)
    await connection.handshake()
    this.activeConnections.set(config.hostname, connection)
    return connection
  }

  async createTLSConnection(config) {
    const connection = new TLSConnection(config)
    await connection.handshake()
    this.activeConnections.set(config.hostname, connection)
    return connection
  }

  async makeRequest(hostname, path) {
    const connection = this.activeConnections.get(hostname)
    if (!connection) {
      throw new Error("No active connection")
    }
    return connection.request(path)
  }
}

// Traditional network inspection vs HTTP/3
const securityModel = {
  traditional: {
    inspection: "deep packet inspection",
    visibility: "full protocol metadata",
    filtering: "SNI-based, header-based",
  },
  http3: {
    inspection: "endpoint-based only",
    visibility: "minimal transport metadata",
    filtering: "application-layer required",
  },
}

// 0-RTT replay attack mitigation
const zeroRTTPolicy = {
  allowedMethods: ["GET", "HEAD", "OPTIONS"], // Idempotent only
  forbiddenMethods: ["POST", "PUT", "DELETE"],
  replayDetection: "application-level nonces required",
}

// CDN-based HTTP/3 adoption
const cdnStrategy = {
  benefits: [
    "no server configuration required",
    "automatic protocol negotiation",
    "built-in security and optimization",
  ],
  considerations: [
    "reduced visibility into origin connection",
    "potential for suboptimal routing",
    "dependency on CDN provider capabilities",
  ],
}

// Key metrics for protocol performance analysis
const performanceMetrics = {
  userCentric: ["LCP", "TTFB", "PLT", "CLS"],
  networkLevel: ["RTT", "packetLoss", "bandwidth"],
  serverSide: ["CPU utilization", "memory usage", "connection count"],
}

// 0-RTT security policy implementation
class ZeroRTTSecurityPolicy {
  constructor() {
    this.allowedMethods = ["GET", "HEAD", "OPTIONS"] // Idempotent only
    this.forbiddenMethods = ["POST", "PUT", "DELETE", "PATCH"]
    this.replayWindow = 60000 // 60 seconds
  }

  validate0RTTRequest(request) {
    // Only allow idempotent methods
    if (!this.allowedMethods.includes(request.method)) {
      return { allowed: false, reason: "Non-idempotent method" }
    }

    // Check replay window
    if (Date.now() - request.timestamp > this.replayWindow) {
      return { allowed: false, reason: "Replay window expired" }
    }

    // Validate nonce if present
    if (request.nonce && !this.validateNonce(request.nonce)) {
      return { allowed: false, reason: "Invalid nonce" }
    }

    return { allowed: true }
  }
}

// Protocol performance monitoring
class ProtocolMonitor {
  constructor() {
    this.metrics = {
      http1: new MetricsCollector(),
      http2: new MetricsCollector(),
      http3: new MetricsCollector(),
    }
  }

  recordConnection(protocol, metrics) {
    this.metrics[protocol].record({
      handshakeTime: metrics.handshakeTime,
      timeToFirstByte: metrics.ttfb,
      totalLoadTime: metrics.loadTime,
      packetLoss: metrics.packetLoss,
      connectionErrors: metrics.errors,
    })
  }

  generateReport() {
    return {
      http1: this.metrics.http1.getSummary(),
      http2: this.metrics.http2.getSummary(),
      http3: this.metrics.http3.getSummary(),
      recommendations: this.generateRecommendations(),
    }
  }

  generateRecommendations() {
    const recommendations = []

    if (this.metrics.http3.getAverage("handshakeTime") < this.metrics.http2.getAverage("handshakeTime") * 0.8) {
      recommendations.push("Consider enabling HTTP/3 for better performance")
    }

    if (this.metrics.http2.getAverage("packetLoss") > 0.01) {
      recommendations.push("High packet loss detected - HTTP/3 may provide better performance")
    }

    return recommendations
  }
}