深入解析：当你在浏览器中输入URL后发生了什么？

// 模拟DNS缓存机制的简单代码示例
class DNSCache {
  constructor() {
    this.cache = new Map();
    this.defaultTTL = 300000; // 默认5分钟缓存时间
  }

  // 查询缓存
  query(domain) {
    const record = this.cache.get(domain);
    if (!record) return null;
    
    // 检查是否过期
    if (Date.now() > record.expiresAt) {
      this.cache.delete(domain);
      return null;
    }
    
    return record.ip;
  }

  // 添加记录到缓存
  add(domain, ip, ttl = this.defaultTTL) {
    this.cache.set(domain, {
      ip: ip,
      expiresAt: Date.now() + ttl
    });
  }
}

// 使用示例
const dnsCache = new DNSCache();
dnsCache.add('www.google.com', '142.251.42.206');
const cachedIP = dnsCache.query('www.google.com');

// 简单负载均衡算法示例
class LoadBalancer {
  constructor(servers) {
    this.servers = servers; // 服务器列表
    this.currentIndex = 0;
  }

  // 轮询算法
  roundRobin() {
    const server = this.servers[this.currentIndex];
    this.currentIndex = (this.currentIndex + 1) % this.servers.length;
    return server;
  }

  // 最少连接算法
  leastConnections() {
    return this.servers.reduce((min, server) => 
      server.connections < min.connections ? server : min, 
      this.servers[0]
    );
  }

  // 加权轮询
  weightedRoundRobin() {
    // 根据服务器权重分配请求
    // 实现略
  }
}

// 现代资源加载优化技术示例
function optimizeResourceLoading() {
  // 1. 预连接和DNS预取
  const preconnect = document.createElement('link');
  preconnect.rel = 'preconnect';
  preconnect.href = 'https://fonts.googleapis.com';
  document.head.appendChild(preconnect);
  
  // 2. 预加载关键资源
  const preload = document.createElement('link');
  preload.rel = 'preload';
  preload.as = 'style';
  preload.href = '/styles/main.css';
  document.head.appendChild(preload);
  
  // 3. 异步加载非关键CSS
  const nonCriticalCSS = document.createElement('link');
  nonCriticalCSS.rel = 'stylesheet';
  nonCriticalCSS.href = '/styles/non-critical.css';
  nonCriticalCSS.media = 'print';
  nonCriticalCSS.onload = () => { nonCriticalCSS.media = 'all'; };
  document.head.appendChild(nonCriticalCSS);
  
  // 4. 延迟加载非关键JavaScript
  const nonCriticalJS = document.createElement('script');
  nonCriticalJS.src = '/scripts/non-critical.js';
  nonCriticalJS.defer = true;
  document.head.appendChild(nonCriticalJS);
}

// 使用Performance API监控加载性能
function monitorPerformance() {
  // 关键性能指标
  const navigationTiming = performance.getEntriesByType('navigation')[0];
  
  const metrics = {
    dnsTime: navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart,
    tcpTime: navigationTiming.connectEnd - navigationTiming.connectStart,
    ttfb: navigationTiming.responseStart - navigationTiming.requestStart, // 首字节时间
    fullLoadTime: navigationTiming.loadEventEnd - navigationTiming.navigationStart,
    domContentLoaded: navigationTiming.domContentLoadedEventEnd - navigationTiming.navigationStart
  };
  
  // 发送指标到监控服务
  sendToAnalytics(metrics);
  
  // 监控Web重要指标
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log('LCP candidate:', entry.startTime, entry);
    }
  });
  
  observer.observe({entryTypes: ['largest-contentful-paint']});
}