# 一个 JS 脚本实现网站预加载，提升页面加载速度

TRHX

2019-08-23

WEB前端

字数统计:

347字

阅读时长≈

1分

instant.page 使用即时预加载技术，在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时，浏览器会对此页面进行预加载，当用户点击链接后，就从预加载的缓存中直接读取页面内容，从而达到缩短页面加载时间的目的。

<fancybox>
</fancybox>

以我博客为例，使用了这项技术后，当鼠标在一个链接停留超过 65 毫秒时，Network 里可以看见相关文章已经预加载出来了，而停留时间过短就不会预加载（红色部分，状态为 canceled）

使用方法：
将以下HTML代码放在</ body> 之前即可：

    1

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

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

    1

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

也可以直接使用我的，使用 jsDeliver CDN 加速，速度还可以：

    1

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

参考资料：《网站预加载 JS 脚本 instant.page》——by 左岸 ；instant.page官网

您的喜欢是作者写作最大的动力！❤️

- PayPal
- AliPay
- WeChatPay
- QQPay

Donate

最后更新于 2019年9月9日

instant.page

JS 预加载

###### 上一页

#### Python3 爬虫学习笔记 C01

###### 爬虫 urllib

###### 下一页

#### 网站ICP备案和公安备案流程

###### ICP备案 公安备案

#### 评论

## ๑۩ﺴ TRHX ﺴ۩๑

欢迎光临

QQ 交流群 Telegram 交流群

家乡产业 - 恩施富硒茶

恩施硒茶、利川红•冷后浑，源自北纬30°的功夫红茶，产于世界硒都 — 湖北恩施，2018年4月28日，国家主席习近平在武汉东湖同印度总理莫迪一同品尝了利川红，富硒茶具有降脂减肥、防癌抗毒、提神醒脑等功能，传统炒青工艺，正宗产地，色泽翠绿，茶香浓郁，爱茶养生人士的不二选择！进店逛逛

文章分类

- BLOG
  (4)
- CDN
  (1)
- Hexo
  (9)
- Java
  (1)
- Linux
  (2)
- Markdown
  (2)
- Python3 学习笔记
  (39)
- 基础学习
  (9)
- 学习经验
  (4)
- 爬虫学习
  (18)
- 爬虫实战
  (8)
- VPS
  (1)
- WEB前端
  (2)
- 图床
  (1)

热门标签
12306 58同城 Ajax BLOG Beautiful Soup CDN Coding Pages Deepin Elicpse GitHub Pages Github Github Pages HTTPS Hexo ICP备案 JDBC JS 预加载 Markdown Material X MongoDB MySQL PEP8 PicGo Pygame Python Redis SEO SQL Server 2012 SSR Selenium Ubuntu User-Agent VMware VPS XPath if语句 input()函数 instant.page jsDelivr lxml pyspider requests spfk urllib while循环 主题个性化 代理 公安备案 函数 列表 变量 哔哩哔哩 图床 图形验证码 垃圾 备份 字典 安居客 年终总结 异常 技巧 操作列表 数据类型 文件 文件储存 无界面浏览器 模块 正则表达式 滑动验证码 点触验证码 爬虫 猫眼电影 瓜子二手车 类 继承 编辑器 虎扑论坛 豆瓣电影
最近在听