HOME

你需要设计一个序列化：将二叉树转换为字符串 / 反序列化：将字符串还原成二叉树的算法。题目对于序列化的格式没有限制，你只需要设计一个算法可以把二叉树序列化，然后反序列化构建出原本的二叉树即可。

使用浏览器打开一个网页，你会发现有一部分网页资源在加载完之前会阻塞浏览器的渲染进程，还有一部分网页资源可以被异步加载。前端开发时你偶尔会遇到这些问题：资源下载速度缓慢？首屏等待多余的文件下载和初始化？未应用 CSS 的内容一闪而过（flash of unstyled content，FOUC）？要避免它们，开发一个用户体验优秀的网站，你需要的是理解浏览器渲染网页的逻辑与顺序。

当浏览器发送请求到服务器以获取 HTML，服务器用二进制流（binary stream）形式返回 HTML 的文本内容，在响应中，服务器将 header 部分的 Content-Type 属性的值设置为 text/html; charset=UTF-8。其中 text/html 部分告诉浏览器响应数据是一份 HTML 文本；charset=UTF-8 部分告诉浏览器响应数据使用的字符集。有了这些信息，浏览器就可以正常的解析 HTML 标签并对网页进行渲染了。相反，如果响应的 header 部分中缺少了 Content-Type 属性，浏览器会因为缺少对响应数据的描述信息而将其数据以纯文本的方式展现给用户。

浏览器要渲染的网页主体由 HTML 文本构成，通常有额外的 CSS 文件提供样式，有 JS 文件提供脚本操作。不过浏览器到底是如何从一堆文本信息中知道如何渲染一个网页？讨论这件事情之前，我们需要理解什么是 DOM、CSSOM 和 Render Tree。

你有一棵二叉树，给你 2 个节点，让你寻找它们的最近公共祖先节点。根据 Wiki 描述最近公共祖先的定义如下。

在图论和计算机科学中，最近公共祖先（英語：lowest common ancestor）是指在一个树或者有向无环图中同时拥有 v 和 w 作为后代的最深的节点。在这里，我们定义一个节点也是其自己的后代，因此如果 v 是 w 的后代，那么 w 就是 v 和 w 的最近公共祖先。

最近公共祖先是两个节点所有公共祖先中离根节点最远的，计算最近公共祖先和根节点的长度往往是有用的。比如为了计算树中两个节点 v 和 w 之间的距离，可以使用以下方法：分别计算由 v 到根节点和 w 到根节点的距离，两者之和减去最近公共祖先到根节点的距离的两倍即可得到 v 到 w 的距离。

节点本身可以是自己的后代，也就是说对于要寻找的节点 A 和 B，如果节点 B 是节点 A 的子节点，那么它们的最近公共祖先节点是节点 A。

在 No.116 中我们解决了在完全二叉树的情况下将每一层的节点向右关联的需求，这道题需要解决同样的需求，但是 input 不再确保是完全二叉树了。也就是说，当前节点可能不存在左节点、右节点或者左右节点都不存在，它的相邻节点也是一样，甚至所谓“相邻”其实也隔了好几个分支。

我们需要加入更多条件分歧来解决这道题。

你需要给一棵完全二叉树的每个一节点添加一个 next 指针，指向同一层的右边一个节点。

题目中完全二叉树的定义：所有叶子节点都在同一层，除了叶子节点外所有节点都拥有左右子节点，节点的数据结构如下：

struct Node {
  int val;
  Node *left;
  Node *right;
  Node *next;
}

目标是给所有节点的 next 赋值，如果不存在则为空，默认为空。

No.106 的镜像问题。你需要从一棵树的前序遍历数据和中序遍历数据中尝试重新构建出这棵二叉树。

之前我们尝试基于中序遍历和后序遍历的数据来还原这棵树，这次是前序遍历和中序遍历。

其中区别在于遍历结果中根节点是在开始还是在结束，我们可以应用相同的思路来解决这道题，注意处理顺序的细微差别。

你需要从一棵树的中序遍历数据和后序遍历数据中尝试重新构建出这棵二叉树。

要从树的遍历结果逆向还原这棵树，扁平的 1D 数组的信息量是不够的，但是如果有两个不同的遍历结果做参考，我们可以根据树的遍历过程进行逆向操作。

这道题是使用已知的中序遍历和后序遍历的结果来尝试逆向遍历树的过程。

CSS 过渡属性提供了一种方式给 CSS 属性变化添加过渡动画，过程中属性值的变化是由浏览器所决定，所以其过程也被叫做隐式过渡（implicit transitions）。也因其由浏览器原生实现，所以通常有更好的性能，但是在灵活性上有其局限。

使用场景上，单纯的鼠标悬浮、选中和失去焦点等情况的过渡动画中 CSS 过渡属性是首选；但是当涉及到时间轴动画、稍复杂的补间动画时，应该选择 GSAP 之类的成熟的 JavaScript 动画库才合适。

这里有一个可以使用过渡效果的属性列表，对于可添加过渡效果的属性有 2 点需要注意：

1. 可以使用过渡效果的属性列表会发生变化，因为 transitions 的规格还没有定版；
2. 对于变化前，或变化后的属性为 auto 的情况，规格建议不做过渡效果，但是每个浏览器对其采取不同处理，所以为了保证效果一致性，我们应该避免对 auto 添加过渡效果。

div {
  transition: all 0.25s ease;
  transform: translate(50px) rotate(30deg);
}

二叉树问题。求是否存在和目标值一致的路径和。

路径和指的是从根节点到叶子节点的路径的值相加的结果。

看上去这道题适合 DFS 一条路径一条路径的遍历解决。

检查给定的二叉树是否对称。如果 root 的左右子树互为镜像，那么这棵树是一棵对称树。

这道题实际上需要我们同时遍历两棵树，来判断它们是否对称。

我们尝试从递归、迭代以及 DFS 和 BFS 等角度来尝试解决这道题。