sophie旭

背景 先说一个最近困扰我的一件偶发问题，现象是，用户开机打开我们软件的h5页面，进行扫码支付，会有偶发的付款码缺失问题，但是开机一个小时左右，就不会有问题了 下面看下我们 ...

为什么需要打包 CommonJS 前模块化时代的困境 CommonJS 规范的出现解决了服务器端 JavaScript 的模块化需求： 核心目标：让 JavaScript ...

内存管理 深入解析自动内存管理与垃圾回收机制 一、手动内存管理的困境 典型问题示例： ➤ 双重风险：忘记释放导致内存泄漏；错误释放导致程序崩溃 二、自动内存管理机制 1. ...

事件循环机制 一、JavaScript 引擎的本质 核心职责： 解析 JavaScript 语法 管理变量和内存 执行代码逻辑 不涉及： 线程管理（Worker除外） I/...

终于来到浏览器加载html并渲染阶段了 第一次渲染时都发生了什么 生成DOM树 一、HTML 解析与 DOM 树生成流程 1. 流式解析（Incremental Parsi...

终于跨过 TCP，我们来到 发送http请求，响应阶段 TTFB 所谓 TTFB 就是 responseStart- requestStart 一、TTFB的“真面目”与技...

还记得 一道面试题，开始性能优化之旅（3）-- DNS查询 +TCP（一） 里面我们提到过 TCP的耗时吗？ 对，是至少1RTT 优化手段里我们提到 复用连接，今天我们就由...

接上篇，还是这张图 我们看到最后有一个 SSL Negotiation的耗时，这个又是什么呢？ 接下来我就来聚焦 SSL流程，以及 HTTPS协议的意义 HTTP协议的 安...

上图！ 本篇开始我们来聊聊 DNS + TCP（TCP+ TLS），其实前端在这些个阶段能做的不多，但是 他们却与前端页面的性能的关系深远，如下图， DNS 将域名解析为 ...

还是熟悉的图片 这篇我们来聚焦 App Cache 就像 我们手机的任何一款app都有缓存数据一样，浏览器也有， 浏览器优先检查‌应用缓存（App cache） ‌ 和‌H...

十一闲来无事，最近看了一本关于前端性能的书，而真的看懂一本书的标准就是能用自己的话说明白书中的知识，所以我想来总结一下，但是性能优化又是一个庞杂的话题，该如何说起呢？直到我...

Hooks 初始化 知道了执行函数组件的函数，以及不同的 Hooks 对象之后，我们看一下在组件初始化的时候， Hooks 的处理逻辑，Hooks 初始化流程使用的是 mo...

renderWithHooks 所有函数组件的触发是在 renderWithHooks 方法中，前面讲过在 fiber 调和过程中，遇到 Function Componen...

Hooks 是什么？Hooks 是函数组件对应的 fiber 之间的沟通桥梁 关键点分析： 函数组件没有实例：类组件通过this访问实例属性（state、context等）...

进入调度 scheduleCallback 首先上一下 流程图， 我们还是将同步任务和异步任务分开讲解 一、同步更新的流程（isSync 分支） 同步更新是指‌立即执行‌的...

这一节，作者分别介绍了legacy模式和Concurrent模式下的更新流程，首先科普一下 这两种模式。 Legacy 模式和 Concurrent 模式 Legacy 模...

【学习目标】 看懂下面代码的执行顺序： 猜到打印顺序了吗？ 这段打印结果反应了两个问题 第一， useInsertionEffect，useLayoutEffect，use...

让我们再回顾一下performUnitOfWork 的过程 performUnitOfWork 是什么来着？他是调和每一个 workInProgress fiber的入口，...

10.1我们提到 renderRootSync 是调和过程中的渲染阶段，下面来详细讲解一下 fiber更新循环 workLoop 来看函数体： 首先我们来解释下本文最重要的...

背景 最近在看《深入浅出react开发指南》，这是我接触react以来第二次看，第一次看的时候，基本上是不知所云，那因为最近在恶补 react原理，又捡起来了，才发现真是宝...