第 10 菜谱：前端性能优化

Hi，我是 Sea，欢迎打开新一期的「每周菜谱」，这是第「10」期，发表于 2023-06-17 ，我们先来看看每周有什么值得推荐的~

每周推荐

24 个强大的 HTML 属性

https://juejin.cn/post/7219669309537845285
HTML 属性非常多，除了基本的一些属性外，还有很多很有用的功能性特别强大的属性；

前端性能优化

https://juejin.cn/post/7188894691356573754
提升首屏的加载速度，是前端性能优化中最重要的环节，本篇文章 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理

Node v20.3.0（Current）发布

https://nodejs.org/en/blog/release/v20.3.0

版本在升级 libuv（提供 Node 异步 I/O 功能的库）后带来了显著的 Linux 性能提升。此外，还引入了 **AbortSignal.any()**，并且开始正式认可 Ruy Adorno 在 Node.js TSC 中的地位。

React Server Component 从理念到原理

https://mp.weixin.qq.com/s/TFxQSwOLQJWBC-ErWaHS9Q

本文会从以下几个角度介绍RSC：

1. RSC是用来做啥的？
2. RSC和其他服务端渲染方案（SSR、SSG）的区别
3. RSC的工作原理

技术实践

CSS 中 calc(100%-100px)不加空格不生效的问题

https://juejin.cn/post/7220939977245737018

（为了避免负数

为啥 CSS 不会支持双斜杠( // )注释？

https://mp.weixin.qq.com/s/zqBZV2XW_BHeAgwZ68fcdg

众所周知，CSS 仅支持多行注释，也就是/**/注释，那为什么不能用 //注释呢？

语法冲突: CSS 支持border-image: 0//0;写法

如何使用 nodejs 对项目压力测试

https://juejin.cn/post/7224341322612621369

压力测试可以模拟大量用户访问, 来测试我们应用的承载能力， 可以帮助我们提前发现问题和瓶颈，早早制定应对措施。

关于 Node 调试工具和方法的介绍

https://blog.openreplay.com/an-introduction-to-debugging-in-nodejs/

文章从简单内容开始进行介绍，如使用 IDE 扩展程序突出潜在问题、使用控制台日志，再到使用 V8 检查器并通过 Chrome 进行调试。

完美搭配，微前端与 Monorepo 的架构设计

https://mp.weixin.qq.com/s/9jciGcyLkbxQIGrBqvbUsA

• 本文主要介绍如何使 Monorepo 与微前端结合使用，篇幅较长，请结合目录酌情阅读。
• 微前端/Monorepo 方案都存在很多争议，争论无意义，选择适合自己团队的方案即可。
• 技术实战以 Micro App + pnpm 技术栈，讲解了从零搭建到项目部署的一个完整微前端项目。

十个超级好用的 Javascript 技巧

https://mp.weixin.qq.com/s/pFDjSWWqT5QdCkEvsVSNTA

常见又超级好用的 Javascript 技巧和代码片段

拓展边界

如何成为架构师？

https://mp.weixin.qq.com/s/AkNuuHjguqm9aT4U4IXDFA
成长，是认知的升级，所谓架构师就是有着架构师的认知，和一些通用技术能力。

什么情况下使用，弹窗、浮层、抽屉、新页签？

https://www.bilibili.com/video/BV16k4y1n7VL/?vd_source=340c3fc924b0c4be6baa9bb2af1224a9
什么情况下使用，弹窗、浮层、抽屉、新页签

超全拔智齿后食谱

https://www.xiaohongshu.com/explore/63b93ab9000000001f00dae5
拔牙后别再光喝粥了 🥣，很多好吃的其实都能吃！

小结

如果你喜欢每周菜谱，请转发给你的朋友，告诉他们来这里进行订阅~

订阅地址：https://mrseawave.github.io/blogs/

每周菜谱，让你做饭更开心~