iOS Safari 回退导致 alert 失效 我在文章页增加了解析运行 html 和 js 源码的功能。然后发现一个诡异的问题，在手机端 Safari 按回退和前进键会导致 alert 失效。验证了电脑端和手机端各种浏览器，仅手机端 Safari 复现这个问题。 我查到的解释是： alert/confirm/prompt dialogs will not be displayed if the user has navigated back to a pushState location. Once a user has navigated back (at any point), calling alert(…), confirm(…), or prompt(…) will not display dialog boxes. confirm(…) will always return false, and prompt(…) wil... 2024-11-10
重写反调试代码 前端反调试对高手没什么用，但是可以遏制初学者的好奇心，减少麻烦。 我之前写的反调试缝合了多套代码，发现存在诡异的BUG：页面置于后台（非活动标签页）一段时间后有概率会白屏。打开大量页面，即浏览器占用大量资源时会增加出现白屏的概率。不过花了很长时间我也没有准确定位到出问题的代码段，干脆整个废弃重写。 最终我选择的参考代码是 https://github.com/AepKill/devtools-detector。 2024-11-03
全屏事件触发 resize 事件 我之前发现播放视频时进入全屏会闪退。奇怪的是 Chrome 和 Firefox 存在这个问题，但 Safari 正常。正因为如此对我造成了误导，没有找到问题所在。直到今天发现了这个乌龙。 拖动改变浏览器窗口大小时会造成图文排版变形，所以我监听到 resize 事件就会重新渲染页面——表现之一就是视频进入全屏时“闪退”成了非全屏窗口，video 元素被清除了，重新渲染为缩略图 img。 那么解决这个问题就是监听到 resize 事件时增加一个判断是否全屏。 is_fullscreen = () => !!( document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement... 2024-10-25
CleanCSS - 移除未使用的 CSS 代码 应用：CleanCSS 地址：https://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
