前端早读精选：CSS 单位全梳理、Performance API 指南、V8 引擎最新更新摘要

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。文章方面，本期为大家带来，CSS 布局单位梳理、如何使用 Performance 打造自己的性能报告、V8 引擎最新更新摘要、如何更好的实现音频倍速播放；工具方面，新的效率神器->基于截图或网页链接AI自动生成代码、基于图片生成音乐的 AI 工具、上古 NodeJS 框架--Express，迎来新的迭代、Mac 自带图片处理小工具；行业新闻方面，对于现代网站不断膨胀的JS代码的探讨、AI 行业到底有没有护城河。话不多说，详细内容请大家查阅。如果觉得有收获，动动大拇指点个赞，以示鼓励！

文章推荐

CSS 基于容器的相对布局单位

虽然当前有很多可用的 CSS 单元，但在日常开发过程中，主要还是像素和 （r）ems 来调整大小和字体。随着CSS规范不断迭代，新的单位属性越来越多，是时候好好整理一下这些单位的含义了。该系列总共分为三部分，本篇文章是第三部分，探讨了CSS中基于容器的长度单位，这是一个新的概念，允许开发者根据元素的容器大小来定义尺寸和间距，而不仅仅是依赖于像素或相对于视口的单位。作者通过实例演示了如何使用这些单位（如cqw和cqh）来创建更灵活和适应不同屏幕尺寸的布局。这些单位提供了一种新的方法来思考和实现响应式设计，使得组件可以根据其父容器的大小动态调整样式。前两部分内容请查阅：第一部分-基于字体的相对布局单位、第二部分-基于窗口的相对布局单位

附：基于容器的相对布局单位简单总结

• cqw：容器查询宽度（Container Query Width）
• cqh：容器查询高度（Container Query Height）
• cqi：容器查询内联尺寸（Container Query Inline-Size）
• cqb：容器查询块尺寸（Container Query Block-Size）

注意：如果父容器定义了具体的宽度，那么 cqw 与 cqi 的表现形式是一样的。在 flex 布局中，cqi 等于 flex-basis 的值，而在 grid 布局中，cqi 等于 column-width 的值

如何使用性能 API 报告核心 Web 指标

这篇文章介绍了如何使用Performance API来报告核心网络体验指标（Core Web Vitals）。Performance API是一套标准，用于通过JavaScript测量和评估性能指标，能够直接在DOM中生成性能指标，为开发者创建自己的报告提供便利。文章还探讨了新的核心网络体验指标——交互到下一次绘制（INP）的测量方法，该指标将在2024年3月替代首次输入延迟（FID）。

V8 JavaScript 引擎的最新更新摘要

V8 是全球最流行的 JavaScript 引擎，支持 Chrome 和 Node.js 等技术。V8 的开发速度令人印象深刻，每天有多个代码提交，大约每个月都有主要版本。文章探讨了 Google 对 V8 的最新改进与补充。更多V8 迭代信息，可查看V8 2023 全年总结

不改变音调情况下Audio音频的倍速合成JS实现

快节奏的生活，让大家在观看长视频时，时常会开启倍速播放，大家是否想过，当倍速播放时，音频如何尽可能的还完原有音调。如果你也有类似的问题，不妨来看看张鑫旭大佬的解决方案。

工具推荐

截图生成代码

这个简单的应用程序可以将截图转化为代码（HTML/Tailwind CSS，或React或Bootstrap或Vue）。它使用GPT-4 Vision（或Claude 3）来生成代码，并使用DALL-E 3生成相似的图像。现在，你也可以输入一个URL来克隆一个现有的网站。

基于图片生成音频的AI工具

一款基于图片生成音频的AI工具，只需要上传图片就可以根据图片的特点生成对应的音乐。

捕捉到了熊猫的快乐精神，文本的文化背景以及点赞的大拇指，最后以欢快欢快的旋律，充满弹性的钢琴，欢快的弦乐和欢快的木管乐器，融入了二胡和琵琶等中国传统乐器输出音频，

expressjs

号外！号外！上古 NodeJS 服务端框架发布新版本了！！！ Express经过了十六个月，迎来了一个新版本。本次更新是一次小版本更新，主要是对历史 bug 的一些修复。话说现在有同学在使用 Express 开发么？大家对 Express 怎么看，欢迎大家在评论区踊跃讨论！

sips：Mac 自带的可编程图形处理系统

如果你想把 Mac 上一些 .webp 的图片转换为 .png，那么你可以直接使用 sips。 sips 是 mac 上默认的系统命令，除了简单的命令行处理外，它还支持编写 JavaScript！！!

更多推荐

不断膨胀的JavaScript

文章讨论了2024年前端开发中JavaScript的膨胀问题，通过各种类型的网站（如社交媒体、电子邮件、视频平台等）的实际JavaScript文件大小，揭示了即使是基本功能也可能需要大量的JavaScript代码。作者发现，许多网站的JavaScript大小远远超出了合理范围，例如，谷歌邮箱页面可能需要高达20MB的JavaScript。这种趋势不仅增加了网页加载时间，还影响了浏览器的解析和执行效率，进而影响用户体验和设备电池寿命。作者认为，网站的内容应该比代码更重要，呼吁开发者优化代码以减少不必要的JavaScript膨胀。

作者分析完这么多网站，发现有一个网站做的很好。那就是 jQuery 官网

谷歌内部正在讨论，如何应对 OpenAI 公司的 ChatGPT。这个研究员提出自己的看法：即使谷歌全力投入，可能也赢不了这场 AI 竞赛。原因如下：

1. 生成式 AI 的核心技术是开源的，任何人都可以获取。
2. AI 模型的替代性很强。
3. AI 的核心竞争力在于算力和训练语料。
4. AI 的研究人员是流动的。