技术周报·Chrome 发布交互录制功能

4,187 阅读2分钟

热点

Record, replay and measure user flows

Google Chrome 开发者工具新增 Recorder 面板,允许录制、回放、编辑页面交互行为,甚至能够度量行为序列间的性能表现,不过这一工具还在预览阶段,离正式发布还有一段时间。

基础与实践

Webpack 性能系列四:分包优化

使用 SplitChunksPlugin ,Webpack 可以产物拆解成更细粒度、更内聚的产物包,提升网络性能。本文细致解释 SplitChunksPlugin 启发式分包规则的配置方法与分组逻辑,并最终给出一些普适的最佳实践规则。

React Fiber 详细解析<快来复习下吧>

为确保页面运行流程性,Fiber 根据浏览器的每一帧执行的特性,构思出了 Fiber 来将一次任务拆解成单元,以划分时间片的方式,按照Fiber的自己的调度方法,根据任务单元优先级,分批处理或调起任务,将一次更新分散在多次时间片中,另外, 在浏览器空闲的时候, 也可以继续去执行未完成的任务, 充分利用浏览器每一帧的工作特性。

React 18 新特性之 startTransition

React 18 开始加入 startTransition 接口,通过标记某些更新为"transitions",可以让我们的页面在大屏更新里保持页面流畅度,解决卡顿问题。

底层原理

Node.js 的底层原理

整体介绍 Node.js 架构与底层原理,包括 libuv、事件循环、V8、Web 服务器架构模型。

Node.js 多进程/线程 —— 日志系统架…

本文详细解说 Node.js 语境下各种多进程操作方法,实例解析包括进程间通讯、多进程异常处理、粘包问题与解决方案等内容。

源码解读

从 fabric 源码来看如何做好一个 canvas 库

本文可以让你从 0 到 1 快速了解 canvas,了解 fabricjs 源码库的整体组织和关键核心代码,内容包括:

  • canvas 是什么,它的渲染原理;
  • retina 屏模糊的原理以及解决方法;
  • fabricjs 核心关键优化:事件驱动、retina 屏处理、渲染优化(分层,requestAnimationFrame)、绘制对象的各种继承关系。

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

阅读源码其实没有想象那么难,文章内容:

  • Vue2 源码 shared 模块中的几十个实用工具函数;
  • 如何学习源码中优秀代码和思想,投入到自己的项目中;
  • 如何学习 JavaScript 基础知识,会推荐很多学习资料

简单、好懂的Svelte实现原理

本文围绕一张流程图和两个Demo 讲解,细致拆解 Svelte 编译、运行、状态更新等核心逻辑。