Loading... > 本站近四年运行在阿里云1H1G的轻量服务器上,整站共计1GB多,也没挂CND,使用后效果明显提升 Instant.page是一个免费的开源库,它使用即时预加载,这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面,并且仅预加载HTML,尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器,以便您的页面保持流畅,并且在用户启用数据保护程序时不会预加载。 ### 原理 其实简单来说,就是当用户鼠标悬停在站内链接上超过65ms时,他们就有点开该链接的概率,因此instant.page就进行预加载,然后用户访问该页面时浏览器就是从cache里面读取,因此加快了页面打开速度。 **PC端:** 当用户的鼠标在链接上悬停了65毫秒时,这个脚本开始预加载页面;还有一种就是在用户开始按下鼠标时 ,开始预加载页面。 **移动端:** 用户在滑动屏幕时,链接可见时,就开始预加载。 仅当用户很有可能会访问页面时才预加载页面,并且只会预加载 html 页面,不会加载图片等资源,所以不用担心与流量损耗等问题。 instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。 官网地址:[https://instant.page](https://instant.page/) GitHub 地址:[https://github.com/instantpage/instant.page](https://github.com/instantpage/instant.page) ### typecho 调用方法 #### 引用官方JS 在你网站的`</body>` 标签前添加: ``` <script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script> ``` 使用此脚本后浏览数据增加,因为预加载会被统计成正常浏览次数。 ### 注意事项 引入代码必须放置在`</body>`前面,而不是`<head></head>`中,否则会因为页面没有完全加载完毕,而导致instant.page无法使用 instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。 instant.page只会预加载自己的站内链接,而不会预加载其他外链。 参考:[黑桃三](https://heitaosan.com/article/121) 最后修改:2023 年 05 月 15 日 © 来自互联网 打赏 赞赏作者 支付宝微信 赞 5 如果觉得我的文章对你有用,请随意赞赏
1 条评论
Typecho还有其他可以优化的地方,比如使用CDN之类。我之前就优化默认主题,把网站在 GTmetrix 的分数弄到 99。
(来自开往)