前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《Chrome插件英雄榜》第91篇更新!FasterChrome鼠标悬停预加载让你的Chrome飞起来

《Chrome插件英雄榜》第91篇更新!FasterChrome鼠标悬停预加载让你的Chrome飞起来

作者头像
zhaoolee
发布2020-12-31 14:33:34
9600
发布2020-12-31 14:33:34
举报
文章被收录于专栏:木子昭的博客木子昭的博客

全球排名第一的建站工具WordPress,有一款非常受欢迎的扩展instant-page,它可以通过鼠标悬停预加载链接来提高Chrome访问网站的速度,开源地址:

https://github.com/instantpage/instant.page/blob/master/instantpage.js

从源码可知,鼠标悬停65毫秒,会自动加载下一页网页

基于instant-page的FasterChrome

打开Chrome开发者工具,可以看到鼠标悬浮到超链接时,插件会发起预加载的请求

完成预加载后,当鼠标点击页面时,打开页面的速度会很快

如果你是一名开发者,可以引入以下代码,让网站提升至少1%的性能

代码语言:javascript
复制
<script src="https://instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

《FasterChrome》 下载链接

https://chrome.google.com/webstore/detail/fasterchrome/nmgpnfccjfjhdenioncabecepjcmdnjg

离线包

https://raw.githubusercontent.com/zhaoolee/ChromeAppHeroes/master/backup/091-faster-chrome.zip

小结

FasterChrome的实现方法,与各类玄学黑科技有本质的区别,通过预先缓存,让页面打开的速度有肉眼可见的提升。

人类从指向超链接到点击,平均需要300ms的反应时间,而FasterChrome让时间缩短为65mm,每个页面相当于提前抢跑了235ms,对于使用了CDN的网站,235ms可以下载100KB~300KB左右的资源文件,当人类点击下鼠标的时候,页面的html已经基本下载完成了,轻松实现了页面秒开的效果。

写在最后(我需要你的支持) / At the end (I need your support)

  • 本文属于Chrome插件英雄榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/ChromeAppHeroes
  • This article is part of the ChromeAppHeroes project. Github link : https://github.com/zhaoolee/ChromeAppHeroes
  • Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类, 如果你喜欢这个项目, 希望你能为本项目添加一颗 ?星.
  • ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star ? to this project.
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基于instant-page的FasterChrome
  • 如果你是一名开发者,可以引入以下代码,让网站提升至少1%的性能
  • 《FasterChrome》 下载链接
  • 小结
  • 写在最后(我需要你的支持) / At the end (I need your support)
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档