关于我,关于本站的一些碎碎念
正常人,有头发,不穿格子衫 本科材料,半路出家的 Web 程序员 自顶向下生长的开发技能树 最近想要学习算法和 Android 开发 会弹吉他,但是完全看不懂五线谱 想把头发染成蓝色的,但是被价格劝退 steam 喜加一党,开放世界游戏党,Minecraft 挖矿平地爱好者,被铁拳锤爆的退坑安娜玩 ...
Read more
Fiber 协调算法
组件树与树的递归遍历 在传统的 React 处理中,组件是以树的形式存在的,这是很符合直觉的。例如对于这样的一段 JSX 代码: 123456789<App> <List> <Item></Item> </List> < ...
Read more
Styled Component
难以隔离的 CSS 你可能已经知道了,CSS 样式的应用是基于选择器的。例如如下代码: 123div { // ...} 会为 div 元素应用一段 CSS 代码。但显而易见的是,这种设计会导致不可避免的问题——冲突。 事实上,原生 CSS 无法提供模块隔离的特性。我们必 ...
Read more
当我们谈论前端测试时,我们谈些什么
测试,以及前端测试 一般地说,测试的目的是为了保证代码如 预期 那样运行。 在一些特定场景下,我们会将测试提升到较为重要的地位,先编写能描述功能的测试,再编写具体代码,也就是我们所称的 TDD 。 但具体地说,编写测试的时机并不重要,重要的是测试代码应当覆盖重要逻辑的核心流程,这对代码质量是非常重 ...
Read more
React 学习笔记(二)
渲染调度的意义 如果你阅读过 The deepest reason why modern JavaScript frameworks exist 这篇文章,你就会知道,现代前端框架存在的意义就是将 state 与 UI 那繁琐的同步工作抽象出来,让开发者得以将注意力放在数据流的处理上。尽管在数据流 ...
Read more
React 学习笔记(一)
React 设计思想 如果想要理解一个新框架,搞清楚其所解决的问题和解决思路是第一步。只要把握住了这一点,就能很容易理解那些看起来很奇怪的 API 设计。 如果你像笔者一样,之前有 Vue 的使用经验,就更应该注意到这一点。因为这两个框架虽然都在解决相同的问题,但其解决思路确实大不相同的,甚至在一 ...
Read more
TypeScript 性能手册
本文是对 TypeScript Performance 的翻译。因为有些句子在英文表达中很清晰,但直译却会变得晦涩难懂,所以部分句子选择了意译。 有一些简单的方式来配置 TypeScript,从而获得更快的编译速度和更好的编程体验。越早采用这些实践越好。在最佳实践之前,这里有一些常见的技术,用于 ...
Read more
Vue3 源码阅读笔记(六)—— nextTick 与调度器

简述

尽管我们可以从逻辑上简单的将 Vue 的实现拆分为:响应式系统和渲染器。因为现代前端框架所关注的问题就是如何同步 stateUI

但在实际工程中,UI 的渲染并不是一次性的。根据数据的变化,它是会随之不断变化的。从理论上来说,我们可以对数据的变化应收尽收。也就是说,只要 state 发生了变化,我们就去更新 UI。这种罗永浩式不管不顾的做法尽管也不是不能用,但却会大大降低渲染更新的速度。所以我们就需要一种机制,来控制渲染。

任何逻辑只要足够通用、足够复杂,就有价值抽象出来单独研究。

另外的,调度器与调度策略是一个很复杂的问题。在操作系统设计中,你可能看到过很多精妙的设计与研究。这里我们并不打算过于深入这个主题,而是恰到好处的阐述,来完成我们的工程目标。

Read more
浏览器与 Event Loop

引子

如果你使用 JavaScriptTypeScript 开发,那你就不能不去了解运行它们的环境。我们可以笼统的将运行环境区分为浏览器和 Node.js。在这篇文章,我们的讨论范围仅限于浏览器中。

一个在展开讨论前的必要信息是:JavaScript 是一个单线程语言。这意味着在任何时候,都只能有一个主线程来处理任务。事实上这个设计不能怪 Brendan Eich,JavaScript 语言的设计者。他当年捣鼓这个东西的时候,也没有想到互联网能发展成今天这个样子。

如果我们考虑单线程这件事,我们会意识到,这个设计会带来灾难性的后果。比如用户在网站上发起了一个网络请求,这个网络请求所需要的时间可能长达几秒,在这期间,整个网站的渲染线程是被挂起的,从用户的角度来看,网站就像卡住了。这种浏览体验可能是所有用户都不愿意见到的。

说到这,你可能会想:不对啊,我平常上网怎么没遇到过这种情况?的确没有,这就要归功于 Event Loop 了。
简单来说,Event Loop 这个设计,使得浏览器可以将 JavaScript 代码中 同步异步 任务区分开。这种设计是有重大意义的。这使得浏览器可以在处理诸如网络请求这种高延时工作的时候,依然可以为用户提供流畅的渲染体验。

Read more
二叉树的遍历
简述 二叉树的遍历是解 leetcode 树类型题目的基础。搞清楚每一种遍历的细节和复杂度是解题的关键。 leetcode 上有很多相关的题目,但题解却经常只关注唯一的一道题。比如后序遍历就是利用稍微修改后的前序遍历倒置解出的,思路很巧妙,但是这种方法不具有普适性,无法解答其他与后序遍历相关的题目 ...
Read more