折影轻梦
折影轻梦
文章39
标签11
分类5
博客,我优化了什么?

博客,我优化了什么?

由于博客性能一直很弱鸡,所以花了两天时间优化了一下,以下,是我的优化成果。

先上跑分

af94d4afe7524d6522600fae70430e67.png
f5c19b5607a3f5de94a15b007628e72f.png
4be54fe2007099d4c791c8a13489af77.png

去掉一些依赖

❌ 移除 fancybox
❌ 移除 SmoothScroll
❌ 移除 jQuery
❌ 移除 Pjax
已经 2020 年,我觉得 jQuery 是不需要的。
Edge 的正式发布自带良好的平滑滚动效果,加上 SmoothScroll 在 MacOS 上会有卡顿感,所以移除。
移除 fancybox 是因为平常真的不怎么用,还是直接鼠标右键打开原图看舒服。

Lazyload 优化

在此之前,我的博客首页一直有一个问题,图片加载抖动,所以我直接让文章每一个图片输入图片的长度和高度来计算图片占位大小来防止抖动。
不过确实麻烦了点。
此前的 Front-matter

---
title: 博客,我优化了什么?
cover: https://cdn.jsdelivr.net/gh/nexmoe/nexmoe.github.io@latest/images/cover/compress/motorcycle-1690452_1920.jpg
---

现在的 Front-matter

---
title: 博客,我优化了什么?
cover: https://cdn.jsdelivr.net/gh/nexmoe/nexmoe.github.io@latest/images/cover/compress/motorcycle-1690452_1920.jpg
coverWidth: 1920
coverHeight: 1206
---

并且对 Lazyload 加了一个非线性动画,给人一种更快乐的感觉。

资源合并

这个操作就很方便了,因为 jsdelivr 自带了合并功能,可以自由的合并多个库
比如 https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/nexmoe/nexmoe.github.io@latest/css/style.css,gh/nexmoe/nexmoe.github.io@latest/lib/mdui_043tiny/css/mdui.css,gh/nexmoe/nexmoe.github.io@latest/lib/iconfont/iconfont.css
所以我把博客所有的 css 和 js 文件分别合并成了一个,因此浏览器请求量减小,所以速度也有些许提升。

图片压缩

我的首页图就是看个爽,为什么要原图且无损?
所以我统一将图片全部压成 920px 的宽度了,大量减小图片大小。速度暴涨。

依赖库简化

由于主题依赖了 mdui,而 mdui 会加载字体,所以我把它本地化,然后删掉了颜色类,辅助类,以及字体类。
速度也有些许提升。

部分 js 用 nodejs 重写

以前启用 lazyload 和一些功能,我是用 js 写的,所以在网页渲染的时候需要重新渲染,所以需要占用一定的性能。
所以我就将一部分使用 nodejs 重写,Hexo 会在编译的时候完成工作,因此在浏览器访问时就不需要渲染了。