Blog | Frontend Weekly

12月31日内容汇总

December 31, 2023 · 6 min read

加菲猫

前端开发 @NETEASE

⭐️ Go & 云原生 & Rust 相关

2023年Go语言盘点：稳中求新，稳中求变

Rust开发⼲货集(1)--迭代器与消费器

轻松实现Go应用的优雅关闭：提升服务质量与稳定性

今天把 Rust 更新到最新的 1.75 版本，跑一下 rustup update 这个命令就行：

$ rustup update
info: syncing channel updates for 'stable-aarch64-apple-darwin'
info: latest update on 2023-12-28, rust version 1.75.0 (82e1608df 2023-12-21)
info: downloading component 'rust-src'
info: downloading component 'cargo'
info: downloading component 'clippy'
info: downloading component 'rust-docs'
info: downloading component 'rust-std'
info: downloading component 'rustc'
info: downloading component 'rustfmt'
info: removing previous version of component 'rust-src'
info: removing previous version of component 'cargo'
info: removing previous version of component 'clippy'
info: removing previous version of component 'rust-docs'
info: removing previous version of component 'rust-std'
info: removing previous version of component 'rustc'
info: removing previous version of component 'rustfmt'
info: installing component 'rust-src'
info: installing component 'cargo'
info: installing component 'clippy'
info: installing component 'rust-docs'
info: installing component 'rust-std'
info: installing component 'rustc'
info: installing component 'rustfmt'
info: checking for self-update

  stable-aarch64-apple-darwin updated - rustc 1.75.0 (82e1608df 2023-12-21) (from rustc 1.69.0 (84c898d65 2023-04-16))

info: cleaning up downloads & tmp directories

$ cargo --version
cargo 1.75.0 (1d8b05cdd 2023-11-20)

Kubernetes Daemonset 设计与实现

Go 1.22 http.ServeMux中的模式匹配

熔断、隔离、重试、降级、超时、限流，高可用架构流量治理核心策略全掌握

新提案：Go panic 能不能加个 PanicError

Go语言“正统”在中国？这6点教你写好Go代码！

Go 1.22新特性前瞻

Kubernetes ReplicaSet 设计与实现

新包降临 math/rand/v2, 在Go 1.22中

北海 - Rust与面向对象（四）

北海 - Rust与面向对象（三）

【投稿】北海 - Rust与面向对象（二）

微服务配置中心，这个方案 Go 里用起来不输 SpringCloud

从Go channel中批量读取数据

Go语言的自给自足：编译自身的神奇之旅

圣诞福利｜吃透Go并发编程，看这本书就够啦

📒 后端相关

Spring Boot 单体应用升级 Spring Cloud 微服务

账号多租户架构升级与落地实践

每天100w次登陆请求, 8G 内存该如何设置JVM参数

从混乱到优雅：基于DDD的六边形架构的代码翻新指南 | 京东物流技术团队

从工程师到技术leader的思维升级

设计一个海量的任务调度系统

公司用了6年的 SpringBoot 项目部署方案，稳得一批！

慢聊Golang协程池Ants实现原理

Redis主从复制原理和复制方式那点事！

Redis为什么使用哈希槽而不用一致性哈希

不愧是字节，面个实习也满头大汗！

可观测实践丨如何利用 AI 算法解决告警配置三大难题

管理的焦虑：技术丢了怎么办

监控告警系列-使用Promethues监控系统指标并进行告警通知

📒 前端相关

如何写好一份晋升PPT（附PPT模板）

前端DevOps平台的探索及设计理念

云音乐D2C设计稿转代码建设实践

Esbuild深度调研：吹了三年，能上生产了吗

【第3156期】突破 ToB 前端开发场景中的 antd Table 性能瓶颈

⚡️卡顿减少 95% — 记一次React性能优化实践（性能篇）

从 0 到 1 构建基于 Node.js 的 RPC 服务

字节三年，谈谈一线团队如何搞工程化一（全景篇）

2023 年前端大事记

前端基建处理之组件库优化方案

网易云音乐 RN 低代码体系建设思考与实践

可视化全链路日志追踪

NodeJs进阶开发、性能优化指南

12月24日内容汇总

December 24, 2023 · 14 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

多模态融合：基于机器学习的文本图像关联分析

⭐️ Go & 云原生 & Rust 相关

用Rust刷LeetCode之58 最后一个单词的长度

Golang优雅实现按比例切分流量

AIOps在美团的探索与实践——事件管理篇

通过实例理解OpenID身份认证

Rust中peekable的使用

Nacos 在云原生架构下的演进

智能化运维：KoPylot为k8S带来AI监控诊断

Kubernetes EndPoint 设计与实现

Kubefirst：新手也能轻松快速打造生产就绪K8S平台

轻松提升Golang日志性能：无需修改代码的异步写入解决方案

10个令人惊叹的Go语言技巧，让你的代码更加优雅

Go 1.22 RC1 发布新特性：for range, math/rand/v2

Kubernetes Informer 设计与实现 (下篇)

鲜有人了解的同步原语Phaser，和Barrier有啥区别

当 OpenTelemetry 遇上阿里云 Prometheus

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

Kubernetes Informer 设计与实现 (上篇)

为大模型工程提效，基于阿里云 ACK 的云原生 AI 工程化实践

Go 语言为什么很少使用数组

每个Go程序员必犯之错

Go语言爱好者周刊：第 205 期

📒 后端相关

腾讯工作13年之所思所想，那些优秀程序员的共性特征

半年下云省千万：DHH下云FAQ答疑

用ElasticSearch时，必须先搞明白这几个基础

一文详解 Java 限流接口实现

什么时候都用微服务，只会害了你

对抗复杂度的圣杯战争：软件架构究竟该如何设计

如何应对 RocketMQ 消息堆积

年底了，应该如何做汇报

从腾讯视频架构重构，看DDD的概念与方法

DDD架构下的防御式编程：5大关卡共同保障业务数据的有效性

银行软开，不难！

每天精心Coding 8小时，3个月后你将得到一座……“屎山”

Paxos vs. Raft：共识算法的相同点和不同点

ZooKeeper 设计原理

主从复制(Primary/Backup Replication)

分布式数据库是怎么实现的

分布式存储系统在大数据处理中扮演着怎样的角色

30张图，搞懂分布式追踪系统

理解本质：从经济学角度看管理

8000字+22张图探秘SpringCloud配置中心的核心原理

MySQL高级进阶：索引优化

技术人必修课：利用金字塔原理高效思考与表达

MySQL 单表可以放多少数据，最多 2000 万

Redis数据已经删除了，为什么内存占用还是很高

4 个维度搞懂 Nacos 注册中心

Redis 性能优化 13 条军规

📒 前端相关

网易云音乐大前端监控体系（Corona）建设实践-开篇

How React 18 Improves Application Performance

重新思考 React 最佳实践

React Libraries for 2023

v0：AI 驱动的组件创造器正式开放

7个Js async/await高级用法

前端性能优化就是这么简单，你会了吗

《A 1-hour introduction to Next.js and React》。本教程是一份关于如何使用 Next.js 14、React、Prisma、Tailwind 以及 MySQL 搭建 Twitch 克隆应用的全套课程，是 2023 年最新版本的第一部分。在课程中，学员将了解到如何使用 JavaScript 和 SQL 语言以及其他现代编程技术和工具，步步为营地创建出一个功能完整，外观现代的线上视频游戏直播平台。该实战课程为初级到中级开发者设计，旨在提升学员记录写代码、解决问题和探索新技术的能力，最后成功搭建出 Twitch 样式的应用。

《React Suspense 和 use Hook 使用指南》。 React 的 Suspense 在 React 18 的版本中得到了重要的升级，包括对服务端渲染流和局部 hydration 的支持，并且最近在新版的 React 文档中记录了一个名为 use 的新钩子，这能大大简化 Suspense 在数据获取环节的使用。然而，Suspense 在数据获取环节上的功能并未被 React 团队认为是足够成熟且适合在生产中使用的，因此并未推荐在生产环境中使用。此外，尽管进行了新增并进行了升级，但是 use 钩子并没有被作为 React 稳定版本的一部分对外发布，要想尝试使用它，您需要使用 canary 或 experimental 的 React 渠道。Suspense 目前的使用场景包括错误隔离与数据获取等。而有趣的是，use 钩子可以在条件和循环等特殊场景下使用，扩大了 Suspense 的实际使用场景。

《开始使用 Axum - Rust 最受欢迎的 Web 框架》。本文详细介绍了 Rust 后端框架 Axum 的使用方法，包括路由设置、连接数据库、实现 App 状态、使用 Extractors 等。Axum 对 REST 风格的 API 和 Express 风格的 API 都有很好的支持，可以通过 handler 函数轻松设置路由。在数据库设置中，可以通过 Shuttle 来进行简化操作。对于 App 状态的设置，通常是使用 struct，并需要实现 Clone。对于 HTML 识别，我们可以使用 axum::Json 来将 HTTP 请求转为 json 格式。并且，axum 与 tower 有很好的兼容性，可以直接使用 tower 中的 middleware。还介绍了如何通过 Axum 来服务静态文件，如何部署 Axum 等问题。总的来说，Axum 是一个有强大团队支持且与 Rust Web 生态系统高度兼容的框架，现在是开始编写 Rust Rest API 的好时机。

《常见的 Rust 生命周期误解》。在 Rust 中，泛型 T 包括所有可能的类型，包括 &T 和 &mut T，且不能直接指定某种数据类型。另外，生命周期'static 指的不是变量数据所存在的全部时间，它包括所有 &'static T 以及所有拥有类型，比如 String，Vec 等。同时要清楚，几乎所有的 Rust 代码都是泛型代码。此外，生命周期不能在运行时变化，生命周期都是在编译时静态验证的，生命周期不能在运行时增长或缩小或以任何方式改变。Rust 的生命周期推断规则并不总是正确的，Rust 并不比你更了解你程序的语义。由于 Rust 可以隐式地重新借用 mut ref，所以你可能在意识到这个问题之前很容易碰到这个问题。这些都是对于 Rust 中的生命周期的误解。

《用 Rust 编写操作系统》。这份博客系列从零开始用 Rust 编程语言写一个操作系统，由浅入深地演示和讲解了用 Rust 编写操作系统的全部过程。包括最基础的内核构建、异常处理、硬件中断、内存管理以及异步等关键部分，以及操作系统设计的各种常见问题和解决办法，不仅提供了完整的教程，同时也在 Github 上公开了所有相关的源代码。

《从零开始用 Rust 编写文件系统》。本文详细阐述了文件系统 (File System) 的工作原理和各部分组成，包括数据在硬盘或 SSD 上的结构、超级块和位图、i 节点、索引节点、数据块及其用途，以及多层次索引等概念。文章也解释了如何通过文件系统构建和管理磁盘的不同部分，以及文件和目录在文件系统中是如何表示的。最后，作者通过一个名为 GotenksFS 的项目，展示了如何用 Rust 语言编写自己的文件系统，并在其中实现了一些 ext4 的技术。

《Non-lexical lifetimes: introduction》。这篇文章探讨的是 Rust 的借用检查器和对生命周期的理论，在 Rust 中，借用检查器确保在值被借用期间，不能对其进行移动或修改。这是通过为每次创建的借用分配生命周期去实现的。文章分别详述了生命周期和范围的概念，并通过实例阐释了它们之间的关系。接着给出了几个在实际编程中遇到的问题案例，再就这几个案例，作者展示了如何通过调整代码结构的方式绕过 Rust 现有的编译检查。作者表示这样的做法并不理想，并提出了通过改进编译器来解决这个问题的计划。

《2024 年的 React 状态管理》。本文作者从三个角度对 React 状态管理库进行了分类：基于 reducer 的，如 Redux 和 Zustand；基于 atom 的，如 Recoil 和 Jotai；基于 mutable 的，如 MobX 和 Valtio。每种方法都有其优势和劣势。Reducer 的优势在于其强大的状态机和时间机制，对于开发者工具的支持最好，但是需要编写大量的模板代码，学习曲线陡峭。Atom 的优势在于对 React 特性的充分利用，具有简单和可扩展性，但对开发者工具的支持较弱，不能在组件外使用状态。Mutable 往往提供最简单的 API，并具有高度的灵活性和反应性，但 “自动反应” 也可能带来问题，可能导致数据竞争和异步更新问题。作者个人更偏向于使用 Jotai，因为它没有键的要求，更加高效。

《介绍 Waku》。 Waku 是一款 React 的微型框架，它支持探究 React 服务器组件（RSC）的核心功能，并独立于传统的静态站点生成（SSG）和服务器端渲染（SSR）策略来发现 RSC 最佳实践。Waku 基于 Vite，并尽可能依赖其 API 和生态系统。其服务器入口 API 使用名为 entries.tsx 的文件，该文件位于 src 文件夹的根目录，并返回一个包含 JSX 元素的对象。客户端会向服务器发送初始请求，得到服务器的响应并通过 Slot 组件进行渲染。为了使 Waku 支持在 Vercel 上部署，利用了其构建输出 API，通过自定义 “content-type” 头部并以函数方式定义 Waku 服务器，实现了客户端发送请求到服务器并返回 RSC 负载的功能。

MDH 前端周刊第 118 期：Electron 28、Safa 17.2、SvelteKit 2、状态管理、Waku

12月17日内容汇总

December 17, 2023 · 6 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

【AIGC篇】NLP任务入门：分词、词性标注与命名实体识别

CPU 混合推理，非常见大模型量化方案：“二三五六” 位量化

⭐️ Go & 云原生 & Rust 相关

谷歌的开源供应链安全

盘点2023年在地球上举行的Gopher盛会

深入理解 Go Modules：高效管理你的 Golang 项目依赖

通过实例理解OAuth2授权

从方法论到最佳实践，深度解析企业云原生 DevSecOps 体系构建

Golang的websocket使用和实现代码分析

容器故障？别慌：debug 不行，还有superdebug

放弃自己造轮子，才能给微服务搭一个牛X的注册中心！

「GoCN酷Go推荐」我用go写了魔兽世界登录器

卷起来，老程序员也得了解errors包的新变化

什么是大端序和小端序，为什么要有字节序

Go Testing By Example--Russ Cox在GopherCon Australia 2023的演讲

回归单体成为潮流？腾讯文档如何实现灵活架构切换

成功上岸Go面经：百度滴滴小米360小红书展盟优咔科技

奶茶上云，原生的更好喝

[go 面试] 雪花算法与分布式ID生成

简单之道

如果你还对Go并发编程感到迷茫，也许是好事情

用Rust刷LeetCode之27 移除元素

Go函数指针是如何让你的程序变慢的

Go单线程运行也会有并发问题

Kubernetes 是怎么靠边车模式打败Docker的

Go语言中常见100问题-#92 Writing concurrent code that leads to false

Go Changes--Russ Cox在GopherCon 2023的演讲

Go未来演进：基于共同目标和数据驱动的决策

Go 语言字符串使用方式与技巧

📒 后端相关

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

给祖传系统做了点 GC调优，暂停时间降低了 90% | 京东云技术团队

MYSQL 事务的底层原理 | 京东物流技术团队

直播房间服务基于CQRS的架构演进实践

高并发系统设计的15个建议

《大明王朝》局部最优，严嵩父子的牢笼

Nacos 2.3.0 正式版发布，Nacos Controller 项目开源

关于消息队列的知识总结

从实现原理来讲，Nacos 为什么这么强

什么Leader值得追随

西瓜视频RenderThread引起的闪退问题攻坚历程

MyBatis Plus 解决大数据量查询慢问题

好好的“代码优化”是怎么一步步变成“过度设计”的

聊聊工作中常用的方法论

GitHub.com跑了1200多台MySQL主机，如何无缝升级到8.0

《瞬变》卡点的原因往往简单而愚蠢

从一个crash问题展开，探索gcc编译优化细节

放弃 ELK！SpringBoot接入轻量级分布式日志框架GrayLog

腾讯有点顶，连环追问我基础细节！

无语！我是来面Java的，你怎么问我大数据的Kafka

系统性思考：你考虑过传话筒的感受吗

📒 前端相关

StyleX：Meta 新出的原子化 CSS in JS 方案

网易云音乐 RN 新架构升级实践

【第3140期】在 Console 中更直观地展示 Reactive Objects

DevTools 不让粘贴执行代码了

深入浅出 Vite5 中依赖预构建

Chrome 120 有哪些值得关注的更新

微前端项目难点解决

MDH 前端周刊第 117 期：stylex、Vitest 1、Astro 4、React Forget、TanStack 路由

12月10日内容汇总

December 10, 2023 · 4 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

⭐️ Golang 相关

《大明王朝》沈一石的“生机”

用Rust刷LeetCode之26 删除有序数组中的重复项

Spring Boot 单体应用升级 Spring Cloud 微服务

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

[go 面试] 一致性哈希：数据分片与负载均衡的黄金法则

依赖注入与控制反转：优化Go语言REST API客户端

书籍推荐: 深入理解Go并发编程

《大明王朝》阴阳对垒，千里布局

Redis 除了用作缓存还能干吗

万字串讲 git 版本控制底层原理及实战分享

[go 面试] 深入理解并发控制：掌握锁的精髓

OpenTelemetry Metrics 基础

模型服务网格：云原生下的模型服务管理

刚刚 Go 发布了 Go 1.21.5 安全补丁更新

Go errors 默认加堆栈信息，有用不

有效表达软件架构的最小图集

高并发场景下JVM调优实践之路

使用Rust Rayon库提升程序运行速度

[go 面试] 前端请求到后端API的中间件流程解析

这个限流库两个大bug存在了半年之久，没人发现

手把手教你写设计方案

精要主义：你的生活是否一团乱麻

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

如何一键生成前端代码

微服务架构是如何演进的

空降：新官的三把火会如何烧

一文搞懂Go gRPC服务Handler单元测试

把数据库放入 Docker是一个好主意吗

如何保留 Go 程序崩溃现场

2023年 Go 并发库的变化

Go Kit中读取原始HTTP请求体的方法

📒 前端相关

Facebook、Instagram 都在用的 CSS 解决方案开源了！

你了解 JSX，那你了解 StyleX 么

如何实现原生的 “跨组件” 通信

前端开发者们，这些知识tips你必须知道

封装一个用户体验非常棒的下拉选择框

译：Prettier 的命令行界面：性能深度剖析

京东快递小程序分包优化实践

MDH 前端周刊第 116 期：Astro 4 Beta、XState 5、Fresh1.6、Prettier 性能、Biome

12月3日内容汇总

December 3, 2023 · 12 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

TensorFlow.js，让你的应用更加高级，更具逼格

为什么你应该把 Google / StackOverflow / 文档搜索都扔掉，改用 devv.ai

本地运行“李开复”的零一万物 34B 大模型

⭐️ Golang 相关

亲测体验Go语言PGO

降本增笑的P0事故背后，是开猿节流引发的代码异常吗

通过实例理解API网关的主要功能特性

编码相关的软技能，我看了这些书

1.5万字 + 25张图盘点RocketMQ 11种消息类型，你知道几种

为什么要建立研发数据指标

分享几个美团的秋招面试题

[go 面试] 为并发加锁：保障数据一致性（分布式锁）

使用Go Validator在Go应用中有效验证数据

Rust的Vec优化

如何在Go中进行内存优化和垃圾收集器管理(GC)

[go 面试] 并发与数据一致性：事务的保障

利用 Golang 中的 Recover 处理错误

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

刷新了对GODEBUG的认知

[go 面试] 深入理解进程、线程和协程的概念及区别

如何成为优秀工程师之软技能篇

新晋总监生存指南

从单体到微服务，腾讯文档微服务网关工程化的演进实践

颠覆认知——Redis会遇到的15个「坑」，你踩过几个

正式开源！高性能轻量级跨平台QUIC协议库TQUIC来啦！

如何基于PrometheusAlert扩展告警值班功能

一线Leader怎么做？经理的速成宝典

Rust内存布局

使用 sync.Cond 来协调并发 goroutine 的访问共享资源

降本增效 - 应用优化 (三) 日志成本降低 100 倍

干掉复杂代码 — Spring Boot 与 CQRS 才是黄金组合！

go 1.22优化了string转byte切片的实现

分布式锁的各种实现，看完这篇你就懂了！

结合图文一起搞懂MySQL事务、MVCC、ReadView！

如何使用Redis数据类型进行亿级别统计数据

「有问必答」秒杀系统 Go并发编程实践！

当「华为还是备选，迪爹还是迪子」时宇宙厂一面原题

Prometheus 的查询语言 PromQL 详解

数据库死锁排查思路分享（纠正篇）

学习gorm系列八：探秘gorm.Save函数

一文搞懂Go gRPC服务Handler单元测试

第三个五年，独立思考、承受风雨

第二个五年，找到擅长的事

4 种消息队列，如何选型

Go语言中常见100问题-#91 Not understanding CPU caches

Go HTTP GET 请求可以发送 body 吗

📒 前端相关

【第3130期】Taro高性能小程序的最佳实践

Solid 作者从 React 中学到最重要的是什么

8个问题带你进阶 React

Next.js 超实用进阶技巧【持续更新】

嘿，vue中keep-alive有个「大坑」你可能还不知道

两行CSS让长列表性能渲染提升7倍！

《Why Rust in Production》。近年来，Rust 的热度已经飙升，微软、谷歌、亚马逊等科技巨头正积极把 Rust 的优势应用于关键系统。然而，关于 Rust 的讨论仍然大多来自那些没有在大规模生产中使用 Rust，或者仅在非关键系统中使用过 Rust 的人。这导致对 Rust 在生产环境中应用的理解存在偏差，尤其对于中小企业来说更是如此。作为 Rust 顾问，从我与众多大小公司接触中发现，公司更看重效率、稳定性和长期可维护性，而不只是性能。然而，Rust 也有其缺点，如尚处在成熟中的生态系统，硬寻找拥有专业 Rust 经验的开发人员，编译时间较长等。尽管如此，这些挑战并不是难以克服的，只是需要对 Rust 承诺，并愿意投资于培训和工具。考虑到 Rust 所能带来的长期成功，专门的指导和支持是至关重要的。

《Building a Web App in Rust》。这篇文章分享了作者使用 Rust 编程语言构建网络应用程序 JustFax Online 的经验。作者热爱 Rust 的理由包括其低内存使用、出色的安全性、异步开发、真正的类型安全性等优点。然而，作者也谈到了 Rust 的一些困难之处，例如借用检查器的复杂性、对于初学者的启动难度、相对较长的编译时间以及与 NodeJS 或 Python 相比较小的生态系统。尽管如此，作者仍表示非常享受使用 Rust 构建项目，并认为他能有效运行许多项目而无需花费大量资金。

《Rust without crates.io》。文章提到了程序员对 crated.io 让大家自由上传和下载代码的依赖，并指出了这种行为的潜在风险：包括单点故障、黑客攻击、国家安全等问题。作者认为，我们应该从开发速度的祭坛上退后一步，理想情况下需要有一个独立于作者进行策展的角色来审视依赖。然而在现实中，这种人力评审的路径很难实现。对此，Linux 发行版如 Debian 的解决方案是将大量库的完整 Rust 源码打包进 librust-cratename-dev，虽然没有进行审计，但已经是一个很大的改进。此外，作者也介绍了如何通过几个简单的命令来实现这一过程。这给予作者对 Rust 更大的信心，他原本担心由 crates.io 的自由选择依赖版本的方式，抵制任何旧方法的语言，例如 C++。幸运的是，Debian 证明了他是错误的。

《我如何将 Rust 的编译时间提高 75%》。这篇博客主要关于如何改善 Rust 编译时间，通过使用不同的优化方法和替代的编译器链接器。作者测试了多种不同的方法，包括使用 Mold 链接器，Cranelift 编码器，和更高的优化等级，他发现使用 Mold 链接器和 Cranelift 代码生成器可以最大程度地提高编译速度，能使编译时间分别减少 75% 和 25%。此外，博主对 Rust 的热重载提出了替代方法，即 cargo-leptos 的 --hot-reload 标志，它可以在更改检测时通过 web socket 连接向浏览器发送 html 和 css 补丁，并在后台编译。

《我怎么知道自己做得对不对》。作者分享了自我学习新技术时的验证假设与自我提升的有效方法。首先，查找可靠的文档和示例，如 MDN 和 web.dev，他们通常能以实际用例解释理论知识；其次，利用编程语言的 linter 插件指导编程，这有助于改进编码习惯；接着，使用诸如 Lighthouse 和 Accessibility Insights 等测量性能的工具以评估是否妥协了性能或可访问性；此外，利用 AI 工具如 Copilot 简化代码。但对于新手来说，要对 AI 生成的指导持怀疑态度；也可以通过向行业内人士询问学习新信息的方式，来学习。最后，查找有关主题的教程以对照使用情况。学到新知识后，应考虑写下来分享，提高自我理解和提高他人。

《React 18 中的并发性》。 React 18 新增的并发功能是一种执行模型，允许程序的不同部分无序执行而不影响最终结果。在浏览器中的 JavaScript 只能访问一个线程，因此采用了一种称为协作多任务处理的并发模型。React 18 分为紧急状态更新和转换状态更新两种更新类型。默认情况下，所有状态更新都是紧急的，不可中断的。如果希望进入并发渲染，需要使用 startTransition 或 useDeferredValue 将更新标记为低优先级。若在渲染低优先级更新时出现高优先级更新，React 会中断当前渲染并转向渲染高优先级更新。另一个重要更新是 Suspense 组件的行为，它在低优先级更新过程中的挂起行为稍有不同。还引入了新的钩子函数 useTransition 和 useDeferredValue，使用这些工具可以处理复杂的状态更新场景。

TypeScript 发布 5.3。微软发布了 TypeScript 5.3 版本，主要引入了众多新特性，包括导入属性和稳定地支持在所有模块模式中使用 resolution-mode。此外，这个版本提供了针对布尔值的缩窄对比，以及通过 Symbol.hasInstance 进行 instanceof 缩窄。对于 “超级” 的属性访问，TypeScript 5.3 还进行了检查。此外，新版本中的其他改进包括跳过 JSDoc 解析以进行优化，比较非标准化交集以进行优化，以及在 tsserverlibrary.js 和 typescript.js 间进行整合。这个新版本还修复了一些断裂的变化，并进行了正确性改进。

MDH 前端周刊第 115 期：TypeScript 5.3、RSC、30 条建议、0.6 + 0.3、CI 时间

11月26日内容汇总

November 26, 2023 · 12 min read

加菲猫

前端开发 @NETEASE

⭐️ Golang 相关

一文搞懂Go gRPC服务Handler单元测试

TCP 重传、滑动窗口、流量控制、拥塞控好难？看完图解就不愁了（重制）

揭秘 Go 中的模板：一份全面而广泛的指南

Kubernetes Pod 设计与实现 - 创建流程

2023年最新Docker网络讲解保姆级教程

Go语言项目命名规范（2023年最新版）

云音乐RPC稳定性建设与实践

完了，又被腾讯面试官拷打了。。。

1.5万字+30张图盘点索引常见的11个知识点

Go 命名规范：全面指南

10个令人惊叹的Go语言技巧，让你的代码更加优雅

Go 内存分配：结构体中的优化技巧

注解方式优雅的实现 Redisson 分布式锁

Prometheus Go client library 详解

刷到一个比较骚的 Go 错误处理新提案。。。

Go 每日一库之 goose — 数据库版本管理工具

听GPT 讲Rust源代码--library/core/src(8)

我们公司都用哪些软件？强烈推荐这些！

微服务基本功：增加便利的监控服务指标

📒 前端相关

理解了Event Loop就理解了前端

微前端时代：打造高效、灵活的前端开发体系

函数组件和函数式编程有关系么

「React 进阶」React 优雅的捕获并处理渲染异常

《别人不会告诉你的 10 个程序员工作的真相》。如何做合理的排期。例如，当项目经理要求你在周五之前实现 X 功能时，你不会说 "哦，我可以在周二之前完成"。相反，你会说"当然，没问题"。为什么？因为如果你承诺在周二之前完成，但遇到了一些问题，你就无法兑现承诺。相反，如果你接受周五为最后期限，并在周三之前完成，你就可以提前两天交付。关于如何进行估算，有很多公式，每个人都有自己的规则。我也有自己的规则。如果我需要交付某个功能，而我认为需要 2 天时间，为了安全起见，我会 多加大约 40% 的时间。因此，在这种情况下，预计时间是 3 天。之后，如果我在 2 天内完成了，我就可以提前交付。

《用 Rust 构建企业级 REST API》。本文详细讲解了使用 Rust、Actix 网络框架和关系数据库开发企业级 REST API 的过程。文章从架构原则入手，分析了 API 的分层结构，着重解释了三个核心层级：基础设施层、服务层和存储 / 数据层。它详细介绍了使用各种流行的 Rust 插件和模式如何创建可测试和可维护的企业应用程序。讲解了如何进行单元测试每个层的可靠性，并提供了详细的代码示例。同时，文章指出设计中存在的问题，并讨论了可能的解决方案。最后强调了测试导向的开发方式和运用 OpenAPI 规范进行 API 文档化的重要性。

《在 Rust 中使用异步流》。异步编程在处理随时间产生的数据（如网络响应或文件流）等程序性能提升方面非常有用。在 Rust 中，操作通常是同步的，即它们会阻塞线程直到完成。而异步操作允许在等待操作完成时运行其他任务，特别适用于 IO 绑定任务（如网络或文件操作）。Rust 的流可以被视为迭代器的异步版本，可以在整个序列准备就绪前，按照项目可用的顺序进行处理。Rust 的异步流主要通过 futures 和 tokio crates 实现。当处理大量随时间产生的数据，或无限序列（如股市报价）时，异步流是理想之选。在应用程序大部分时间都在等待 IO 操作的场景下，异步流可以显著提高吞吐量。对于需要实时处理数据的应用程序而言，如聊天应用，实时分析，或直播，异步流也十分有效。

《Rust 中的函数式编程模式》。 Rust 编程语言以内存安全和并发编程而闻名，但这并不是全部。实际上，Rust 在函数编程模式方面也有很强大的功能。尽管 Rust 不是纯函数式语言，但它借鉴了很多函数式编程的范例，使你能编写出清晰易维护的代码。函数式编程将计算视为数学函数的求值过程，并避免改变状态和可变数据。面向对象编程（OOP）围绕封装了状态（数据）和行为（方法）的对象来展开，依赖类的概念作为对象的蓝图，并常常使用继承来在类之间共享和扩展行为。而函数式编程（FP）侧重于没有状态的函数，它们操作不可变数据，函数充当一等公民，被用于抽象、封装和组合，迭代过程通常通过递归来表达。

《将 Javascript 应用程序部署到 Kubernetes 的最快方法》。这篇文章教你如何将你的第一个 JavaScript 应用部署到 Kubernetes（一个容器编排平台）上。我们将使用 Minikube 在本地部署一个返回样本 JSON 对象的简单 Express 服务器。首先，我们通过 npm 初始化项目，并在 package.json 中安装 Express.js 框架。然后我们创建一个服务器，并使用 npm 运行它，确保它能够正确响应 GET 请求。接着，我们编写 Dockerfile 并用 Docker 构建和运行容器。最后，我们开启 Minikube，并使用 kubectl 执行部署 yaml 文件，成功将 Express 服务器部署到本地 Kubernetes 中。

《async Rust 的四年计划》。本文作者讨论了四年前 Rust 发布的 async/await 特性，并指出 Rust 项目在此功能上几乎没有扩展。作者认为这是 async Rust 获得负面评价的主要原因。文章中，作者列出了他认为 async Rust 需要的一些功能，包括短期、中期和长期的功能。短期功能主要包括 AsyncIterator 和 async generators；中期功能包括 Objective-safe coroutine 方法和 Async destructors；长期功能包括改变 Rust 的一些基本规则。他建议 Rust 项目应有更清晰的开发方向和与社区的交流，并感谢那些在设计问题上与他交流的项目成员。

《React Router v6：新手指南》。 React Router 是 React 的标准路由库，能够管理具有多个视图的 React 应用的 URL。本教程介绍了 React Router v6 及其用法，包括基础导航路由、嵌套路由、带路径参数的嵌套路由和保护路由。在 React Router v6 中，使用 <Routes> 和 <Route> 组件进行路由，可以在 <Routes> 组件中嵌套 <Route> 组件以方便实现嵌套路由。还可以使用 useParams 钩子访问 URL 参数，useNavigate 钩子进行程序化导航。此外提供了用于实现路由保护的自定义路由。React Router v6.4 版本引入了由 Remix 启发的新特性，包括数据加载器和 create BrowserRouter，以改进数据获取和提交。

《掌握在 React 中使用 Framer Motion 进行 SVG 动画》。本指南探讨了如何在 React 应用程序中使用 Framer Motion 动画库来创建 SVG 动画。首先，我们需要在 React 项目中安装 Framer Motion 并为动画准备 SVG。然后了解 Framer Motion 的动画原理，包括 motion 组件和 animate 属性的使用，在此基础上创建简单和复杂的 SVG 路径动画。进一步讲解了如何为常见的 SVG 形状添加动画，如何使用键盘事件等用户交互事件进行交互性动画设计，以及如何优化动画性能。无论是创建简单的悬停效果还是复杂的入场动画，Framer Motion 都提供了丰富的创意工具，使 SVG 动画的缩放和性能优势得以充分发挥。

MDH 前端周刊第 114 期：Vite 5、Prettier 3.1、恶意软件、FramerMotion SVG 动画、桶文件

11月19日内容汇总

November 19, 2023 · 11 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

Transformer模型--模型架构

使用 Redis 构建轻量的向量数据库应用：图片搜索引擎（一）

⭐️ Golang 相关

【升职加薪秘籍】我在服务监控方面的实践(4)-日志监控

Go语言微服务框架重磅升级：dubbo-go v3.2.0 -alpha 版本预览

一文告诉你让SSH 变好用的正确姿势！

腾讯重复造轮子？我们真的需要这么多RPC框架吗

学习gorm系列七：如何高效建立数据库连接

Vite 5.0 正式发布

Git常用命令思维导图

实战：Nacos配置中心的Pull原理，附源码

Kubernetes - CRI 概述

解密defer语句：避免踩坑，掌握延迟执行的正确姿势

提升应用性能：Go中的同步与异步处理

Prometheus 14 点实践经验分享

老后端被借调去写Java了，含泪总结的Java多线程编程基础

史上最全の图论圣经: 涵盖所有「存图方式」与「最短路算法」

HBase详细介绍及原理解析！

微服务框架之争：Quarkus 即将替代Spring Boot

关系代数、SQL语句和Go语言示例

K8S 和容器中的退出状态码含义，看你知道几个

Unix 编程艺术名句摘录

从4万行代码降到1.8万，腾讯视频竟然用DDD做架构重构

Web 实时消息推送的 7 种实现方案

最新进展：Go arena 手动管理内存，鸽了！

微服务不香了？单体化改造为我们节省上万核 CPU！

Golang 编译速度为什么这么快

写出高质量代码的秘诀：Golang中的测试驱动开发（TDD）

实战！接口中的大事务，该如何进行优化

用了这么多年Docker，殊不知你还有这么多弯弯绕！

Kubernetes上生产环境后，99%都会遇到这2个故障

Go语言爱好者周刊：第 204 期 —— Go 14 周年

📒 前端相关

前端基建有哪些？大小公司偏重啥

不是吧？async/await异常捕获你还在用try-catch～

IntersectionObserver：实现滚动动画、懒加载、虚拟列表

Introducing GPTs。OpenAI 正在推出一种新的定制版本的 ChatGPT—— GPTs。用户可创建专门用途的 GPT，无需编程知识，方便在日常生活、工作或学习等各种场景中使用，甚至可以和他人分享。用户可以在 chat.openai.com/create 上进行创建试用。ChatGPT Plus 和企业版用户今天就可以试用，包括 Canva 和 Zapier AI Actions。此外，本月晚些时候，OpenAI 将推出 GPT 商店，展示被认证的开发者的作品。在未来几个月，GPT 使用者也将有机会通过使用频率赚钱。OpenAI 表示，GPT 的所有措施都考虑到了隐私和安全，用户完全可以控制自己的数据。此外，开发者也可以将 GPT 连接到真实世界，定义自定义动作，连接到数据库，插入电子邮件，或者使用购物助手等。企业版用户也可以部署仅限内部的 GPT，满足特定使用场景，部门或具有专有数据集的需求。

Vue design patterns guide。Vue是一个流行的用于构建用户界面的渐进式JavaScript框架。与其他的全功能框架不同，Vue被设计为可逐步采用，这意味着其入门易如jQuery，但与现代化工具和支持库结合使用时，有潜力支持复杂的应用程序。理解和利用Vue的模式可以大大帮助编写清晰、高效和可维护的代码。本站将详细讲解Vue的特定模式和行为，包括可组合函数、脚本设置、状态管理、提供/注入、动态组件等概念。无论你是初学者，还是希望更好地理解一些有用的模式，这里都能提供帮助。

Github 推出新的字体。

Rust 在 nightly 版本中通过并行前端技术加速编译过程。Rust 编译器的前端现在可以使用并行执行功能，以大大缩短编译时间。用户可以通过使用 - Z threads=8 选项在夜间编译器上尝试此功能。这项功能现在还处于实验阶段，预计将在 2024 年的稳定版编译器中进行发布。通过使用 Rayon 实现细粒度的并行任务，新的前端可以并行执行许多编译任务。用户可以通过 - Z threads 选项打开多线程模式。测试结果表明，编译时间可以减少多达 50%，但结果取决于代码的特性和构建配置。尽管并行前端运行在单线程模式下，编译时间一般仅慢 0% 到 2%。因此，用户应几乎不会注意到增加的延迟。此外，Rust 编译器的实现遵循 jobserver 协议，将创建的线程数量限制在内核数量以内，因此不会出现效率低下的情况。

《你为什么需要 React Query》。文章主要讨论了 React Query 的实用性和特性，反驳了一些声称不需要 React Query 进行数据获取的观点。作者认为，尽管像 fetch-in-useEffect 这样的标准例子看似简单，但在处理边界情况和状态管理时，会引入诸多复杂性和问题。反观 React Query，它能解决这些问题并简化开发。优点包括自动防止竞态条件，免费获得加载、数据和错误状态，显然分离没有数据的状态，根据需要获取前一个类别的数据或错误等。作者最后挑战读者在下一个项目中尝试使用 React Query，他认为这不仅可以使代码更加易于维护和扩展，而且可以提供更强大的功能。

《re-re-reselct - 简化 React 状态管理》。 Causal 博客文章介绍了他们设计和实现的状态管理解决方案——Causal Selectors。文章先分析了管理复杂网页应用中状态数据的挑战，然后解释了两种类型的 Causal Selectors —— 叶子选择器和组合选择器的工作原理。文章还阐述了它们如何优化性能，减少不必要的重渲染，并与React进行整合。但新框架的初步效果并不理想，所以他们通过优化选择器的性能和订阅管理，最终使其性能回到原始水平，同时使状态管理更容易使用。他们计划完成所有组件的迁移，缓存拓扑排序以增加速度，并将状态从Redux移出，以便更好地管理后端查询的状态。

《利用 NextJS、Trigger.dev 和 GPT4 打造一款简历制作工具》。本文教你如何使用 NextJS、Trigger.dev、Resend 和 OpenAI 创建一个简历生成器。内容包括基本信息（如名字、姓氏以及最后工作的地方），生成和创建 PDF，最后发送给你的邮箱。我们使用 NextJS 创建一个简单的表单，使用 react-hook-form 进行字段验证和表单信息保存，利用 NextJS 提供的路由处理网络请求。我们利用 Trigger.dev 进行后台任务处理，例如用 ChatGPT 生成内容，创建 PDF 和通过邮件发送。然后通过 OpenAI 构建 ChatGPT，通过 jsPdf 库创建 PDF，最后通过 Trigger.dev 的 Resend 集成包实现邮件发送。完整的源代码可以在 Github 上找到。

《React 设计模式》。本文介绍了 React 设计模式，包括容器和演示模式，钩子组件组合，使用 Reducer 的状态管理，使用 Provider 的数据管理，使用 HOCs（高阶组件）进行组件增强，复合组件，属性组合，受控输入以及使用 fowardRefs 管理自定义组件等。通过运用这些设计模式和最佳实践，可以提升代码质量，推动团队协作，并让你的应用变得更加可扩展、灵活、可维护。

MDH 前端周刊第 113 期：Angular.dev & 17、pacquet、设计模式、Rust Prettier 悬赏

11月12日内容汇总

November 12, 2023 · 9 min read

加菲猫

前端开发 @NETEASE

🌟 AI 相关

⭐️ Golang 相关

两全其美：Sidecarless 与 Sidecar 模式融合的服务网格新形态

Fourteen Years of Go

Go 团队发布 Go 14 周年回顾！附加更完整新特性脑图！

米哈游大数据云原生实践

没用过微服务？别慌，丐版架构图，让你轻松拿捏面试官

并发编程巅峰对决：Go vs Rust

Sentinel为什么这么强，我扒了扒背后的实现原理

写给go开发者的gRPC教程-gRPC Gateway

Rust 中的异步编程模型

Rust 作为一门现代的系统级编程语言，旨在提供高效、安全和可靠的异步编程能力。Rust 异步编程的目标是实现高性能、无安全漏洞的异步应用程序，同时提供简洁的语法和丰富的异步库。

由于并发编程在现代社会非常重要，因此每个主流语言都对自己的并发模型进行过权衡取舍和精心设计，Rust 语言也不例外。下面的列表可以帮助大家理解不同并发模型的取舍:

OS 线程, 它最简单，也无需改变任何编程模型(业务/代码逻辑)，因此非常适合作为语言的原生并发模型，我们在多线程章节[3]也提到过，Rust 就选择了原生支持线程级的并发编程。但是，这种模型也有缺点，例如线程间的同步将变得更加困难，线程间的上下文切换损耗较大。使用线程池在一定程度上可以提升性能，但是对于 IO 密集的场景来说，线程池还是不够看。
事件驱动(Event driven), 这个名词你可能比较陌生，如果说事件驱动常常跟回调( Callback )一起使用，相信大家就恍然大悟了。这种模型性能相当的好，但最大的问题就是存在回调地狱的风险：非线性的控制流和结果处理导致了数据流向和错误传播变得难以掌控，还会导致代码可维护性和可读性的大幅降低，大名鼎鼎的 JS 曾经就存在回调地狱。
协程(Coroutines) 可能是目前最火的并发模型，Go 语言的协程设计就非常优秀，这也是 Go 语言能够迅速火遍全球的杀手锏之一。协程跟线程类似，无需改变编程模型，同时，它也跟 async 类似，可以支持大量的任务并发运行。但协程抽象层次过高，导致用户无法接触到底层的细节，这对于系统编程语言和自定义异步运行时是难以接受的
actor 模型是 erlang 的杀手锏之一，它将所有并发计算分割成一个一个单元，这些单元被称为 actor , 单元之间通过消息传递的方式进行通信和数据传递，跟分布式系统的设计理念非常相像。由于 actor 模型跟现实很贴近，因此它相对来说更容易实现，但是一旦遇到流控制、失败重试等场景时，就会变得不太好用
async/await，该模型性能高，还能支持底层编程，同时又像线程和协程那样无需过多的改变编程模型，但有得必有失，async 模型的问题就是内部实现机制过于复杂，对于用户来说，理解和使用起来也没有线程和协程简单，好在前者的复杂性开发者们已经帮我们封装好，而理解和使用起来不够简单，正是本章试图解决的问题。

Rust并发编程 - 第三章 async/await 异步编程

只改一个参数让Golang GC耗时暴降到1/30！

不想引入mq？试试debezium

考考你，给32位系统的电脑插个8G的内存条会发生什么

Redis 消息队列和 Kafka 有啥区别

Kafka 消息会落盘，会持久化，但是 Redis 是基于内存的消息队列，如果实例重启会导致数据丢失。Redis 如何实现高可用，有两种方式，1）生产环境会用 Redis 集群模式，有多个副本，读写操作都是针对主节点，会异步复制给从节点，保证最终一致性。假如主节点挂了，则会在从节点中选举一个新的主节点，2）Redis 也支持持久化。

此外，Kafka 相对于 Redis 消息队列在吞吐量和延迟方面更为优秀（同一个 Topic 下可以有多个 Partition），可以处理更高的消息流量，并且具备较低的延迟。

RPC 调用和浏览器 HTTP 请求有啥区别

RPC 也称为内部调用，client 启动的时候会创建一个连接池，提前建立 tcp 链接，后续调用都复用 tcp 链接，避免频繁的 tcp 三次握手，提升性能。此外 RPC 调用还有一套服务发现机制（类似 DNS），可以直接用服务名的方式调用。由于内部调用不经过网关，因此需要在调用方实现负载均衡，比如 OpenFeign 底层基于 Ribbon 实现负载均衡。

浏览器发送 HTTP 请求则需要在发送请求的时候实现 DNS 解析、TCP 三次握手等操作，一定程度上会影响性能。之前写过一个 Node 服务，在 Node 环境用 http 模块去调用其他接口，实际上会带来一定的性能开销。如果在程序频繁执行到的关键路径上，改用微服务 RPC 调用方式可以提升性能。

Apache RocketMQ，构建云原生统一消息引擎

25张图盘点 RocketMQ 11 种消息类型！

聊聊如何在Java应用中发送短信

Go1.21.4 发布了：官方图片竟然用的 loong64

Golang面试题从浅入深高频必刷「2023版」| 文末送书

盘点golang中的开发神器

Go 透明文件夹的特性，有没有必要加

24 个 Docker 常见问题处理技巧

烂大街的 RPC 项目，如何和字节面试官聊出花儿来

一次 Netty 代码不健壮导致的大量 CLOSE_WAIT 连接原因分析

应用容器化后为什么性能下降这么多

只改一行语句，锁这么多