Google+中URL的渐进增强

在高级浏览器下点击Google+的一些链接,并不是直接从服务器返回完整的页面,而是通过AJAX刷新页面的局部。

如在首页点击以下链接:

  • https://plus.google.com/stream
  • https://plus.google.com/photos
  • https://plus.google.com/photos
  • https://plus.google.com/circles

浏览器通过AJAX请求服务器返回数据,动态刷新页面上的一部分区域,这样做可以减少网络传输,快速响应,以达到更好的用户体验。同时我们注意 到,点击链接的时候,浏览器上的地址栏也做出了相应的调整,并且不会刷新整个页面。如点击“圈子”的时候,地址会变为 https://plus.google.com/circles。

这在早期浏览器版本下是做不到的,因为给window.location赋值会导致整个页面的刷新,除非是用改变URL的hash达到同样的目 的。Google+是用HTML5中history.pushState来实现替换当前的URL同时不刷新整个页面。

关于history.pushState的官方文档:https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Google+针对不同的操作场景和浏览器,做了一些方案处理点击链接后的行为。

  1. 如果直接在浏览器地址栏中输入地址回车,那么就会从服务器拿完整的页面呈现给用户。
  2. 如果浏览器不支持history.pushState,会降级用url hash的方式。
  3. 如果浏览器支持history.pushState,就用AJAX取区块的数据,然后生成HTML刷新到相应的区域上,并调用 history.pushState更新地址栏,生成访问历史。

值得注意的是,Google+对AJAX返回的数据做了缓存处理,再次请求的话会从缓存中获取数据。

Google+中URL的渐进增强》上有3条评论

发表评论