NotionNext BLOG

TypeScript进阶(一)

Tue, 23 Apr 2024 00:00:00 GMT

今天我们将要学习的是一些对type混合类型的常用运算函数。它们就是Omit、Pick、Partial、Required。

需要注意的是这几个函数只能对type进行运算赋值，不能对interface进行运算赋值，但是可以用interface作为入参。尽管interface和type很相近。

Omit

Omit在英文里是省略的意思。有时候我们想要复制一个type，除去一些属性。遵循DRY原则，这时可以使用Omit函数快速帮助我们达到目的。若只想除去一个参数可以在Omit中直接传入该属性名，要除去多个则用｜符分割。

首先先定义一个个人信息：

现在我们想要忽略亲属信息

Omit源码

Pick

Pick在英文里是选取的意思。有时候我们想要复制一个type，仅选取一些属性。此时我们可以使用Pick函数。

比如我们想要定一个type，表明person的位置信息的type。

Pick源码

Partial

partial在英文中部分的意思。有时我们希望获取一个person类型里面所有属性都是可选的，但是上面的定义中，person类型所有属性都是必选的。使用partial可以达到我们的目的。

Partial源码

Required

Required在英文里时必须的意思。它和partial操作相反，会将所有属性变为必选。

Required源码

SNI原理简介

Sat, 19 Aug 2023 00:00:00 GMT

引言

众所周知P站主站是被屏蔽的，需要科学上网才能正常访问。前阵子发现有些P站第三方客户端可以做到直连P站，便心血来潮想要研究一下他们是如何实现的。同时也做一个可以直连P站的图片下载器。

知己知彼

常言道知己知彼才能百战不殆。想要知道P站直连的原理就要先知道P站是如何被拦截的。通过查阅网上资料知道P站是被DNS污染 + SNI阻断的方式被墙。接下来就可以从这两个方面入手。

DNS污染

所谓DNS污染就是污染你的DNS让你得到的DNS解析是一个错误的结果，令你最终的请求发送到一个不正确的IP以达到拦截的目的。当你想要请求某个网站时，通常会经过一下流程：

抓包实例：

DNS

DNS污染就是在DNS服务器应答前，经过的中间路由检测到你发送的DNS请求是在GFW黑名单里的网站，中间路由器抢先给你返回一个DNS应答给你错误的IP地址。由于DNS协议设计之初没有身份鉴别机制且底层通常使用UDP协议是无连接的，它采用的策略是优先接收第一个DNS响应报文，后续到达的DNS响应报文将被丢弃，当上面的情况发生时，实际DNS服务器的报文会在后面到达，而它携带正确信息的DNS响应报文将会被你的主机丢弃。

所以真实网络环境下的请求是下面的的流程，而不是上面的简化版。

明白了上面这个流程，就可以针对性地去解决了。

解决DNS污染问题可以采用下面几个方法：

使用HTTPS。启用HTTPS后，浏览器与网站之间的通信是加密的，中间人无法读取和修改。这可以有效抵御DNS污染。

使用DNS加密协议。如DNS over HTTPS、DNS over TLS等协议，可以加密DNS查询，避免DNS查询结果被劫持或污染。

使用可信任的DNS服务器。选择知名的可信任DNS服务商,如Google DNS、OpenDNS等,而不使用可能被污染的本地ISP DNS。

启用DNSSEC。DNSSEC通过数字签名防止DNS响应被修改,可以验证DNS数据的完整性和真实性。

本地Hosts文件。在本地Hosts文件指定域名与IP地址映射,来绕过DNS查询。

智能选择DNS服务器。智能DNS系统可以检测异常情况,自动切换到其他正常DNS服务器。

使用反向代理服务。通过中间代理服务来进行访问,避免直接暴露在污染的网络环境中。

SNI阻断

什么是SNI

SNI全称是Server Name Indication，中文可以翻译为“服务器名称指示”。它是SSL/TLS协议的一个扩展，允许在建立安全连接时,客户端告诉服务器它正在访问的是哪个 hostname。

以前在一个IP地址上只能部署一个SSL证书，这样就无法在一台服务器上托管多个需要SSL证书的网站。

SNI的出现改变了这个限制。客户端在连接服务器时发送想要访问的hostname，这样服务器就可以根据不同的hostname选择正确的SSL证书来建立安全连接。

SNI扩展于2003年被提出，2005年正式成为SSL标准的一部分。SNI是在TLS 1.0版本中提出的扩展，但直到TLS 1.2版本才被正式采纳为标准。主流浏览器对SNI的支持也是从2010年开始。

TLS 1.3版本对SNI做了优化，不再允许客户端Anonymous模式，必须发送SNI来建立连接。所以综上，SNI主要是在TLS 1.2/1.3版本中使用，一般来说如果不发送SNI，服务器会根据配置返回默认证书。

在TLS 1.3版本中,客户端必须发送SNI主要有以下两个原因:

提高安全性

早期的TLS版本允许客户端匿名连接服务器,这带来了一些安全隐患。不发送SNI,服务器无法验证客户端请求的域名,存在被攻击的风险。TLS 1.3去掉了这种客户端匿名模式,要求必须发送SNI,以提高安全性。服务器可以验证连接请求是否对应合法域名。

优化性能

TLS 1.3改进了握手流程,服务器在收到SNI后,可以立即准备对应的证书,从而省去了额外的往返延迟。不发送SNI,服务器只能使用默认证书,需要重新协商一遍才能切换到正确的证书,降低了性能。

综合考虑安全性和性能,TLS 1.3做出了需要强制SNI的设计。这尽量减少了匿名连接可能带来的风险,也优化了连接流程的效率。这项变化让SNI成为建立安全TLS连接的必备组件之一。

具体细节

SNI作为TLS扩展出现在ClientHello消息中。ClientHello是TLS握手过程的第一步,客户端首先发送这条消息给服务器。

在ClientHello消息中,客户端可以发送一个Server Name Indication extension(类型是0号扩展)。这个扩展包含了客户端请求访问的主机名。 Server Name是可选的，如果客户端请求的是IP直接访问,就不需要带主机名。

当服务器收到ClientHello时，会检查是否有SNI扩展，如果有就取出Server Name。服务器会根据这个Server Name选择合适的证书去回复客户端。如果没有接收到SNI扩展,通常会返回默认证书。

之后就是标准的TLS握手流程，协商加密算法、交换证书等,来建立安全连接。如果握手成功,客户端就可以通过这个安全通道与服务器通信了。

其中第二步时，服务器会做出何种反应完全是由服务器配置规则决定的，通常都会采用以下几种策略：

返回一个通配符证书，适用于服务器上的所有域名。

返回一个不存在的域名的证书，使客户端出现证书错误,强制要求使用SNI。

返回一个第三方通用证书，如Let’s Encrypt的DST Root CA X3证书。

甚至可以返回一个自签名证书作为默认证书。

我们可以抓包看看实际p站点的TLS流程，因为我这里没有清除电脑上原有的证书所以没有证书返回和密钥交换的过程。

绕过思路

基于以上抓包信息，我们可以得到一个直接思路就是删除SNI扩展即直接不发送SNI，让服务器返回默认的证书供我们使用。恰巧P站返回的默认证书是*.pixiv.net证书，一个泛解析的证书，这样我们就可以直接利用啦！

第三方客户端是怎么做的

以PixEz Flutter这个客户端为例，它是支持直连P站的。而且他们的代码是开源的，我们可以随意查看。通过翻他们的代码和问群里的大佬得知。

针对DNS污染问题，他们是用修改本地host的思路，用一些技术手段获取到了p站一个服务器的真实IP，然后直接向这个地址发请求从而绕过了DNS污染。而对于SNI阻断他们采用的方案是直接在请求过程中删除SNI，刚刚好P站采用的是TLS 1.2版本，这样就实现了直连P站。

React基础(一)

Tue, 14 Jun 2022 00:00:00 GMT

组件声明

React中声明组件有两种方式，一是函数式组件，就是把一个函数作为组件的构造器；二是class组件，即用ES6的class语法声明一个类作为组件的构造器。在16.8版本以前函数式组件不能使用组件的state，refs属性等诸多特性，这使得函数式组件只能用来定义一些简单组件，对于复杂一些的组件只能使用class组件。而此版本以后React加入了Hook，使得函数式组件也能够使用组件的其它特性。官方文档

函数式组件

函数式组件中我们只能用props属性，定义一个函数式组件只需要创建一个开头为大写字母的函数，然后再将函数最后return回一个jsx标签即可。代码如下：

class组件

class组件要比函数式组件强大的多，它可以完全使用组件三大属性：state、props、refs。它还有生命周期函数可供使用，在生命周期函数中我们可以进行许多操作。但创建一个class组件需要从React对象中继承一个类React.Component。代码如下：

当我们需要在class组件上挂载事件处理函数时有两种方式，一是在constructor中重写该事件处理函数，二是利用箭头函数和class语法声明函数。

组件的三大属性

组件实例中有很多属性，但比较常用的就三个分别是：state、props、refs。

image-20220614101741901

state

state属性是用来存储该组件实例的状态的。当我们使用this.setState函数去修改state时，页面会因为组件状态改变而同步改变。以上面的MyComponent组件为例，我们可以给组件定义一个初始状态：

props

props属性是用来接收外部传给组件的数据的，如果我们直接在标签上写数据，props会自动接收该数据。

限制props的数据类型

有时候我们希望限制传入数据的类型，此时我们需要额外加载一个prop-types.js包，里面有PropTyps对象以供我们使用。示例代码如下：

refs

当我们需要获取标签or组件实例时，可以使用ref标记。然后就可以在函数中利用this.refs找到该组件or标签。ref有三种形式分别是：字符串类型、回调函数类型和refs对象类型。

字符串类型的ref

字符串形式的ref 已经不推荐使用， ref会被自动收录进组件的refs里，如同props。

回调函数类型的ref

回调函数形式的ref 会将该标签DOM传给回调函数的形参，用this接住挂载在组件实例上。

refs对象类型的ref

使用自定义ref对象 ref对象内含{ current:被ref标记的标签实例 } 当多个标签使用同一个ref对象标记时，仅保留最后一个。

React基础(二)

Mon, 20 Jun 2022 00:00:00 GMT

生命周期(旧)

React的生命周期可以为两条线，一是初始挂载阶段的生命周期，二是组件状态更新阶段的生命周期。在组件挂载阶段的生命周期只会触发一次，而组件状态更新阶段的生命周期可以多次触发。

在下图中，左边为挂载阶段的生命周期，右边为状态更新阶段的生命周期。

特别说明componentWillRecevieProps函数只有在父组件给子组件传递props时才会被调用。而shouldComponentUpdate则一定会被调用，若我们不自己指定则会默认return true。

生命周期(新)

在React 16.3 中引入了新的生命周期，在旧版生命周期中删除了componentWillReceiveProps、componentWillMount、componentWillUpdate这三个生命周期。引入了两个新的生命周期getDerivedStateFromProps和getSnapshotBeforeUpdate。

V8的GC机制

Thu, 01 Sep 2022 00:00:00 GMT

V8的GC机制

V8对JS使用内存的限制

V8引擎在执行JS的过程中限制了JS可以使用内存的大小。通常在32位系统下，JS可以使用的内存大小约为0.7GB而64位系统下约为1.4GB。当我们一直申请内存，JS所使用内存超过这个限制时就会报错。造成这个问题的主要原因在于JavaScript对象基本上都是通过V8自己的方式来进行分配和管理的。

在V8中，所有的JavaScript对象都是通过堆来进行分配的。 当我们在代码中声明变量并赋值时，所使用对象的内存就分配在堆中。至于V8为何要限制堆的大小，表层原因为V8最初为浏览器而设计，不太可能遇到用大量内存的场景。对于网页来说，V8的限制值已经绰绰有余。

深层原因是V8的垃圾回收机制的限制。按官方的说法，以1.5 GB的垃圾回收堆内存为例，V8做一次小的垃圾回收需要50毫秒以上，做一次非增量式的垃圾回收甚至要1秒以上。这是垃圾回收中引起JavaScript线程暂停执行的时间，在这样的时间花销下，应用的性能和响应能力都会直线下降。这样的情况不仅仅后端服务无法接受，前端浏览器也无法接受。因此，在当时的考虑下直接限制堆内存大小是一个好的选择。

当然，这个限制也不是不能打开，V8依然提供了选项让我们使用更多的内存。Node在启动时可以传递--max-old-space-size或--max-new-space-size来调整内存限制的大小，示例如下：

如果遇到Node无法分配足够内存给JavaScript对象的情况，可以用这个办法来放宽V8默认的内存限制，避免在执行过程中稍微多用了一些内存就轻易崩溃。

GC策略

V8的垃圾回收策略主要基于分代式垃圾回收机制。在自动垃圾回收的演变过程中，人们发现没有一种垃圾回收算法能够胜任所有的场景。因为在实际的应用中，对象的生存周期长短不一，不同的算法只能针对特定情况具有最好的效果。为此，统计学在垃圾回收算法的发展中产生了较大的作用，现代的垃圾回收算法中按对象的存活时间将内存的垃圾回收进行不同的分代，然后分别对不同分代的内存施以更高效的算法。

分代式垃圾回收

在V8中JavaScript对象被分为新生代和老生代。新生代通常是一些生命周期较短的对象，而老生代则通常是新生代经过一轮GC后仍然存活的对象晋升而来。

前面我们提及的--max-old-space-size命令行参数可以用于设置老生代内存空间的最大值，--max-new-space-size命令行参数则用于设置新生代内存空间的大小的。

新生代GC

在分代的基础上，V8新生代中的对象主要通过Scavenge算法进行垃圾回收。在Scavenge的具体实现中，主要采用了Cheney算法，该算法由C. J. Cheney于1970年首次发表在ACM论文上。

Scavange算法将新生代堆分为两部分，分别叫from-space和to-space，工作方式也很简单，就是将from-space中存活的活动对象复制到to-space中，并将这些对象的内存有序的排列起来，然后将from-space中的非活动对象的内存进行释放，完成之后，将from space 和to space进行互换，这样可以使得新生代中的这两块区域可以重复利用。

Scavenge的缺点是只能使用堆内存中的一半，这是由划分空间和复制机制所决定的。但Scavenge由于只复制存活的对象，并且对于生命周期短的场景存活对象只占少部分，所以它在时间效率上有优异的表现。它是典型的以空间换时间的算法。

当一个对象经过多次复制依然存活时，它将会被认为是生命周期较长的对象。这种较长生命周期的对象随后会被移动到老生代中，采用新的算法进行管理。对象从新生代中移动到老生代中的过程称为晋升。

对象晋升的条件主要有两个，一个是对象是否经历过Scavenge回收，一个是To空间的内存占用比超过限制（25%）。

在默认情况下，V8的对象分配主要集中在From空间中。对象从From空间复制到To空间时，会检查它的内存地址。以判断这个对象是否已经经历了一次Scavenge回收。若已经历过了，则将该对象晋升至老生代内存空间。

设置25%这个限制值的原因是当这次Scavenge回收完成后，这个To空间将变成From空间，接下来的内存分配将在这个空间中进行。如果占比过高，会影响后续的内存分配。

对象晋升后，将会在老生代的内存空间中存活，由老生代的GC算法进行处理。

由于Scavenge是典型的牺牲空间换取时间的算法，所以无法大规模地应用到所有的垃圾回收中。但可以发现，Scavenge非常适合应用在新生代中，因为新生代中对象的生命周期较短，恰恰适合这个算法。

老生代GC

对象晋升后，将会在老生代空间中作为存活周期较长的对象来对待，接受新的回收算法处理。对于老生代中的对象，由于存活对象占较大比重，再采用Scavenge的方式会有两个问题：一个是存活对象较多，复制存活对象的效率将会很低；另一个问题依然是浪费一半空间的问题。这两个问题导致应对生命周期较长的对象时Scavenge会显得捉襟见肘。为此，V8在老生代中主要采用了Mark-Sweep和Mark-Compact相结合的方式进行垃圾回收。

Mark-Sweep

Mark-Sweep是标记清除的意思，它分为标记和清除两个阶段。与Scavenge复制活着的对象不同，Mark-Sweep在标记阶段遍历堆中的所有对象，并标记活着的对象，在随后的清除阶段中，只清除没有被标记的对象。可以看出，Scavenge中只复制活着的对象，而Mark-Sweep只清理死亡对象。活对象在新生代中只占较小部分，死对象在老生代中只占较小部分，这是两种回收方式能高效处理的原因。

Mark-Sweep算法最大的问题就是在进行一次标记清理回收后，会产生内存碎片，内存空间会出现不连续的状态。这种内存碎片会对后续内存分配造成影响。例如要分配一个100MB大小的对象，此时总体空闲的内存空间大小为150MB但是并没有一个连续的100MB大小的内存空间，这就会导致内存分配失败。这种情况会导致提前触发GC是程序停顿，而此次的GC是不必要的。为了解决Mark-Sweep的问题，所以Mark-Compact被提出。

Mark-Compact

Mark-Compact是标记整理的意思，是在Mark-Sweep的基础上演变而来的。它们的差别在于对象在标记为死亡后，在整理的过程中，将活着的对象往一端移动，移动完成后，直接清理掉边界外的内存。这样就可以减少内存碎片。总体上的思路就是将小碎片移动、合并成一个大块的内存空间。

这里将Mark-Sweep和Mark-Compact结合着介绍不仅仅是因为两种策略是递进关系，在V8的回收策略中两者是结合使用的。

GC停顿处理

为了避免出现JavaScript应用逻辑与垃圾回收器看到的不一致的情况，垃圾回收的3种基本算法都需要将应用逻辑暂停下来，待执行完垃圾回收后再恢复执行应用逻辑，这种行为被称为“全停顿”（stop-the-world）。

在V8的分代式垃圾回收中，一次小垃圾回收只收集新生代，由于新生代默认配置得较小，且其中存活对象通常较少，所以即便它是全停顿的影响也不大。但V8的老生代通常配置得较大，且存活对象较多，全堆垃圾回收（full垃圾回收）的标记、清理、整理等动作造成的停顿就会比较可怕，需要设法改善。

为了降低全堆垃圾回收带来的停顿时间，V8先从标记阶段入手，将原本要一口气停顿完成的动作改为增量标记（incremental marking），也就是拆分为许多小“步进”，每做完一“步进”就让JavaScript应用逻辑执行一小会儿，垃圾回收与应用逻辑交替执行直到标记阶段完成。

V8后续还引入了延迟清理（lazy sweeping）与增量式整理（incremental compaction），让清理与整理动作也变成增量式的。

Charles教程

Thu, 10 Nov 2022 00:00:00 GMT

因为工作上开发移动端的应用，而移动端并没有像Chrome那样好用的调试工具去查看网络请求的信息，所以需要利用抓包来进行网络请求的监控调试。在此介绍一些Charles抓包工具的基础使用，以作备份。

基础抓包

本文以抓ios手机上的流量为例。安卓手机的基本步骤也是同理。

基本流程

抓包基本流程：

确保手机与抓包的电脑连接在同一局域网下

抓包电脑开启http代理，并设置好本机的端口号

手机设计好代理服务器为抓包电脑的ip和端口

图例

设置电脑代理的端口，以192.168.6.238:8888为例

打开Charles。
Proxy -> Proxy Setting。设置端口号

手机设置代理服务器的地址与端口号

找到代理服务器IP以及端口
设置代理

Https抓包

根据提示在手机上安装好证书ssl

charles开启http抓包

Mock数据

选中要mock的接口右键

映射为本地接口或者远程接口

http拦截并修改后再发送数据

选中要拦截的接口右键

设置断点