小米 9 SE 是我的上上台手机，我换手机之后就没用过了。最近拿出来，发现居然能安装最新的 LineageOS 22.1（Android 15）。我一直感觉在 Android 用 root 权限是比较危险的，所以没用过。刚好这台空闲的手机可以让我测试，测试好一些应用或者模块，我就在一加 Ace 3 上面用。我还很喜欢小米 9 SE 小巧的尺寸，现在已经很少可以单手使用的小尺寸手机了。

这台小米 9 SE 有两个比较严重的问题：烧屏（屏幕泛黄、有残影）、电池损耗严重（出门必须带移动电源）。感觉换屏幕太麻烦，就算了。电池倒是可以换个新的。花 69 元人民币买了块诺希牌电池，自己安装。

客服发的安装视频里的工具和实际的工具略有不同。视频里用胶带贴后盖，我拿到的是胶水。视频看了一遍，感觉自己能搞定。

第一步是打开后盖。关机，用吹风机加热后盖，用吸盘贴住后盖底部，用三角拆机片抠开边缘。工具要放远点或者装起来，不然吹风机会吹走工具。

第二步是拆螺丝。按顺序拆下 10 颗螺丝，在纸上画图，用 1~10 的数字标记位置，把螺丝放在纸上。挑起电池排线。

第三步是取电池。加热电池，很不幸把螺丝吹开了，发现有 2 颗螺丝是短的，不知道装的时候该装哪个位置。拉出电池底下延伸出来的胶条，很难拔，还拔断了，胶条还残留在电池底部。接下来用工具用力撬起电池（错误操作），中途还太大力刺伤手指了，疼！

差不多撬起来的时候，电池有点变形了，再撬电池就破了。电池冒烟，我脑子还没反应过来，手就把手机丢到地上了。电池接着就着火和冒烟，燃烧完后电池很胀，屏幕被加热到出现一个白色的实心圆圈，烟的气味很臭很刺鼻，过了一晚才闻不到。幸好人和房子都没事。最后把电池和主板装到袋子，贴上「锂电池」的纸，放在有害垃圾垃圾桶旁边了。附近的人似乎不分类丢垃圾，所以我就把电池直接放垃圾桶旁边，希望回收垃圾的人能看到。

换电池失误的后果好严重，主板都烫坏了，以后还是去售后中心换电池吧。真怀念以前的手机，关机打开后盖就直接换电池了。

Anki 是开源的记忆软件。我们可以用文本文件制作牌组（一组需要记忆的内容），文本文件更易于修改。

将下面文本保存为 deck.txt，然后用文本编辑器编辑。

1
2
3
4
5

#separator:Pipe
#html:true
hi|你好
why|为何
two lines|第 1 行<br>第 2 行

此文本对应的导出格式是「Cards in Plain Text(.txt)」。

第 1 行的 separator（分隔符）用于区分正面和反面，可以用 Comma（,）、Semicolon（;）、Tab（ ）、Space（ ）、Pipe（|）、Colon（:），用名称（例如：Pipe）和符号（例如：|）都可以。我推荐用 |，它很少在卡片里用到，而且可以用键盘直接输入。

第 2 行表示可以使用 HTML 代码。比如：<br> 表示换行。

第 3 行开始就是卡片，一行就是一张卡，分隔符左边是卡片正面，分隔符右边是卡片反面。

在 Anki 创建牌组，将 deck.txt 导入到这个牌组。如果你想制作翻转卡片（反面->正面），导入时 Note Type 选择「Basic and (reversed) card」，这样牌组会同时存在基础卡片（正面->反面）和翻转卡片。

相关资料：Text Files - Anki Manual

为保护隐私，本故事略有改编。

卖前 #

我在闲鱼卖一台五六年前发售的手机，定价 200 元人民币，原价 2999 元。这台手机可以正常使用，屏幕有一处明显划痕，边框掉漆。

放了几天，有个人猛砍价¹到 120 元，我说 180 元他就不回了。

后来又有个人问了，这个人一开始就让我感觉不爽。她的名字类似于「闭嘴吧你」，一副不好沟通的模样，芝麻信用还未授权。

买家说话吞吞吐吐，沟通起来很浪费时间。

买家：你好

我：你好，想了解一下这台手机吗？

买家：是的

我内心：喂，你有话快说，非要我说一句你就说一句吗！

买家开始问有没有换过屏幕和电池，是不是自用。我说原装自用。买家叫我拍边框，拍了她就挑剔有磕碰，又说几年前手机电池不行，换电池都要几十块，以这些为由要求降价。这时我就开始感觉恶心，二手手机本来就有耗损，还按照新机那种标准挑剔，新机至于卖 200 吗？

买家问钢化膜、手机壳、充电器。我都在商品页面写清楚只有手机跟手机壳了。买家还嫌手机壳变色。几年前的手机壳你想要多好，有送都不错了。买家问有没有划痕，我都在商品页面说了在哪个位置有一处明显划痕，她又要我拍照。

充电器我说用 USB Type-C 就行了，其他品牌的充电器也可以的。买家以只有 iPhone 为由（iPhone 15 之前的 iPhone 不使用 Type-C 接口），让我送数据线。为了促成交易，我也送了一条本来在用的，重新买又得十多块，气死。

买家问有没有账号、会不会重启，最后她砍价到 160 元，并且收到马上确认收货（买家确认收货，卖家才会收到货款）。我内心的最低价格是 180 元，她砍那么多我是很不爽的，看她说马上确认收货就算了吧。

下单后她说地址错了。我不知道这是什么套路。让她取消订单，重新上架让她买。

到货 #

发货后买家这个贱人又开始挑剔了，想看购买凭证。我连包装盒都没了，哪来的购买凭证。一般人也不会问这个，这台手机没什么造假价值，又不是奢侈品。

到货后买家并没有爽快得确认收货，从这时开始她越来越恶心了。她说手机缝隙不一致，怀疑拆过机，一边缝隙大，似乎夹了纸片。我也不确定，但之前用手机的时候是没问题的，我就说不用就放着了。于是买家又换另一个理由，说摄像头进灰了影响拍照，又装可怜说贴膜、手机壳、充电头也要钱，希望我优惠点（到手后砍价）。这些配件要钱关我屁事，而且她那么吝啬肯定不会买配件。啊，气死我了！我说摄像头进灰是二手机正常损耗。我手头上刚好有台摄像头进灰的手机，前置摄像头和后置摄像头都进灰了，但是拍照没有明显问题。

过了一天，买家说去手机店清灰要 20 元，问我给她 20 元还是退货²。我说已经最优惠了。她接下来一直以进灰为由缠着我，我就一直说已经最优惠了，后面不想回复了等到货后 3 天自动确认收货。结果这个家伙在最后一天申请了退货，理由是质量问题/功能异常，附上前摄像头的照片，确实有灰尘。最后没收货真是气死我了。

我无法接受退货，因为：

• 不能容忍她讹人这样错误的行为。
• 质量问题退货要卖家（我）给运费。
• 我前面的交流让我觉得她品德低下，怕她弄坏手机再寄回来，真的有人得不到就毁掉。
• 我不想留下质量问题退货的记录。

闲鱼小法庭 #

我拒绝了退货申请，理由是：问题不存在，补充的文字和截图表示买家有到手刀（到手后砍价）行为。我点击维权之后就进到闲鱼小法庭了。闲鱼小法庭就是解决买家卖家纠纷的方式，由 17 位陪审员（闲鱼用户）投票，17 票 9 胜制，票差小于 4 票时可以申诉。陪审员可以查看双方聊天记录。小法庭有两个环节：前 24 小时是双方举证，发起维权者先发言 1 次，然后开始计时，双方可以发言 5 次；后 24 小时是评审员投票。在我这个例子，如果我赢了就马上到账，如果买家赢了我就必须接受退货。

老实说，第一次上小法庭还是蛮紧张的，要是输了就很难过。发言太多了，我就简单总结一下。

买家的发言：

• 摄像头进灰影响拍照（附上前摄像头照片，水印表面是用 Android 手机拍的）。
• 卖家不说明摄像头有灰尘、敷衍了事、不回信息。
• 急起来说气话，说卖家强买强卖和土匪（拜托，是你自己买又不是我逼你买的）、说用多台手机不行吗。
• 卖家未标明售出不退。

卖家（我）的发言：

• 摄像头进灰是手机使用的正常损耗，我之前自拍和打视频电话都没问题，我已经提供了最优惠的价格。
• 买家买前过度挑剔，也没有表面很在意摄像头灰尘。
• 买家到手后用模糊的语言砍价（说缝隙大又不提供图片，说摄像头进灰在聊天时也未提供图片），心虚才不会提供照片证明观点。
• 买家承诺直接确认收货，买后到手刀，这是不诚信。
• 买家说自己用 iPhone 没 Type-C 数据线，但被我发现他拍照用了 Android 手机，所以他有 Type-C 数据线。买家骗了我一条数据线，这是不诚信。

差不多晚上 12 点的时候开始投票，第二天买家已经取消了退货申请，大概是自知理亏。买家拖 20 小时后自动确认收货，我收到钱了，太好了！

回顾 #

现在回想起来，买家的手段不算很高明，只是我没经验而且想快点卖出手机就中招了。

下面总结一下甄别坏买家和避免纠纷的技巧。

甄别坏买家 #

有以下特征的买家可能是坏买家：

• 吞吞吐吐（可能没有恶意，但和这样的人聊天很浪费时间）
• 挑剔，尤其是不合理的挑剔（电池损耗）
• 用模糊的表达而不是提供证据
• 表现得很在意问题但只要求砍价（一般人会选择退货）
• 没有芝麻信用或者买家芝麻信用优秀以下
• 差评多
• 新用户

避免纠纷 #

• 拍 360 度视频/图片
• 拍装箱视频
• 用验货宝（闲鱼的验货服务）
• 声明售出后非质量问题不退

root 权限 #

root 是 Android 系统的最高权限。Android 系统就像房子。没有 root 的时候用户就是租客，只有使用权，不能随便改动房子。有 root 权限的时候，用户就是房东，有所有权，可以随便改动房子（修改系统）、丢掉原有的家具（卸载系统应用）。

总之，有了 root 权限之后我们就可以完全掌控 Android 系统了。

基本流程 #

获取 root 的前提条件是解锁引导程序（bootloader），解锁了引导程序才能安装 init_boot.img 和 boot.img。

init_boot.img 和 boot.img 是启动系统需要用到的文件，推荐先备份好它们。修补其中一个并安装后就能获取 root 权限。最后使用 root 管理器来管理 root 权限。

方案 #

目前有三个开源的 root 方案：

• Magisk（使用文档、源代码）
• KernelSU（使用文档、源代码）
• APatch（使用文档、源代码）

Magisk 是最经典的 root 方案，教程和资源最多。缺点是容易被应用检测到，比如：中国农业银行应用检测到 root 会退出。用额外的模块才能隐藏 root。

KernelSU 是内核级 root 方案，不需要刻意隐藏 root，被授权的应用才能感知到 root。App Profile 功能可以授予应用部分权限，比如：只允许应用使用 adb 权限。

APatch 也是内核级 root 方案，KernelSU 是内核级 root 方案，不需要刻意隐藏 root，被授权的应用才能感知到 root。需要设置密码。

我的推荐：KernelSU > APatch > Magisk（> 表示优于）。KernelSU 排第一是因为它不易被检测，而且可以授予应用部分权限。Magisk 排最后是因为容易被检测。

用法 #

root 有两种使用方法。一是管理器授权给应用，二是在管理器安装 root 模块（module）。比如：授权给 Neo Backup 就可以备份应用。安装 BCR 模块之后可以自动录制通话。

root 权限可以很危险，比如用来清除手机数据或者弄坏系统。请勿授权给来源不明的应用，也不要安装来源不明的模块。尽量选择开源、知名的应用和模块。

模块、Zygisk、Xposed #

模块是使用 root 管理器安装的应用。

Zygisk 是修改系统和应用行为的模块，供其他模块使用。Magisk 内置 Zygisk。KernelSU 和 APatch 没有内置 Zygisk，但是可以安装独立版 Zygisk。

以下是独立版 Zygisk：

• ReZygisk（开源）
• ZygiskNext（最新版本闭源）

Xposed 是修改系统和应用行为的模块，供其他模块使用。Xposed 已经停止更新，其继任者 LSPosed 也停止更新。目前还在更新的 LSPosed 修改版为 JingMatrix/LSPosed。注意 LSPosed 依赖于 Zygisk，要先安装 Zygisk 才能用 LSPosed。

安装 Zygisk 和 LSPosed 后，root 特征更明显，root 更容易被检测到。

隐藏 root #

银行应用和游戏检测到 root 后可能会拒绝运行，此时要隐藏 root。

隐藏 root 的模块：

• Zygisk-Assistant（开源）
• Shamiko（闭源。APatch 不支持 Shamiko。）
• Cherish Peekaboo（闭源，APatch 专用，在这个帖子的 Attachments 可以下载。）

Android 系统允许应用获取所有应用的名字。有些应用发现系统有 root 管理器或者使用 root 的应用，就认为系统有 root 权限而拒绝运行。我们可以使用 Hide My Applist 或者 HMAL 来隐藏应用名称，从而躲过检测。

隐藏完 root 后可以使用root 检测应用查看效果。如果你用的应用没检测出 root，就不要纠结 root 检测应用的结果。

银行应用与 Play Integrity #

一些银行应用会检测 Play Integrity（设备完整性，等级包适 BASIC、DEVICE、STRONG），手机解锁引导程序后 Play Integrity 等级下降，导致银行应用拒绝运行或者隐藏部分功能（比如指纹支付）。可以使用 Play Integrity Fix 和 TrickyStore 来修复 Play Integrity。

我的用法 #

我一般用 KernelSU 或者 APatch。

用到 root 的应用有：

• App Manager
• DataBackup
• Material Files
• MMRL
• Shizuku
  • App Ops
  • Droid-ify
  • GKD
  • Hail
  • Obtainium
  • aShell You

模块有：

• BCR

root 的功能远不止这些，推荐你看 GitHub - fynks/awesome-android-root: A comprehensive and up-to-date list of latest Android root apps that require or utilize root privileges, rooting guides, tips, tricks and tools。

上个月买了可以刷机¹的一加 Ace 3²。一加 Ace 3 的性能不错，处理器是骁龙 8 二代（2022 年末的旗舰处理器），目前在骁龙处理器中仅次于骁龙 8 三代和骁龙 8 至尊版。喜欢刷机的读者可以考虑这台手机。

相关链接：

• 一加 Ace 3 参数规格
• OnePlus Ace 3 - Full phone specifications
• OnePlus 12R / OnePlus Ace 3 | XDA Forums

小米一开始的口号是为发烧（友）而生，现在新的解锁 bootloader 政策让我感觉小米退烧了。

原本小米解锁 bootloader 的条件是等待 168 小时（7 天）。小米推出 HyperOS 后中国大陆的型号解锁 bootloader 非常难，需要小米社区 5 级，还要考试¹。

这个解锁政策真是让我大跌眼镜，根本是刁难用户。真搞不明白小米公司怎么想的。如果嫌用户解锁后弄坏手机要去售后，那可以在用户解锁 bootloader 后取消售后。

新解锁政策还有一个恶心的点：只针对中国大陆的设备。凭什么陆版手机解锁就那么难，国际版手机解锁就和以前一样²。

新解锁政策大大影响了第三方 ROM 的开发。本小米老用户感到伤心、失望、生气。买陆版小米手机刷机的日子可能一去不复返了。

PixelOS 升级流程：将一加 Ace 3 从 PixelOS 14 升级到 PixelOS 15。

注意事项 #

• 本文的操作可能会过时，建议参考文末的文章。
• 拿到手机要马上关闭自动更新，避免更新到不合适刷机的版本。
• 解锁 bootloader 重启后马上关掉自动更新。
• 解锁 bootloader 时会清除数据。如果确定要刷机，建议买到手机马上解锁，后面拿到 root 权限可以用 Neo Backup 备份应用数据。

名词解释 #

• 刷机：安装操作系统
• ROM：操作系统。ROM 本义是可读存储器（read-only memory），在刷机的语境下是（安装于 ROM 的）操作系统的意思。
• bootloader：引导程序，需要先解锁它才能安装其他操作系统
• root：最高权限
• ocdt.img：每台一加手机特有的分区
• persist.img：每台手机特有的分区

恢复系统教程 #

先看这篇恢复系统的教程：How To Guide - [12R/Ace 3] EDL DownloadTool to restore your device to OxygenOS/ColorOS | XDA Forums，最好用不上啦。

测试硬件功能 #

测试硬件功能，参考 charter/device-support-requirements.md at main · LineageOS/charter。

确定硬件没问题后，如果刷机后有问题就是 ROM 有问题。

• 扬声器、听筒
• WIFI
• 通话
• USB
• 蓝牙
• 前置摄像头（拍照、录像）
• 后置摄像头（0.6/1/2/5 倍数，拍照、录像）
• 指纹
• NFC
• 红外线（遥控）
• 定位
• 陀螺仪（指南针）
• 距离传感器（通话时会熄屏）
• 光传感器（自动亮度）
• 网络（只测了 5G）

记录版本信息 #

记录版本信息，可能以后有用。打开设置->关于手机->版本信息。

1
2
3
4
5
6
7
8

版本号
PJE110_14.0.0.813(CN01U140P02)
基带版本
Q_V1_P14,Q_V1_P14
内核版本
5.15.123-android-13-8-00766-gf04dea8b48fa
SOTA 版本号
U140P02(BRB1CN01)

解锁 bootloader #

在电脑安装 adb 和 fastboot，参看 Using ADB and fastboot | LineageOS Wiki。

解锁时会清除数据。如果确定要刷机，建议买到手机马上解锁，后面拿到 root 权限可以用 Neo Backup 备份应用数据。

打开设置->关于手机->版本信息，快速多次点击版本号，开启开发者模式。

返回设置，打开系统与更新->开发者选项，开启 OEM 解锁和 USB 调试。

手机通过数据线插到电脑 USB 口。

1
2
3
4

adb devices # 手机按允许调试
adb reboot bootloader # 进入 fastboot 模式
fastboot devices # 应该会看到编号
fastboot flashing unlock # 解锁 bootloader，用音量键选择 UNLOCK THE BOOTLOADER，按电源键确认

现在手机重置了，开机后跳过可以跳过的设置，进入桌面。打开设置，搜索「更新」，打开「自动更新设置」，关闭自动下载和夜间自动更新。

获取 root 权限 #

Oxygen Updater 不能下载一加 Ace 3 的 ROM，所以从大侠阿木的网站下载当前版本的 ROM，也就是 PJE110_14.0.0.813。

解压文件，获得 payload.bin。

安装 payload-dumper-go。

1
2

# Arch Linux 的安装方法
paru -S payload-dumper-go-bin

解压 payload.bin。

1

payload-dumper-go payload.bin

进入解压目录，将 init_boot.img 传到手机。

1

adb push init_boot.img /sdcard/Download/

在电脑下载 Magisk，通过 adb 安装到手机。

1

adb install app-release.apk # 在手机同意安装

在手机打开 Magisk，点击「Magisk 安装->选择并修复一个文件」，选择 init_boot.img，点击「开始」。在文件管理将修补好的文件重命名为 magisk_patched.img。

将 magisk_patched.img 复制到电脑。

1

adb pull /sdcard/Download/magisk_patched.img

获取 root 权限。

1
2
3

adb reboot bootloader
fastboot flash init_boot magisk_patched.img
fastboot reboot

备份 ocdt.img 和 persist.img #

每台一加手机的 ocdt.img 和 persist.img 都是独一无二的，所以先要备份下来。

1
2
3
4
5
6

adb shell
su # 在手机授权
dd if=/dev/block/bootdevice/by-name/ocdt of=/sdcard/Download/ocdt.img
dd if=/dev/block/bootdevice/by-name/persist of=/sdcard/Download/persist.img
exit
exit

现在 ocdt.img 和 persist.img 都在手机的 Download 文件夹，将它们复制到电脑。

1
2

adb pull /sdcard/Download/ocdt.img
adb pull /sdcard/Download/persist.img

把前面记录的版本信息保存成文本文件，和这两个 .img 文件一起备份到网盘。

安装 Pixel OS #

参考以下资料安装 Pixel OS。

• PixelOS - aston（点击页面的 Download 可以下载需要的文件）
• Development - [12R/ACE3][ROM][14][OFFICIAL] PixelOS [AOSP][19/10/24] | XDA Forums

我的安装过程有错误操作，为了避免误导读者，就删掉了。如果你真的想看，请点击这里。

系统自带谷歌服务，用 YASNAC 测试 SafetyNet，Basic integrity 显示 pass。

再次测试硬件功能 #

参考前面的章节。既然在原装系统没事，我这次就懒得测了。

参考资料 #

• How To Guide - How to root OnePlus 12R, a complete guide | XDA Forums
• Installation | Magisk
• How to Backup and Flash ocdt and persist partition on OnePlus - DroidWin
• Backup ocdt.img or You Might Lose Fastboot Mode [OnePlus] - YouTube
• Development - [12R/ACE3][ROM][14][OFFICIAL] PixelOS [AOSP][19/10/24] | XDA Forums
• PixelOS - aston
• How To Guide - [12R/Ace 3] EDL DownloadTool to restore your device to OxygenOS/ColorOS | XDA Forums

1. 开启谷歌服务：打开设置，搜索「google」，点击「Google 设置」，开启「Google 移动服务」。
2. 安装 Google Play：打开应用商店，搜索「google play」，升级「谷歌应用市场」。升级完后桌面会出现「Play 商店」。

测试机型：一加 OnePlus Ace 3（ColorOS 14）、OPPO Reno12（ColorOS 14）。

物理（physical）表示实际的值，逻辑（logical）表示经过缩放的值。

物理像素 #

像素（pixel）是显示器的基本单位，一个像素显示一种颜色。为了和逻辑像素（logical pixel）区分，像素（pixel）又称物理像素（physical pixel）。

逻辑像素 / CSS 像素 #

逻辑像素（logical pixel），亦称 CSS 像素（CSS pixel），是经过操作系统缩放的像素。CSS 的 px 就是 CSS 像素。

物理分辨率 #

物理分辨率（physical resolution）表示像素的数量。1920×1080 分辨率就表示显示器水平方向有 1920 个像素，垂直方向有 1080 个像素，共 2073600 个像素。尺寸相同时，显示器分辨率越高，显示效果就越精细。

逻辑分辨率 #

逻辑分辨率（logical resolution）是经过系统缩放的分辨率。

我用 1920×1080 分辨率，27 英寸的显示器，文字看得清楚。假如我换成同尺寸 3840×2160 的显示器，此时显示器像素数是前者的 4 倍，可以容纳更多的文字，文字会变得小得看不清。在浏览器按几下 Ctrl - 调节缩放也可以看到过小的文字。

在系统设置 200% 缩放后，分辨率就变成了 (3840/2)×(2160/2)，也就是 1920×1080，此时文字大小又正常了。3840×2160 是物理分辨率，1920×1080是逻辑分辨率。

相关的 Web API #

以 2560×1440 物理分辨率，200% 缩放的显示器为例，展示相关 Web API 的用法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 逻辑宽度
console.log(window.screen.width) // 1280
// 逻辑高度
console.log(window.screen.height) // 720
// 缩放（物理高度/逻辑高度）
console.log(window.devicePixelRatio) // 2
// 物理宽度，需要借助 devicePixelRatio 来计算
console.log(window.screen.width*window.devicePixelRatio) // 2560
// 物理高度，需要借助 devicePixelRatio 来计算
console.log(window.screen.height*window.devicePixelRatio) // 1440

在线查看分辨率 #

我写了个查看物理分辨率、逻辑分辨率和视口大小的网站，欢迎使用。

网站链接：https://resolution-viewer.cyrusyip.org/

源代码：https://github.com/CyrusYip/resolution-viewer

jQuery 是一个经典的 JavaScript 库，其功能为修改 HTML 元素、处理事件、制作动画、发送请求（Ajax）。jQuery 首次发布于 2006 年 8 月 26 日，现在（2024 年）已经 18 岁了。截止于 2024 年 10 月 23 日，有 75.8% 的网站使用了 jQuery¹。

虽然 jQuery 的使用率高，但新项目没必要用 jQuery，原生 JavaScript 已经可以实现 jQuery 的操作，参看 You Might Not Need jQuery 和 You-Dont-Need-jQuery。维护老项目时可能会用到 jQuery。

jQuery 的引入方法很多，我在本文采用 CDN 引入。

1

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

下面介绍一些常见用法。

获取元素 #

jQuery 使用 CSS 选择器获取元素。

1
2
3

$(document) // 获取整个文档
$("#id1") // 获取 id 为 id1 的元素
$(".class1") // 获取 class 为 class1 的元素

插入元素 #

1
2

<!-- HTML 示例 -->
<div id="container"><p>Container</p></div>

1
2
3
4

$("#container").append("<p>inside-end</p>"); // 在 #container 末尾插入子元素
$("#container").prepend("<p>inside-start</p>"); // 在 #container 开头插入子元素
$("#container").after("<p>outside-end</p>") // 在 #container 后面插入兄弟元素
$("#container").before("<p>outside-start</p>") // 在 #container 前面插入兄弟元素

现在页面上的元素是这样的：

1
2
3
4
5
6
7

<p>outside-start</p>
<div id="container">
 <p>inside-start</p>
 <p>Container</p>
 <p>inside-end</p>
</div>
<p>outside-end</p>

取值与赋值 #

jQuery 使用同一个函数来取值和赋值，根据参数数量进行不同操作。

1
2

<!-- HTML 示例 -->
<h1 id="title">Title</h1>

1
2
3
4

$("#title").html() // 获取 #title 的值
$("#title").html("Another title") // 修改 #title 的值
$("#title").width() // 获取 #title 的宽度
$("#title").width(1) // 修改 #title 的宽度

链式调用 #

jQuery 的每个操作都会返回 jQuery 对象，所以可以进行连续操作。

1
2
3
4
5

<!-- HTML 示例 -->
<div id="container">
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</div>

1
2
3
4
5
6
7

$("div") // 选择 div 元素
 .find("p") // 查找 div 里的 p 元素
 .eq(1) // 选择第 2 个元素
 .html("end") // 把第 2 个元素内容修改为 end
 .end() // 退回到上一个选中的元素，也就是 .find("p")
 .eq(0) // 选择第 1 个元素
 .html("start") // 将第 1 个元素内容修改为 start

现在页面是 start 在上面，end 在下面。

资料 #

• jQuery API Documentation
• You Might Not Need jQuery
• You-Dont-Need-jQuery
• jQuery - Wikipedia

本文介绍了优化博客速度的几个方式：Pjax（免刷新加载页面）、dynamic script（动态插入脚本）、rel=preload（预加载）、minification（极简化）。

本博客是 Hugo 生成的静态网站，感觉访问速度还不算慢。有天我看别人的博客（大概是单页应用），发现点击链接居然没刷新网页就加载了新页面，速度非常快。那时我想：要是我的 Hugo 博客也能这么流畅就好了。我感觉把博客改成单页应用要耗费不少时间，遂作罢。

后来我发现可以用 Pjax 技术让静态网站实现免刷新加载页面。Pjax 的意思是 pushState（修改 URL）+ Ajax（asynchronous JavaScript and XML，发送请求）。通俗来说，Pjax 就是请求网页、替换内容、修改 URL，这个过程比加载整个页面更快。

搜索 Pjax 库，找到两个好几年没更新的库（MoOx/pjax、defunkt/jquery-pjax），我不想用不维护的库。我快放弃的时候发现了一个支持 Pjax 的 Hugo 主题：hugo-theme-luna，从自述文件可以看出 Pjax 是用 swup 实现的，然后我就用它了。

Pjax 免刷新加载页面 #

如果网站没有 JavaScript 代码，那直接加载 swup 就好了。

建议使用这些插件：

• Head Plugin：刷新 <head> 元素的内容和 <html> 元素的 lang 属性。
• Preload Plugin：光标在链接时预加载 URL，用户点击时就会内容会马上替换，还可以配置自动加载出现在可见区域的链接。
• Progress Bar Plugin：加载时间较长时显示进度条。

注意要先加载插件再加载 swup。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<script src="https://unpkg.com/@swup/head-plugin@2"></script>
<script src="https://unpkg.com/@swup/preload-plugin@3"></script>
<script src="https://unpkg.com/@swup/progress-plugin@3"></script>
<script src="https://unpkg.com/swup@4"></script>

<script>
 const swup = new Swup({
 containers: ["body"], // 替换 <body> 的内容
 plugins: [
 new SwupHeadPlugin(),
 new SwupPreloadPlugin({ preloadVisibleLinks: true }), // 预加载页面可见的链接
 new SwupProgressPlugin(),
 ],
 });
</script>

我的博客用到了 3 个 JavaScript 程序：Google Analytics（流量统计）、Giscus（评论服务）、Disqus（评论服务），用了 swup 之后要考虑是否需要额外处理。

读者点击链接加载新页面后的处理：

• Google Analytics：参考 Measure single-page applications | Google Analytics | Google for Developers，打开 Enhanced measurement 就可以检测页面变化了。
• Giscus：加载。
• Disqus：重置（reset）或者加载。

Dynamic Script 动态插入脚本 #

我写了个动态插入脚本的函数，可以设置等待时间、加载前执行的函数、async、加载后执行的函数、attribute。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function loadScript({
 url,
 delay,
 onloadCallback,
 async,
 preloadCallback,
 attributes = {},
}) {
 function load() {
 if (preloadCallback) preloadCallback();

 const script = document.createElement("script");
 script.src = url;
 script.async = async;

 // Set attributes
 Object.entries(attributes).forEach(([key, value]) => {
 script.setAttribute(key, value);
 });

 if (onloadCallback) script.onload = onloadCallback;

 document.body.appendChild(script);
 }

 if (typeof delay !== "undefined") {
 setTimeout(load, delay);
 } else {
 load();
 }
}

我给 Google Analytics、Giscus、Disqus 加了 100ms 等待时间，给 swup 添加了 200ms 等待时间。

rel=preload 预加载 #

在 <link> 标签使用 rel="preload" 可以让浏览器提前下载资源（字体、图片、脚本、样式等），后面动态插入脚本时浏览器就可以马上执行下载好的脚本。

示例：

1
2
3
4
5

<head>
 <link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2">
 <link rel="preload" as="script" href="https://unpkg.com/@swup/preload-plugin@3">
 <link rel="preload" as="script" href="https://unpkg.com/swup@4">
</head>

preload 应该叫 predownload，因为它并不会提前加载脚本，只是提前下载。

Minification 极简化 #

这次优化博客没用到极简化，不过既然讲到优化博客了，就顺便说一下吧。极简化就是移除代码中不必要的内容（比如：空格、空行、缩进），从而减小文件大小，这样浏览器就能更快下载完网页。

Hugo 可以极简化 HTML、CSS 和 JavaScript 文件。本博客的代码用 Hugo 极简化了。举个例子，样式文件大小原本是 13.8 kB，经过极简化后是 7.4 kB（原文件的 53.6%），传输过程中再经过 Brotli 压缩后是 2.1 kB（原文件的 15.2%）。

相关代码 #

以下是这次优化用到的代码：

• preload
• Pjax、dynamic script

感想 #

我已经用 swup 两三天了，非常满意，真没想到静态网站可以变成单页应用。Preload 插件能让浏览器会自动提前加载页面，读者点击链接时页面会瞬间加载，这个感觉太爽啦！

参考资料 #

• 天下武功，唯快不破 —— 我是这样优化博客的 | Sukka’s Blog
• rel=preload - HTML: HyperText Markup Language | MDN
• swup 文档

我手机用的系统是开源的 LineageOS 20（Android 13），跨版本升级到 LineageOS 21（Android 14）需要用电脑手动操作。因为怕操作失误导致无法开机，所以想着先备份资料，但我懒得备份资料，于是好几个月没升级。今天就来升级了。

备份 #

虽然升级 LineageOS 不会清空储存空间，但为了保险起见，我按照自己的需求备份以下内容：

1. 微信聊天记录
2. 图片
3. 电子邮箱账户截图
4. 闹钟截图
5. 应用列表

升级 #

按照 Upgrade LineageOS on lisa | LineageOS Wiki 的步骤，安装 LineageOS 21、重启到 Recovery、安装 Google Apps、重启。

这里碰到一个奇怪的问题：手机通过数据线直接插到笔记本电脑的 USB 口，用 fastboot 可以检测到设备，但安装新系统时会报错。数据线插到 USB 集线器才行。

感受 #

升级过程比我预想的简单。系统正常运作，所以清除了前面的备份。目前遇到两个问题：状态栏的快捷设置在亮色模式下仍然是暗色；Fcitx5 输入法底下的导航栏不见了，将「导航栏背景」设置为「跟随键盘背景色」即可解决。

如果你也要升级 LineageOS，不要照搬我的步骤，要遵循 LineageOS Wiki 的步骤，不同设备的升级步骤可能有差异。

在网上看到有人争论同类事物的好坏（比如：Vim 和 VS Code、Arch linux 和 Ubuntu），我认为没有必要去争。纠结哪个最好容易导致无尽的争吵。没有完美的工具，我们应该去思考工具的特点和适用场景。两个工具适用场景相似时可以先随便选一个，不要追求完美，适合就继续用，不适合就换另一个。

拿厨刀举例，主厨刀（chef’s knife）和切片刀哪个好？这个问题没有绝对的答案。

主厨刀更轻更小，刀尖有弧度。刀尖有弧度就可以用摇刀切（rock chop），适合切蒜末。

切片刀更重，用它切菜时更流畅，使用者更省力。切片刀更宽大，可以把食材拍扁，还可以把切好的食材铲起来倒入锅中。

所以哪把刀好还是得看使用者的偏好，如果你喜欢轻巧就用主厨刀，喜欢功能多就用切片刀。

当然其实这两把刀都能切蔬菜和肉，不是很了解的情况下任选一把即可。选其他工具也一样，没实际用过就感受不到细微的差别，与其纠结，不如先随便挑一个用着。

图片出处：

• File:Chef’s Knife.jpg - Wikimedia Commons
• File:Kitchen Knife 06 Tablespoon.JPG - Wikimedia Commons

冷泡茶是用低温水泡的茶，苦味比热泡茶淡，有清凉感。

材料与工具 #

• 茶叶（红茶、绿茶等）
• 水壶
• 冰箱

流程 #

1. 茶叶与冷水的重量比例为 1:50，将茶叶与冷水加到到水壶，关闭盖子。
2. 将水壶放入冰箱冷藏室，泡 4~8 小时。可以睡前泡，这样第二天早上就能喝了。

补充资料 #

• 夏天到了教你泡冷泡茶 - 農業知識入口網
• 不同茶類之最佳冷泡條件 - 農業知識入口網

AmE 表示 American English（美式英语），BrE 表示 British English（英式英语），表格的空白表示没有对应名称。

参考资料：Wikipedia, the free encyclopedia