Turbolinks与InstantClick：提升页面加载速度

天涯学馆

于 2024-06-15 11:06:24 发布

阅读量908

点赞数 5

分类专栏： Web大前端文章标签： javascript 前端架构

本文链接：https://blog.csdn.net/a1215383843/article/details/139698906

版权

Web大前端专栏收录该内容

150 篇文章 4 订阅

订阅专栏

Turbolinks 和 InstantClick 是两种用于提升页面加载速度的技术，它们通过不同的方式优化页面的导航过程，减少用户等待时间。

1. Turbolinks（Ruby on Rails 中的默认部分）

Turbolinks 是 Ruby on Rails 框架的一部分，它通过改变传统的页面导航方式来提高页面加载速度。Turbolinks 监听 click 事件，当用户点击链接时，它会通过 AJAX 请求加载目标页面的内容，然后替换当前页面的 body 和 title，而不是整个页面。这样可以显著减少页面加载时间，因为浏览器只需要重新渲染部分DOM，而不是整个页面。

Turbolinks的基本使用：

在Rails应用中，通常在 app/assets/javascripts/application.js 文件中包含Turbolinks：

//= require turbolinks
然后，Turbolinks 自动生效。如果你需要自定义行为，可以监听 turbolinks:load 或 turbolinks:before-render 事件：

javascript
document.addEventListener("turbolinks:load", function() {
  // 页面加载完成后执行的代码
});

document.addEventListener("turbolinks:before-render", function(event) {
  // 页面渲染前执行的代码
});

2. InstantClick

InstantClick 是一个独立的JavaScript库，适用于任何JavaScript驱动的网站，它通过预加载页面来实现快速的页面切换。当用户悬停在链接上时，InstantClick会异步加载目标页面，然后在用户点击时立即显示，从而实现几乎无感知的页面切换。

InstantClick的基本使用：

首先，需要在页面头部引入InstantClick库：

<script src="path/to/instantclick.min.js" data-no-instant></script>

然后，初始化InstantClick：

InstantClick.init();

为了避免与某些库（如Google AdSense）的冲突，可以使用 data-no-instant 属性标记不想使用InstantClick的元素：

<a href="/target-page" data-no-instant>预加载例外的链接</a>

InstantClick的事件监听：

InstantClick 提供了一些事件来处理页面加载的不同阶段：

InstantClick.on('change', function() {
  // 页面切换后执行的代码
});

InstantClick.on('beforeChange', function() {
  // 页面切换前执行的代码
});

InstantClick.on('visit', function() {
  // 访问新页面时执行的代码
});

比较与选择

Turbolinks 通常与Rails一起使用，而InstantClick适用于任何网站。Turbolinks更注重页面的渐进式渲染，而InstantClick强调即时加载。两者都可以显著提高页面加载速度，但InstantClick可能会导致一些兼容性和白屏问题，需要更仔细的配置和测试。在选择使用哪种技术时，应考虑项目的需求、技术栈和潜在的兼容性问题。

优化与扩展

1. 与现代前端框架的集成

Turbolinks 和 InstantClick 可能需要与现代前端框架（如React、Vue或Angular）进行集成，以确保组件状态的正确管理。这通常需要监听页面变化事件，并在页面加载时手动恢复或重新挂载组件。

例如，在React中，可以使用 componentDidMount 和 componentDidUpdate 生命周期方法来处理Turbolinks的页面变化：

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    if (window.Turbolinks) {
      window.Turbolinks.addEventListener('load', this.handlePageLoad);
    }
  }

  componentDidUpdate() {
    if (window.Turbolinks) {
      window.Turbolinks.removeEventListener('load', this.handlePageLoad);
      window.Turbolinks.addEventListener('load', this.handlePageLoad);
    }
  }

  componentWillUnmount() {
    if (window.Turbolinks) {
      window.Turbolinks.removeEventListener('load', this.handlePageLoad);
    }
  }

  handlePageLoad = () => {
    // 重新挂载或恢复组件状态
    this.forceUpdate();
  }

  render() {
    // ...
  }
}

2. 优化图片加载

为了进一步提升性能，可以使用懒加载或预加载图片。例如，使用 data-src 和 data-delay 属性配合InstantClick：

<img data-src="/path/to/image.jpg" data-delay="500" alt="Lazy-loaded image">

然后在InstantClick的事件中处理图片加载：

InstantClick.on('change', function() {
  var images = document.querySelectorAll('img[data-src]');
  for (var i = 0; i < images.length; i++) {
    images[i].src = images[i].dataset.src;
  }
});