当浏览器窗口被遮挡或隐藏，代码是否正常运行

前言

你是否有过这样的经历，当你在浏览器中打开一个网页，然后切换到其他应用或者最小化浏览器，再回来时发现网页上的动画停止了，或者某些功能失效了？这是因为浏览器为了节省资源和提高性能，会对后台的标签页进行一些优化，导致js代码的执行受到影响。那么，当浏览器窗口被遮挡或隐藏时，js代码是否正常运行呢？哪些Api会被影响，哪些不会呢？本文将为你解答这些问题。

浏览器的优化策略

浏览器的优化策略主要有两种：本地窗口遮蔽（Native Window Occlusion）和页面可见性（Page Visibility）。

• 本地窗口遮蔽：是指浏览器根据窗口的可见性，动态调整后台标签页的优先级，以减少浏览器的资源使用，并将更多内存、CPU和GPU留给前台标签。本地窗口遮蔽的条件包括：

  • 浏览器最小化的时候，标签页都被视为后台标签；
  • 当屏幕被锁定时，所有浏览器窗口都被视为后台标签；
  • 当浏览器窗口被其他窗口完全遮挡时，该窗口被视为后台窗口；
  • 当浏览器窗口被部分遮挡时，被遮挡的标签页被视为后台标签；
  • 当我们浏览器将当前页面切换到另外一个标签页时，原来的页面被视为后台标签。

• 页面可见性：是指浏览器根据页面的可见状态，提供一个API，让开发者可以监听和判断页面是否可见，以及页面从可见到不可见的原因。页面可见性的状态包括：

  • visible：页面完全可见，用户正在浏览该页面；
  • hidden：页面完全不可见，用户已经离开该页面，或者浏览器最小化，或者屏幕锁定；
  • prerender：页面正在预渲染，用户还没有看到该页面；
  • unloaded：页面已经卸载，用户关闭了该页面。

js代码的执行情况

当浏览器窗口被遮挡或隐藏时，js代码的执行情况取决于浏览器的具体实现，不同的浏览器可能有不同的表现。一般来说，浏览器会对后台标签页的js代码执行进行一些限制，例如：

• 减少或停止动画的渲染，例如requestAnimationFrame，setInterval，setTimeout等；
• 减少或停止音频的播放，例如Audio，Web Audio API等；
• 减少或停止网络的请求，例如XMLHttpRequest，fetch，WebSocket等；
• 减少或停止传感器的访问，例如DeviceOrientation，DeviceMotion，Geolocation等；
• 减少或停止后台任务的执行，例如Web Workers，Service Workers等。

当然，并不是所有的js代码都会受到影响，有些js代码仍然可以正常运行，例如：

• 事件监听器，例如click，keydown，visibilitychange等；
• 本地存储，例如localStorage，sessionStorage，IndexedDB等；
• 通知，例如Notification，Push API等；
• 离线应用，例如Application Cache，Cache API等。

如何处理浏览器的优化策略

作为开发者，我们需要了解浏览器的优化策略，以及它们对我们的js代码的影响，从而做出合适的处理。以下是一些常见的处理方法：

• 使用页面可见性API，监听visibilitychange事件，根据document.visibilityState的值，判断页面是否可见，以及页面从可见到不可见的原因，然后做出相应的操作，例如暂停或恢复动画，音频，网络，传感器等；
• 使用requestAnimationFrame代替setInterval或setTimeout，实现动画的渲染，这样可以让浏览器自动控制动画的帧率，避免不必要的资源浪费；
• 使用Web Audio API代替Audio，实现音频的播放，这样可以让浏览器自动控制音频的音量，避免干扰用户；
• 使用Service Workers代替Web Workers，实现后台任务的执行，这样可以让浏览器自动控制后台任务的生命周期，避免占用过多的内存；
• 使用Cache API代替Application Cache，实现离线应用的缓存，这样可以让浏览器自动控制缓存的更新，避免过期的数据；
• 使用Push API代替WebSocket，实现实时通信的推送，这样可以让浏览器自动控制推送的频率，避免过多的网络请求。