码厩开发者笔记

#32 Email Verification API

传统邮箱验证通常采用 Double Opt-In：用户提交邮箱后，服务端发送验证邮件，用户切换到邮箱客户端打开邮件，再点击链接返回网站完成验证。这个流程虽然可靠，但存在明显的行为断点。新的 Email Verification API 试图让浏览器在用户不离开当前页面的情况下完成邮箱所有权验证。

#31 MicroLighter 代码高亮库

把代码高亮从 DOM 层搬到 CSS 渲染层的 2 KiB 方案

#30 HTML-in-Canvas 与 Canvas UI

前端圈有一条隐形的墙：DOM 负责结构、文本、无障碍与交互；Canvas / WebGL 负责像素、Shader、粒子与 3D。两边各自很强，却很难融合。

HTML-in-Canvas 是 WICG 正在孵化的提案，试图把这道墙拆掉；
而 Canvas UI 则是基于它（并带降级方案）第一个走红的"GPU 级视觉组件库"。

#29 浏览器访问本地 HTTPS 网站偶发卡住的排查经验

我用 Golang 开发了一个本地站点，跑在 Caddy 上（动态注册路径），并使用阿里云 DNS 将域名解析到本地 IP。

今天突然发现网页无法打开，浏览器一直处于 Pending 状态，而 curl 访问正常。关闭网络代理和浏览器插件、清理缓存后问题仍然存在。

怀疑是 DNS 解析的问题，使用 curl -vk --resolve d3v.cn:443:192.168.31.31 https://d3v.cn/markjour/ 访问也正常。

更奇怪的是，发现使用访客模式可以打开。

最后还发现，在关闭一些浏览器 Tab 后，普通模式也恢复正常。暂时推测可能与浏览器 HTTP/2 连接复用有关：

1. 开机之后我访问相关页面没有成功打开，发现是服务都没有启动，然后启动 Caddy 和后台服务，并动态注册路径。
   可能是这个过程中，有 Tab 没有关闭，一直 Pending。
2. Caddy 支持 HTTP/2，浏览器会通过 ALPN 协商 HTTP/2；HTTP/2 会在同一个连接上复用多个请求。
   如果底层 HTTP/2 连接本身出现异常，复用该连接的多个请求可能同时表现为 Pending。
   关闭 Tab 后，浏览器可能释放异常连接并重新建立连接，因此问题自动恢复。

以后再次遇到的时候再检查验证。

后续多次遇到这个本地网站访问异常问题，今天抽空继续排查。

发现同一台机器上的 Edge，不同 Profile 对 d3v.cn 的访问结果不同：一个可以正常打开，另一个持续 ERR_TIMED_OUT。

进一步查看 Edge 的网络信息发现（ / ），异常 Profile 将 d3v.cn 解析为 ::1 和 192.168.31.31，而正常 Profile 解析为 127.0.0.1。随后检查本机 /etc/hosts，发现配置了：

127.0.0.1 localhost
127.0.0.1 eqr.hosts.d3v.cn eqr eqr6
::1       eqr.hosts.d3v.cn

同时公网 DNS 中 eqr.hosts.d3v.cn 也存在地址记录。因此，同一域名实际上同时存在本地 hosts 和公网 DNS 两套解析结果，Edge 不同 Profile 可能缓存或选择了不同地址。

这次基本确认问题核心在域名解析结果不一致，而不是 Caddy、TLS 或 HTTP/2。后续应避免让同一域名同时依赖 hosts 和公网 DNS 提供不同地址，或者至少确保两者解析结果一致。

#28 百度云 ICP 备案记录

• 原备案信息（阿里云 · 2019）：备案名称「码厩Markjour」，备案号 鄂ICP备15002462号。
• 迁移原因：不再使用虚拟主机，业务迁至百度云低成本主机，需在百度云重新提交接入/备案，备案名称变更为「码厩开发者笔记」。

初审被拒，原因：

1. 应急联系电话校验：应急手机号不能与负责人手机号码相同，需提供另一位真实可联系人的号码（当年没有这个要求）。
2. 前台菜单合规审核：初审要求网站不得出现“留言”和“给我写信”菜单，这算页面交互入口（推测当年备案时尚未增加这两个菜单）。
   • 这两个功能从没用过，暂时屏蔽前端入口以通过核验，后面再看如何处理。

初审通过之后，备案进入 “管局审核中-短信校验中” 状态。
几分钟之后就会收到工信部短信验证码，需要进入指定链接输入验证码、手机号、身份证后六位进行核验。
短信核验之后过一会儿，备案进入 “管局审核中-人工审核中” 状态。

#27 快速签发免费 SSL/TLS 证书

本文不涉及自动签发、自动更换证书，只对 acme.sh 工具的简单用法做一个记录。

#26 浏览器屏蔽的端口

#25 F12 网络过滤器

示例

mime-type:image/png larger-than:1K
# Edge 官方示例，表示过滤出大于 1K 的 PNG 图片

domain:*.csdn.net method:POST
# 过滤出 CSDN 域的 POST 请求。

has-response-header:Content-Type -domain:*.baidu.com
# 过滤出带 Content-Type 头的请求，排除百度域。

清单

1. 多个条件之间是 AND 关系，OR 关系暂时不支持。
2. 前面加上 - 表示取反，小技巧：可以通过输入 - 之后的自动补全查看所有支持的选项。

参考资料与拓展阅读

• Microsoft Learn，Microsoft Edge，Filter requests by properties
• 微信公众号，通过调试技术，我搞懂了 b 站视频播放很快的原理

#24 Web 分词 API

看了 How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter" 了解到，现在 Web 已经支持分词了：

const text = `我爱北京天安门，天安门上太阳升。伟大领袖毛主席，指引我们向前进。`;
const granularities = ["sentence", "word", "grapheme"];
granularities.forEach(function (granularity) {
  // console.log([granularity, index, self])
  let segmenter = new Intl.Segmenter("zh", { granularity: granularity });
  let seg = segmenter.segment(text);
  // console.log(seg) // Segments{}
  let result = Array.from(seg, (s) => s.segment);
  console.log(result);
});
// ['我爱北京天安门，天安门上太阳升。', '伟大领袖毛主席，指引我们向前进。']
// ['我', '爱', '北京', '天安门', '，', '天安门', '上', '太阳', '升', '。', '伟大', '领袖', '毛主席', '，', '指引', '我们', '向', '前进', '。']
// ['我', '爱', '北', '京', '天', '安', '门', '，', '天', '安', '门', '上', '太', '阳', '升', '。', '伟', '大', '领', '袖', '毛', '主', '席', '，', '指', '引', '我', '们', '向', '前', '进', '。']

#23 基于 Web 技术的跨平台应用解决方案

• Web App，纯 Web App，需要用浏览器打开

随着浏览器厂商的持续推进，现在 WebApp 也能实现很多底层交互了

• Native App，各平台的原生应用

• Hybird App，在 App 中加入 WebView，实现部分逻辑
  根据 Native 和 Web 部分的比例，可以分成：

• 交替

• 混合，同一个窗口中，主体内容采用原生实现，部分组件是 WebView + WebApp（类似浏览器）
• WebView + WebApp 为主体逻辑，加上 Native 交互

后端和框架核心通信，实现窗口管理，系统调用，WebView。

• Electron
• React Native (RN)
• Tauri，后端开发语言 Rust，使用系统自带浏览器组件
• Cordova
• Ionic
• NW.js
• Expo
• Capacitor
• Quasar
• NativeScript
• Gluon

参考资料与拓展阅读

• 简书，native APP、hybrid APP、web APP三者的区别
• The State of JS 2022: Mobile & Desktop
• OSChina, Gluon.js 桌面应用开发框架