前言
本文接上一篇 🚀秒开时代：博客性能优化指南 ， 由于性能优化后把一些功能弄的不好使了，这次把那些功能异常问题排查一下，顺便再整理一下代码，同时把页面效果稍微优化一波，本文主要为实操记录分享
图标无了
由于魔改代码，导致自适应小屏的图标都不显示了，官方效果如下
魔改完后一个都不见了，o(╯□╰)o
分析官方页面的元素，这三个图标应该是字体图标
把官方字体文件解析一下看看效果，果然用的字体图标，通过解析发现官方的字体文件无用内容很多，下面是根据文字文件解析出来的文字图标效果图
提示
这里使用的字体展示工具是 百度字体编辑器 ，把项目中的
woff文件拖进去就看到图标的图片效果了
从实际场景出发，我这个站点移动端小屏基本没人看，要这些也没用，最多看个主页，目前这三个功能也都用不上，直接全部清理
分析 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尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色
当前图片转成 webp 格式后并压缩后是 18.6kb
尝试了多种图片压缩工具，发现在保证一定的质量效果下， 18.6kb 就已经是极限了
后来发现色彩颜色用的少的图片，体积小，压缩起来效果更明显，如下图片
这个图片是通过 PS 工具裁剪后，并压缩后的，当前图片体积为 4.67kb，比原来的图片少了很多倍，由于这张图片有点方，并且色彩相对单调，调整了图片在头部的显示位置，这样更协调一点
上面效果的字体也进行了放大调整，在 _variables.styl 文件中的 //Header 区域
css
// Header
logo-size = 52px
subtitle-size = 24px图片位置调整在 header.styl 文件中的 #banner 中
css
#banner
...
background-size: 100px
background-repeat: no-repeat
background-position: 50% 22%
...图像压缩原理
有损压缩：在有损压缩中，一些图像细节会被牺牲以减小文件大小。这种压缩方法适用于照片和图像，其中一些细微的变化不会对图像质量产生明显影响。常见的有损压缩算法包括JPEG
无损压缩：无损压缩通过消除图像中的冗余信息来减小文件大小，同时保持图像质量。这种方法适用于需要保留图像质量的情况，如图标、线条图等。常见的无损压缩算法包括PNG和GIF
图像颜色越简单压缩效果越明显
测试性能
发布到 yiwuan.xyz 域名后，打开浏览器无痕模式，禁用缓存，首次打开博客 完成 用时 200ms 多一点，清除缓存并进行硬刷新 完成 用时 120ms 左右
设备和版本
- 网络：公司常规有线网络
- 系统：Win11 家庭版
- 浏览器：Microsoft Edge 126.0.2578.1 (正式版本) dev (64 位)
- 开发者工具：设置
禁用缓存选项 - 测试方式：浏览器单个 tab 页无痕模式下操作
项目源码地址
小结一下
目前以 Hexo 为基础的博客功能样式之类的优化就先告一段落了，后面有时间会把 SEO 相关的也优化一下，SEO 优化结束后这个项目将不再进行花时间维护
后期准备规划手写一个支持在线编辑的博客，支持自动发布等，也会把一些常见的功能加进去，例如留言板，分享，搜索等，整体会以功能实现为主，主要是做一些技术上的实验和探索，项目还是会以开源项目的形式，如果有兴趣欢迎你的加入
欢迎讨论交流，技术探索和文章整理不易，如果喜欢可以点赞支持一下
^_^微信公众号：草帽Lufei