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个单位的资源, 你也可以自行设置。
####手动触发Turbolinks跳转:
兼容性
- Safari 6.0+
- IE10+
- 最新版Chrome和Firefox
使用
初次使用,还没遇到大坑,页面浏览体验提升了很多。
更多阅读
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