Instant.page是一个免费的开源库，它使用即时预加载，这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML，尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器，以便您的页面保持流畅，并且在用户启用数据保护程序时不会预加载。 即时页面功能可让您在用户将鼠标悬停在链接上后在后台自动预取URL。这导致几乎瞬时的加载时间，并改善了用户体验和感知性能（网站感觉有多快）。我们利用Alexandre Dieulot开发的Instant.page库。 <link href=”https://domain.com/post”> 预取的工作原理 就服务器和移动设备的性能提升和低利用率而言，以上是最佳组合。该功能尊重您的移动设备（Android、iPhone）是否启用了数据保护程序或低数据模式。如果打开，则不会预加载任何内容。 由于此功能适用于鼠标悬停，因此不会显示在速度测试工具上。但我们鼓励您在启用后点击您的网站。你应该能感觉到不同！ 亚马逊和其他公司发现，消除100毫秒的延迟可以提高1%的销售额。但是网络上的延迟很难克服。 Instant.page使用即时预加载——它在用户点击页面之前预加载页面。 （1）桌面端 在用户点击链接之前，他们将鼠标悬停在该链接上。当用户悬停65毫秒时，有二分之一的机会点击该链接，因此instant.page此时开始预加载，页面预加载平均超过300毫秒。 另一种选择是在用户开始按下鼠标而不预加载时加载页面。这使得未使用的请求为零，同时仍将页面加载平均提高了80毫秒。 您还可以在悬停时或在链接可见时立即预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。 （2）移动端 用户在释放之前开始触摸他们的显示器，平均留出90毫秒让页面预加载。 另一种选择是在链接可见时立即预加载链接。 欺骗大脑 人脑将不到100毫秒的动作视为瞬间。因此，instant.page让您的页面即使在3G上也感觉即时（假设您的页面渲染速度很快）。 轻松使用您的服务器和用户的数据计划 仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML ，尊重您的用户和服务器的带宽和CPU。 它使用被动事件侦听器和requestIdleCallback以使您的页面保持流畅。它尊重数据保护模式。它是1kB并在其他所有内容之后加载。它是免费和开源的（MIT许可证）。 具有数据属性的附加选项 您可以使用以下data-instant属性启用即时页面的其他选项。只需将这些属性中的任何一个添加到文档中的<body>标记，剩下的就交给我们了。 您可以在instant.page了解更多关于这些不同属性的作用。有关将其中一些属性添加到<body>标记的一些方法，请参见下文。 data-instant-allow-query-string data-instant-allow-external-links data-instant-whitelist data-instant-intensity=”mousedown” data-instant-intensity=”mousedown-only” data-instant-intensity=”150″ data-instant-intensity=”viewport” data-instant-intensity=”viewport-all” data-instant-mousedown-shortcut 页面加载后添加JavaScript 第一种方法是在页面加载结束时触发JavaScript。可以将以下代码添加到WPTurbo中的页脚代码框中。 假设您想更改脚本在预加载前等待多长时间（以毫秒为单位）的数据强度时间。您可以像这样添加它： <script type=’text/javascript’> document.body.setAttribute(‘data-instant-intensity’, ‘150’); </script> 一次只能使用一个data-instant-intensity属性，但您可以将其与其他属性混合搭配。因此，例如，这将起作用： <script type=’text/javascript’> document.body.setAttribute(‘data-instant-intensity’, ‘150’); document.body.setAttribute(‘data-instant-allow-external-links’, ‘true’); </script> 注意：上述方法会向您的站点添加一个额外的请求。 与body标签合并 第二种方法是在呈现页面时合并现有body标记中的属性。这不需要额外的请求。可以将以下代码添加到 WPTurbo […]
