instant.page,提升网页加载速度 50% 的 JS 代码
本文最后更新于 321 天前,其中的信息可能已经有所发展或是发生改变。

引言

如果你觉得你网站页面的跳转比较慢,或者说你想变得更快,那么这么脚本我想会比较适合你。

项目

GitHub 卡片

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

官网:instant.page

原理:预加载用户想访问的页面,用户点击网站链接之前会将鼠标悬停在该链接上,当用户鼠标在超链接附件徘徊 65 ms 时就开始预加载目标网页到缓存,当用户真正点击链接时,浏览器就会直接读取缓存以此提升网站的访问速度。instant.page 是渐进式增强 ,对不支持它的浏览器没有影响。

使用方法

在网站的<body>添加一行 JS 代码,一般添加在<footer>区域。instant.page 的 JS 的有以下几种添加方法。

官方提供的方法(不推荐)

虽然有 Cloudflare CDN 的加速,但对于国内而言……抗打是的确抗打,但这速度……一言难尽。

<script src="//instant.page/5.1.1" type="module" integrity="sha384-MWfCL6g1OTGsbSwfuMHc8+8J2u71/LA8dzlIN3ycajckxuZZmF+DNjdm7O6H3PSq"></script>

下载后放到自己网站目录下

下载地址:Github Repo | GitHub Raw | HiCDN GH Raw

<script src="/instantpage.js" type="module"></script>

懒人 Ctrl C + Ctrl V

自己复制然后贴进去

<script src="https://raw.hichina.tk/instantpage/instant.page/master/instantpage.js" type="module"></script>

也是使用了 Cloudflare CDN,速度比官方的 instant.page 快不了多少,但总比 raw.githubusercontent.com 被墙了好些。

2023 年 6 月 12 日更新:使用亚太 CDN 加速,比 Cloudflare 速度更快。

分析

优点

  • 很明显地提升加载速度。
  • 只会预先加载 Html,不会加载图片之类的,不用担心损耗大量流量。

缺点

  • 只对站内连接有效果,比如说 subdomain1.example.com(不存在)使用后只能加速 subdomain1.example.com(不存在)无法加速 subdomain2.example.com(不存在)或 subdomain1.example.org(不存在)
  • 因为每次预加载都算访问成功,所以网站的 PV 数会指数增长。
  • 如果全站使用 CDN 加速,使用该脚本会大大增加请求数,所以不建议该类网站使用。

结语

总的来说,是一个不错的脚本,对于提升页面加载速度有很大帮助。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
Bmoji
热词系列
TVmoji
小电视
2233娘
那兔
洛天依
红小豆
上一篇
下一篇