Turbolinks 是一个用于加快浏览器渲染速度的前端库，它可以通过 AJAX 加载页面并部分替换 HTML 元素，而不需要每次都重新加载整个页面。Turbolinks 可以让你的 Web 应用更快地响应用户操作，提高用户体验。
安装和基本使用
在项目的根目录下，通过 npm 安装 Turbolinks：
npm install turbolinks
安装完成后，在项目中引入 Turbolinks：
import Turbolinks from "turbolinks"; Turbolinks.start();
在这个例子中，我们通过 ECMAScript 6 的模块化语法引入了 Turbolinks，并且调用 start() 方法启动 Turbolinks。start() 方法会自动监听页面链接（<a> 标签），并捕获点击事件进行处理。
当用户点击链接时，Turbolinks 会发送一个 AJAX 请求获取新页面的内容，并且将新页面的内容替换到当前页面中，而不是重新加载整个页面。如果新页面中也包含 Turbolinks 脚本，则 Turbolinks 会继续处理该页面。
高级使用
缓存
默认情况下，Turbolinks 会缓存已经加载过的页面，以便快速回退到之前的页面。如果要禁用缓存，可以通过以下方式配置：
Turbolinks.start({
cache: false
});事件
Turbolinks 可以监听页面的生命周期事件，例如 turbolinks:load、turbolinks:before-render 和 turbolinks:render 等。你可以使用这些事件来执行一些初始化工作或者与其他 JavaScript 库进行整合。
-- -------------------- ---- ------- -------------------------------------------- ---------- - -- ------------ --- ----------------------------------------------------- --------------- - -- ----------- --- ---------------------------------------------- --------------- - -- ----------- ---
外部脚本和样式表
在 Turbolinks 中，外部脚本和样式表不会再次执行和加载，因为它们已经被浏览器缓存。如果你需要重新加载这些资源，可以使用 Turbolinks.clearCache() 方法。
Turbolinks.clearCache();
表单
Turbolinks 对于表单也有特殊处理。默认情况下，Turbolinks 会自动拦截表单提交事件，并通过 AJAX 提交表单。如果要禁用这个行为，可以在表单中添加 data-turbolinks="false" 属性：
<form action="/" method="post" data-turbolinks="false"> <!-- 表单内容 --> </form>
总结
Turbolinks 是一个非常实用的前端库，可以显著提高 Web 应用的性能和用户体验。在使用 Turbolinks 的过程中，需要注意一些细节，例如缓存、事件处理、外部脚本和表单等。通过合理配置和使用，可以让你的应用更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32787
