1. 总述 1 DIFF 算法在执行时有三个维度，分别是 Tree DIFF、Component DIFF 和 Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为 DIFF 粒度不同、执行先后顺序不同。 2. 过程 Tree DIFF 是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。如图所示，左边是旧属，右边是新属，第一层是 ...

1. JS 操作真实 DOM 的代价 ​ 用我们传统的开发模式，原生 JS 或 JQ 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次 操作中，我需要更新 10 个 DOM 节点，浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作，因此会马上执行 流程，最终执行 10 次。 例如，第一次计算完，紧接着下一个 DOM...

Web 界面由 DOM 树来构成，当其中某一部分发生变化时，其实就是对应的某个 DOM 节点发生了变化。 在 React 中，构建 UI 界面的思路是由当前状态决定界面。 前后两个状态就对应两套界面，然后由 React 来比较两个界面的区别，这就需要对 DOM 树进行 Diff 算法分析。即给定任意两棵树，找到最少的转换步骤。 但是标准的的 Diff ...

[[toc]] 1. Web 前后端整体示意图 01_web前后端整体图示 2. 浏览器功能与组成 2.1 浏览器应该具备的功能 1. 网络 浏览器通过网络模块来下载各式各样的资源，如 html 文本；javascript 代码；样式表；图片；音视频文件等。 网络部分本质上十分重要，因为它耗时长，而且需要安全访问互联网上的资源。 2. 资源管理 ​ 从...