首页 » 建站手册 » 多线程预加载,加快你的网站二次点击访问速度

多线程预加载,加快你的网站二次点击访问速度

谷歌已收录,更新于2018年12月27日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

先前看qqdie的主题,发现了预加载功能,也学会了这种方法,还挺好用。然后,今天single主题开发者保罗说他的cdn资源更新了,我就去换了一波,后来就想着找找自己添加的预加载js脚本的cdn地址,找了大概5到6个左右,统统报错。后来,终于找到一个可以用的js脚本,也就用上了。然后,发现,咦,速度怎么变快了。然后,F12看了一眼,竟然五线程同时开始预加载!!!废话到此为止,上代码。

footer.php

将以下代码添加到你的footer.php文件中</body>前。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/instantclick.js" data-no-instant></script>
<script data-no-instant>InstantClick.init('mousedown');</script> 

代码说明

代码中的第一行,引用了instantclick预加载脚本(多线程版本,站长无意中发现!!!);代码中的第二行,意思是鼠标摁下链接开始预加载(单线程得话,可以节省大约200ms左右,五线程自己想吧)。

效果演示

下图中的多线程加载,为进入网站链接后,点击文章页面,看到的情况;单线程加载为qqdie网站预加载单线程演示。当然qqdie网站的速度本来就不错,单线程多线程无所谓!

多线程预加载单线程预加载
多线程预加载,加快你的网站二次点击访问速度多线程预加载,加快你的网站二次点击访问速度

下图为测试网页点击加载的响应速度!

多线程预加载,加快你的网站二次点击访问速度

后续说明

第二行代码中的mousedown是鼠标摁下开始预加载,当然还可以用其他参数:下面的代码中,第一行表示,鼠标滑过就可是预加载目标链接,这种比较浪费资源;第二行表示,鼠标悬停100ms开始预加载,相对没那么消耗服务器资源;总之,站长推荐直接使用站长刚开始提供的代码!!!当然,新窗口不支持预加载,即如果你将要访问的链接,是新窗口打开的,预加载不起作用。

InstantClick.init()
InstantClick.init(100)

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 6 条评论

  1. f6yk f6yk说道:

    emmmm

    1. 枂下 枂下说道:

      大佬,有何指教

  2. 逝雪蓝冰 逝雪蓝冰说道:

    上一条评论暴露电脑配置啦,手机端再来评论一次,评论模块很不错的说。

    1. 枂下 枂下说道:

      XP大神,多谢指教

      1. 逝雪蓝冰 逝雪蓝冰说道:

        不敢当,你的博客体验很好!评论验证一百以内的加减法很出彩。

  3. 逝雪蓝冰 逝雪蓝冰说道:

    很厉害。

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫