笨蛋 Bot (@bendan_bot)

写了个 Bot，支持 Serverless 部署到 Vercel，也可以部署到服务器，后面会添加其它功能。https://github.com/sxyazi/bendan


补充：如果需要 /pin 功能，可以注册个免费的 MongoDB Atlas。

“以下言论与IP无关”，一个新梗出现了😥

在 Record & Tuple 中存储 Object

Record/Tuple 可能会在不久后作为新的 primitive type 出现在 Node.js 中，它们与 Object/Array 相似，但它们是 immutable 的。

这意味着在 Record/Tuple 中不能包含 Object 或是 Array，但这种要求时常存在。一种解决方案是，将需要存储的对象放到一个 WeakMap 中，并以 Symbol 作为 key，而在 Record/Tuple 中仅保留这个 key。

值得注意的是，目前 WeakMap 并不支持以 Symbol 为 key，因此需要使用 Map 替代。

#learning

这两天在学习 Web 性能优化，收集了一些评估页面性能（或辅助优化）的工具。

在线工具
WebPageTest
PageSpeed Insights
Search Console
GTmetrix

浏览器工具
Lighthouse
speedline
DevTools performance tab

库
web-vitals
lazysizes
react-window
Guess.js

CI
bundlesize
lighthouse-ci
critical
critters

#learning

#看了什么 https://mp.weixin.qq.com/s/iR2L1j82soWKqr_SoM7aQg

#看了什么 https://web.dev/debug-web-vitals-in-the-field/

介绍了3种核心性能指标的现场测量方式，以及如何定位这些元素。

刚发现惘抑云有道云笔记多了个 付费加速功能，但支持的网站非常有限。为此在一款笔记软件里，硬塞了个浏览器进去，太怪了（

哦本来就是电子垃圾啊，那没事了

所有可能导致浏览器 reflow 的属性或方法

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

两种异步 CSS 加载方案的细微区别

为了避免 DOM 构建被 non-critical CSS 的加载阻塞，有两种常见的异步加载方案。其一（preload）：
<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

其二（media query）：
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

media query 方案，除了有更好的浏览器兼容性，在加载时机上也和 preload 有细微的区别：

被标记为 preload 的资源，拥有最高的加载优先级，因此很可能导致其它重要资源的下载时机被剥夺，这可能也并非是 non-critical CSS 所需要的。

#learning

几个 Web 营销里的名词

Tags：标签，包括 pixels、custom templates、custom HTML tags

Pixels：通常是一个 1x1px 的透明 GIF 图片，该图片由广告商提供，在图片加载时会携带广告商 server cookies，以及原站的广告标识符（出现在图片 URL 中）

Tag manager：标签管理器，无需修改网站代码，就可以添加和更新网站加载的第三方代码。如 Google Tag Manager

#learning

fetch() keepalive 的出现背景

keepalive 的出现，是为了替代 sendBeacon。

sendBeacon 的功能十分有限，它仅支持 POST 请求，并且不支持设置 request headers，在 CORS 请求上也有一些问题。

在目前的 Chromium 中，sendBeacon 是基于 keepalive 实现的，并在遥远的将来，sendBeacon 会被废弃。

#learning

这个有意思，测量 Embedded content 在不同 viewport sizes 的最小高度，提前生成 CSS，从而避免 CLS

https://github.com/GoogleChromeLabs/layout-shift-terminator

#tools

Google 是怎样定义 CLS 测量的

首先存在两个概念：帧之间的 CLS，下面简称“帧CLS”；会话之间的 CLS，下面简称“会话CLS”。

帧 CLS：使用 PerformanceObserver API，指定 type 为 layout-shift。这由浏览器提供支持，它计算元素由“一个已渲染帧”变更到“下个已渲染帧”的“CLS 分数”，换句话说，它是每帧间的变化差度。

会话 CLS：帧 CLS 往往不能直接使用，为了更加准确，需要再由用户引入 Session（或 Window）的概念，目前 Google 对其定义是：单个会话中每帧间隔最长 1s、每个会话最长 5s、“会话CLS”为每个“帧CLS”累加、仅报告“最大会话CLS”。

看到这里，或许会有一个疑问：为什么要分为“帧CLS”、“会话CLS”两个东西，直接一个 PerformanceObserver API 搞定不也挺好？

原因是，帧 CLS 的算法不会变，但会话 CLS 会随着时间不断进步，也许以后对会话的定义就不是 1s/5s 了，但若集成在浏览器中，老版本的浏览器将无法得到更新，因此决定由用户计算会话 CLS 得分。

#learning

https://github.com/w3c/webappsec-permissions-policy/blob/main/policies/unsized-media.md

TL;DR：
- intrinsicSize 未设置，默认固有尺寸 300x150
- width、height 未设置，使用 intrinsicSize；部分设置，按照 intrinsicSize 计算纵横比；全部设置，使用 width、height

#看了什么

才发现 console.log 是从后向前替换占位符的

二清问题

昨天看 V 站 有人讨论，正好之前也有做过类似的项目，记录一下。

什么是二清：比如与平台合作的入驻商户，用户在支付后钱暂时入账到平台账户，再由平台提现给商户，此时这些钱流经了平台账户，就会涉及二清问题。如果是小平台，这么操作问题不大，但只要流水一多，就会被盯上，比如微信在支付时，会有针对用户、金额、地域等条件的风控（当然是我们自己测试出的，微信不可能泄漏他们的风控规则）。

央行规定，要想二清必须得有支付牌照。一个牌照大概十几亿吧（现在好像便宜点了），当然还得有关系，也不是都给批的。那就只能换模式：

分账模式：找有牌照的机构合作，让每个商户自己开户（可以是个体工商户，或企业），用户支付时，钱直接到商户账户，不流经平台，平台仅拥有对其交易款项的分账权限，且分账金额至多不能超过 30%（不同机构不同），分账后的金额进到平台账户。此时商户、平台均作为该机构的二级商户。为什么要分账？因为平台要抽点。

#experience

什么NTR

HTTP 协议中 Cache-Control 的两个迷惑设计

1. 缓存了，但没完全缓存：

Cache-Control 有个 no-cache 选项，乍一看是“不缓存”的意思，但实际是“缓存”，只是每次使用缓存时，都向服务器验证是否过期。可以理解成“缓存了个缓存时间为 0 的东西”，真正的“不缓存”是 no-store。


2. 过期了，但没完全过期：

通常认为，只要 max-age 指定的时间到了，缓存就过期了。但是，还有个 stale-while-revalidate，它的意思是，如果时间超过了 max-age，但“超过的时间”没超过 stale-while-revalidate，就认为缓存有效。

如 `max-age=60, stale-while-revalidate=20`，表示虽然 60 秒后缓存到期，但在 80 秒内缓存还有效，也就可以拿来使用，然后浏览器在后台默默发送一个 revalidation 请求。

#learning