--- url: https://sugarat.top/weekly/2024-06-02.md description: >- ① TTSMaker - 在线语音合成工具 ② js 读取文件速度对比 ③ 仅使用 CSS 实现的一个马里奥小游戏 ④ widget-qrcode - 二维码生成组件 ⑤ 使用 npm 分发的开源字体合集 ⑥ jessquery - jQuery 的轻量级平替方案 ⑦ Bau.js - 极小的响应式 WEB 框架 ⑧ 只使用 span 可以做些什么？ ⑨ 5个提升网站访问性能的技巧 ⑩ ollama - 本地运行大模型 --- # 视野修炼第86期 | CSS 马里奥 欢迎来到第 86 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介 \[\[toc]] **​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）** 下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。 ## 🔥强烈推荐 ### [1. TTSMaker](https://ttsmaker.cn/) - 在线语音合成工具 本周被安利的工具，可用于给视频生成配音。 试了一下，效果挺好的，能找到很多短视频常用的配音（小美小帅）。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/5d638019f32e2c894f6ad0b425f9c585) *速度很快，完全免费，可商用！* ### [2. js 读取文件速度对比](https://lemire.me/blog/2024/03/12/how-to-read-files-quickly-in-javascript/) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/eb5a7c6c550e00f88ad7659d66bbe7a9) 作者的测试用例：重复读取同一个文件 50,000 次。文件相对较小（略大于一千字节）。 *emm，笔者最近也在做博客的构建优化，印象中都是推荐用 fs.promise 而不是 readFileSync，感觉也可以测试一下这块 🤔，看看哪种方式最优。* *Bun 确实快得飞起。* ### [3. 仅使用 CSS 实现的一个马里奥小游戏](https://codepen.io/t_afif/pen/JjqEdJv) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/6f1fd8f0819cd7141fde2f318214074f) 只能说非常 🐂 🍺 。 ## 🔧开源工具&技术资讯 ### [4. widget-qrcode](https://github.com/mumuy/widget-qrcode?tab=readme-ov-file) - 二维码生成组件 基于 web component 实现，使用比较简单。 ```html ``` ![](https://cdn.upyun.sugarat.top/mdImg/sugar/827cfeb5e0f5032fb22e7055d35d8b14) ### [5. 使用 npm 分发的开源字体合集](https://fontsource.org/) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/90d6ac48f06351d8a5f42a487e5f802f) *当然也有6-7款中文的字体，* ### [6. jessquery](https://github.com/jazzypants1989/jessquery) - jQuery 的轻量级平替方案 更小的尺寸，更简单的进行 DOM 操作，与 jQuery 类似的体验，TypeScript 支持。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/e5bc6611571d87d6da43a19172e74bb7) ### [7. Bau.js](https://github.com/grucloud/bau) - 极小的响应式 WEB 框架 无 JSX、无template、五虚拟 DOM、CSS-in-JS。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/32dc7a704c8d70c0a221edb5e61d32be) 可以看一下使用 Demo。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/d5a5c9276833fc156f89ce82a9feebcc) *emm，书写上可能还是没有 Vue/React 这么舒服，难受了开发者 ！* ## 📚 教程&文章 ### [8. 只使用 span 可以做些什么？](https://onlyspans.net/) 挑了3个比较实用的例子 | table | Click 自增 | 动态时间展示 | | :-----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/00dfe35a2f22007c27bc0737372d0303) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/4ff22c25f3f09aa2cbcc0272b4deeef2) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/2d53548bb7e72b9304d1fc865404b741) | ### [9. 5个提升网站访问性能的技巧](https://blog.sentry.io/5-easy-tips-to-improve-your-personal-website-performance/) 1. 使用静态 HTML：考虑 SSG 生成页面，按需使用 SSR； 2. 图像优化：优先使用 `webp` 和 `avif`； 3. 使用系统字体：无需额外网络下载，无页面闪烁问题； 4. 移除阻塞渲染的资源：非首屏需要的静态资源； 5. 少用js：尽可能使用 css 替代动画。 ## 🤖AI工具&资讯 ### [10. ollama](https://github.com/ollama/ollama) - 本地运行大模型 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/39a059d64abf44555d9f6e77dcc6de44) 一键运行 llama3 ```sh ollama run llama3 ``` ![](https://cdn.upyun.sugarat.top/mdImg/sugar/8a833f869872f0fec9426cc7414ca56b) 简单体验了一下翻译，效果还可以。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/c1f79baab0d8d24fb5a9d58042fca906) 支持 REST API 调用，也可以配合一些图形化工具调用，比如 chatbox。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/e511b54d3787870f2236d03bfe7ca8d7) *笔者电脑是 Mac mini M1 2020款，跑起来还是挺流畅的。* ## ⭐️强力推荐关注 * [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布 * [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章 * [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！ * [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流