2023-06-10发表2023-06-10更新 Sea Weekly9 分钟读完 (大约1388个字)0次访问

第 09 菜谱：Service Worker 使用 Workbox 预缓存实践

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

每周推荐

ES2023 即将发布，快来看看有哪些更新

https://mp.weixin.qq.com/s?__biz=MzA4NjI1OTM5OQ==&mid=2455887416&idx=1&sn=1ef4e5eb95f61d6e4c00a93430bfc6dd&scene=21#wechat_redirect

CSS 原生支持三角函数

https://mp.weixin.qq.com/s?__biz=Mzg2MDU4MzU3Nw==&mid=2247495701&idx=1&sn=8779fa1de1a196bc28c78fadb375d336&scene=21#wechat_redirect

.box {
  /* 设置元素的宽度为 sin(30deg) 的值 */
  width: calc(sin(30deg) * 100px);

  /* 设置元素的高度为 cos(45deg) 的值 */
  height: calc(cos(45deg) * 100%);

  /* 设置元素的透明度为 tan(60deg) 的值 */
  opacity: calc(tan(60deg));
}

为什么都用 PM2 来跑 Node 应用？

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

在服务器上，我们不会直接跑 node，而会用 pm2 来跑。

为什么要用 pm2 呢？它解决了什么问题？

探索主流前端框架的响应式原理

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

在前端框架中，一般有三种处理响应式的方法：

Values: 通过比较当前值和之前的值来检测数据变化。Angular 使用表达式进行比较，React 使用虚拟 DOM 进行比较，Svelte 使用编译器进行脏数据标记。
Observables：在 Angular 中使用 RxJS，在 Svelte 中使用 Stores 来处理响应式数据。
Signals：在 Vue、Qwik 和 Solid 框架中使用 Signals。它与 Vue 相连的是组件，Qwik 与 DOM 连接，Solid 使用 DOM 作为更细粒度的方法。

每种方法都有其特点和适用场景，开发者需要根据具体情况选择合适的方法来处理响应式数据。

现代图片性能优化及体验优化指南

https://mp.weixin.qq.com/s?__biz=Mzg2MDU4MzU3Nw==&mid=2247495418&idx=1&sn=379e7ad612de120e4d327e42aa4b9064&scene=21#wechat_redirect

图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。

对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。

技术实践

Service Worker 使用 Workbox 预缓存实践

https://juejin.cn/post/7083656336705060871

SW ：服务器与浏览器之间的中间人，如果网站中注册了Service Worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在Service Worker 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等相关关操作，其中最重要且广泛的的作用就是离线资源缓存

其中 Service Worker 调试可查看此篇文章

如何设计一个支持并发的前端缓存接口？

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

缓存池不过就是一个map，存储接口数据的地方，将接口的路径和参数拼到一块作为key，数据作为value存起来，本文主要是实践

console 样式增强库

https://juejin.cn/post/7216182763237916729

// 只有一个 %c 时
console.info(
  '%c this is me ',
  'background-color: #2196f3; padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;',
  window
);

// 两个 %c 时
console.info(
  '%c this is first %c this is second ',
  'background-color: #2196f3; padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;',
  'background-color: #00BCD4; padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;',
  window
);