探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。文章方面，本期为大家带来，来自腾讯的2023前端年度技术盘点与2024技术展望、深度剖析正则原理、新的前端图片格式 -avif、以及css与前端轮询小技巧。工具方面，带来近期霸榜 GitHub Trending 的12306抢票、前端代码查重工具、google 网页索引工具与对shell更友好的bun-shell。话不多说，详细内容请大家查阅。如果觉得有收获，动动大拇指点个赞，以示鼓励！
文章推荐
穿越时空：2023年前端技术盘点与2024年技术展望
2023 年在前端行业发生的一些重要事情：
- 语言与标准：CSS、ES 和 TS 语法持续完善，社区竟现反 TS 声音
- 前端框架：主流框架持续完善，黑马 Htmx 与 Qwik 异军突起
- 前端基础建设：多种语言助力前端基建的持续发展
- Chrome 浏览器：加强对用户数据安全的保护
- 低代码：持续完善的低代码引擎开源社区
- D2C：C2D2C 亮相，大模型赋能 D2C 未来可期
- 大模型：大模型应用能力持续完善与落地
- 跨端：鸿蒙应用开发为跨端带来新变化
- WASM: 未来将与更多语言和场景结合
- 音视频：传统编解码与 AI 编解码并驾齐驱
对于未来技术展望
- 大模型持续为前端赋能
- 拥抱 TypeScript 是前端语言与标准的主旋律
- 探索更好服务端渲染是前端框架的大势所趋
- Rust 是前端基础建设的未来
- 鸿蒙入局，跨端三分天下格局指日可待
TypeScript 依然是前端语言与标准，虽然社区最近对于 TS 的看法各不一样，但是从目前的笔者负责的业务场景看，TS 依然是最佳选择。 关于 C2D2C，笔者也抱有期待。通过前端标准化组件与设计标准结合，设计师基于现有组件库输出设计稿，前端研发拿到对应设计稿再转换为可执行代码。由于设计稿和代码使用的是同一套设计系统，设计稿中的组件和最终代码中的组件是一一映射的关系，因此无需进行标注就可以实现组件的精准识别。同时在代码的二次可发与可读性上也会得到很大改善。 强势崛起的Qwik也是一个值得关注的框架：号称历史上第一个 O(1) 的前端 SSR 框架。如果你对其 SSR 性能感兴趣，可以通过这篇文章了解。👉🏻点击查看 👉🏻阅读全文了解更多内容
为什么 2024 年应该使用 AVIF 而不是 JPEG、WebP、PNG 和 GIF
avif 对比传统的图片格式，在压缩效率、颜色深度有着明显的优势，但在编解码的效率上相对低一些。不过在新的浏览器环境下尝试 avif 未尝不是一个好的选择。
附：avif 与 webp 对比
| 特性 | AVIF | WebP |
|---|---|---|
| 压缩效率 | 高（更小的文件大小，保持高质量） | 较高但通常不如AVIF |
| 图像质量 | 支持更广泛的颜色范围和动态范围，适合高分辨率图像 | 良好，但在颜色和动态范围上不如AVIF |
| 浏览器兼容性 | 相对较新，支持不如WebP广泛 | 几乎所有现代浏览器支持 |
| 编解码速度 | 编码较慢 | 编码和解码速度较快 |
| 功能支持 | 支持高动态范围（HDR）和透明度 | 支持透明度，有损和无损压缩，但在HDR上支持不足 |
| 应用场景 | 适合对图像质量有高要求的应用 | 适合需要快速处理和广泛兼容性的应用 |
浅谈正则表达式——从原理到实战
这篇文章是关于正则表达式的深入讨论，从基本语法到实际应用全面介绍了正则表达式的各个方面。内容包括正则表达式的组成、不同类型的字符和匹配模式、贪婪与非贪婪匹配的概念以及它们在性能上的影响。文章还探讨了捕获组、匹配模式和前瞻/后顾断言的概念。最后，讨论了正则表达式的底层原理，特别是非确定性有限自动机（NFA）和确定性有限自动机（DFA）在处理正则表达式时的差异。想要深入了解正则的同学，点击阅读全文
JavaScript WTF: Why does every() return true for empty arrays?
文章从数学的角度探讨为，什么当数组为空数组时，
[].every(item => true)会返回true,[].some(item => true)，会返回false，这一表现是否符合你的直觉。
every:It is vacuously true that all elements of the empty set satisfy any given conditionsome:The “exists” quantifier states that the result is false for any empty set.
the-surprising-things-that-css-can-animate
当您想到动画 CSS 属性时，您会想到哪些？文章列举了一些通常与动画无关的属性，用 CSS 可以实现的一些意想不到的动画效果。
一个健壮的前端轮询
文章讨论了在不使用websocket做服务端推送的情况下，如何写出一个健壮的前端轮询。文章提供了一些常见的前端轮询的应用场景以及可能遇到的问题，并逐一给到了解决方案。
笔者从文章中衍生一个场景，当列表筛选时，每次筛选项的变化，都需要前端重新请求。但是前端筛选项 UI 变化不依赖 API 数据返回，如果此时用户操作过快，同时存在多个筛选请求时，也需要考虑到请求废弃的问题，同样可以借助文章中的思路去解决。
工具推荐
py12306
还没买到票的同学看过来！一款12306 购票助手，支持集群，多账号，多任务购票以及 Web 页面管理。支持本地部署，快来试试吧！
前端代码重复度检测
听说过论文查重，那阁下是否听说过代码查重？在前端开发中，代码的重复度是一个常见的问题。重复的代码不仅增加了代码的维护成本，还可能导致程序的低效运行。为了解决这个问题，有许多工具和技术被用来检测和消除代码重复。其中一个被广泛使用的工具就是
jscpd。
google-indexing-script
使用此脚本可让你的网站在 48 小时内在 Google 上建立索引。无需任何复杂技巧或黑客手段，只需简单的脚本和 Google API 即可。 注意：
- 脚本并不会帮助你的网站在 Google 上的排名，只会让 Google 知道你的网站存在。
- 脚本使用到 Google Indexing API。虽然不能绝对保证每个页面都被索引到，但最近在 2023 年 12 月测试显示有非常高的成功率。
the-bun-shell
bun-shell提供性能更优，操作更简洁的 shell 集成命令，同时也解决了在 JS 中跨平台运行的兼容性问题
更多推荐
高德地图官方首度揭秘：红绿灯倒计时功能是如何实现的？
近日，高德地图官方发布视频首度揭秘了**“红绿灯倒计时读秒”功能背后的实现原理，那就是依赖过往车主的行驶启停规律，运用云端大数据算法推算出具体红绿灯读秒时间，甚至路口临时设置移动式红绿灯**，虽然没有接电和接网，但高德地图依然会显示红绿灯倒计时状态。 笔者曾一度以为高德的红绿灯读秒是接入了交通数据。
GitHub的榜一大佬晒出存款后，大家却想给他捐钱
Sindre 是 Github 上拥有最多 Star 的个人。其 Star 个数甚至比阿里巴巴还要多。Sindre 甚至被称为 npm 之神，因为大家用的 npm 包大概率底层直接或间接都依赖了他的软件包。 想要了解大佬，👉🏻点击查看
