Turbolinks

Turbolinks

Turbolinks® makes navigating your web application faster. 

功能:

  • 自动优化导航。
  • 无需server端配合。全HTML网页respond,不是部分网页片段或JSON
  • Respects the web。返回和刷新按钮如你所想的工作。友好的搜索设计。
  • 支持移动app

支持的浏览器:

Turbolinks。依靠HTML5 History API和Window.requestAnimationFrame。


 

 

Web APIs 之 HIstory

用于操作浏览器的session history。

属性:History.length 返回一个整数。代表session history中页面的数量,包括当前加载页面。

方法:

History.back() , 去往session history中的之前一页,等同于点击浏览器上的back按钮。

History.forward(), 和上面正相反。

History.go(), -1是back(), +1是forward().

 

DOM window对象提供了访问浏览器历史的方法,即通过history对象


 


 

Navigating with Turbolinks

每个导航是一次访问:

通过一个action,访问一个URL。

访问代表了整个的导航lifecycle, 从点击到渲染: 包括了改变浏览器history,搞定网络request,从cache中恢复一个网页的副本,渲染最终的response,并更新滚动位置。

2类型:

  • an app visit, 它有一个前进或取代的action。
  • a restoration visit, 它有一个restore的action。点击浏览器上的前进/后退按钮

Application Visits:

1.通过点击一个link,或者调用Turbolinks.visit(location), App Visits 被初始化。

2. 发起request, 当收到response, Turbolinks渲染它的HTML并完成访问。

如果可能,在visit开始后,Turbolinks立刻会从缓存中渲染之前看过的网页。在相同的网页之间,这改进了经常导航的速度。

app visits导致了浏览器history的变化。

默认的访问行为是前进。通过history.pushState,Turbolinks把一个新的登记推入history stack。

也可以不记录,在链接中加data-turbolinks-action="replace" 

Restoration Visits

点击浏览器上的前进/后退按钮后, Turbolinks自动初始化一个恢复访问。

条件满足时,从缓存渲染网页副本,不发出请求。否则会从网络取回一个新的网页副本。

 

注意⚠️:Application visits可以在开始之前被关闭

  1. 使用turbolinks:before-visit事件来监听
  2. 用event.data.url来核对访问的location
  3. 调用event.preventDefault来关闭访问。

 

 

在特定的链接上不用Turbolinks:

<div data-turbolinks="false"> <a href="/">Disableda> div>

 

 

建立你的Turblinks application

Turbolinks非常快,因为当你触发一个链接时,它不会重新载入网页。

相反,在浏览器中你的程序成为一个持久,长期运行的进程。

这需要你反思你建设你的Javascript的方法。

 

特别的,当你每次导航时,你不再依赖完全的网页加载来再设置你的环境。

JS window, document对象通过网页的变化存储它们的状态,其他你留在memory中的对象会保持在memory中。

 

和Script元素一起工作

你的浏览器自动加载和评估任何出现在初始化页面加载上的

你可能感兴趣的:(Turbolinks)