javascript怎么查看網頁是否為偽靜態

# JavaScript怎么查看網頁是否為偽靜態

## 前言

在Web開發中，靜態頁面和動態頁面的區別直接影響SEO優化和服務器性能。而"偽靜態"是通過URL重寫技術讓動態頁面呈現靜態URL特征的技術方案。本文將詳細介紹如何用JavaScript檢測網頁是否為偽靜態。

## 一、什么是偽靜態

### 1.1 靜態頁面的特點
- 真實存在的物理文件（如.html）
- URL通常直接對應服務器目錄結構
- 無數據庫查詢和服務器端腳本處理

### 1.2 動態頁面的特點
- 由服務器實時生成（如PHP、ASP）
- URL常帶參數（如?id=123）
- 需要數據庫交互

### 1.3 偽靜態的實現原理
通過服務器配置（如Apache的mod_rewrite）將動態URL重寫為靜態形式：

原始動態URL：/product.php?id=123 重寫為偽靜態：/product/123.html

## 二、JavaScript檢測方法

### 2.1 檢查URL結構
```javascript
function checkUrlPattern() {
  const url = window.location.href;
  
  // 檢測常見偽靜態特征
  const patterns = [
    /\.html(\?|$)/,    // 以.html結尾但可能有參數
    /\/[^\/]+\.htm$/,  // 以.htm結尾的路徑
    /\/[^\/]+\/$/,      // 以斜杠結尾的目錄形式
    /\.[a-z]{2,4}$/i   // 任意2-4字母擴展名
  ];
  
  return patterns.some(regex => regex.test(url));
}

2.2 發送HEAD請求檢測

async function checkRealStatic() {
  const url = window.location.pathname;
  try {
    const response = await fetch(url, { method: 'HEAD' });
    const contentType = response.headers.get('content-type');
    
    // 真實靜態文件通常有特定Content-Type
    return contentType.includes('text/html') && 
           !contentType.includes('php') &&
           !contentType.includes('asp');
  } catch(e) {
    console.error('檢測失敗:', e);
    return false;
  }
}

2.3 檢查頁面生成時間

function checkGenerationTime() {
  // 動態頁面通常在響應頭中包含生成時間
  const headers = performance.getEntries()[0].responseHeaders || [];
  const serverHeader = headers.find(h => h.name.toLowerCase() === 'server');
  
  return !(serverHeader && 
          (serverHeader.value.includes('PHP') || 
           serverHeader.value.includes('ASP')));
}

2.4 DOM元素分析

function analyzeDOM() {
  // 動態頁面常包含特定標記
  const clues = [
    document.querySelector('meta[name="generator"]'),
    document.querySelector('input[type="hidden"][name*="session"]'),
    document.querySelector('script[src*=".php"]')
  ];
  
  return clues.every(item => item === null);
}

三、綜合檢測方案

3.1 完整檢測函數

async function isPseudoStatic() {
  const checks = {
    urlPattern: checkUrlPattern(),
    realStatic: await checkRealStatic(),
    genTime: checkGenerationTime(),
    domAnalysis: analyzeDOM()
  };
  
  console.table(checks);
  
  // 加權評分（可根據實際情況調整）
  const score = (checks.urlPattern ? 0.3 : 0) +
                (checks.realStatic ? 0.4 : 0) +
                (checks.genTime ? 0.2 : 0) +
                (checks.domAnalysis ? 0.1 : 0);
  
  return score > 0.6;
}

3.2 使用示例

isPseudoStatic().then(result => {
  console.log(`該頁面${result ? '可能' : '不太可能'}是偽靜態`);
});

四、注意事項

4.1 跨域限制

• 部分檢測需要同源策略許可
• 可通過瀏覽器擴展突破限制

4.2 服務器配置差異

• 不同Web服務器（Nginx/Apache/IIS）表現不同
• CDN緩存可能影響檢測結果

4.3 動態參數的隱藏

• 現代框架（如React/Vue）可能使用History API
• 需要結合hash路由檢測

五、進階技巧

5.1 性能指標分析

function checkPerformance() {
  const timing = performance.timing;
  const domReadyTime = timing.domComplete - timing.domLoading;
  
  // 靜態頁面通常DOM準備時間更短
  return domReadyTime < 100; // 毫秒閾值
}

5.2 請求頭檢測

function checkRequestHeaders() {
  return navigator.userAgent.includes('bot') && 
         document.referrer === '';
}

5.3 結合Web API

async function checkCacheStatus() {
  const cache = await caches.match(window.location.href);
  return !!cache;
}

六、總結

通過JavaScript檢測偽靜態頁面需要多維度驗證，本文介紹了： 1. URL模式分析 2. 網絡請求檢測 3. DOM結構檢查 4. 性能指標評估

建議組合使用這些方法以提高準確性。實際開發中還應考慮： - 不同CMS系統的特征 - 服務器配置的特殊情況 - 前端路由的影響因素

”`

（注：實際字數約1500字，可根據需要增減部分章節。代碼示例已考慮現代JavaScript語法和常見偽靜態特征。）