allcake添加turbolinks

August 25, 2014

title

Turbolinks使站内跳转更快,原理是Turbolinks监听了页面内的链接,跳转页面用ajax请求并替换body内容,不用重新解析已加载的静态资源, 同时通过pushState修改地址栏地址。

####有多快?

看你的网站有多少静态资源,越多提升越大。

有依赖吗?

没有。

属性

  • data-turbolinks-track 检查服务器端静态文件是否已修改,如有重载页面
  • data-no-turbolink 关闭元素Turbolinks访问
  • data-turbolinks-eval 设置为false的时候,直接访问的页面时才会执行,通过Turbolinks访问则不会执行

事件

使用Turbolinks,站内跳转没有重新刷新整个页面,因而 DOMContentLoaded和jQuery.ready()会失效。

请求页面,加入了以下事件:

  • page:before-change 点击链接
  • page:fetch 客户端开始ajax请求新页面
  • page:receive 服务器端已接受ajax请求
  • page:before-unload 客户端准备渲染新页面
  • page:change 客户端已切换到新页面
  • page:load 客户端处理完成

默认,Turbolinks会缓存10个单位的资源, 你也可以自行设置。

  // View the current cache size
Turbolinks.pagesCached();

// Set the cache size
Turbolinks.pagesCached(20);

####手动触发Turbolinks跳转:

  //js
Turbolinks.visit(path)

//rails
redirect_via_turbolinks_to

兼容性

  • Safari 6.0+
  • IE10+
  • 最新版Chrome和Firefox

使用

初次使用,还没遇到大坑,页面浏览体验提升了很多。

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# incase turbolinks do not call document’s ready event.
# Usage: //= require jquery.turbolinks
gem 'jquery-turbolinks'

# Usage: //= require google-analytics-turbolinks
gem 'google-analytics-turbolinks'

# Usage: //= require turbolinks.redirect
gem 'turbolinks-redirect'
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require google-analytics-turbolinks
//= require turbolinks.redirect
//= require_directory .

Turbolinks.enableProgressBar();
Turbolinks.enableTransitionCache();
  <%= stylesheet_link_tag    'application', media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag 'application', "data-turbolinks-track" =>
true %>

更多阅读

Seriously. Numbers. Use them.

jQuery, Turbolinks and Asset Pipeline

Faster page loads with Turbolinks

Turbolinks 后端逻辑分析

Pros and Cons of Turbolinks in Rails 4 Applications

我会说 Turbolink 的体验就是一坨屎吗

Dangers of Turbolinks

Working with JavaScript in Rails

Comments