浏览器多标签页同步、竞争问题

多标签页同步

问题的产生：

用户在浏览我们的网站的时候，往往会打开1个以上的标签页。此时，用户对某一个网页的操作，我们希望能够同步到所有标签页中。

比如，系统消息提示，如果一个网页已经点击查看的系统消息。其他标签页就应该能够同步到这个事件，然后也取消提醒。如果用户在某一个标签页登录操作，那么其他标签页也能够得知用户已经登录了，应该在系统状态条中显示正确的用户欢迎字样，而不是登录按钮。再比如，用户关闭了某个标签页的广告，那么在其他标签页的同类型广告，也应该关闭。诸如此类，保持页面同步是增强用户体验的一种方式。上面讲的情况下，标签页同步不是必须的，但有些时候，如果不同步标签页，会给用户带来极大的不便。

解决问题的思路：

众所周知，javascript是单线程的。每个标签页都拥有自己独立的javascript运行时和线程。这些独立的线程之间无法直接通信，因此只能寻找间接的方式。一般来说，我们可以采用定时器+本地存储的方式。每个标签页都在跑一个间隔执行的定时器，每次都去同步一次本次存储里的数据。如果检测到数据发生变化，就执行相应的操作来保证页面间的同步。本地存储的方式有很多。cookie、IE的userData、Flash的SharedObject、html5的localStorage。我们可以根据应用的情况考虑决定采用哪种本地存储的方式。

多标签页竞争

问题的产生：

在多标签页下，多个标签页会竞争同一资源。比如，多个标签页下，只允许有一个页面存在跟服务器之间的通信管道（一种长连接维持，以便服务器端推送数据，消息即时性高），这个页面我们称之为”主页面“。所有的页面都通过这个主页面获取服务端的最新数据，人人网，新浪微博等都是这么设计的。但问题是，在主页面被关闭时，由哪个页面再次担任”主页面“，就会产生竞争。

解决问题的思路：

在这里我使用主动退避的防冲突策略。每个标签页在间隔执行的定时器中，扫描本地存储，发现此时并无通信管道存在，就往本地存储中添加自己的页面ID（唯一），以此来通知其他标签页，通信管道由当前标签页建立。但是此处可能发生冲突，多个标签页几乎同时扫描到无通信管道的情况，都会往本地存储中添加自己的页面ID。因此需要一个主动退避的过程。添加页面ID后并不是立即建立通信管到，而是推迟一个小的时间段，待可能的冲突结束以后，再次检查本地存储中的页面ID是不是跟自己当前页面是一样的，如果一样，说明没有发生冲突，可以建立通信管道，否则，证明已经发生冲突，放弃建立通信管道。最终，多个冲突标签页将会只有一个真正建立起通信管道来。