CleanCSS - 移除未使用的 CSS 代码 应用：CleanCSS 地址：http://dujun.eu.org/cleancss 功能：分析页面中引用的 CSS 文件，打包成单一的干净文件用于替换所有引用 适用：独立页面 一、缘起 我导航站用了开源项目WebStackPage，首次静态资源加载有 1.5M，一部分原因是它使用了第三方库，比如 Bootstrap。当然，第三方库只有少量代码实际被用到，所以我就想找个办法，把未使用的 CSS 代码移除，使得静态文件更小。 二、方案 很快就找到了这个网站https://unused-css.com/。它可以很好地实现我的需求，不过有一个小问题，它是收费的，最低 25 美元一个月。 Only paying users can download clean CSS files. 那怎么办呢？那就自己开发一个工具吧。 三、分析 清理 CSS 代码需要这么几步： 抓取页面 HTML 内容 找到页... 2022-10-31
JavaScript 强混淆 我的网站是纯内存缓存读 + js 渲染 spa，现在的瓶颈就是硬件配置低、带宽小，程序架构上可以说追求到极致了。其中，js 渲染是全站性能优化的关键一坏，服务器只负责吐出原始数据，而把路由解析、数据处理、布局渲染的计算压力都转嫁给了浏览器。 如此重要的前端部分我当然花了很大的心思。js 是明文的，只能做混淆。但是如果混淆得足够好，逆向成本过高，也是可以达到很好的代码保护。网上有很多 js 代码混淆的方法可以参考，但有些会让文件大小增加好几倍。这里我分享一下自己 js 强混淆的思路。 我实现 js 强混淆的关键一点就是字面量表达式。 原生写法： str.trim(); 字面量表达式： str['trim'](); 有了这个基础，混淆要做的就是进一步隐藏字符串了。我用了 ASCII 转码和 base64，使得字符基础变量简化为 64 个 base64 编码字符，以及特殊的空格和换行符。 以“我... 2022-10-19
Firefox 不支持 :has 伪类 在 Firefox 下发现一个很诡异的问题，图片缩放时没有弹出层。在 Chrome 和 Safari 下是正常的。 排查发现有一段样式 Firefox 不生效，最终定位是 Firefox 不支持 :has 伪类。 2022-10-04
同步ajax导致页面卡顿 我的网站在快速切换页面时，有时会卡顿甚至假死。之前我以为是带宽太小的缘故（1Mbps），直到在 MDN 查找 XMLHttpRequest 相关资料时看到这个说明： XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons. XMLHttpRequest 支持同步和异步通信。但是，一般来说，出于性能原因，异步请求应优先于同步请求。 Synchronous requests block the execution of code which causes "freezing" on t... 2022-09-18
波浪下划线 本站对文字的重点标记，经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大，同时大圆点标记过于醒目，抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如：对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久，就改成虚线下划线了。 border-bottom: 2px dotted; 效果如：对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题，但是今天突然觉得平庸了，决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下： padding: 5px 0.2em; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, cu... 2022-08-02
mac系统浏览器，隐藏文本光标（除输入框外）。css 如下： * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果（录自友站 Vian）： 应用后效果： 2022-06-28
圆形头像和方形头像 本站的评论列表头像展示样式，从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分： 圆形头像 聚焦主要面部特征，吸引注意力，有动感有活力。 适用于生人网络、泛娱乐，如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息，沉稳大气。 适用于熟人网络、严肃社交，如微信、支付宝。 作为独立博客，本应算是生人网络，但还是决定用方形头像。因为博友的回访，对评论内容的认真，都是互联网最初美好的样子。 2022-02-28
position: sticky 刷到蜻蜓的墓园的博客，时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑，没有拖帧，而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js，没错，是jQuery 时代的方法了，原理就是根据可视范围，切换 position 为 fixed、absolute。慢速滑动时效果是完美的，但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码，发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑，“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性，否则不生效。 2022-02-05
