(近期)博客优化总结 - 流情的博客

AI摘要

博主近期对博客进行了体验和视觉上的优化，主要包括友圈（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交互 + 年份计数	今年展开往年折叠、可点击收放