iOS WebView应用前后台切换时卡顿无响应问题求助

核心原因 #

应用退至后台时，系统会暂停WebView的JavaScript线程以节省资源，导致setInterval/setTimeout这类计时器挂起；返回前台后，部分场景下计时器无法自动恢复正常调度，进而引发Web action sheet无响应。

解决方案与规避方法 #

• 监听应用前后台状态，手动重启计时器
  在原生层监听应用生命周期的前后台切换事件，通过WebView的JS注入能力通知前端。前端收到前台激活信号时，清除原有计时器并重新初始化，确保计时逻辑恢复正常。
  Android原生代码示例：

  @Override
  protected void onPause() {
      super.onPause();
      webView.evaluateJavascript("window.appDidEnterBackground()", null);
  }
  
  @Override
  protected void onResume() {
      super.onResume();
      webView.evaluateJavascript("window.appDidEnterForeground()", null);
  }
  

  前端JS代码示例：

  let timerId = null;
  
  const startTimer = () => {
      timerId = setInterval(() => {
          // 此处编写计时器业务逻辑
      }, 1000);
  };
  
  window.appDidEnterBackground = () => {
      timerId && clearInterval(timerId);
      timerId = null;
  };
  
  window.appDidEnterForeground = () => startTimer();
  
  // 页面初始化时启动计时器
  startTimer();
  

• 配置WebView允许后台JS运行（平台受限）
  部分平台支持配置WebView在后台保留JS线程运行，需注意这会增加设备资源消耗，需权衡使用：

  • Android端：通过WebSettings开启相关配置

    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setAllowBackgroundWebApi(true); // 允许后台JS API调用
    

  • iOS端：在WKWebViewConfiguration中设置允许后台执行

    let config = WKWebViewConfiguration()
    config.processPool = WKProcessPool()
    config.backgroundLayoutPolicy = .always
    let webView = WKWebView(frame: view.bounds, configuration: config)
    

• 改用原生计时器驱动Web内容更新
  放弃前端JS计时器，完全由原生层控制计时逻辑，每隔固定时间通过WebView注入JS更新action sheet的状态。这种方式不受WebView后台暂停影响，稳定性更强。
  iOS原生代码示例：

  private var timer: Timer?
  
  override func viewDidAppear(_ animated: Bool) {
      super.viewDidAppear(animated)
      timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { [weak self] _ in
          self?.webView.evaluateJavaScript("updateActionSheetTimer()", completionHandler: nil)
      }
  }
  
  override func viewDidDisappear(_ animated: Bool) {
      super.viewDidDisappear(animated)
      timer?.invalidate()
      timer = nil
  }
  

  前端仅需提供更新方法：

  function updateActionSheetTimer() {
      // 根据原生传递的时间或本地计算更新UI
  }
  

• 前端时间戳差值优化法（规避方案）
  不依赖固定间隔的计时器，改用起始时间戳与当前时间的差值计算已流逝时间，每次更新UI时动态计算。即使计时器挂起，返回前台后也能通过一次计算修正显示状态。
  JS代码示例：

  let startTime = Date.now();
  let updateTimer = null;
  
  const refreshTimerDisplay = () => {
      const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
      // 更新action sheet上的计时器显示
  };
  
  const initTimer = () => {
      updateTimer = setInterval(refreshTimerDisplay, 1000);
      refreshTimerDisplay(); // 立即初始化显示
  };
  
  window.appDidEnterForeground = () => {
      if (!updateTimer) initTimer();
      else refreshTimerDisplay(); // 强制刷新修正时间差
  };
  
  initTimer();
  

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