博主近期对博客进行了体验和视觉上的优化，主要包括友圈（RSS朋友圈）加载翻页和相册加载（缩略图方案）两个方面。在友圈加载翻页方面，解决了只能看30条、页面卡死、阻塞式文件锁和后台进程占资源等问题，通过缓存存全量、AJAX分页接口、前端加载更多按钮等措施，实现了点击加载更多可翻完全部订阅文章，切换页面秒开不卡，多用户同时访问不排队不冲突的效果。在相册加载方面，解决了直接拉原图、懒加载是假优化和无缩略图等问题，通过上传时自动生成缩略图、独立缩略图目录、批量脚本和前端展示改用缩略图等措施，实现了相册加载速度的显著提升。
此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结
利用最近的空闲，给博客做了一些体验和视觉上的优化。事实这里博主没怎么插手代码的改动，基本就是起到一个搬运工的效果。代码的改动，方案的选择都交给了阿甘，博主只负责提出自己的诉求。以及做代码文件的替换和效果的调试是否达到预期。
博客三大优化汇总
优化一：友圈（RSS朋友圈）加载翻页
改之前的弊端
| 问题 | 说明 |
|---|---|
| 只能看30条 | 缓存写入时被 array_slice($newrssFeeds, 0, 30) 截断，20+个订阅上百篇文章，只能看最新30条 |
| 切换页面卡死 | 用 fastcgi_finish_request() 做后台抓取，PHP进程没释放 session 锁，后台抓RSS期间点其他页面全卡住排队 |
| 阻塞式文件锁 | flock(LOCK_EX) 独占锁，多用户同时访问时后来的直接白屏死等 |
| 后台进程占资源 | 串行抓50个源、每个curl超时10秒，最坏跑500秒，把PHP-FPM进程占满 |
改的方案
缓存存全量：删掉 array_slice 30条截断，缓存里存所有抓取到的文章
加 AJAX 分页接口：页面顶部加 ?action=loadmore&page=N 端点，每页返回30条，带 hasMore/total
前端"加载更多"按钮：首屏渲染前30条，点击追加，含"加载中/失败重试/没有更多"三态，防重复点击
修卡顿（核心）：fastcgi_finish_request() 之前加 session_write_close() + ob_end_flush() + flush()，释放session锁
非阻塞锁：flock 加 LOCK_NB，拿不到锁直接退出不排队
缩短超时：连接超时2秒、总超时3秒、set_time_limit(30)
时间格式沿用主题公共方法 getHumanizedDate()（中途我自作主张加了JS版，被你叫停撤回，保持全站统一）
改之后的效果
从"只看最新30条" → 点击加载更多可翻完全部订阅文章
切换页面秒开不卡（session锁问题根除）
多用户同时访问不排队不冲突
原有的非阻塞异步更新、文件锁、双协议（RSS2.0+Atom）全部保留
踩坑记录：第一次测"加载更多"提示"没有更多了"——是旧缓存只存了30条，删掉 outrss.json 重新抓取后正常。
优化二：相册加载（缩略图方案）
改之前的弊端
| 问题 | 说明 |
|---|---|
| 直接拉原图 | 相册插件展示时 <img src> 指向原图，动不动十几兆 |
| 懒加载是假优化 | 虽然有 data-original 懒加载，但懒加载的还是原图，该卡照样卡 |
| 无缩略图 | 上传时只存原图，完全没有缩略图机制 |
改的方案
上传时自动生成缩略图：GD库把图片缩到800px宽、输出 WebP 格式（质量80）
独立缩略图目录（按你要求一一对应）：
复制
uploads/album/相册名/photo.jpg ← 原图 uploads/thumb/相册名/photo.webp ← 缩略图
批量脚本：给已有的存量图片一次性补生成缩略图
前端展示改用缩略图：扫描输出和图片网格的 src 都指向 .webp 缩略图
onerror 兜底回退（你选的方案A）：
复制
<img src="缩略图.webp" onerror="this.onerror=null;this.src='原图.jpg';">
缩略图丢失/404/换服务器不支持webp时，自动降级加载原图，永不白图
改之后的效果
| 场景 | 之前 | 之后 |
|---|---|---|
| 缩略图大小 | 没有 | 20~80KB（原图仍10MB保留） |
| 相册加载 | 慢到爆炸 | 秒开 |
| 点击看大图 | — | 照常加载原图 |
| 缩略图丢失/换服务器 | — | 自动回退原图，零404 |
踩坑记录：批量脚本首次跑出空目录——是 GLOB_BRACE 没匹配到图片（大小写扩展名问题），诊断脚本定位后修正。实际相册目录：alone / beauty / dream / lifedrop / static / todsay 共6个。
优化三：归档页面（年份折叠）
改之前的弊端
| 问题 | 说明 |
|---|---|
| 全部年份平铺展开 | 所有年份的文章一次性全铺出来，列表又长又难找 |
| 折叠"半成品" | 代码里已埋了 $open = $number === 0 ? null : " closed" 的种子，但缺配套CSS和点击交互，看起来完全没效果 |
改的方案
补 CSS：.archive-year 可点击 + ::before 箭头（▼/▶），.archive-list.closed { display:none } 控制折叠
PHP 加折叠标记：今年（第一个年份）默认展开箭头朝下，其他年份加 folded 类箭头朝右；顺手修正了误写进 id 里的 flex flex-col class
加点击JS：靠 nextElementSibling 找年份标题紧挨着的 <ol>，点击 toggle 展开/折叠
（后续）年份标题加文章数量：过滤掉说说类型后统计真实篇数显示
改之后的效果
| 状态 | 表现 |
|---|---|
| 今年（第一个年份） | 默认展开，箭头朝下 ▼ |
| 往年 | 默认折叠，箭头朝右 ▶ |
| 点击年份标题 | 平滑展开/折叠切换 |
| 年份标题 | 显示该年真实文章数量 |
三点优化一句话总结
| 模块 | 核心痛点 | 解决手段 | 结果 |
|---|---|---|---|
| 友圈翻页 | 只看30条 + 切页卡死 | 缓存全量 + AJAX分页 + 释放session锁 | 无限翻页、秒开不卡 |
| 相册加载 | 直拉十几兆原图 | WebP缩略图 + onerror回退原图 | 秒开、零404兜底 |
| 归档折叠 | 全年份平铺、折叠没生效 | 补CSS+JS交互 + 年份计数 | 今年展开往年折叠、可点击收放 |
