文章 | CrabSAMA

Git merge rebase 对比

在平时的开发过程中，分支之间的合并是十分常见的操作。我平时都是使用 merge 一把嗦，无论是开发分支到线上分支，还是线上分支到开发分支，基本都是使用的 merge。反观之前有一个后端同事，他们组内会有多人开发同一个功能的情况，他除了最终将开发分支合并到线上分支使用了 gitlab 的 merge request 去 merge，平时都是使用 rebase 来将别人的功能分支合并到自己的开发分支上。

在看到了这些情况后，我对 merge 和 rebase 有什么区别产生了疑问，正好去搞明白这两个操作究竟有什么不同。

merge 是我常用的功能，这个我自己比较熟悉，一般来说可以分成两种情况：当前分支与合并目标分支有无变更。如果当前分支就是从合并目标分支上出来的，merge 操作其实看起来就像是在合并目标分支后进行了多次 commit，commit log 也是一条直线；但很多情况下存在多人同时开发的情况，就会有变更操作，存在变更操作的时候，merge 操作会产生一条 merge 的 commit log，commit log 也会变成一条折线。很多同学可能会有强迫症介意这条折线，所以 rebase 是他们更常见的选择。

CrabSAMA大约 3 分钟

Chrome Devtool Protocol 模拟组合键

使用 CDP 模拟键盘操作时，涉及到一些组合键的 case 时，需要关注 Input.dispatchKeyEvent 中的 commands 属性。

最开始的时候我是直接通过 CDP 发送指定的组合键，并没有传 commands 属性，然后发现按键事件是成功发送了，但是并没有触发全选、复制、粘贴等操作，但我使用 playwright 去测试的时候，却发现 playwright 的模拟按键操作可以实现。我们知道 playwright 也是基于 CDP 实现的模拟操作，因此我去查看了 playwright 的源码，发现了 commands 属性是解决问题的关键。

CrabSAMA大约 2 分钟

为什么需要 import React

在 vscode 里面使用 snippet 时，rfce 是 react function component export 的快捷命令，在使用这个 snippet 时，我看到和 react 相关的 snippet 都会在最上方有一行 import React from 'react'，但其实这一行删掉了也能正常运行，不删掉每次 typescript 都会报 unused import，有点烦人。

去了解了一下，在 react 17 之前 react 解析 JSX 的方式都是将 JSX 转换成 React.createElement，在 React 17 之后采取了新的 JSX 解析方式，新的 JSX 转换方式不再依赖于 React.createElement，而是通过编译器自动引入必要的代码。这意味着你可以在不显式导入 React 的情况下使用 JSX。但其实本质上 import 语句还是需要的，只是换成了编译器帮你将这一行代码补上去。

CrabSAMA大约 1 分钟

微前端应该是最后的选择

https://sorrycc.com/micro-f2e-feeling/

微前端这个概念在前端开发这个方向里面已经不是新鲜事情了，前几年沸沸扬扬，基本每个前端开发都会将「了解微前端开发」写到自己的简历上，各种微前端方案也是层出不穷：

最初的 single-spa，到基于 single-spa 实现的 qiankun，将 js 沙盒和 css 隔离都做到了开箱即用；
再到基于 webComponent 实现的 micro-app，基于 webComponent + iframe 实现的 wujie；
另外还有直接使用 iframe 作为微前端方案（谁说 iframe 不是微前端呢，天生的上下文隔离就是它最大的优势），基于 webpack5 的 module federation 模块联邦，等等。

CrabSAMA大约 4 分钟

学习面试套路

https://sorrycc.com/my-interview-routine-2023/

基本流程

面试前：

1、电话联系，约时间，并要求准备好视频会议面试软件，加好友，设置视频会议相关权限

面试中：

介绍自己和团队（1min）
- 这一块之前是没有的，视情况我可以补上
对方自我介绍（1min）
现场编码（编码能力）（10min）

这一块可以是算法题，也可以是编程场景题（实现一个 Promise.all、Array.prototype.flat 这种），注重可以看求职者的编码能力、编码思路、代码规范等。

建议是制造一些卡点让面试者当场想方案（但这块是不是应该有一定量的题库作为背景呢？每次创造新的题目也怪费劲的）

还可以看到对方搜索用的啥、是否翻墙顺畅、是否有 AI 辅助、编辑器和配色喜好等等。
问基础（深度和广度）（10min）

JavaScript HTML CSS Vue React

比如算法、闭包、迭代器、Promse、ES 特性、React、数据流、工程化等。

前端方向多，不同岗位有不同的侧重点，比如招中台的就不需要考察 H5 经验了。基础也分「深度」和「广度」，外包答疑岗位会侧重广度，基础技术岗位会侧重深度。

广度就是多问，10 个问题能答出来 7 个就可以；深度看两点，一看求职者能否经得住熟悉知识点的一问到底（比如针对一个 Promise 深挖，可以挖到事件循环，Promise 规范，generator yield 等等），二看对于熟悉的技术栈是否有原理性的认识（在我看来就是不仅要会用这个框架，还要去思考为什么这个框架要这样设计）。
问项目实践（产出、解问题的能力）（10min）

结合项目问技术，考虑解决问题的能力

开源项目、社区影响力、个人博客、业务项目的闪光点都属于此类。

问题比如是：你做了什么，你的角色是什么，遇到什么问题，你是怎么解决的，是否有其他的解法，为什么是这个解法，你的思考逻辑是什么？

**招人就是为了解决问题的，不仅是解决他会的问题，还要解决他不会的问题。**通常结合项目来问，提出一个他之前没有考虑过的问题，然后看他的解决思路。
问学习方法（学习能力）（3min）

我一般习惯问平时有没有了解前端的新动向，最近学习最新的前端知识是什么，有没有写博客记录的习惯等。

可以问遇到一个不会的知识点怎么学，期望做什么，等等。
问杂项（离职原因、职业规划等）（3min）
你有什么想问我的（3min）

CrabSAMA大约 3 分钟

JavaScript 事件循环

(async () => {
  await new Promise((resolve) => {
    console.log(1)
    resolve()
  }).then(() => console.log(2))
  console.log(3)
})()

// 执行顺序 1 2 3
// 可以拆成几块看
await new Promise((resolve) => {
  console.log(1)
  resolve()
})
// 等同于
function

CrabSAMA大约 5 分钟

HTTPS & TLS/SSL

https 其实就是在 http 这个应用层协议上加了一层 TLS/SSL 的校验。

http 本身是无状态的，因此它并不安全，同时它基于 tcp/ip，数据都是明文传输，存在安全隐患。因此我们使用了 TLS/SSL 对其报文进行了加解密。

TLS 和 SSL 本质上是一个东西，前者是最初的名字，TLS 是后来基于 SSL 更新的版本。

https 会在 tcpip 三次握手后尝试建立连接，我们来聊一下 TLS/SSL 是怎么建立连接的：

在建立连接前，TLS/SSL 用的是非对称加密，即公钥和私钥都可以用于加密与解密。因此非对称加密的性能消耗会比较大。

CrabSAMA大约 3 分钟

快速 Diff 算法

快速 Diff 算法实测下来是性能最优的。本质上它包含了预处理的行为，借鉴了文本 Diff 中的预处理思路。

在最开始的时候，快速 Diff 先从新旧节点序列的头部和尾部分别进行比较，找到头部和尾部有哪些节点是不需要移动的，直接更新即可。在做完了这一步之后，新旧节点序列都会剩下一部分节点，这部分节点有可能可以通过直接新增节点或者卸载节点进行处理。

在做完上述处理后，剩下的节点都需要进一步的处理。无论是简单 Diff 算法、快速 Diff 算法，还是快速 Diff 算法，处理规则都是：

判断是否有节点需要移动，以及应该如何移动；
找出那些需要被添加和移除的节点。

CrabSAMA大约 7 分钟

发布一个 npm 包

npm init
编写代码
使用 npm link 功能先在本地测试包代码是否正常可引入、可运行
是否为 bin 包（可执行文件包）
1. 是，则需要在 package.json 中添加 bin 字段，并指向可执行文件的路径
2. 否，则无需额外操作
在 npm 上注册自己的账号 https://www.npmjs.com/signup
许多同学都有用国内的镜像源或者公司内部源，这些源是无法发布 npm 包的，因此我们可以使用 nrm 这个库来管理我们的 npm registry，在发布 npm 包之前我们需要切换 npm registry 为 https://registry.npmjs.org/
npm login，输入自己的用户名和密码，登录时可能需要二次验证码，输入即可。登录成功后调用 npm whoami 有自己的用户名输出即证明登录成功
建议的流程是通过 commit-and-tag-version 这个包来管理版本，这个包可以帮助我们生成 CHANGELOG 和 commit log，同时生成 git tag 方便直接定位到某个版本。
1. commit-and-tag-version --release-as major 下一个版本是主版本时使用（1.0.0 -> 2.0.0）
2. commit-and-tag-version --release-as minor 下一个版本是次版本时使用（1.0.0 -> 1.1.0）
3. commit-and-tag-version --release-as patch 下一个版本是小版本时使用（1.0.0 -> 1.0.1）
4. commit-and-tag-version --prerelease rc 下一个版本是预发布版本（rc）时使用（1.0.0 -> 1.0.1.rc.1）
5. 个人建议在每次版本发布之前，先发 rc 版本自测，通过测试后再发布正式版本，防止发布正式版本后出现不可用的情况还需要重新发版修复。我们应该保证我们的每个正式版本包都是可用的。
在更新完版本号后，我们可以使用 npm publish 命令进行包发布操作，npm publish --tag 用于指定当前要发布包的 tag，例如我们上面提到的发 rc 包，就可以使用 npm publish --tag rc 命令。注意，直接调用命令之前，建议先调用一次 dry-run，也就是预运行一次，检查我们的操作是否有问题，方法也很简单，在命令后面加上 --dry-run 即可，即 npm publish --dry-run。在运行 dry-run 时，会看到运行完命令后 npm 会做什么事情，我们只需要检查操作是否正确符合预期，没问题的话最终执行实际的发布命令即可。

CrabSAMA大约 2 分钟

滚动锚定

背景

在我们开发过程中，有些时候会遇到容器内添加元素的需求，一般往下添加是没问题的，但是当我们有在运行过程中动态往上方添加元素时，就会发现不同浏览器有不同的行为。很常见的一种场景就是消息列表向上滚动加载的场景。

复现

这一段代码可以模拟这种case：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container" style="display: flex; gap: 10px; flex-direction: column;">
    <div style="background: red; height: 100px; width: 100px;"></div>
    <div>bottom</div>
  </div>
  <script>
    const container = document.getElementById('container')
    setInterval(() => {
      const div = document.createElement('div')
      div.style.background = 'red'
      div.style.height = '100px'
      div.style.width = '100px'
      container.insertBefore(div, container.firstChild)
    }, 300)
  </script>
</body>
</html>

CrabSAMA大约 3 分钟