浏览器控制台如何清缓存重加载

你说得对！首次访问才是关键测试。让我们科学测试一下。

测试步骤

步骤1：清除所有缓存

在控制台执行：

// 清除所有存储
localStorage.clear()
sessionStorage.clear()

// 清除 IndexedDB（如果有）
indexedDB.databases().then(dbs => {
  dbs.forEach(db => indexedDB.deleteDatabase(db.name))
})

// 清除 service worker 缓存
if (navigator.serviceWorker) {
  navigator.serviceWorker.getRegistrations().then(regs => {
    regs.forEach(reg => reg.unregister())
  })
}

// 清除 application cache（旧API）
if (window.applicationCache) {
  window.applicationCache.abort()
}

console.log('🧹 所有缓存已清除')

步骤2：添加网络请求监控

在控制台执行（在刷新页面前）：

// 监控所有网络请求
const requestTimestamps = {}

// 拦截 fetch
const originalFetch = window.fetch
window.fetch = function(...args) {
  const url = args[0]
  const startTime = performance.now()
  
  console.log(`🚀 fetch 请求开始: ${url}`, {
    时间: startTime.toFixed(2) + 'ms',
    参数: args[1] || {}
  })
  
  return originalFetch.apply(this, args).then(response => {
    const endTime = performance.now()
    console.log(`✅ fetch 请求完成: ${url}`, {
      耗时: (endTime - startTime).toFixed(2) + 'ms',
      状态: response.status
    })
    return response
  })
}

// 拦截 XMLHttpRequest
const originalXHROpen = XMLHttpRequest.prototype.open
const originalXHRSend = XMLHttpRequest.prototype.send

XMLHttpRequest.prototype.open = function(method, url) {
  this._requestUrl = url
  this._requestMethod = method
  this._startTime = performance.now()
  
  console.log(`🚀 XHR 请求开始: ${method} ${url}`, {
    时间: this._startTime.toFixed(2) + 'ms'
  })
  
  return originalXHROpen.apply(this, arguments)
}

XMLHttpRequest.prototype.send = function(body) {
  const url = this._requestUrl
  
  this.addEventListener('load', function() {
    const endTime = performance.now()
    console.log(`✅ XHR 请求完成: ${url}`, {
      耗时: (endTime - this._startTime).toFixed(2) + 'ms',
      状态: this.status,
      响应大小: this.responseText?.length || 0
    })
  })
  
  return originalXHRSend.apply(this, arguments)
}

console.log('🔍 网络请求监控已开启')

步骤3：添加性能标记

// 标记关键时间点
performance.mark('test-start')
console.log('⏱️ 测试开始时间戳:', performance.now())

// 标记主题相关事件
const originalThemeImmediate = window.applyThemeImmediately
window.applyThemeImmediately = async function() {
  performance.mark('theme-immediate-start')
  console.log('🎨 applyThemeImmediately 开始')
  
  const result = await originalThemeImmediate?.()
  
  performance.mark('theme-immediate-end')
  const measure = performance.measure(
    'theme-immediate-duration',
    'theme-immediate-start',
    'theme-immediate-end'
  )
  
  console.log('🎨 applyThemeImmediately 结束，耗时:', measure.duration.toFixed(2) + 'ms')
  return result
}

// 标记基础配置
const originalBasicConfigInit = window.basicConfig?.initialize
if (window.basicConfig) {
  window.basicConfig.initialize = async function() {
    performance.mark('basic-config-start')
    console.log('📋 basicConfig.initialize 开始')
    
    const result = await originalBasicConfigInit.call(this)
    
    performance.mark('basic-config-end')
    const measure = performance.measure(
      'basic-config-duration',
      'basic-config-start',
      'basic-config-end'
    )
    
    console.log('📋 basicConfig.initialize 结束，耗时:', measure.duration.toFixed(2) + 'ms')
    return result
  }
}

步骤4：刷新页面并观察

按 F5 或执行：

location.reload(true)  // 强制刷新，忽略缓存