<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- 预连接（DNS+TCP+TLS） -->
<link rel="preconnect" href="https://cdn.example.com" />

客户端                    服务端
  |                         |
  |-------- SYN,seq=x ----->|  (同步序列号)
  |                         |
  |<-- SYN,seq=y,ACK=x+1 ---|  (同步+确认)
  |                         |
  |-------- ACK,y+1 ------->|  (确认)
  |                         |

客户端                    服务端
  |                         |
  |-------- FIN ------------>|  (我要关闭)
  |                         |
  |<-------- ACK ------------|  (知道了)
  |                         |
  |<-------- FIN ------------|  (我也要关闭)
  |                         |
  |-------- ACK ------------>|  (知道了)
  |                         |

HTML → DOM Tree
         ↓
CSS → CSSOM Tree
         ↓
    Render Tree（渲染树）
         ↓
    Layout（布局/重排）
         ↓
    Paint（绘制/重绘）
         ↓
    Composite（合成）

.gpu-layer {
  transform: translateZ(0);
  /* 或 */
  transform: translate3d(0, 0, 0);
  /* 或 */
  will-change: transform;
}

<script async src="script.js"></script>

<script defer src="script.js"></script>

<!-- 首屏关键JS -->
<script src="critical.js"></script>

<!-- 非关键JS -->
<script defer src="app.js"></script>

<!-- 独立第三方脚本 -->
<script async src="analytics.js"></script>

// 使用PerformanceObserver监听资源加载
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === "resource") {
      console.log({
        name: entry.name, // 资源URL
        type: entry.initiatorType, // 资源类型（script/link/img）
        duration: entry.duration, // 加载耗时
        startTime: entry.startTime,
        // 详细时间分解
        dns: entry.domainLookupEnd - entry.domainLookupStart,
        tcp: entry.connectEnd - entry.connectStart,
        request: entry.responseStart - entry.requestStart,
        response: entry.responseEnd - entry.responseStart,
      })
    }
  }
})

observer.observe({ entryTypes: ["resource"] })

// 获取所有资源加载数据
window.addEventListener("load", () => {
  const resources = performance.getEntriesByType("resource")

  const data = resources.map((r) => ({
    name: r.name,
    type: r.initiatorType,
    duration: r.duration,
    size: r.transferSize, // 传输大小
    decodedSize: r.decodedBodySize,
  }))

  // 上报到监控系统
  reportToServer(data)
})

// 监控资源加载失败
window.addEventListener(
  "error",
  (e) => {
    if (e.target.tagName) {
      console.error("资源加载失败:", {
        url: e.target.src || e.target.href,
        type: e.target.tagName,
      })
    }
  },
  true
)

class PerformanceMonitor {
  constructor() {
    this.metrics = {}
    this.init()
  }

  init() {
    this.observeNavigation()
    this.observePaint()
    this.observeLCP()
    this.observeCLS()
    this.observeFID()
    this.observeResources()
  }

  // 导航计时
  observeNavigation() {
    window.addEventListener("load", () => {
      setTimeout(() => {
        const nav = performance.getEntriesByType("navigation")[0]
        this.metrics.navigation = {
          dns: nav.domainLookupEnd - nav.domainLookupStart,
          tcp: nav.connectEnd - nav.connectStart,
          ttfb: nav.responseStart - nav.requestStart,
          domReady: nav.domContentLoadedEventEnd - nav.startTime,
          loadComplete: nav.loadEventEnd - nav.startTime,
        }
      }, 0)
    })
  }

  // 首次绘制
  observePaint() {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.name === "first-contentful-paint") {
          this.metrics.fcp = entry.startTime
        }
        if (entry.name === "first-paint") {
          this.metrics.fp = entry.startTime
        }
      }
    })
    observer.observe({ entryTypes: ["paint"] })
  }

  // 最大内容绘制
  observeLCP() {
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries()
      const lastEntry = entries[entries.length - 1]
      this.metrics.lcp = lastEntry.startTime
    })
    observer.observe({ entryTypes: ["largest-contentful-paint"] })
  }

  // 累积布局偏移
  observeCLS() {
    let clsValue = 0
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value
        }
      }
      this.metrics.cls = clsValue
    })
    observer.observe({ entryTypes: ["layout-shift"] })
  }

  // 首次输入延迟
  observeFID() {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.metrics.fid = entry.processingStart - entry.startTime
      }
    })
    observer.observe({ entryTypes: ["first-input"] })
  }

  // 上报数据
  report() {
    const data = {
      url: location.href,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      metrics: this.metrics,
    }

    // 使用sendBeacon确保数据发送
    navigator.sendBeacon("/api/performance", JSON.stringify(data))
  }
}

// 使用
const monitor = new PerformanceMonitor()
window.addEventListener("beforeunload", () => monitor.report())

function lazyLoadImages() {
  const imageObserver = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = entry.target
          img.src = img.dataset.src // 从data-src加载真实图片
          img.classList.remove("lazy")
          observer.unobserve(img)
        }
      })
    },
    {
      rootMargin: "50px 0px", // 提前50px开始加载
      threshold: 0.01,
    }
  )

  document.querySelectorAll("img.lazy").forEach((img) => {
    imageObserver.observe(img)
  })
}

// HTML
// <img class="lazy" data-src="real-image.jpg" src="placeholder.jpg">

<img src="image.jpg" loading="lazy" alt="描述" />

function lazyLoad() {
  const images = document.querySelectorAll("img[data-src]")

  images.forEach((img) => {
    const rect = img.getBoundingClientRect()
    const isInViewport = rect.top < window.innerHeight && rect.bottom > 0

    if (isInViewport) {
      img.src = img.dataset.src
      img.removeAttribute("data-src")
    }
  })
}

// 节流优化
const throttledLazyLoad = throttle(lazyLoad, 200)
window.addEventListener("scroll", throttledLazyLoad)
window.addEventListener("resize", throttledLazyLoad)

class InfiniteScroll {
  constructor(options) {
    this.container = options.container
    this.loadMore = options.loadMore
    this.threshold = options.threshold || 100
    this.isLoading = false
    this.hasMore = true

    this.init()
  }

  init() {
    // 使用Intersection Observer监听底部元素
    const sentinel = document.createElement("div")
    sentinel.className = "scroll-sentinel"
    this.container.appendChild(sentinel)

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !this.isLoading && this.hasMore) {
            this.load()
          }
        })
      },
      {
        rootMargin: `${this.threshold}px`,
      }
    )

    observer.observe(sentinel)
  }

  async load() {
    this.isLoading = true
    this.showLoading()

    try {
      const result = await this.loadMore()
      if (!result.hasMore) {
        this.hasMore = false
        this.showNoMore()
      }
    } catch (error) {
      this.showError()
    } finally {
      this.isLoading = false
      this.hideLoading()
    }
  }

  showLoading() {
    // 显示加载中提示
  }

  hideLoading() {
    // 隐藏加载中提示
  }

  showNoMore() {
    // 显示没有更多数据
  }

  showError() {
    // 显示加载失败，支持重试
  }
}

// 使用
const infiniteScroll = new InfiniteScroll({
  container: document.querySelector(".list-container"),
  threshold: 200,
  async loadMore() {
    const data = await fetch(`/api/list?page=${++this.page}`).then((r) =>
      r.json()
    )
    renderItems(data.items)
    return { hasMore: data.hasMore }
  },
})

class RequestLock {
  constructor() {
    this.pendingRequests = new Map()
  }

  async request(key, requestFn) {
    // 如果有进行中的请求，返回该请求的Promise
    if (this.pendingRequests.has(key)) {
      return this.pendingRequests.get(key)
    }

    // 创建新请求
    const promise = requestFn().finally(() => {
      this.pendingRequests.delete(key)
    })

    this.pendingRequests.set(key, promise)
    return promise
  }
}

// 使用
const requestLock = new RequestLock()

async function submitForm(data) {
  return requestLock.request("submitForm", () => {
    return fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify(data),
    })
  })
}

class RequestManager {
  constructor() {
    this.controllers = new Map()
  }

  async request(key, requestFn) {
    // 取消之前的请求
    if (this.controllers.has(key)) {
      this.controllers.get(key).abort()
    }

    const controller = new AbortController()
    this.controllers.set(key, controller)

    try {
      const result = await requestFn(controller.signal)
      return result
    } finally {
      this.controllers.delete(key)
    }
  }
}

// 使用
const manager = new RequestManager()

function search(keyword) {
  return manager.request("search", (signal) => {
    return fetch(`/api/search?q=${keyword}`, { signal })
  })
}

import { debounce } from "lodash"

const debouncedSearch = debounce((keyword) => {
  fetch(`/api/search?q=${keyword}`)
    .then((r) => r.json())
    .then((data) => renderResults(data))
}, 300)

// 输入时调用
input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value)
})

async function handleSubmit() {
  const btn = document.querySelector(".submit-btn")

  if (btn.disabled) return

  btn.disabled = true
  btn.textContent = "提交中..."

  try {
    await submitForm()
    showSuccess()
  } catch (error) {
    showError()
  } finally {
    btn.disabled = false
    btn.textContent = "提交"
  }
}

interface CartItem {
  skuId: string;           // SKU唯一标识
  productId: string;       // 商品ID
  name: string;            // 商品名称
  price: number;           // 单价（分）
  quantity: number;        // 数量
  selected: boolean;       // 是否选中
  image: string;           // 商品图片
  stock: number;           // 库存
  attributes: Record<string, string>; // 规格属性
}

interface CartState {
  items: CartItem[];
  isLoading: boolean;
}

class ShoppingCart {
  constructor() {
    this.items = this.loadFromStorage() || []
  }

  // 添加商品
  addItem(product) {
    const existingItem = this.items.find((item) => item.skuId === product.skuId)

    if (existingItem) {
      // 已存在，增加数量
      existingItem.quantity += product.quantity
      // 检查库存
      if (existingItem.quantity > product.stock) {
        existingItem.quantity = product.stock
        throw new Error("超出库存限制")
      }
    } else {
      // 新商品
      this.items.push({
        ...product,
        selected: true,
      })
    }

    this.saveToStorage()
    this.syncToServer()
  }

  // 更新数量
  updateQuantity(skuId, quantity) {
    const item = this.items.find((item) => item.skuId === skuId)
    if (!item) return

    if (quantity <= 0) {
      this.removeItem(skuId)
    } else {
      item.quantity = Math.min(quantity, item.stock)
    }

    this.saveToStorage()
    this.syncToServer()
  }

  // 删除商品
  removeItem(skuId) {
    this.items = this.items.filter((item) => item.skuId !== skuId)
    this.saveToStorage()
    this.syncToServer()
  }

  // 切换选中状态
  toggleSelect(skuId) {
    const item = this.items.find((item) => item.skuId === skuId)
    if (item) {
      item.selected = !item.selected
      this.saveToStorage()
    }
  }

  // 全选/取消全选
  toggleSelectAll(selected) {
    this.items.forEach((item) => {
      item.selected = selected
    })
    this.saveToStorage()
  }

  // 计算总价
  getTotalPrice() {
    return this.items
      .filter((item) => item.selected)
      .reduce((total, item) => {
        return total + item.price * item.quantity
      }, 0)
  }

  // 计算总数量
  getTotalCount() {
    return this.items
      .filter((item) => item.selected)
      .reduce((count, item) => count + item.quantity, 0)
  }

  // 本地存储
  saveToStorage() {
    localStorage.setItem("cart", JSON.stringify(this.items))
  }

  loadFromStorage() {
    const data = localStorage.getItem("cart")
    return data ? JSON.parse(data) : null
  }

  // 同步到服务端（登录状态）
  async syncToServer() {
    if (this.isLoggedIn()) {
      await fetch("/api/cart/sync", {
        method: "POST",
        body: JSON.stringify(this.items),
      })
    }
  }

  // 合并本地和云端购物车（登录时）
  async mergeCart(serverCart) {
    const localCart = this.items

    // 合并策略：以本地为准，数量累加
    const merged = [...localCart]

    serverCart.forEach((serverItem) => {
      const localItem = merged.find((item) => item.skuId === serverItem.skuId)
      if (localItem) {
        localItem.quantity += serverItem.quantity
      } else {
        merged.push(serverItem)
      }
    })

    this.items = merged
    this.saveToStorage()
  }
}

用户输入账号密码
       ↓
前端验证格式
       ↓
发送登录请求
       ↓
服务端验证 → 生成Token
       ↓
存储Token（Cookie/LocalStorage）
       ↓
获取用户信息
       ↓
跳转首页

class AuthManager {
  constructor() {
    this.token = null
    this.refreshToken = null
    this.user = null
  }

  // 登录
  async login(credentials) {
    const response = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify(credentials),
    })

    const { token, refreshToken, user } = await response.json()

    this.setToken(token)
    this.setRefreshToken(refreshToken)
    this.setUser(user)

    // 启动自动刷新
    this.startRefreshTimer()

    return user
  }

  // 设置Token
  setToken(token) {
    this.token = token
    // 方案1：localStorage（易受XSS攻击）
    localStorage.setItem("token", token)

    // 方案2：Cookie（HttpOnly，防XSS）
    // document.cookie = `token=${token}; HttpOnly; Secure; SameSite=Strict`;
  }

  // 获取Token
  getToken() {
    return this.token || localStorage.getItem("token")
  }

  // 刷新Token
  async refreshToken() {
    try {
      const response = await fetch("/api/refresh", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${this.refreshToken}`,
        },
      })

      const { token } = await response.json()
      this.setToken(token)
      return token
    } catch (error) {
      // 刷新失败，退出登录
      this.logout()
      throw error
    }
  }

  // 自动刷新
  startRefreshTimer() {
    // Token过期前5分钟刷新
    const refreshTime = (getTokenExpiry(this.token) - 300) * 1000

    setTimeout(() => {
      this.refreshToken()
    }, refreshTime)
  }

  // 退出登录
  logout() {
    this.token = null
    this.refreshToken = null
    this.user = null
    localStorage.removeItem("token")
    localStorage.removeItem("refreshToken")

    // 通知服务端（可选）
    fetch("/api/logout", { method: "POST" })
  }

  // 检查登录状态
  isAuthenticated() {
    return !!this.getToken() && !isTokenExpired(this.getToken())
  }
}

// axios拦截器
axios.interceptors.request.use((config) => {
  const token = authManager.getToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器（Token过期自动刷新）
axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config

    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true

      try {
        const newToken = await authManager.refreshToken()
        originalRequest.headers.Authorization = `Bearer ${newToken}`
        return axios(originalRequest)
      } catch (refreshError) {
        // 刷新失败，跳转登录
        window.location.href = "/login"
        return Promise.reject(refreshError)
      }
    }

    return Promise.reject(error)
  }
)

class HashRouter {
  constructor() {
    this.routes = new Map()
    this.currentPath = ""

    // 监听hash变化
    window.addEventListener("hashchange", () => {
      this.render()
    })

    // 初始化
    window.addEventListener("load", () => {
      this.render()
    })
  }

  // 注册路由
  route(path, handler) {
    this.routes.set(path, handler)
  }

  // 导航
  navigate(path) {
    window.location.hash = path
  }

  // 渲染
  render() {
    const hash = window.location.hash.slice(1) || "/"
    this.currentPath = hash

    const handler = this.routes.get(hash)
    if (handler) {
      handler()
    } else {
      // 404处理
      const notFound = this.routes.get("/404")
      if (notFound) notFound()
    }
  }

  // 前进/后退
  back() {
    window.history.back()
  }

  forward() {
    window.history.forward()
  }
}

// 使用
const router = new HashRouter()

router.route("/", () => {
  document.getElementById("app").innerHTML = "<h1>首页</h1>"
})

router.route("/about", () => {
  document.getElementById("app").innerHTML = "<h1>关于</h1>"
})

// 导航
router.navigate("/about")

class HistoryRouter {
  constructor() {
    this.routes = new Map()

    // 监听popstate事件（前进/后退）
    window.addEventListener("popstate", () => {
      this.render()
    })
  }

  // 注册路由
  route(path, handler) {
    this.routes.set(path, handler)
  }

  // 导航（不刷新页面）
  navigate(path) {
    history.pushState({}, "", path)
    this.render()
  }

  // 替换当前历史记录
  replace(path) {
    history.replaceState({}, "", path)
    this.render()
  }

  // 渲染
  render() {
    const path = window.location.pathname

    const handler = this.routes.get(path)
    if (handler) {
      handler()
    } else {
      const notFound = this.routes.get("/404")
      if (notFound) notFound()
    }
  }

  // 前进/后退
  back() {
    window.history.back()
  }

  forward() {
    window.history.forward()
  }

  go(n) {
    window.history.go(n)
  }
}

// 使用
const router = new HistoryRouter()

router.route("/", () => {
  document.getElementById("app").innerHTML = "<h1>首页</h1>"
})

router.route("/user/:id", (params) => {
  document.getElementById("app").innerHTML = `<h1>用户 ${params.id}</h1>`
})

// 需要服务端配合，所有路由指向index.html

<template>
  <div class="virtual-list" ref="container" @scroll="handleScroll">
    <!-- 撑开滚动区域 -->
    <div class="list-phantom" :style="{ height: totalHeight + 'px' }"></div>

    <!-- 可视区域 -->
    <div
      class="list-content"
      :style="{ transform: `translateY(${offsetY}px)` }"
    >
      <div
        v-for="item in visibleItems"
        :key="item.id"
        class="list-item"
        :style="{ height: itemHeight + 'px' }"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: Array, // 所有数据
    itemHeight: Number, // 每项高度
    buffer: {
      // 缓冲区数量
      type: Number,
      default: 5,
    },
  },

  data() {
    return {
      startIndex: 0, // 可视区起始索引
      endIndex: 0, // 可视区结束索引
      offsetY: 0, // 偏移量
      containerHeight: 0, // 容器高度
    }
  },

  computed: {
    // 可视区数据
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex)
    },

    // 总高度
    totalHeight() {
      return this.items.length * this.itemHeight
    },
  },

  mounted() {
    this.containerHeight = this.$refs.container.clientHeight
    this.updateVisibleRange()
  },

  methods: {
    handleScroll() {
      const scrollTop = this.$refs.container.scrollTop
      this.updateVisibleRange(scrollTop)
    },

    updateVisibleRange(scrollTop = 0) {
      // 计算可视区起始索引
      this.startIndex = Math.floor(scrollTop / this.itemHeight)

      // 计算可视区能显示的数量
      const visibleCount = Math.ceil(this.containerHeight / this.itemHeight)

      // 加上缓冲区
      this.startIndex = Math.max(0, this.startIndex - this.buffer)
      this.endIndex = Math.min(
        this.items.length,
        this.startIndex + visibleCount + this.buffer * 2
      )

      // 计算偏移量（让内容在正确位置显示）
      this.offsetY = this.startIndex * this.itemHeight
    },
  },
}
</script>

<style scoped>
.virtual-list {
  position: relative;
  height: 400px;
  overflow-y: auto;
}

.list-phantom {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}

.list-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.list-item {
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
</style>

class DynamicVirtualList {
  constructor(options) {
    this.items = options.items
    this.container = options.container
    this.estimatedHeight = options.estimatedHeight || 50

    // 缓存每项的实际高度
    this.heightCache = new Map()

    // 计算累计高度
    this.cumulativeHeights = this.calculateCumulativeHeights()

    this.init()
  }

  // 二分查找起始索引
  findStartIndex(scrollTop) {
    let left = 0
    let right = this.cumulativeHeights.length - 1

    while (left < right) {
      const mid = Math.floor((left + right) / 2)
      if (this.cumulativeHeights[mid] < scrollTop) {
        left = mid + 1
      } else {
        right = mid
      }
    }

    return left
  }

  // 更新某项高度
  updateItemHeight(index, height) {
    this.heightCache.set(index, height)
    this.cumulativeHeights = this.calculateCumulativeHeights()
  }

  calculateCumulativeHeights() {
    const heights = []
    let sum = 0

    for (let i = 0; i < this.items.length; i++) {
      heights.push(sum)
      sum += this.heightCache.get(i) || this.estimatedHeight
    }

    return heights
  }
}