63 lines
2.5 KiB
Markdown
63 lines
2.5 KiB
Markdown
---
|
|
pid: 116
|
|
layout: post
|
|
cid: 1279
|
|
title: 访客体验优化
|
|
slug: 116
|
|
date: 2024-03-01T22:12:00.000Z
|
|
updated: 2024-03-13T10:31:13.000Z
|
|
status: publish
|
|
author: 小赵同学
|
|
categories:
|
|
- 教程
|
|
tags: null
|
|
gemini_comment: >-
|
|
这篇文章分享的 instant.page
|
|
项目真不错，优化鼠标悬停预加载，提升网站速度。我试用了下，感觉浏览博客确实快多了，尤其是文章过多时体验尤为明显。这个项目简单易用，也感谢博主分享，让访客获得更好的体验。
|
|
ai_comment: >-
|
|
这项目太机智了！连用户手指悬空的那0.1秒都不放过，简直是程序员版的读心术。我家猫都没我鼠标移动得快，这下连网页都学会预判了。不过说真的，这种丝滑体验让我想起第一次用SSD的震撼——原来等待加载的时间都够泡杯咖啡了（笑）。博主实装后确实快得像偷看了我的浏览清单！
|
|
---
|
|
|
|
|
|
今天下午逛GitHub的时候，GitHub的首页推了一个这样的项目
|
|
|
|
https://github.com/instantpage/instant.page
|
|
|
|
项目的介绍这样写到
|
|
|
|
PC端
|
|
---
|
|
```
|
|
在用户单击链接之前，他们会将鼠标悬停在该链接上。当用户悬停 65 毫秒时，他们有二分之一的机会点击该链接，因此 instant.page此时开始预加载，平均为页面预加载留下超过 300 毫秒的时间。
|
|
另一种选择是在用户开始按下鼠标时加载页面而不进行预加载。这使得未使用的请求为零，同时仍然将页面加载平均提高了 80 毫秒。
|
|
您还可以在悬停时或链接可见时进行预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。
|
|
```
|
|
移动端
|
|
---
|
|
|
|
```
|
|
用户在释放之前开始触摸显示屏，平均留出90 毫秒的时间来预加载页面。
|
|
```
|
|
|
|
![][1]
|
|
|
|
汉译过来大概意思就是，当鼠标即将悬停到a标签的之前，对该链接进行预加载，提高访问速度
|
|
|
|
因为之前有同学反馈我的博客点击文章加载有些慢，于是乎说干就干，项目很简单，如需上手，直接在body标签之前加入一行js代码即可
|
|
|
|
代码如下
|
|
|
|
```js
|
|
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
|
|
```
|
|
|
|
![][2]
|
|
|
|
如上截图所示，当鼠标即将点击到文章链接，instant.page会对文章链接执行预加载，从而提高页面渲染速度
|
|
|
|
各位来访的朋友，有没有觉得速度比之前更快呢
|
|
|
|
|
|
[1]: 4028544490.png
|
|
[2]: 1392231476.png
|