2024-07-11 10:34:42 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-cn">
|
|
|
|
|
|
2024-07-11 16:08:51 +08:00
|
|
|
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
2024-07-11 10:34:42 +08:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
2024-07-23 13:47:57 +08:00
|
|
|
<title>访客体验优化</title>
|
2024-07-11 10:34:42 +08:00
|
|
|
<link rel='stylesheet' href='/css/light.css'>
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
|
|
|
<link rel="stylesheet" href="/css/normalize.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/remixicon.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/uikit.min.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/nprogress.min.css">
|
2024-07-12 14:55:59 +08:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
2024-07-12 16:26:14 +08:00
|
|
|
<link rel="stylesheet" href="https://usj.cc/usr/themes/Ying/css/barrager.css">
|
2024-07-11 10:34:42 +08:00
|
|
|
<script src="/js/jquery.min.js"></script>
|
2024-07-12 16:26:14 +08:00
|
|
|
<script src="https://usj.cc/usr/themes/Ying/js/jquery.barrager.js"></script>
|
2024-07-11 10:34:42 +08:00
|
|
|
<script src="/js/jquery.scrollUp.min.js"></script>
|
|
|
|
|
<script src="/js/pjax.js"></script>
|
2024-07-13 11:42:38 +08:00
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
|
|
|
|
|
2024-07-11 10:34:42 +08:00
|
|
|
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
|
|
|
|
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
|
|
|
|
<meta name="template" content="Ying" />
|
|
|
|
|
</head>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="head_author_img load-memos-editor">
|
|
|
|
|
<img src="https://avatars.githubusercontent.com/u/94612053" class="blog-img" width="80" height="80" alt="小赵同学的博客" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="site-description">
|
|
|
|
|
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
|
|
|
|
<nav class="nav social uk-visible@m">
|
|
|
|
|
<ul class="flat">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
|
|
|
|
|
|
|
|
|
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="yiyandes">风吹云散，云卷云舒</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
<nav class="nav">
|
|
|
|
|
<ul class="flat">
|
2024-07-11 16:08:51 +08:00
|
|
|
<li class="active"><a href="http://localhost:1313/">首页</a></li>
|
|
|
|
|
<li class="active"><a href="http://localhost:1313//about">关于</a></li>
|
|
|
|
|
<li class="active"><a href="http://localhost:1313//says">留言</a></li>
|
|
|
|
|
<li class="active"><a href="http://localhost:1313//archives">归档</a></li>
|
|
|
|
|
<li class="active"><a href="http://localhost:1313//links">友链</a></li>
|
2024-07-11 10:34:42 +08:00
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="pjax-container">
|
2024-07-12 14:55:59 +08:00
|
|
|
<article style="margin-bottom: 3.5em;">
|
2024-07-23 13:47:57 +08:00
|
|
|
<h1 class="post-title" itemprop="name headline">访客体验优化</h1>
|
2024-07-11 10:34:42 +08:00
|
|
|
<div class="meta">
|
2024-07-23 13:47:57 +08:00
|
|
|
作者: 小赵同学 浏览: 字数: 26 分类:
|
|
|
|
|
|
|
|
|
|
<a href="%e6%95%99%e7%a8%8b">教程</a>
|
|
|
|
|
|
2024-07-11 10:34:42 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="post-content" itemprop="articleBody">
|
2024-07-23 13:47:57 +08:00
|
|
|
<p>今天下午逛GitHub的时候，GitHub的首页推了一个这样的项目</p>
|
|
|
|
|
<p><a href="https://github.com/instantpage/instant.page">https://github.com/instantpage/instant.page</a></p>
|
|
|
|
|
<p>项目的介绍这样写到</p>
|
|
|
|
|
<h2 id="pc端">PC端</h2>
|
|
|
|
|
<pre><code>在用户单击链接之前，他们会将鼠标悬停在该链接上。当用户悬停 65 毫秒时，他们有二分之一的机会点击该链接，因此 instant.page此时开始预加载，平均为页面预加载留下超过 300 毫秒的时间。
|
|
|
|
|
另一种选择是在用户开始按下鼠标时加载页面而不进行预加载。这使得未使用的请求为零，同时仍然将页面加载平均提高了 80 毫秒。
|
|
|
|
|
您还可以在悬停时或链接可见时进行预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。
|
|
|
|
|
</code></pre>
|
|
|
|
|
<h2 id="移动端">移动端</h2>
|
|
|
|
|
<pre><code>用户在释放之前开始触摸显示屏，平均留出90 毫秒的时间来预加载页面。
|
|
|
|
|
</code></pre>
|
|
|
|
|
<p><img src="https://usj.cc/usr/uploads/2024/03/4028544490.png" alt=""></p>
|
|
|
|
|
<p>汉译过来大概意思就是，当鼠标即将悬停到a标签的之前，对该链接进行预加载，提高访问速度</p>
|
|
|
|
|
<p>因为之前有同学反馈我的博客点击文章加载有些慢，于是乎说干就干，项目很简单，如需上手，直接在body标签之前加入一行js代码即可</p>
|
|
|
|
|
<p>代码如下</p>
|
|
|
|
|
<pre><code><script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
|
|
|
|
|
</code></pre>
|
|
|
|
|
<p><img src="https://usj.cc/usr/uploads/2024/03/1392231476.png" alt=""></p>
|
|
|
|
|
<p>如上截图所示，当鼠标即将点击到文章链接，instant.page会对文章链接执行预加载，从而提高页面渲染速度</p>
|
|
|
|
|
<p>各位来访的朋友，有没有觉得速度比之前更快呢</p>
|
2024-07-11 10:34:42 +08:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="post-tags" style="margin-top: -30px;">
|
|
|
|
|
<nav class="nav tags">
|
|
|
|
|
<ul class="flat">
|
2024-07-23 13:47:57 +08:00
|
|
|
|
2024-07-11 10:34:42 +08:00
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
2024-07-12 14:55:59 +08:00
|
|
|
<hr class="uk-divider-icon">
|
2024-07-11 10:34:42 +08:00
|
|
|
<div id="comments" class="comments-area">
|
|
|
|
|
|
2024-07-13 15:15:32 +08:00
|
|
|
|
|
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
|
|
|
|
|
/>
|
|
|
|
|
<div id="waline"></div>
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
|
|
|
|
|
|
|
|
|
|
window.walineInit = walineInit;
|
|
|
|
|
|
|
|
|
|
window.initWaline = function() {
|
|
|
|
|
walineInit({
|
|
|
|
|
el: '#waline',
|
|
|
|
|
serverURL: 'https://waline.usj.cc',
|
|
|
|
|
lang:"zh-cn",
|
|
|
|
|
imageUploader:false,
|
|
|
|
|
search:false,
|
|
|
|
|
copyright:false
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.initWaline();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-07-11 10:34:42 +08:00
|
|
|
</div>
|
2024-07-12 17:10:51 +08:00
|
|
|
|
2024-07-12 16:26:14 +08:00
|
|
|
<script type="text/javascript">
|
2024-07-12 17:10:51 +08:00
|
|
|
$(document).ready(function () {
|
2024-07-12 16:26:14 +08:00
|
|
|
|
2024-07-23 13:47:57 +08:00
|
|
|
var currentPath = "\/post\/1279\/";
|
|
|
|
|
console.log(currentPath);
|
2024-07-12 16:26:14 +08:00
|
|
|
|
2024-07-12 17:10:51 +08:00
|
|
|
fetchCommentsAndCreateBarrager(currentPath, {
|
|
|
|
|
looper_time: 3000,
|
|
|
|
|
defaultAvatar: 'static/default-avatar.png',
|
|
|
|
|
defaultInfo: 'No comment',
|
|
|
|
|
defaultLink: '#',
|
|
|
|
|
close: true,
|
|
|
|
|
speed: 6,
|
|
|
|
|
color: '#fff',
|
|
|
|
|
old_ie_color: '#000000'
|
2024-07-12 16:26:14 +08:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2024-07-11 10:34:42 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-07-13 11:42:38 +08:00
|
|
|
<div class="footer">
|
2024-07-11 10:34:42 +08:00
|
|
|
<nav class="nav" style="clear: both;">
|
|
|
|
|
© 2019 - 2024
|
|
|
|
|
<br>
|
|
|
|
|
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
2024-07-12 16:26:14 +08:00
|
|
|
|
2024-07-11 10:34:42 +08:00
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="/js/iconfont.js"></script>
|
|
|
|
|
<script src="/js/lightgallery.umd.min.js"></script>
|
|
|
|
|
<script src="/js/uikit.min.js"></script>
|
|
|
|
|
<script src="/js/EasyLazyload.min.js"></script>
|
|
|
|
|
<script src="/js/view-image.min.js"></script>
|
|
|
|
|
<script src="/js/main.js"></script>
|
|
|
|
|
<script src="/js/mypjax.js"></script>
|
2024-07-12 14:55:59 +08:00
|
|
|
<script src="/js/nprogress.js"></script>
|
2024-07-13 15:15:32 +08:00
|
|
|
<script type="module">
|
|
|
|
|
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
|
|
|
|
|
|
|
|
|
|
window.walineInit = walineInit;
|
|
|
|
|
|
|
|
|
|
window.initWaline = function() {
|
|
|
|
|
walineInit({
|
|
|
|
|
el: '#waline',
|
|
|
|
|
serverURL: 'https://waline.usj.cc',
|
|
|
|
|
lang:"zh-cn",
|
|
|
|
|
imageUploader:false,
|
|
|
|
|
search:false,
|
|
|
|
|
copyright:false
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.initWaline();
|
|
|
|
|
</script>
|
2024-07-11 10:34:42 +08:00
|
|
|
</body>
|
2024-07-12 14:55:59 +08:00
|
|
|
|
2024-07-11 10:34:42 +08:00
|
|
|
</html>
|
2024-07-13 11:42:38 +08:00
|
|
|
|
