杜郎俊赏 - dujun.io

CleanCSS - 移除未使用的 CSS 代码

cleancss-remove-unused-css封面
应用:CleanCSS 地址:https://dujun.eu.org/cleancss 功能:分析页面中引用的 CSS 文件,打包成单一的干净文件用于替换所有引用 适用:独立页面 一、缘起 我导航站用了开源项目WebStackPage,首次静态资源加载有 1.5M,一部分原因是它使用了第三方库,比如 Bootstrap。当然,第三方库只有少量代码实际被用到,所以我就想找个办法,把未使用的 CSS 代码移除,使得静态文件更小。 二、方案 很快就找到了这个网站https://unused-css.com/。它可以很好地实现我的需求,不过有一个小问题,它是收费的,最低 25 美元一个月。 Only...

2022-10-31

JavaScript 强混淆

我的网站是纯内存缓存读 + js 渲染 spa,现在的瓶颈就是硬件配置低、带宽小,程序架构上可以说追求到极致了。其中,js 渲染是全站性能优化的关键一坏,服务器只负责吐出原始数据,而把路由解析、数据处理、布局渲染的计算压力都转嫁给了浏览器。 如此重要的前端部分我当然花了很大的心思。js 是明文的,只能做混淆。但是如果混淆得足够好,逆向成本过高,也是可以达到很好的代码保护。网上有很多 js 代码混淆的方法可以参考,但有些会让文件大小增加好几倍。这里我分享一下自己 js 强混淆的思路。 我实现 js 强混淆的关键一点就是字面量表达式。 原生写法: str.trim(); 字面量表达式...

2022-10-19

Firefox 不支持 :has 伪类

firefox-does-not-support-has-pseudo-class封面
在 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 支持同步和异步通信。但是...

2022-09-18

优化了桌面端的页面宽度。 之前页面过宽,导致浏览视距较大,阅读有不适合感。对比了一些网站之后,最终参考了今日头条的 676px 文章宽度。

2022-09-13

波浪下划线

本站对文字的重点标记,经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大,同时大圆点标记过于醒目,抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如:对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久,就改成虚线下划线了。 border-bottom: 2px dotted; 效果如:对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题,但是今天突然觉得平庸了,决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下...

2022-08-02

989封面
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

position-sticky封面
刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性...

2022-02-05

手机端图片缩放优化完成。

2022-01-25

分页: 1 2