去年早些时候，为了放弃 jQuery，我用原生 JavaScript 重写了一遍本站的 JS 文件。现在，我有了一个更激进的想法，彻底去掉本站所有的 JavaScript 代码。
也没什么非去掉不可的原因，更没什么好处，几乎出于一时兴起，二话不说，一个通宵，两杯咖啡。所以我也不会想方设法的罗列 JavaScript 的各项「罪状」，如果非要找个一个理由的话，就当是为了减少碳排放吧。
在我们日常的网上冲浪中 JavaScript 几乎无处不在，随便打开一个可以交互的网站，少则加载一两个 JS 资源文件，多则几十个，还有各种前端框架开发的网站在挑战极限。就算没有单独引入 JS 文件，HTML 中 <script> 标签以及 onsubmit, onload 等事件也不会少，因为表单验证、评论留言、动态加载内容这些都很难离开 JavaScript。毫无疑问，JavaScript 在 Web 2.0 的发展中发挥着中流砥柱的作用，这点在以后的历史书中要考。
但也不是完全离不开，用可以但没必要来形容更合适。Github 在一篇博客文章 How we think about browsers 中提到，即使关闭了 JS，你仍然可以正常登录 Github，使用评论、搜索等功能：
With JavaScript disabled, you’re still able to log in, comment on issues and pull requests (although our rich markdown toolbar won’t work), browse source code (with syntax highlighting), search for repositories, and even star, watch, or fork them.
可想而知这需要大量额外的适配工作。因此更普遍的情况是，禁用 JS 会让交互式网站的功能受到不同程度的影响甚至直接罢工，如「去掉 JavaScript 后，这些网站会变成这样」这篇文章中所测试的结果。如果你也想看看自己的网站或者常用的网站没有 JS 的样子，Chrome 和 Firefox 都可以在开发者工具中暂时禁用 JS。
选项栏中或者 F12 打开开发者工具，找到并点击上方的小齿轮或者直接 F1 打开设置选项卡，滑动到最下方找到并勾选停用/禁用 JavaScript 选项，关闭开发者工具窗口后自动失效，刷新页面即可恢复 JS 加载。
好在我的网站本来就很简单（用 Hugo 生成的静态网站），关闭 JS 后基本不影响使用。在下手之前，也十分好奇那些真正极简的网站是什么样子，发现从小众派 No JS Club, No CSS Club 到极限派到 1MB Club, 512KB Club, 250KB Club … 1KB Club 应有尽有，越到后面越抽象，我还没有这样的魄力，以后应该也不会。
首先要打开网站的所有模版页面和 JS 文件，包括 HTML 中 onclick, onload 等事件在内，找出哪些地方调用了 JS，一个一个处理。
这个功能的实现很简单，使用 IntersectionObserver 监听页面元素，页面滚动到相应标题时绑定 CSS 样式就行了，我在「从 Typecho 迁移到 Hugo」一文中有详细介绍。但目前还想不到办法如何不依赖 JS 实现，所以该特性直接丢弃。
不过滚动一定距离后再显示目录这个效果还可以抢救一下。Chrome 去年开始支持了一个新特性：CSS 滚动驱动动画，可以实现很多原本必须依赖 JS 才能实现的滚动效果，操作起来也很简单：
.post-toc {
...
animation: toc-reveal 1s linear forwards;
animation-timeline: scroll();
animation-range: entry 0 100px;
}
@keyframes toc-reveal {
from { opacity: 0 }
to { opacity: 1 }
}
可惜的是目前只有 Chrome (115+) 支持，Firefox 和 Safari 就更不用提了。如果你用的是较新版本的 Chrome 浏览器，可以在本文右侧看到效果。
目前文章页面用了 JS 加载图片和错误处理，成功加载后去掉动画，失败则显示错误信息；监听页面滚动，使图片上浮渐变显示。图片错误处理只能放弃，但显示动画依然可以用上面滚动驱动动画方法实现：
.img-wrapper {
view-timeline-name: --revealing-image;
view-timeline-axis: block;
animation: linear img-reveal both;
animation-timeline: --revealing-image;
animation-range: entry 20% cover 50%;
}
@keyframes img-reveal {
from {
opacity: 0;
transform: translateY(25%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
缺点是动画速度和页面滚动的速度相关，并且不能删除动画，向上回滚时图片又会淡出，不过效果也不错。
类似 Ajax 局部刷新，也是常说的瀑布流加载的原理，使用 FetchAPI 获取下一页内容后通过 innerHTML 插入到当前页面页尾，同时还有懒加载模糊加载图片。除浏览器支持图片设置 loading=lazy 懒加载外，其余功能必须依赖 JS 实现，所以只能回归简单的分页导航。
搜索功能依靠表单提交，通过 FetchAPI 获取包含网站所有文章关键信息的 JSON 文件（JSON 文件通过 Hugo 生成），然后处理数据并高亮关键词展示。该功能必须依赖 JS 实现，所以直接去掉。
除了 WHOIS 查询外，用 JS 写的几个小工具，我平时用的频率还挺高。代码都很简单，而且网上一大堆类似的，只是出于安全性考虑选择了自己重复造轮子。这个页面也只能删除，不过可以直接把 JS 和 CSS 文件提取出来本地使用 已转移到 tools.atpx.com。
目前使用了自建的 Plausible 来统计网站访问数据，如上图，最近一段时间每日访客数量为 100 左右。一般来说，如果不插入 JS，网站流量统计主要有以下三种方式：
<noscript> 的方式，其原理就是网页中插入一个像素文件，通过该文件的请求数据分析，缺点是无法获取 referrer 来源（其实也有办法实现：How Bear does analytics with CSS ）以及过滤 Bot 请求。一开始时计划换成第三种方式，可惜的是 Plausible 短期内不会支持非 JS 插入统计，好在以前使用过的 Shynet, GoatCounter 等工具都支持，最后决定使用 GoatCounter。配置得差不多了的时候又突然改变了想法，添加访问统计后除了每天纠结那点数据外也没什么用，没必要让自己流量焦虑，干脆直接去掉。
因此我的网站现在是个黑盒子，不知道流量多少，不知道引荐来源（其实 Google 和 Bing 的站长后台中可以看到一部分），但说不定过几年我又加上的时候会有意想不到的惊喜呢。
此外还有不少功能都是直接去掉或者改写为静态展示，不再细说。这里简单的分享下如何用纯 CSS 代码实现开关按钮。以下拉菜单举例，你可以添加一个使用 checkbox 属性的 <input> 标签配合 CSS 的选择器来实现，例如有这样一个 HTML 结构：
<input type="checkbox" id="toggle" style="display: none">
<label for="toggle">
<button>Switch<button>
</label>
<div class="menu-box">...</div>
编辑 CSS，默认不显示 menu-box 下拉菜单，设置 <label> 的伪类选择器 :checked，配合兄弟选择器 + 定位到下拉菜单，设置为显示：
.menu-box {
display: none
}
#toggle:checked + .menu-box {
display: block
}
这样你就可以通过点击 label 来改变选中状态从而控制显示开关。虽然这种实现不是什么新花样，属于很老的 tricks，但效果和用 JS 实现几乎没有区别，兼容性也不错，比较实用。
其实本站所有的 JS 文件加起来也才 12.4 KB，压缩后网络传输为 4.2 KB，我想没有人会抱怨多消耗这 4.2 KB 额外流量。同时每一行代码都花了很多功夫和时间，删除的时候倒挺解压。
去掉之后自然是不如原来好，失去了静态网站仅剩的一点灵气，好在多了一丝清爽的错觉。要说还剩什么的话，仿佛回到了早期的 Web 1.0 时代，仅仅作为一个「只读」网站而存在。
对了，我顺便将本站 RSS 从摘要输出改为了全文输出。不过这里的阅读体验应该也过得去，也希望你能偶尔打开网页来这里逛一逛 <(´= ω =`)>。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。