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, 从点击<a>到渲染： 包括了改变浏览器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可以在开始之前被关闭
- 使用turbolinks:before-visit事件来监听
- 用event.data.url来核对访问的location
- 调用event.preventDefault来关闭访问。
在特定的链接上不用Turbolinks:
<div data-turbolinks="false">
<a href="/">Disabled</a>
</div>
建立你的Turblinks application
Turbolinks非常快，因为当你触发一个链接时，它不会重新载入网页。
相反，在浏览器中你的程序成为一个持久，长期运行的进程。
这需要你反思你建设你的Javascript的方法。
特别的，当你每次导航时，你不再依赖完全的网页加载来再设置你的环境。
JS window, document对象通过网页的变化存储它们的状态，其他你留在memory中的对象会保持在memory中。
和Script元素一起工作
你的浏览器自动加载和评估任何出现在初始化页面加载上的<script>元素。
当你导航到新的一页：
- Turbolinks在新页面的<head>中寻找那些不存在于当前页的<script>元素。
- 附加它们到当前页的<head>中。
当每次渲染这个页面时：Turbolinks计算<body>内的<script>。
为了安装这个行为，或更复杂的操作，当这个页面改变时，使用使用turbolinks:load
理解缓存
Turbolinks维持近期访问的页面的缓存。
目的：
- 当restoration visits时，显示网页，无需通过网络。
- 当application visits时，显示临时的预览，来改进用户体验（意翻译：perceived performance）
当通过history导航（通过restoration visit），Turbolinks从缓存恢复网页，无需从网络下载一个新的副本。
否则，当标准导航，（通过app visit）, Turbolinks会理解从缓存恢复网页并作为预览显示，并同步的从网络下载新鲜的副本。这为频繁存取的网页(locations)给予illusion错觉--瞬间的网页加载。
Turbolinks在渲染一个新页面前，保存一个当前网页的拷贝，存到cache。
⚠️：注意拷贝这个网页用 cloneNode(true)，附加的事件监听和关联数据被抛弃。
准备网页缓存：监听"turbolinks:before-cache" 事件。
不缓存： 在<head>中加上<meta name="turbolinks-cache-control" content="no-cache">
安装JavaScript Behavior
观察导航事件：
trubolinks:load事件。页面初始化下载后，激活这个事件。
当Assets改变时，reload重装。
'data-turbolinks-track': 'reload'
Annotate asset elements with data-turbolinks-track="reload" and include a version identifier in your asset URLs.
个人理解:
在资源的元素<link> | <a> | <script>中加上 data-turbolinks-track="reload", 并加上一个href, src，即能定位到这个资源元素的标示id，并通过这个标志来判断它是否变化。
标示可以是数字，最后修改的时间标记，或者内容通过计算得到的摘要。
Turbolinks可以跟踪<head>中资源元素的URL, 如果它们发生了变化，就自动进行全页的刷新。
让指定的页面总是重下载：
<head>
...
<meta name="turbolinks-visit-control" content="reload">
</head>
Turbolinks.clearCache()
移除缓存，全部。
Turbolinks.visit(location, {action: action})
根据给的的action执行一个application visit。（advance(默认) | replace ），在执行visit前，会激活turbolinks:before-visit事件在document上。
Turbolinks的更多相关文章
- DOM window的事件和方法； Rails查询语法query(查询结构继承)； turbolinks的局限；
window.innerHeight 是浏览器窗口可用的高度. window.outerHeight 是浏览器窗口最大的高度. 打开chrome-inspector,上下移动inspector,看到s ...
- 实时更新数据，无需刷新：a,如何使用Turbolinks clearCache(), b Action Cable
视频: https://gorails.com/episodes/how-to-use-turbolinks-clearCache?autoplay=1 用途: 更方便的实时从服务器更新局部网页,在这 ...
- May we can use Turbolinks or Pjax in our web apps
Turbolinks[1]: Turbolinks makes following links in your web application faster.Instead of letting th ...
- 如何在 Rails 中搭配 Turbolinks 使用 Vue
[Rails] Vue-outlet for Turbolinks 在踩了 Rails + Turbolinks + Vue 的許多坑後,整理 的作法並和大家分享. Initialize the A ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 专业上的常用的工具和类库集 By 老衣
Visual Studio 2013 扩展 CodeMaid: 可快速整理代码文件,清理不必要的代码和杂乱的格式.并在开发时实时提供代码复杂度的报告,以便帮助开发人员降低代码复杂度.提高代码质量. C ...
- 期待已久的2013年度最佳 jQuery 插件揭晓
让人期待已久的2013年度最佳 jQuery 插件揭晓了.在过去的一年里,有很多很多的 jQuery 插件发布出来,而这里文章列出的这些插件从提供的功能更角度来看是其中的佼佼者.相信这些优秀的 jQu ...
- devise 小项目(一)
Devise源于Warden,而warden是一个基于Rack的验证权限gem,不过,使用devise实际并不需要任何关于warden的知识. 如果你之前有一些其他类似的维护验证权限功能的gem的使用 ...
- 灵感来自 Google & YouTube 的苗条的进度栏效果
NProgress.js 是纳米级的进度条插件.拥有逼真的的涓涓细流动画效果来告诉你的用户,某些事情正在发生.它的灵感来自于谷歌,YouTube,应用了,这款苗条的进度条是完美的,适用于 Turbol ...
随机推荐
- 无法在web服务器下启动调试。该Web服务器未及时响应
下午在运行项目的时候,突然出现了以下错误: 无法在web服务器上启动调试.该Web服务器未及时响应.可能是因为另一个调试器已连接到该Web服务器. 搜索了很久才找到这个解决方案: 1:Web.conf ...
- Hadoop学习之路（二十四）YARN的资源调度
YARN 1.1.YARN 概述 YARN(Yet Another Resource Negotiator) YARN 是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式的操 作系 ...
- kafka监控工具之一--kafka-manager
部署环境 jdk7 kafka_2.10-0.9.0.1 xshell4 rhel-server-6.5 kafka-manager 是功能比较多的kafka管控工具. 安装方法一 安装方法二 步骤一 ...
- Java Callable接口——有返回值的线程
实际开发过程中,我们常常需要等待一批线程都返回结果后,才能继续执行.<线程等待——CountDownLatch使用>中我们介绍了CountDownLatch的使用,通过使用CountDow ...
- Yahoo数据仓库架构简介
1. Yahoo数据仓库的整体架构 Yahoo数据仓库在基础架构上由hadoop集群和Oracle集群组成,hadoop集群是一个计算平台,完成所有ETL数据处理过程:Oracle集群只是一个查询环境 ...
- Echarts 的 Java 封装类库 转自 https://my.oschina.net/flags/blog/316920
转自: https://my.oschina.net/flags/blog/316920 Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-ja ...
- MySQL数据库----数据锁
数据锁 需求: 有一个账户,两个人在同一时间要对此账户操作,A要对账户充值100块,B要从账户中取出100块.操作前都要先看一下账户的 余额然后再操作. -- 窗口1 用户进行充值 -- 充值前 先查 ...
- Python之路----各类推导式
[每一个元素或者是和元素相关的操作 for 元素 in 可迭代数据类型] #遍历之后挨个处理[满足条件的元素相关的操作 for 元素 in 可迭代数据类型 if 元素相关的条件] #筛选功能 列表推导 ...
- 火狐使用Ctrl新开窗口不生效
使用window.open新开页面,火狐浏览器无法使用Ctrl新开窗口后页面停留在当前页面,兼容性问题,使用<a>或者<router-link>标签即可解决 --贡献者:毛毛
- Kafka学习之（五）搭建kafka集群之Zookeeper集群搭建
Zookeeper是一种在分布式系统中被广泛用来作为:分布式状态管理.分布式协调管理.分布式配置管理.和分布式锁服务的集群.kafka增加和减少服务器都会在Zookeeper节点上触发相应的事件kaf ...