JS 脚本实现网站预加载,提升页面加载速度(一行js代码加速网站)

玩技站长
玩技站长
管理员, Keymaster
11275
文章
1
粉丝
运维笔记3653字数 415阅读1分23秒阅读模式

JS 脚本实现网站预加载,提升页面加载速度(一行js代码加速网站)

项目地址

https://github.com/instantpage/instant.page

国外加速

将以下HTML代码放在</ body> 之前即可

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>

但是此脚本是官方的,储存在国外服务器,对国内访问不太友好,可以将该JS脚本储存到自己的服务器上,点此获取该JS脚本,然后再根据以下格式在</ body> 之前引用:

<script src="`存放路径`/instantclick-1.2.2.js" type="module"></script>

国内加速:jsdelivr加速

将以下HTML代码放在</ body> 之前即可

<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.0.2/js/instantclick-1.2.2.js" type="module"></script>

国内加速:bootcdn加速

<script type="module" src="https://cdn.bootcss.com/instant.page/5.2.0/instantpage.js"></script>

国内加速:staticfile加速

<script src = 'https://cdn.staticfile.org/instantclick/3.1.0/instantclick.min.js' data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

定义预加载

白名单属性:data-instant

<a href="https://www.playezu.com" data-instant>玩技e族</a>

黑名单属性:data-no-instant

<a href="https://www.baidu.com" data-no-instant>百度</a>

全局允许:在 <body> 中添加 data-instant-allow-query-string 属性

局部允许:在使用的标签中添加 data-instant 属性(和白名单属性一样)

仅预加载部分指定链接(白名单模式):如果只想预加载特定的链接,请在 <body> 中添加一个 data-instant-whitelist 标签,并通过向其添加 data-instant 属性来标记要预加载的链接。

注意事项

预加载可能会存在增加耗费少量 CDN 流量问题,请自行对比后考虑是否使用。

原创声明:本文章为原创内容,所有文章均由博主亲自撰写,严格遵循原创原则。我们承诺不使用任何人工智能生成的内容,所发布的每一篇文章都经过深思熟虑,旨在为读者提供真实、有价值的观点和信息。我们坚信原创才是知识分享的根本,致力于为广大读者呈现最具真实性和独特性的文章。感谢您的支持与关注,欢迎持续关注我们的原创内容。

资源下载
仅限注册用户下载
注意:源码一经出售不退不换介意勿拍,如涉及版权问题请及时与站长联系
玩技站长微信
发送[PLAYEZU]入群
weinxin
rainbow-shownow
微信号已复制
玩技官方公众号
官方微信公众号
weinxin
PLAYEZU
公众号已复制
 最后更新:2024-8-28
  • data-instant属性
  • data-no-instant属性
  • HTM
  • HTML代码
  • instant.page
  • instantclick
  • instantpage.js
  • jsdelivr加速
  • 最新instantpage.js
  • 服务器
  • 项目
评论  3  访客  3
    • 萧瑟
      萧瑟 4

      效果怎么样?

    匿名

    发表评论

    匿名网友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
    确定

    拖动滑块以完成验证