Blog | Frontend Weekly

# 确保你在 release 分支上
$ git checkout release

# 进行 squash 合并
$ git merge feature --squash

# 在解决完所有冲突后，需要将已解决的文件添加到暂存区
$ git add .

# 提交合并结果为一个新的单个 commit（注意：这里没有自动提交，需要手动提交）
$ git commit -m "Squashed commit from feature-branch: Implemented XYZ feature"

注意，在 GitLab 提 Merge Request，可以在 Merge Request 页面中勾选 squash commit 选项

合并代码遇到冲突，想回退到合并前的状态：

$ git merge --abort

一个小技巧，which 命令可以用来查找可执行文件的路径：

$ which npm

/Users/bytedance/.nvm/versions/node/v18.16.0/bin/npm

框架中的类型编程： Hono 中的模板字符串类型编程

框架中的类型编程：tRPC & Prisma 中的泛型应用

React 19 即将推出的 4 个全新 Hooks，很实用！

我用埋点让老板安静（埋点篇）

Rust性能很高？不，它完全顶不住我的代码

[译]深度解析Webpack打包过程（2万字预警）

MDH Weekly 119 – 《周刊重启和博客》

1月21日内容汇总

January 21, 2024 · 5 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

专补大模型短板的RAG有哪些新进展？这篇综述讲明白了

用检索增强生成让大模型更强大，这里有个手把手的Python实现

Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks

⭐️ Go & 云原生 & Rust 相关

慢聊Golang协程池Ants实现原理

Kubernetes Networking Model & CNI

for-range一个函数，还可以这么用

跟我一起编写 Buildpacks：Go 版本篇

探索Cloud Native Buildpacks的奇妙世界

哈啰云原生弹性伸缩控制器实现细节

使用 Rust 后，我写 Go 的方法都变了！

Go1.22 新特性：Slices 变更 Concat、Delete、Insert 等函数，对开发挺有帮助！

Go 简单设计和实现可扩展、高性能的泛型本地缓存

Kubernetes HPA 设计与实现

从零开始：使用Prometheus与Grafana搭建监控系统

十分钟教你在 k8s 中部署一个前后端应用

Go 夜读第 149 期：如何设计现代云原生网关： Easegress

Go Context 到底放第一个参数传，还是放结构体里

优雅判断 interface 是否为 nil

高效I/O并发处理：双缓冲和Exchanger

📒 后端相关

CPU中的高科技：流水线、超标量、SIMD

让你的代码运行更快：掌握零拷贝技术

电商库存系统的防超卖和高并发扣减方案 | 京东云技术团队

向上管理：让你主动汇报就这么难

RocketMQ 事务消息初体验

云音乐服务端可视化编排平台 TangoFlow 设计与实现

八分钟了解一致性算法 -- Raft算法

代码之外：工程师的成长进阶秘籍

复盘总结，不要错失最大财富

为了让小白也能看懂这个死锁case，我请来了小黑

阿里二面：要保证消息不丢失，又不重复，消息队列怎么选型

SpringCloud 远程调用为啥要采用HTTP，而不是RPC

业务型团队开发生存指南

DDD领域驱动工程落地实战

支付宝：多线程事务怎么回滚？说用 @Transactional 可以回去等通知了！

DDD 四层微服务架构，开箱即用！

2 万字 + 20张图｜细说 Redis 九种数据类型和应用场景

Redis 除了缓存，还支持哪些场景

Spring Boot + 规则引擎 URule，太强了！

性能优化2.0，新增缓存后，程序的秒开率不升反降

📒 前端相关

前端性能优化手册 - RoadMap

React 代码如何跑在小程序上

Taro编译mini-runner包的作用

穿越时空：2023年前端技术盘点与2024年技术展望

Monorepo 项目实现共享 Tailwind 配置

前端食堂技术周刊第 111 期：JS Rising Stars、2024 年如何写 CSS、两个 React、npm 年度回顾

1月14日内容汇总

January 14, 2024 · 7 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

中信建投 | AI前沿系列（一）：混合专家模型技术（MoE）

《开源大模型食用指南》发布，7个小时，一杯奶茶速通大模型！

Stable Diffusion XL Turbo 文生图和图生图实践

在 Nvidia Docker 容器编译构建显存优化加速组件 xFormers

Amazing OpenAI API：把非 OpenAI 模型都按 OpenAI API 调用

节省时间：AI 模型靠谱下载方案汇总

修复 OpenCV 依赖错误的小工具：OpenCV Fixer

⭐️ Go & 云原生 & Rust 相关

Linux 6.8 网络优化, 大量并发连接的TCP性能提高40%左右

深入探索 Rust 中的 Panic 机制

探究 Go 源码中 panic & recover 有哪些坑

从《100 Go Mistakes》我总结了什么

3.深入TiDB：执行优化讲解

亲测体验Go语言模糊测试

Go 发布了一个非安全补丁的 Go 1.21.6

Go1.22 新特性：新的 math/rand/v2 库，更快更标准！

每秒百万数据点 Go 应用监控系统演进

别再用GDB了，一文掌握Go最好用的调试器Delve

Kubernetes CronJob 设计与实现

[go 面试] 实现服务高可用的策略和实践

我是如何实现Go性能5倍提升的

深入理解Go标准库-ServeMux的使用与模式匹配

深入理解Go标准库-http server的启动

使用 Grafana 和 Loki 监控传说中的武当纵云梯

Grafana 教程 - 构建你的第一个仪表盘

成本更低、更可控，云原生可观测新计费模式正式上线

Kubernetes Job 设计与实现

依赖Kafka的Go单元测试例解

Go1.22 新特性：for 循环不再共享循环变量，且支持整数范围

Go运行时的并发原语

Go语言中常见100问题-#94 Not being aware of data alignment

Go 语言中 defer 使用时有哪些陷阱

Go语言之父的反思：我们做对了什么，做错了什么

学习C++20, 为Go的atomic类型插上一双翅膀

📒 后端相关

一张图总结架构设计的40个黄金法则

这些年背过的面试题 — 架构设计篇

这些年背过的面试题——Spring篇

mysql 的 binlog、redolog、undolog 是啥：

Binlog（二进制日志）：
- 用于复制：在主从复制中，从数据库会重放主数据库中存储的 binlog，以实现主从同步。
- 数据库恢复：binlog 可以用于数据库的按时间点还原。
Redo log（重做日志）：
- 确保事务的持久性：在事务提交前，redo log 会将事务的修改操作记录下来，以确保在系统崩溃或重启时，可以重新执行这些操作。
- 防止脏页写入：在系统崩溃时，redo log 可以防止脏页（未提交的数据页）被写入磁盘。
Undo log（撤销日志）：
- 用于事务的回滚：在事务执行过程中，undo log 记录了事务修改前的数据版本，以便在事务回滚时恢复数据。
- 多版本并发控制（MVCC）：undo log 支持数据库的多版本并发控制机制，允许事务在不加锁的情况下读取一致的数据。

这些日志文件在 MySQL 中扮演着不同的角色，确保了数据库的一致性、持久性和并发控制。

使用懒加载 + 零拷贝后，程序的秒开率提升至99.99%

万字+20张图探秘Nacos注册中心核心实现原理

7000字+30张图看懂分布式追踪系统原理

拒绝用复杂度自慰：下云高可用的秘诀

公司为什么要使用OKR，目的是什么

阿里面试：说说Rocketmq推模式、拉模式

分布式事务概述与项目实战

分布式锁最终解决方案是RedLock吗？为什么

刷了四百道算法题，我在项目里用过几道呢

烂大街的缓存穿透、缓存击穿和缓存雪崩，你真的懂了

抖音提前批二面：为啥不推荐使用外键

增加索引 + 异步 + 不落地后，从 12h 优化到 15 min

📒 前端相关

有了它 Antd 样式覆盖不要太爽

一文带你从0到1做性能优化——国际化业务中台性能优化实践（上）

Bun 如何设置 npm registry，有时会用到 bunx 命令，会自动下载 npm 包，因此需要配置 npm registry：

# 在根目录建一个 `.bunfig.toml` 配置文件
$ vi $HOME/.bunfig.toml

写入如下内容：

[install]
# set default registry as a string
registry = "https://registry.npmjs.org"

参考：https://bun.sh/docs/install/registries

两个 React

2024 年前端预测

业务中后台用户体验优化方法论总结（体验篇）

分享4 个你可能感兴趣的 TikTok 前端面试题

Chrome 三方 Cookie 禁用已正式开始！

使用 Taro 开发鸿蒙原生应用 —— 快速上手，鸿蒙应用开发指南

1月7日内容汇总

January 7, 2024 · 10 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

GPT-4 Technical Report

⭐️ Go & 云原生 & Rust 相关

小红书可观测 Metrics 架构演进，如何实现数十倍性能提升

Java与Go到底差别在哪，谁要被时代抛弃

既然问题是 GC 占用的 CPU 过高，首先我们分析一下 CPU 热点，进一步确认一下问题。

$ go tool pprof -seconds 30 https://<测试域名>/debug/pprof/profile

这个命令用于进行 30s 的 CPU 性能分析，在完成之后会进入 profile 的交互工具：

Alt text

这里直接输入 top 10 可以输出 flat 占比最高的 10 个函数，可以看到 runtime.mallocgc 的 cum 占比已经达到了 15%，占用了快到 3s CPU 时间。

Flat vs Cum：

Flat 占比是指这个函数自身的代码使用了多少 CPU，不计算子函数的耗时。
而 Cum 则代表这个函数实际执行消耗了多少 CPU，也就是包括了所有的子函数（和子函数的子函数...）的耗时。

交互工具这里输入 web 就会自动生成调用图（callgraph）并在浏览器里打开，限于文档空间这里只展示重要的部分：

Alt text

先分析一下主流程，这里业务逻辑一共占用了 54% 左右的 CPU（最上面的 endpoint.handler 方法），再往下看，其中 33% 是 RPC 调用（左下角的 client.Invoke），12% 是结果输出（右边的 endpoint.httpOutput，包括写出 HTTP Response，日志上报，监控）。剩下 9% 左右就是实际的各种业务逻辑了，因为非常分散且没有集中的点，所以图上没有显示出来。

纵观这个图可以看出，除了 HTTP/RPC 网络调用占用了大部分 CPU 外，并没有其他很明显的 CPU 热点，这就让最后一个热点凸显了出来：

Alt text

GC 占用的 CPU 在这次 Profiling 过程中占了 15%，比业务逻辑还高！到这里基本确认，GC 一定存在某些问题。

我们可以用另一个 pprof 工具 allocs 来确认猜测是否成立，这个工具会记录堆上的对象创建和内存分配，只需要把上面的 HTTP Path 最后的 profile 换成 allocs 即可：

$ go tool pprof -seconds 30 https://<测试域名>/debug/pprof/allocs

和 CPU Profile 不一样，Allocs 的 Profile 会记录四个不同的信息，可以输入 o 查看 sample_index 的可选值：

Alt text

alloc_object：新建对象数量记录；
alloc_space：分配空间大小记录；
inuse_object：常驻内存对象数量记录；
inuse_space：常驻内存空间大小记录。

一般来说，inuse 相关的记录可以用于排查内存泄漏，OOM 等问题。这里我们是 GC 的问题，主要和内存申请和释放有关，所以先看下 alloc_space：

输入命令，sample_index=alloc_space，然后再 top 10 看下：

Alt text

可以发现，这 30s 一共申请了 1300M 的内存，其中绝大多数都是框架和框架组件，比如 RPC 的网络读取（consumeBytes, ReadFrame），pb 的解析和序列化（marshal），名字服务的选址（Select），日志输出（log），监控上报（ReportAttr）。也没有明显的可疑对象。

我们进行一些简单计算：进行 profiling 的线上节点是 2C2G 配置，看监控单节点大约是 800 QPS 的流量，所以 30s 就是 2w4 的请求，申请了 1300M 的空间，平均一个请求就是大约 50KB 左右。

这个量也比较合理，毕竟一次请求我们需要储存 HTTP 包内容，解析成结构体，还需要调用两次 RPC 接口，最后做日志写出和监控上报，最后再给出返回值，50KB 的资源使用并不算大。而且绝大多数都是框架使用，即使用对象池把业务上的一些小对象复用，对这个内存申请也影响不大。

虽然这个步骤没有排查到想查的问题，但是却发现了一些其他的代码中的小问题，这里也顺便记录下。

首先，上面的 top 10 看不出任何问题，但是为了保险起见，看了一下 top 20：

Alt text