乐趣区

关于前端:湖中剑-前端周刊-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,欢送订阅:

我的周刊

退出移动版