湖中剑 前端周刊 #15 | Whistle 抓包、浏览器原理、echarts做游戏、Sandpack浏览器打包、性能优化

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。

📖 文章

Whistle 实现原理 —— 从 0 开始实现一个抓包工具

通过这篇文章可以大致了解 Whistle 的实现原理，并学习如何实现一个简单的抓包调试工具。

项目 Github 地址：https://github.com/avwo/whistle

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

使用CSS做一碗营养充足的早餐面

学习本文，你会学会:

• :before/:after 伪类元素的使用
• 巩固 box-shadow 的使用
• 线性渐变和径向渐变的学习

通过封面我们可以看到这碗丰盛的早餐面共有餐具、煎蛋、面条、葱花、火腿五部分组成，下面咱们来一起看看小包是如何烹饪的。

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

如何在 Vue 中使用 防抖 和 节流

在监听频繁触发的事件时，一定要多加小心，比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。

这些事件总是被频繁触发，可能 几秒一次。如果针对每次事件都发起 fetch 请求（或类似的行为），那显然是不明智的。

我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是 防抖（debounce） 和 节流（throttle） 。
在本文中，你会了解到如何在 Vue 组件中 使用 防抖 和 节流 控制 观察者（watchers） 和 事件处理程序。

https://juejin.cn/post/7034458741990752287

今天不聊中间层，我们来聊聊中间页

平常代码编程中我们会碰到一些交互问题or团队间的合作问题，需要处理链接跳转之间的问题，假如我们作为提供方，需求方来自不同的业务团队，甚至有时来自第三方。

当然不仅限于此，还有很多令人脑壳疼的场景，这时候我们可以提供一个中间页作为对接桥梁，在此页面去揽下所有对接的活。但针对过渡页的合理使用和一些tips，我这里想单独拎一篇小文章出来说说，继续看看吧。

https://juejin.cn/post/7036920014389116941

聊聊vue中的keep-alive

https://mp.weixin.qq.com/s/PXaK6E9TAceoTa5I-PR_hQ

精读《深入了解现代浏览器 一》

虽然本文写于 2018 年，但如今依然值得学习，因为浏览器实现非常复杂，从细节开始学习很容易迷失方向，缺乏整体感，而这篇文章从宏观层面开始介绍，几乎没有涉及代码实现，全都是思路性的描述，非常适合培养对浏览器整体框架性思维。

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

Web 性能优化：控制关键请求的优先级

构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。

你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被请求的？

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

没想到吧！这个可可爱爱的游戏居然是用 ECharts 实现的！

echarts是一个很强大的图表库，除了我们常见的图表功能，echarts有一个自定义图形的功能，这个功能可以让我们很简单地在画布上绘制一些非常规的图形，基于此，我们来玩一些花哨的。

Flappy Bird小游戏体验地址：https://foolmadao.github.io/echart-flappy-bird/echarts-bird.html

https://juejin.cn/post/7034290086111871007

「全码」 通用搭建：现代 Web 研发体系中的新一代低/零码搭建

https://zhuanlan.zhihu.com/p/435484949

剖析 npm、yarn 与 pnpm 依赖管理逻辑

我们在项目开发的过程中会引用到各种不同的库，各种库又依赖了其他不同的库，这些依赖应该如何进行管理，今天这篇文章主要聊的就是这个事情。

https://mp.weixin.qq.com/s/3k4u-jw_iKsBeYyHJoSKMA

Rethink Modal Management

React 组件里的 Modal 部分，应该写在哪，怎么管理其状态，应该困扰过不少朋友。ebay 的开发者提供了一套方案，包含创建、注册和使用 Modal。使用 Modal 提供了多种形态，命令式直接调、结合 hooks 用 useModal 等，并且可以和 redux 结合，方便在 redux devtool 中查看 modal 状态。

import NiceModal, { useModal } from '@ebay/nice-modal-react';
import HelloModal from './HelloModal';
// ...
const modal = useModal(HelloModal);
// Show the modal and pass arguments as props
modal.show({ name: 'Nate' });
// ...

https://medium.com/@ebaytechblog/rethink-modals-management-in-react-cf3b6804223d

🛠 工具、软件

Sandpack

Sandpack是CodeSandbox开源的浏览器打包方案。

这次开源两个包：@codesandbox/sandpack-client and @codesandbox/sandpack-react。

sandpack-client负责加载Sandpack以及通信，sandpack-react是针对React的封装库。

https://codesandbox.io/post/sandpack-announcement

React PDF Reader

PDF.js的React封装版本。

https://github.com/ZEISS/react-view-pdf

---

周刊首发于GitHub，欢迎订阅：

我的周刊