谈谈不受欢迎的博客技术特征

一位知乎网友

请问你的博客是那个给文本加上渐变配色代码块，用衬线字体article巨大阴影半透明背景加莫名其妙的地方抄来的canvas动效，打开会自动播放网易云音乐且加载一个Live2D小人挡住播放器控件，还有自定义光标加上点击特效且复制文本的时候会自作主张加上版权通告，切出网页以后title还会变成莫名其妙的文本内容的吗

这位网友讲述了一个尖锐的博客现象，但没有触及我认为的核心问题：博客的核心定位是“内容传递”与“用户预期”，但部分技术反向会破坏体验、流失读者。在这些负面技术特征下，用户可能因反感直接关闭页面，甚至不再回访。

或者换句话说：有些功能虽好，但受限于开发者的产品认知或技术水平，实现后反而变成了干扰用户体验的痼疾。

用户体验

切换标签页时更改标题

一些博客网站在用户离开时，会将网页标题改为挽留文本，这当然十分有趣。但当打开一组标签页时，后果便变得灾难起来，用户无法识别各标签页的内容。

如果你的博客网站不是为了自娱自乐，而是想真正为读者传递有价值的信息，那么过于花哨的标签页标题技巧很可能在用户查阅资料时造成困扰。

打开网页时自动播放声音

浏览器限制自动播放是为了清静，但是有开发者在利用“首次交互后播放”的规则，来实现自动播放背景音乐或语音播报。

这种无预警的侵入在办公或公共场合只会让用户陷入尴尬。当用户的第一反应是“关掉页面”而非“阅读内容”时，这个功能就彻底失败了。真正高级的设计，从不靠剥夺用户的“掌控感”来刷存在感。声音若有价值，请把开关留给用户，而不是强加于人。

正文使用难以阅读的艺术字体、对比度过低的配色

字都看不清，不读了！

将鼠标指针改为难以识别的光标样式

让我想起了用别人电脑时找不到鼠标指针的尴尬经历。如果你认为自己网站的光标样式比用户设置的更好，那么它起码应当易于识别。

更改右键菜单

右键菜单没什么用，但开发者觉得右键菜单没什么用不太可能，于是在博客中加入了右键菜单。它能——阻止召唤出真正的右键菜单。

用户点击右键是为了使用功能，而不是点着玩。一个好的设计应该补足体验，也就是让用户知道右键能做什么，而不是通过剥夺原生功能来强刷存在感。

阻止交互的弹窗、加载动画

先被一个强迫点击“我知道了”的“更新日志”挡住去路，关掉它，又是全屏 Google Ads 的贴脸输出。别笑，你试你也过不了加载动画：一个圆形头像在白屏中心有节奏地闪烁。一秒，两秒……它闪烁得如此优雅，页面却始终卡在“最后一公里”。

如果你的加载动画一定要等待所有资源，请给用户一个网络不好时能关掉它的机会。

技术误用

质量不佳的 JS CDN

很多博主迷信 jsDelivr、UNPKG 或相关公益/自建镜像，但这并不是最优解。

公共常用 JS 库完全可以通过更快的、选择更多的国内 JS CDN 提供。它们大多是 cdnjs 的镜像，只要在 cdnjs 找到库，就能通过替换域名来使用。

私有 GitHub 仓库、npm 包不推荐使用公共加速服务。公共 CDN 提供的应当是公共受益的内容，保障稳定性、加载速度、安全性才是公共 CDN 应该做的。

Pjax + PACE

打开博客只有背景没有字？进度条一直卡在 99% 动弹不得？

这通常是 Pjax 搭配 PACE 加载动画造成的。Pjax 负责实现页面切换不刷新，而 PACE 动画则会监控后台的所有请求。逻辑漏洞在于：只要有一个资源加载失败（比如某个图标、头像或 CDN 抽风），PACE 就会认为加载还没完成，导致进度条永远无法读条成功。

最尴尬的是，此时文章文字其实已经加载到了页面上，但由于 PACE 还没发出“完成”指令，导致页面上的文字依然维持着加载中的透明状态。为了那点所谓的视觉效果，硬生生让用户对着一片空白干等。

纸鹿

技术虽好，但一定要有容错。

禁用选中、复制

应该还没有技术博客不让用户选中文本吧……CSDN 除外。

禁用开发者工具

从来没有一种方法能真正的禁用开发者工具，反而只会恶心到用户和开发者。

你这个级别的 Devtools 无权哈我 - 微光档案

archive.bikari.top

 NCC2-036  调用前置摄像头拍照成功，识别为【小笨蛋】.

 WELCOME  你好，小笨蛋.

 W23-12  你已打开控制台.

 S013-782  你现在正处于监控中.

一些热门的检测开发者工具的库十分容易误报，当用户打开垂直标签页，或是下载列表、历史记录出现在侧栏时，这些库就会误判。

一些页面在检测到开发者工具时，会用各种声光警告用户并阻止用户浏览网页，把用户当作窃取页面代码的黑客，却防不住真正的 DevTools 远程调试。

服务滥用

PWA

渐进式 Web 应用程序（PWA）本意是好功能，它能让网页像原生应用一样运行。但在早期浏览器中，网页一打开就弹窗“是否安装应用”，极其干扰体验。好在现在的浏览器已经收敛了许多，不再自动弹窗。

滥用 Service Worker + CacheStorage

一些博主对前端缓存机制一知半解，放着成熟、好用的 HTTP 强缓存/协商缓存不用，非要秀肌肉搞“全站离线化”，强行把所有图片、脚本塞进用户的 CacheStorage。

这种“秀肌肉”的行为完全是本末倒置：

• 清理困难：CacheStorage 独立于 HTTP 缓存，普通用户点击“清除浏览器缓存”根本删不掉它。它就像牛皮癣一样粘在硬盘里，甚至会导致页面更新失效。
• 占用空间：有些站点初次访问就会留下几百 MB 的“坚固缓存”。浏览器原生的 HTTP 缓存有自动清理机制，但 CacheStorage 如果博主没写清理逻辑，就会一直膨胀。

JS、CSS 和图片本该交给 HTTP 响应头的 Cache-Control 处理，而不是费劲引入 Service Worker 又不讨好。

Windows 用户可以按下 Win+R，看看你的硬盘里藏了多少惊喜：

将公共服务滥用为图床

许多教程都在教小白如何把 GitHub 或 npm 包装成图床，这是典型的公共服务滥用。

开源基础设施的初衷是支撑代码托管和分发，而非免费的二进制存储仓库。尤其是一些人，利用 npm 托管资源、再配合公共 CDN 进行分发，这种“连环招”不仅增加了链路的不确定性，更是在透支整个社区的信任底线。

npm 竞速

更有甚者，利用 Service Worker + npm + 公共 CDN 搞出一套“竞速方案”：将全站静态资源托管在 npm，然后在用户端发起多个 CDN 节点的并发请求，谁快用谁，最后再强制塞进用户的磁盘缓存。

这种方案看似解决了访问速度问题，实则吃相难看——为了加载一个几十 KB 的脚本，向数个公共 CDN 发起冗余请求，再结合 CacheStorage 滥用——让浏览器变成放大公益服务流量的黑手，给设备塞入难以铲除的“缓存墓碑”。

影响自身

频繁更换域名

不知道怎么评价，因为已经访问不到了。

无订阅源

我始终认为现代博客是早期互联网精神的延续，而 RSS/Atom 订阅源就是一种独属于独立博客的技术浪漫。如果一个博客只能靠博主在朋友圈或社交平台“推销”才能获得流量，那它更像是一个孤岛。

CSR 站点

经常能看到类似《我用 Vue/React 写了一个博客》的视频，但这类纯 CSR（客户端渲染）项目很难在生产环境下生存，原因很简单：

1. HTML 只是一个挂载点的空壳，内容全靠浏览器运行 JS 后生成。对于很多搜素引擎爬虫来说，你的博客就是一片空白。
2. 单页应用（SPA）若使用默认的哈希模式（#/path），在搜索引擎眼中，你整个站点几篇或几百篇文章其实都挤在同一个路径下。

没有 SSR（服务端渲染）或 SSG（静态网站生成）支撑的 JS 框架博客，就是拒绝被发现。

不关注 SEO

Meta 元数据名称、Open Graph、Twitter Card、JSON-LD、搜索索引、网站统计……先别急着配置这些，如果你的网页具有 <link rel="canonical"> 标签，先看看它写对了吗？

这个标签的作用是告诉搜索引擎“权威地址”。如果你有多个域名或路径指向同一篇文章，它能避免权重分散。而一些主题会错误地把文章页的 Canonical 标签指向主页、不一致的域名或协议。这无异于向搜索引擎宣告“吾非正版，无需收录”。