使用Turbolinks启用更快的SPA导航

2020年12月30日11:11:21 发表评论 37 次浏览

本文概述

如果你是Rails开发人员, 那么你很有可能知道涡轮链接。 Turbolinks是一个灵活且轻巧的JavaScript库, 旨在使你更快地浏览网页。 Turbolinks提高了性能SPA(单页应用程序)通过用普通的整页负载替换部分负载。

但是, 它是如何做到这一点的呢? Turbolinks的工作原理是自动获取你的SPA页面, 交换其DOM主体并将其与头。这使库可以了解页面上发生的更改, 而不必推断整个负载。

Turbolinks拦截所有<a href>链接通常会将用户定向到应用程序中的页面, 并通过AJAX根据请求将其发送, 从而允许将正文替换为接收到的内容。

特点和优点

Turbolinks专注于自动导航优化, 这意味着你的页面将自动变得更快, 而无需进行太多更改。 Turbolinks将你访问的每个页面存储在内部缓存中, 因此, 当你需要访问同一页面时, Turbolinks可以从缓存中检索它, 以继续提高性能。你还可以在混合应用程序中使页面适应iOS和Android, 以确保导航控件能够跟进。

Turbolinks库可以与HTML页面, Ruby on Rails, Node.js, Laravel, 部分片段甚至JSON集成在一起。它还吹捧浏览器的适应性。 Turbolinks截获点击以改变幕后行为, 同时还帮助浏览器了解如何通过历史记录API。

当在SPA中从一页导航到另一页时, Turbolinks还具有避免著名的"闪烁"效果的直接好处。而且, 由于Turbolinks依赖于HTML5历史记录API, 因此所有现代浏览器都支持它, 并且还能够降级到旧版浏览器中的常规导航, 而不会引起任何副作用。

在本文中, 我们将更深入地探索Turbolinks库, 以了解其优点, 缺点以及你的应用程序如何受益。让我们潜入吧!

设置和使用

如果你要使用纯HTML和JavaScript应用程序, 只需将JavaScript文件导入你的头标签, 你就完成了。

因为该库最初是针对Rails应用程序的, 所以这是最广泛采用的语言。

要将其安装在任何Ruby on Rails应用程序中, 只需将相应的gem添加到你的宝石文件:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

使用Turbolinks启用更快的SPA导航1
gem 'turbolinks', '~> 5.2.0'

运行后捆绑安装命令, Rails将为你下载和安装gem。

它还要求你在JavaScript清单文件中添加以下注释:

//= require turbolinks

如果你打算将其与Node项目一起使用, 则安装会更加简单:

npm i turbolinks

在JavaScript捆绑包文件中, 请确保包含以下代码段:

var Turbolinks = require("turbolinks");
    Turbolinks.start();

在服务器上重定向

需要特别注意的是, Turbolinks在Rails环境中比在Node应用程序中运行更流畅, 例如, 因为它是从这种环境中产生的。

进行我们提到的自动重定向。当你通过以下方式在Rails中重定向到新页面时redirect_to, Turbolinks Rails自动添加一个标题为Turbolinks位置根据你的要求。

此标头对于Turbolink至关重要, 它可以识别给定的请求何时来自服务器没有帮助的重定向流。

另一方面, 在处理基于节点的应用程序时, Turbolinks除了接收到此标头外无法识别这种类型的操作, 这意味着你的客户端将必须手动处理此请求。

JavaScript:头vs身体方法

一般认为, 出于性能目的, 脚本标签必须始终包含在身体元素, 以允许在加载和处理JavaScript文件之前呈现整个页面。

但是, Turbolinks要求完全相反, 建议你将脚本放置在头标签。

这是因为Turbolinks会提取并解析页面的主体, 而忽略头部。如果将脚本保留在正文中, 则每次导航发生时, 都会一次又一次加载相同的脚本。

为了避免阻止页面加载并确保更快的首页加载, 你可以选择使脚本的导入异步:

<script async src="..."></script>

或者, 你可以添加推迟属性, 大多数现代Web浏览器都接受该属性, 以确保仅在页面加载后才处理脚本。

如果你的脚本经常更改, 那么另一个好的做法是为你提供脚本带有附加标签数据涡轮链接轨道属性, 以便仅当脚本包已更改时才能强制重新加载整个页面。

分析库

就Google Analytics(分析)(GA)等分析资料库而言, 不同的元素:

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

GA通常要求用户加载脚本元素后跟一个analytics.jsJavaScript文件。确保始终将前者导入体内, 然后将后者导入头部。这样, 你可以确保每个导航事件将为分析工具重新输入正确的变量。

默认进度条

好的...但是当请求的链接花费太长时间返回时会发生什么?这是一个常见的用例, 可能由于多种原因而发生, 其中最常见的一种是意外的网络延迟。

Turbolinks通过启用默认进度栏来解决此问题。如果你的页面处理时间超过500毫秒, 则Turbolinks将显示带有一些内置CSS样式的进度栏, 你可以根据需要覆盖它们。延迟也可以通过以下方式自定义API.

最后, 使用名为CSS的CSS类生成div元素turbolinks进度栏.

自动缓存

假设你正在浏览SPA, 并且希望在两次点击之前访问同一页面。为此, 请转到浏览器历史记录, 然后单击上一页的链接。通常, 你的SPA会通过再次从服务器重新获取整个页面来执行命令。

不必再次从后端请求所有内容会更好吗?也许页面被缓存了吗?

现在想象一下, 同一页面上显示的数据快速变化。回到历史记录并从缓存中检索页面将不起作用, 因为缓存的数据可能已过时。

对于这两种情况, Turbolinks提供了一种直接选择并显示缓存版本的好方法, 或者从后端并行获取新副本并在请求完成后将其替换在屏幕上。

由于其自动缓存机制, 所有这些都是可能的。

但是, 如果你想在缓存页面之前运行一些代码, 则可以通过以下方式进行此操作:

document.addEventListener("turbolinks:before-cache", function() {
  // your code here
});

如果要禁用该功能, 只需添加一个无缓存指令元标签:

<meta name="turbolinks-cache-control" content="no-cache">

自定义请求

Turbolinks的另一个很酷的功能是能够在提交请求之前对其进行拦截和自定义。

举例来说, 假设你希望为每个由Turbolinks触发的请求发送一个任意ID。为此, 你只需要映射以下事件侦听器:

document.addEventListener("turbolinks:request-start", function(event) {
  event.data.xhr.setRequestHeader("X-My-Custom-Request-Id", "MyId");
});

整洁吧?有关更多定制的可能性, 请查看API参考.

总结

Turbolinks已经使用了很长时间, 并且已经达到了很高的成熟度。很棒社区为了支持它, 它发展迅速, 并帮助许多SPA开发人员为其应用程序实现了更好的性能。

它的API参考是一本必读的文章, 因此请务必仔细阅读它, 以了解更多有关这个小而强大的库的潜力以及其改善导航时间和应用程序性能的能力。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: