Hexo博客页面功能优化

草帽lufei

发布于 2024-07-20 11:25:05

920

发布于 2024-07-20 11:25:05

文章被收录于专栏：程序语言交流

本文接上一篇 🚀秒开时代：博客性能优化指南，由于性能优化后把一些功能弄的不好使了，这次把那些功能异常问题排查一下，顺便再整理一下代码，同时把页面效果稍微优化一波，本文主要为实操记录分享

图标无了

由于魔改代码，导致自适应小屏的图标都不显示了，官方效果如下

魔改完后一个都不见了，o(╯□╰)o

分析官方页面的元素，这三个图标应该是字体图标

把官方字体文件解析一下看看效果，果然用的字体图标，通过解析发现官方的字体文件无用内容很多，下面是根据文字文件解析出来的文字图标效果图

提示这里使用的字体展示工具是 百度字体编辑器 ，把项目中的 woff 文件拖进去就看到图标的图片效果了 https://kekee000.github.io/fonteditor/

从实际场景出发，我这个站点移动端小屏基本没人看，要这些也没用，最多看个主页，目前这三个功能也都用不上，直接全部清理

分析 script.js

之前这个 script.js 中把 jquery 代码写了一些点击事件代码清理掉了，只留了一行 console.log 代码

分析线上的文件请求，发现这个 script.js 虽然只有两三行内容，也占用了几十毫秒，也直接删掉，同时把代码中的引入代码也清理掉，代码引入在 after-footer.ejs 里面

语言文件

系统中默认内置了很多其他国家语言，实际只需要中文和英文配置文件即可(英文后期可能会单独搭一个非中国区的站点)，因此把其他语言配置文件全部删掉，清理后的效果如下

标题与内容间距

由于之前的文件清理导致文章标题和内容之间间距太小了，不太美观

找到内容对应的元素 class 属性 article-entry ，给这个属性加个外边距 margin-top: 14px 搞定，属性位置在 article.styl 中

banner

目前的图片是一个长方形图片，背景黑色，右边有一个海贼王动漫人物——佩罗娜（幽灵公主）

因为图片不够长，设置的 background-size: contain; 使图片不变形，能够填充整个头部区域

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸 contain 缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色

当前图片转成 webp 格式后并压缩后是 18.6kb

尝试了多种图片压缩工具，发现在保证一定的质量效果下， 18.6kb 就已经是极限了

后来发现色彩颜色用的少的图片，体积小，压缩起来效果更明显，如下图片

这个图片是通过 PS 工具裁剪后，并压缩后的，当前图片体积为 4.67kb，比原来的图片少了很多倍，由于这张图片有点方，并且色彩相对单调，调整了图片在头部的显示位置，这样更协调一点

上面效果的字体也进行了放大调整，在 _variables.styl 文件中的 //Header 区域

// Header
logo-size = 52px
subtitle-size = 24px

图片位置调整在 header.styl 文件中的 #banner 中

#banner
  ...
  background-size: 100px
  background-repeat: no-repeat
  background-position: 50% 22%
  ...

图像压缩原理 1. 有损压缩：在有损压缩中，一些图像细节会被牺牲以减小文件大小。这种压缩方法适用于照片和图像，其中一些细微的变化不会对图像质量产生明显影响。常见的有损压缩算法包括JPEG 2. 无损压缩：无损压缩通过消除图像中的冗余信息来减小文件大小，同时保持图像质量。这种方法适用于需要保留图像质量的情况，如图标、线条图等。常见的无损压缩算法包括PNG和GIF 图像颜色越简单压缩效果越明显