译文：One Thing Nobody Explained To You About TypeScript

我已经使用 TypeScript 超过四年了，总的来说，这是一次非常棒的体验。随着时间的推移，使用它的摩擦逐渐减少，直到完全消失，这使得我在编写类型或以类型优先的方式解决问题时变得更加高效。虽然我还远未成为真正的类型大师，但我敢说自己已经熟练掌握了这门语言，经历了类型体操、条件类型、嵌套泛型，并深刻理解了 type 和 interface 之间的神圣差异。说实话，我认为我对这门语言已经有了相当不错的理解。

直到我发现我错了。其实，有一个关于 TypeScript 的特定问题我完全理解错了，我相信你也可能犯过同样的错误。而这并不是某个你从未听说过、可能永远不会用到的复杂边缘案例。恰恰相反，这是你和其他所有 TypeScript 开发者直接交互过数百次的东西，一直在我们眼前游弋。

# 什么是浏览器缓存

浏览器缓存（Brower Caching）是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。

浏览器缓存的优点有：

1. 减少了冗余的数据传输，节省了网费

2. 减少了服务器的负担，大大提升了网站的性能

3. 加快了客户端加载网页的速度

# 几个概念

1. DOM：Document Object Model，浏览器将 HTML 解析成树形的数据结构，简称 DOM。

2. CSSOM：CSS Object Model，浏览器将 CSS 代码解析成树形的数据结构。

3. DOM 和 CSSOM 都是以 Bytes → characters → tokens →nodes → object model.这样的方式生成最终的数据。如下图所示：

   

   DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

4. Render Tree：DOM 和 CSSOM 合并后生成 Render Tree，如下图：

   Render Tree 和 DOM 一样，以多叉树的形式保存了每个节点的 css 属性、节点本身属性、以及节点的孩子节点。

   

   注意：display:none 的节点不会被加入 Render Tree，而 visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为 display:none 是更优的。