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

522 阅读4分钟

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

📖 文章

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

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

项目 Github 地址:github.com/avwo/whistl…

mp.weixin.qq.com/s/_MGh5MN7R…

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

学习本文,你会学会:

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

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

mp.weixin.qq.com/s/UgPqPTcFw…

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

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

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

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

juejin.cn/post/703445…

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

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

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

juejin.cn/post/703692…

聊聊vue中的keep-alive

mp.weixin.qq.com/s/PXaK6E9TA…

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

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

mp.weixin.qq.com/s/lqEOHU89J…

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

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

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

mp.weixin.qq.com/s/P63LEMaXL…

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

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

Flappy Bird小游戏体验地址:foolmadao.github.io/echart-flap…

juejin.cn/post/703429…

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

zhuanlan.zhihu.com/p/435484949

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

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

mp.weixin.qq.com/s/3k4u-jw_i…

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' });
// ...

medium.com/@ebaytechbl…

🛠 工具、软件

Sandpack

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

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

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

codesandbox.io/post/sandpa…

React PDF Reader

PDF.js的React封装版本。

github.com/ZEISS/react…


周刊首发于GitHub,欢迎订阅:

我的周刊