前端早读精选: 你应该知道的 10 NodeJS 新功能、React 19 差点拖慢了整个互联网？

xiaoTuiMao
252 阅读6分钟

post-header-bg.png

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。

JS 文章推荐：NodeJS 的 10 个新功能、React 19 Suspense 行为变更带来的性能问题、Dom 深度对页面性能影响、HTTP 3.0 QUIC 协议是如何在保障安全的基础上提高速度的

HTML & CSS 文章推荐：HTML 2023 调研报告、CSS 技巧：使用 css 完成布局模板、利用 CSS 完成基于时间的动画、利用 CSS 实现倒计时。

工具推荐：一款在您的笔记本电脑上完全离线运行AI工具、文字转语音在线版。

如果觉得有收获，欢迎大家点赞👍🏻订阅

JavaScript 文章推荐

2024 年开始使用的 10 个现代 Node.js 功能

Node.js中一些较新的功能和实验性特性。包括了如何使用Node.js进行测试的相关命令，以及如何利用--experimental-test-coverage生成测试覆盖率报告的方法。文章还探讨了Corepack工具的用途，这是一个实验性功能，用于统一和管理不同版本的包管理器，如Yarn和npm，确保项目的一致性。此外，文章也介绍了Node.js在处理环境变量方面的新功能，例如通过node --env-file来指定环境变量文件。最后，还涉及了一些新的安全性和性能优化特性，如改进的文件系统访问权限和支持import.meta以及Promise的相关优化。

脑图版本： 10个NodeJS新功能.png

👉🏻原文链接：2024 年开始使用的 10 个现代 Node.js 功能

React 19 差点拖慢整个互联网！核心团队紧急叫停

React 19版本中引入的Suspense行为变更，从并行数据获取改为瀑布式数据获取，引起了社区广泛关注和讨论。这一变更虽意在优化性能，但实际上增加了数据加载时间，特别是在多组件场景下，显著影响了应用性能。

改动前改动后
Pasted image 20240624101304.pngPasted image 20240624101318.png

👉🏻原文链接：React 19 差点拖慢整个互联网！核心团队紧急叫停

你的 Dom 有多深

探讨了DOM深度对网页性能的影响。作者通过实验发现，虽然现代浏览器可以有效处理深层次和复杂的DOM树，但DOM深度增加会显著降低性能，特别是当与样式重新计算结合时。这主要是因为访问深层嵌套元素需要更多操作，从而导致处理耗时增加。

Pasted image 20240625093524.png

👉🏻原文链接：你的 Dom 有多深

QUIC 是如何取代 TCP 以提高速度和安全性的？

文章主要探讨了QUIC协议如何克服TCP存在的问题，并进一步优化了基于TCP的传输方式，特别是在构建更现代化和高效的网络应用方面。QUIC通过结合UDP的高效传输特性并加入TCP的可靠性特点，提供了一种更适合当前网络需求的解决方案。下面的表格将根据文章内容，对TCP、UDP和QUIC的特点、解决的问题以及优缺点进行结构化展示：

协议特点解决的问题优点缺点
TCP连接导向、可靠传输数据可靠性和顺序性问题可靠性高、保证数据顺序、广泛使用三次握手延迟、头阻塞问题、效率低于UDP
UDP无连接、传输快、开销小高效传输需求开销小、适合实时应用（如视频和音频流）、传输速度快不保证数据可靠性、不适用于需要高可靠性的应用
QUIC结合TCP和UDP的特点，基于UDP，实现可靠性、多路复用、快速握手TCP的延迟和队头阻塞问题，UDP的可靠性问题握手延迟低、解决了队头阻塞、支持连接迁移、增强安全性相对较新，普及和支持率还在增长中

image.png

👉🏻原文链接：QUIC 是如何取代 TCP 以提高速度和安全性的？

HTML && CSS 文章推荐

HTML 2023

一份HTML 调查报告。在 JavaScript 统治 Web、CSS 年年获得新功能的同时，HTML 似乎心甘情愿地保持沉默，把舞台中心让给它的年轻兄弟姐妹。毕竟，一旦 你掌握了 <div> 和 <h>1 到 6，还有什么值得了解的呢？ 其实，还是有很多东西值得探索！调查报告邀请了 Lea Verou 来发挥她对 Web 平台的深厚知识，设计了一项调查，这项调查不仅涵盖了纯粹的 HTML，还涉及了可访问性、Web 组件等等。 Pasted image 20240625094150.png

👉🏻原文链接：HTML 2023

不依赖框架，利用 css 完成布局模板

这篇文章《Modern CSS Layouts: You Might Not Need A Framework For That》介绍了在现代CSS开发中，如何不依赖于框架而使用CSS本身的强大功能来创建灵活的布局。作者展示了如何利用CSS的网格（Grid）和弹性盒（Flexbox）布局，以及如何通过CSS变量和级联层（Cascade Layers）来创建可重用的布局类。这些技术允许开发者创建响应式、可配置的布局，而无需依赖外部框架，从而简化了代码并提高了性能和可维护性。

image.png

👉🏻原文链接：不依赖框架，利用 css 完成布局模板

利用 CSS 基于时间的方式制作动画

这篇文章讲述了如何使用CSS Houdini API和数学函数实现基于时间的CSS动画，而不是传统的关键帧动画。作者介绍了一种方法，通过自定义属性随时间递增来启动动画，使动画能够动态适应。内容涵盖了如何控制帧率、利用数学函数来创造运动模式（如正弦往复运动）以及如何使用数学表达式创建自定义的缓动函数。此外，文章还探讨了如何实验性地使用CSS属性和值，以实现更复杂和响应式的动画设计。

css-time-animation.gif

👉🏻原文链接：利用 CSS 基于时间的方式制作动画

利用 CSS 实现倒计时动画

通过组合 @property @keyframes animation counter-reset counter 属性实现倒计时动画。

  • @property 定义变量 --n
  • @keyframes 定义动画区间
  • animation 执行动画，改变变量 --n 的值
  • counter-reset 计算 count 的值
  • counter 将内容交给 content 最小 demo 示例
@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@keyframes count {
  from { --n: 5; }
  to { --n: 0; }
}
.timer:hover::after {
  animation: 5s linear count;
  animation-fill-mode: forwards;
  counter-reset: n calc(0 + var(--n));
  content: counter(n);
}

css-count-down.gif

👉🏻原文链接：利用 CSS 实现倒计时动画

工具推荐

lmstudio.ai

一款在您的笔记本电脑上完全离线运行LLMs👾 支持从 HuggingFace 🤗存储库下载任何兼容的模型文件

image.png

texttospeech

免费的在线文字转换语音工具，支持多种语言类型选择。 image.png

avatar
文章
阅读
粉丝