只需一行代码,让你的网页“提前加载”

今天给大家带来一个非常实用的小技巧,只需 一行 JS 代码,就能让你的网站实现“提前加载”,提升页面打开速度。

项目简介

它是一个只有 16 KB 的 JavaScript 脚本。原理非常简单:
当用户把鼠标移动到一个链接上时,浏览器就会偷偷在后台预加载目标页面。等用户真正点击时,页面已经加载了一部分,打开就会特别快,几乎“秒开”。

使用方法

1.使用官方脚本

只要把这行代码添加到网站的 标签之前即可。(由于脚本托管在国外,只建议国外的朋友使用,国内的朋友加载官方的资源会比较慢哦)

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

 

2.自托管文件 (推荐)

只需将下面下载地址里的 js 文件 上传到自己服务器,然后在 标签之前根据路径添加下面的代码即可(强烈建议服务器在国内的朋友使用)

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

 

3.公共 CDN 资源 (推荐)

只要把这行代码添加到网站的 标签之前即可。(由于文件全球 CDN,所以强烈建议使用,节省服务器资源) (速度自测)

<script src="https://cdn.jsdelivr.net/gh/instantpage/instant.page@master/instantpage.js" type="module"></script>

 

<script src="https://cdn.jsdelivr.net/npm/instant.page@5.1.0/instantpage.js" type="module"></script>

如果你正在做博客、资源站或者 UI 设计类站点,不妨立刻试一试,把 instant.page 加入到你的项目中。

转自:https://mp.weixin.qq.com/s/zrjCvSjCFBIEf10ppxX99w

文章版权归原作者所有或来自互联网,未经允许请勿转载。如有侵权请联系我删除,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录