关于这几日对博客做的一些优化·贰
关于这几日对博客做的一些优化·贰
- 又对博客优化了一波。
CDN
都上备案了，不能白跑一趟，火速上了又拍云的 CDN 加速，说实话我对 CDN 这方面完全不懂，只能随便设置两下，但是提升还是很大的。
一些设置
全局缓存一天（源站资源迁移的生效条件是缓存过期时间必须大于 24 小时） 分段缓存 智能压缩均拉到3级 页面压缩打开 证书使用了腾讯云免费发的，直接上传就能用了。 TLS 1.3 开启，最低 TLS 1.0 开启 HTTP/2 + Server Push （自动推送 css 和 js ） 想少挨点打，还是开了 IP 限制：一分钟内超过50个请求就屏蔽10分钟 CC 防护打开 WAF 保护打开 WebP 自适应打开
DNS
境外访问解析到 Vercel，国内则解析到又拍云。
一波操作后，直接就是绿油油一片o(￣▽￣)ブ
好快的斯比的
JS 优化
加入了懒加载、谷歌统计和 Service Worker。然后把 InstantClick 去掉了。
懒加载
使用了 lazysizes。
使用及其方便，只需引入一行 <script> 即可：
<script src="lazysizes.min.js" async></script>然后我们需要给 <img> 设置 class="lazyload" data-src="..."
Hexo 可以在主题中加入 helper 来影响生成的文件，直接将helper放入主题目录的 scripts 文件夹里就会自动启用了。这里直接从 Butterfly 主题抄了份：
/**
* Butterfly
* lazyload
* replace src to data-lazy-src
*/
'use strict'
const urlFor = require('hexo-util').url_for.bind(hexo)
function lazyload (htmlContent) {
const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
}
hexo.extend.filter.register('after_render:html', function (data) {
const config = hexo.theme.config.lazyload
if (!config.enable) return
if (config.field !== 'site') return
return lazyload.call(this, data)
})
hexo.extend.filter.register('after_post_render', data => {
const config = hexo.theme.config.lazyload
if (!config.enable) return
if (config.field !== 'post') return
data.content = lazyload.call(this, data.content)
return data
})按照自己需求改动即可。
谷歌统计
不知道是什么时候谷歌统计已经升级成了 gTag.js，总之要兼容 InstantClick 我是不知道怎么弄，总是重复发生请求，一次访问会统计两次。 既然解决不了问题，那就解决掉提出问题的人，直接对 InstantClick进行一个 Delete。
Service Worker
老东西了，貌似现在还有升级版，不过我这个主题最初编写的时候就有加入 sw.js，后来因为和 InstantClick 冲突就注释掉了。这下又能开起来了。
"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js")Instant.Page
删除 InstantClick 主要是发现了作者的另一个项目 Instant.Page，使用起来更方便一些，效果也相差无几。
<script src="instantpage-5.1.0.js" type="module" defer></script>原理主要是利用 <link rel="prefetch" href="url"> 来预加载页面之后缓存起来，在点开链接的时候就可以直接使用缓存的内容。
默认是在鼠标悬停链接上65ms后开始预加载，但是这样有可能造成浪费，可以在 <body> 加入 data-instant-intensity="mousedown" 更改为鼠标按下时开始预加载。
也有像 data-instant-intensity="viewport-all" 全屏预加载这种丧心病狂的设置。之后或许会单独出一篇文章介绍 Instant.Page。