浏览器加载过程
- DNS 域名解析
客户端收到输入的域名地址后，首先去找本地的hosts文件是否有相应的域名、IP对应关系，如果有，则向其IP地址发送请求，如果没有，再去找DNS服务器。
- 建立 TCP 连接
- 浏览器解析HTML
- 发送 HTTP 请求
- 服务器处理请求
- 返回响应结果
- 关闭 TCP 连接
- 构建 DOM 树
浏览器会遍历 HTML 文档节点，生成 DOM Tree。
遇到
<script>标签的时候，会立即解析 script 停止解析文档。如果脚本是外部的，会等待脚本下载完毕，再继续解析文档。现在可以在script标签上增加属性defer或者async，强行跳过html渲染完成之后再加载。脚本解析会将脚本中改变DOM和CSS的地方分别解析出来，追加到DOM Tree和Style Rules上- 构建 CSSOM 树
浏览器的CSS Parser将CSS解析成Style Rules，Style Rules也叫CSSOM（CSS Object Model）。
StyleRules也是一个树形结构，根据CSS文件整理出来的类似DOM Tree的树形结构。CSS的渲染和HTML渲染是同步进行的，所以越快加载出来越好，上面的金科玉律后一半就是css放在页面顶部。
- 构建渲染树 Render Tree
- 从DOM树的根节点开始遍历每个可见节点。
- 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
- 根据每个可见节点以及其对应的样式，组合生成渲染树。
- 一些不会渲染输出的节点，比如script、meta、link等。
- 一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。
不可见节点包括：
- 回流
通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，这个计算过程就是回流。
- 绘制
将渲染树和回流阶段得到的可见节点样式和具体的几何信息转换为屏幕上的实际像素。
- 创建 window 对象
- 加载文件
分析 JS 词法是否合法。
- 预编译
JS 是解释型语言，会在执行前进行预编译，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为'undefined'；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。
- 解释执行
TypeScript 中 interface 和 type 的区别
- interface 一般用来描述和检查对象的数据结构
- 类型合并
- 可以extends 或被 implements
- type 只是类型的引用，可以使用一些操作来简化类型
- 声明基本类型的别名
- 声明联合类型
- 声明元组
- 使用 typeof 获取实例类型
面向对象设计思想
- 封装、继承、多态。
- 优先考虑组合而不是继承
- 单一职责原则
只有逻辑足够简单，才可以在代码级别上违反单一职责原则；只有类中方法数量足够少，才可以在方法级别上违反单一职责原则
- 里式替换原则
如果子类需要的方法，最好作为抽象让子类实现而不是覆写，否则可能影响到使用该方法的其他子类。
- 开闭原则
对于拓展要开放，对于修改要封闭。
- 迪米特法则（最少了解法则）
- 在类的划分上，应该创建弱耦合的类。类与类之间的耦合越弱，就越有利于实现可复用的目标。
- 在类的结构设计上，尽量降低类成员的访问权限。
- 在类的设计上，优先考虑将一个类设置成不变类。
- 在对其他类的引用上，将引用其他对象的次数降到最低。
- 不暴露类的属性成员，而应该提供相应的访问器（set 和 get 方法）。
- 谨慎使用序列化（Serializable）功能。
- 依赖倒置原则
不依赖具体的类，而是依赖抽象。
- 接口是对行为的抽象 抽象类是对事务的抽象
- 简单工厂模式