🏛️ 《中华网商品详情页前端性能优化实战》

背景：中华网作为“门户 + 电商”的复合型站点，承载着国家大事、军事、历史等内容，同时售卖相关周边商品。其特点是“用户年龄层偏大、浏览器版本陈旧、网络环境复杂”。

核心挑战：如何在低版本浏览器、非现代网络环境下，保证页面的稳定性与可用性。优化目标：在老旧设备及弱网条件下，实现“页面不白屏、功能不失效”。

一、中华网的“兼容性”挑战

首屏可见: > 5s
JS 执行阻塞: > 2s
页面可交互: > 6s
白屏时间: 明显

二、优化总纲：稳字当头

┌────────────────────────────┐
│  1. 构建产物“向下兼容”    │ ← ES5 语法 + polyfill
├────────────────────────────┤
│  2. 资源加载“渐进增强”    │ ← 核心功能优先，高级特性兜底
├────────────────────────────┤
│  3. 关键路径“极致精简”    │ ← 首屏 JS/CSS 最小化
├────────────────────────────┤
│  4. 第三方脚本“沙箱隔离”  │ ← 防止广告/统计拖垮主站
└────────────────────────────┘

三、关键优化实战（含兼容性代码）

✅ 第一阶段：构建产物的“时光倒流”

💥 痛点：现代前端框架（React/Vue）在低版本浏览器中报错

✅ 解决方案：Babel + core-js 全量 Polyfill

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: '11', // 明确支持 IE 11
          browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']
        },
        useBuiltIns: 'usage', // 按需注入 polyfill
        corejs: 3
      }
    ]
  ]
};

✅ 关键 API 的手动 Polyfill

// 确保 Promise 在所有浏览器可用
if (!window.Promise) {
  window.Promise = require('promise-polyfill');
}

// 确保 fetch 可用
import 'whatwg-fetch';

✅ 第二阶段：资源加载的“双重保障”

💥 痛点：弱网下，SPA 应用无法启动

✅ 解决方案：MPA + SPA 混合模式

1. 首屏使用传统服务端渲染 (SSR) 或静态 HTML

• 确保无 JS 时页面结构完整，商品信息可见。

2. 渐进增强，注入交互

• 待主脚本加载完成后，再“激活”页面交互。

<!-- 服务端直出商品基本信息 -->
<div class="product-info">
  <h1>《孙子兵法》精装版</h1>
  <p class="price">¥68.00</p>
  <button id="buy-button" disabled>正在加载...</button>
</div>

<script>
  // 页面加载完成后，再加载主逻辑
  window.addEventListener('DOMContentLoaded', function() {
    // 动态加载主 JS
    var script = document.createElement('script');
    script.src = '/dist/main.js';
    script.onload = function() {
      // 主 JS 加载后，启用按钮并绑定事件
      document.getElementById('buy-button').disabled = false;
      document.getElementById('buy-button').innerText = '立即购买';
    };
    document.body.appendChild(script);
  });
</script>

✅ 第三阶段：关键路径的“极致瘦身”

💥 痛点：一个巨大的 vendor.js阻塞页面

✅ 解决方案：拆分 + 异步加载

// Webpack 配置
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      defaultVendors: {
        name: 'vendors',
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: 'initial' // 仅将初始依赖打包进 vendors
      },
      async: {
        name: 'async',
        test: /[\\/]node_modules[\\/]/,
        priority: -20,
        chunks: 'async', // 异步模块单独打包
        minChunks: 2
      }
    }
  }
}

✅ 非关键 CSS 的异步加载

<!-- 首屏关键 CSS 内联 -->
<style>
  /* 核心样式 */
</style>

<!-- 非关键 CSS 异步加载 -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

✅ 第四阶段：第三方脚本的“牢笼”

💥 痛点：广告和推荐脚本拖慢甚至搞崩页面

✅ 解决方案：iframe 沙箱 + 延迟加载

<!-- 广告位 -->
<div id="ad-container"></div>

<script>
  // 延迟加载广告，不阻塞主内容
  window.addEventListener('load', function() {
    setTimeout(function() {
      var iframe = document.createElement('iframe');
      iframe.src = '/ad-placeholder.html'; // 广告脚本在 iframe 内运行
      iframe.sandbox = "allow-scripts allow-same-origin"; // 限制权限
      iframe.width = "100%";
      iframe.height = "100";
      document.getElementById('ad-container').appendChild(iframe);
    }, 2000); // 延迟 2 秒加载
  });
</script>

四、性能监控指标（兼容性标准）

五、最终优化成果

六、面试高频追问（门户/兼容性风格）

Q：中华网这种站点，为什么不直接上最新的前端技术？

• 用户群体决定技术选型。大量用户使用旧版浏览器，必须保证基本可用性。

• 稳定性高于一切。新闻类网站对稳定性要求极高，不能为了新技术而引入风险。

• 渐进增强是最佳实践。先保证内容可被访问，再在此基础上添加交互。

Q：如何处理 Promise、fetch等新 API 的兼容性？

• 使用 babel-preset-env配合 core-js按需注入 polyfill。

• 对关键 API（如 Promise）进行手动检测和兜底加载。

• 使用 @babel/plugin-transform-runtime避免 polyfill 污染全局作用域。

Q：如何防止第三方脚本（如广告）影响页面性能？

• 沙箱隔离：使用 iframe并配合 sandbox属性限制其权限。

• 延迟加载：在 window.onload之后再加载非关键脚本。

• 错误隔离：监听 window.onerror和 iframe的错误，防止其影响主页面。

七、总结一句话

中华网的性能优化核心在于：用“兼容性”保障“普适性”，用“渐进增强”捍卫“内容至上”。