Node MVC+EJS环境下iframe加载PDF致服务器崩溃，求解决方案及原因

1. 服务器资源过载：页面加载时所有iframe同时发起PDF请求，服务器需要同时读取并返回多个大文件，瞬间内存和CPU占用飙升，直接导致崩溃。
2. 浏览器压力过大：同时加载解析多个PDF，浏览器的CPU、内存被占满，出现卡顿；若服务器响应头配置错误（比如Content-Disposition设为attachment），浏览器会触发批量下载，进一步加重负担。
3. 无请求控制：EJS循环直接生成所有iframe并立即发起请求，没有做任何限流或懒加载，压力完全集中在页面初始化阶段。

1. 服务器端实现PDF流式传输 #

不要让iframe直接指向本地文件路径，而是创建专门的路由，通过文件流逐块返回PDF，避免一次性把整个文件读入内存：

// 示例路由（Express框架）
const fs = require('fs');
const path = require('path');

app.get('/stream-pdf/:prodId', (req, res) => {
  const prodId = req.params.prodId;
  // 根据prodId获取对应PDF文件的绝对路径
  const pdfFilePath = path.join(__dirname, 'public', 'pdfs', `${prodId}.pdf`);
  
  // 检查文件是否存在
  if (!fs.existsSync(pdfFilePath)) {
    return res.status(404).send('PDF文件不存在');
  }

  // 设置响应头，强制浏览器内嵌渲染而非下载
  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'inline; filename="document.pdf"');
  // 启用缓存，减少重复请求
  res.setHeader('Cache-Control', 'public, max-age=86400');

  // 创建文件流并pipe到响应对象
  const pdfStream = fs.createReadStream(pdfFilePath);
  pdfStream.pipe(res);

  // 处理流错误
  pdfStream.on('error', (err) => {
    console.error('PDF流错误:', err);
    res.status(500).send('加载PDF失败');
  });
});

2. 前端优化请求时机 #

不要页面初始化就加载所有PDF，改为模态弹窗打开时动态加载对应iframe，分散请求压力：

<!-- EJS模板：只生成PDF容器，不提前加载iframe -->
<div class="modal" id="pdfModal">
  <div class="modal-content">
    <% prods.forEach(prod => { %>
      <div class="pdf-wrapper" data-prod-id="<%= prod.id %>"></div>
    <% }) %>
  </div>
</div>

<script>
// 监听模态弹窗打开事件（示例用Bootstrap模态框，可根据实际框架调整）
document.getElementById('pdfModal').addEventListener('shown.bs.modal', function() {
  const pdfWrappers = this.querySelectorAll('.pdf-wrapper');
  
  pdfWrappers.forEach(wrapper => {
    // 避免重复创建iframe
    if (!wrapper.querySelector('iframe')) {
      const prodId = wrapper.dataset.prodId;
      const iframe = document.createElement('iframe');
      iframe.src = `/stream-pdf/${prodId}`;
      iframe.frameBorder = 0;
      iframe.style.width = '100%';
      iframe.style.height = '600px';
      wrapper.appendChild(iframe);
    }
  });
});
</script>

3. 额外优化措施 #

• 限制并发请求：如果弹窗内有大量PDF，可实现分批加载（比如一次加载2个，加载完成后再加载下一批），避免浏览器同时处理过多请求。
• 启用请求限流：用express-rate-limit中间件对/stream-pdf路由设置限流规则，防止恶意或意外的大量请求击垮服务器：

const rateLimit = require('express-rate-limit');
const pdfLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15分钟
  max: 100, // 每个IP最多100次请求
  message: '请求过于频繁，请稍后再试'
});
app.use('/stream-pdf', pdfLimiter);

• 压缩PDF文件：预先用工具压缩PDF（比如Adobe Acrobat、离线压缩工具），减小文件体积，降低传输和解析压力。

内容的提问来源于stack exchange，提问作者Natnael