前端开发

首页 > 前端开发 > javascript > 不会被 iOS 停掉的网页定时器方案

不会被 iOS 停掉的网页定时器方案

分享到：

【字体：大中小】

2019-05-07
来源：网络
983
2
8

导读：
[导读] 其实这个标题略微有点标题党：iOS 中，除了少数服务（如播放音乐），大部分 App 在用户按了 Home 键之后，过不了多久就会被完全冻结，这对 Safari 同样适用。本文不考虑这样情况，只...

其实这个标题略微有点标题党：iOS 中，除了少数服务（如播放音乐），大部分 App 在用户按了 Home 键之后，过不了多久就会被完全冻结，这对 Safari 同样适用。本文不考虑这样情况，只考虑 Safari 运行时，怎样让定时器持续工作。

我们知道：PC 上的 Firefox、Chrome 和 Safari 等浏览器，都会自动把未激活页面中的 JavaScript 定时器（setTimeout、setInterval）间隔最小值改为 1 秒以上。这是因为间隔很小的定时器一般用来做 UI 更新（例如用定时器实现的动画），让用户不可见的页面上的定时器跑慢一些，既节省资源又不会影响体验。对移动浏览器来说，内存、CPU、带宽等资源更加宝贵，移动设备上的浏览器往往会直接冻结所有未激活页面上的所有定时器。

我写了一个简单的 Demo 来说明这个问题：

在装有 iOS7 的 iPad 下测试，可以很清楚看到定时器被冻结的现象：

setInterval on iPad

但是，这种策略有时也不那么完美。对 Web 邮箱、SNS 等网站来说，让用户及时知道有新消息很重要。很多网站会定时获取消息数，有新信息时在页面标题加上消息数，这样即使用户在浏览其它 Tab 时也可以看到提醒，这种弱提醒会给用户带来良好的产品体验。iOS 上，这种做法由于定时器被冻结而变得行不通了。

既然 iOS 的浏览器（我测试了 Safari 和 Chrome）都会冻结非激活页面的 JS 定时器，那么必须另辟蹊径了。今天刚好在这里看到，有个古老的页面刷新技术，无论页面是否可见都能刷新：标签配合 refresh 属性。

简单介绍下这个 meta 头。假如页面区有下面这行代码，页面会每隔 600s 刷新一次。

直接刷整个页面当然可以让页面更新，但也会把页面当前状态刷掉，还浪费流量，体验并不好。我们可以在页面引入 iframe，每次只刷新 iframe。这个 iframe 很小，流量是省了，但是每次都刷新还是会浪费 HTTP 请求，用强缓存又会使得更新很麻烦。有没有更好的办法呢？

这时候，轮到 Data URI 出场了。我们直接将含有 meta 刷新的页面 URL 编码，以 Data URI 的格式放到 iframe 的 src 中，就不会产生请求了。看下实际效果截图：

ios meta refresh

这个 Demo 的代码如下，iframe 跟主页面没有跨域，怎么传递消息都行。考虑本文讨论的是高级浏览器，我直接用的 postMessage：




    
    
    后台页面更新测试 - meta refresh

在装有 iOS7 的 iPhone 上测试，也没问题。只是 iPhone 的 Safari 在预览多标签的时候，显示的是页面的截图，所以下图中虽然整个页面一直在更新，却只能看到 Title 的变化。

iphone meta refresh

实际上，Chrome PC 版支持这样的小于 1 的刷新间隔，所以这种方案也可以让 Chrome PC 版不可见页面的定时器间隔小于 1s。只是浏览器的刷新按钮会闪个不停，估计没人忍受得了。

最后，在 iOS 中，使用方案模拟的定时器，如果需要仅在 Tab 未激活时才刷新，也很简单。代码如下：

首先获取 meta 的刷新间隔，再设置一个间隔稍短的定时器，不断重置 meta 的刷新间隔。这样只要页面处于激活状态，meta 就没机会刷新。而页面非激活时，由于 setInterval 被冻结，页面又可以被 meta 刷新了。

分享到：

js_javascript数组对象总汇
今天带来，js 数组对象操作方法如下： 1. 创建数组 var array1 = [1,2] //方法一 var array2 = new Array() //方法二 array[0] = 1; array[1] = 2; 2.遍历数组 for循环和for...in 循环 var array1 = [1,2]; var l = array1.length; //for循环 for(var i=0;i

iframe跨域如何通信？iframe跨域通信解决...
iframe跨域如何通信？iframe跨域通信解决方案postMessage 在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实...

前端开发

不会被 iOS 停掉的网页定时器方案

Tags

About