全局状态管理插件设计的核心思想都可以概括成：不能随意的去修改状态（state）。因此我们通常需要一个 action 来统一 modify 我们的 state。
MobX 也是基于这种思想设计的，它具有：

• 定义状态并使其可观察 （observable）
• 创建视图以响应状态的变化（observer、computed）
• 更改状态（action）

Function 组件里使用

由于 React Hooks 的出现，以及注解的不稳定性。在 6.x 中，MobX 升级了它的使用方法。
这里我们以 makeAutoObservable 的 Store 设计为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export class Store6_makeAutoObservable {
  readonly base = 5;
  MCount = 0;

  constructor() {
    makeAutoObservable(this);
  }

  setMCount() {
    this.MCount++;
  }

  get total() {
    return this.MCount * this.base;
  }
}

export default new Store6;

然后在函数组件里，我们需要使用 observer 函数来替代注解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { observer } from "mobx-react";
import store6 from "@/store";

export const MobXFunc: React.FC = observer(() => {
  return (
    <div>
           
      <button
        onClick={() => {
          store6.setMCount();
        }}
      >
               count++      
      </button>
           <span> Count {store6.MCount} </span>     
      <span> Base {store6.base} </span>     <span> Total {store6.total} </span> 
       
    </div>
  );
});

MobX + Hooks 写法

为了更好的结合 Hooks 语法，Mobx 在 6.x 中也提供了 2 个新的 API:

useLocalStore（Hooks 环境下的 observable）

1

const store = useLocalStore(() => ({ key: "value" }));

等价于

1

const [store] = useState(() => observable({ key: "value" }));

为 Hooks 解决了 依赖传递 和 缓存雪崩 的问题。

useObserver

Mobx 使组件响应数据状态的变化主要有以下三种方式：

• @observer
  • 给类组件提供 pure component 的能力，将组件的 props 和 state 转换为 observable 态，响应数据变化
  • 不推荐在 Hooks 中使用
• observer 方法
• Component：Observer（Mobx 6 中已经基于 useObserver 来实现了）
• Hooks：useObserver

还是以 makeAutoObservable 的 Store 设计为例，这里就不展示了。

我们在函数组件里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import React from "react";
import { Observer, useLocalObservable, useObserver } from "mobx-react";
import { store6_auto as store6 } from "@/store";

export const MobXHook: React.FC = () => {
  const store = useLocalObservable(() => store6);
  return useObserver(() => (
    <div>
           
      <button
        onClick={() => {
          store.setMCount();
        }}
      >
               count++      
      </button>
           <span> Count {store.MCount} </span>     
      <span> Base {store.base} </span>     <span> Total {store.total} </span>   
    </div>
  ));
};

// 或者
export const MobXHook: React.FC = () => {
  const store = useLocalObservable(() => store6);
  return (
    <Observer>
         {" "}
      {() => (
        <div>
                   
          <button
            onClick={() => {
              store.setMCount();
            }}
          >
                       count++          
          </button>
                   <span> Count {store.MCount} </span>         
          <span> Base {store.base} </span>         <span>
            {" "}
            Total {store.total}{" "}
          </span>       
        </div>
      )}
         
    </Observer>
  );
};

同时，useLocalObservable 也可以用来创建一个新的 observable，并在组件的整个生命周期内将其保留在组件中（可以理解为组件级别的 observer）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const MouseEventListenerMobx: React.FC = (props) => {
  const state = useLocalStore(
    (target) => ({
      x: 0,
      y: 0,
      handler(e) {
        const nx = e.xxx;
        const ny = e.xxx;
        if (
          Math.abs(nx - state.x) >= target.size ||
          Math.abs(ny - state.y) >= target.size
        ) {
          state.x = nx;
          state.y = ny;
        }
      },
    }),
    props
  );

  useEffect(() => {
    document.addEventListener("mousemove", state.handler);
    return () => document.removeEventListener("mousemove", state.handler);
  }, []);

  return useObserver(() => props.children(state.x, state.y));
};

最终推荐方案

综上所述，在结尾给出最终推荐方案。
在 store 设计上，建议采用 makeAutoObservable 的写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export class Store6_makeAutoObservable {
  readonly base = 5;
  MCount = 0;

  constructor() {
    makeAutoObservable(this);
  }

  setMCount() {
    this.MCount++;
  }

  get total() {
    return this.MCount * this.base;
  }
}

export default new Store6();

在 store 使用上，建议采用 observer 函数包裹组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from "react";
import { observer } from "mobx-react";
import { store6_auto as store6 } from "@/store";

const MobXHook: React.FC = () => {
  const store = store6;
  return (
    <div>
           
      <button
        onClick={() => {
          store.setMCount();
        }}
      >
               count++      
      </button>
           <span> Count {store.MCount} </span>     
      <span> Base {store.base} </span>     <span> Total {store.total} </span>   
    </div>
  );
};

export default observer(MobXHook);

FC 就是 Function Component.也就是函数式组件.

不变的

函数式组件每一次渲染都会存储当前的状态,他是不变的.
每一次渲染都有自己的 pops 和 state,也有自己的事件处理函数.

1

<p>you click {count} times</p>

当我们更新状态时,React 会重新渲染组件.每一次渲染都能拿到独立的 count 状态,这个状态是函数中的一个常量.
任意一次渲染中的 count 常量都不会随着时间改变.渲染输出会变是因为我们的组件被一次次调用.
而每次调用引起的渲染中,它包含的 count 值独立于其他渲染.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function App() {
  const [count, setCount] = useState(0);

  const showMessage = () => {
    setTimeout(() => {
      alert("Now count: " + count);
    }, 3000);
  };

  return (
    <div>
           <p>You clicked {count} times</p>     <button
        onClick={() => setCount(count + 1)}
      >
        Click me
      </button>     <button onClick={showMessage}>Print</button>   
    </div>
  );
}

点击 Print 后,再点击 click,打印的是点击 Print 时的 count 值,因为 count 是独立的,拿到的是那时候的.

useEffect 的依赖项

依赖项里进行的比较是浅比较。

无限循环

什么可能会造成无限循环呢？

1. 没有依赖项
2. 依赖项是函数，对象，数组
3. 依赖项不正确

当依赖项是函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function App() {
  const [count, setCount] = useState(0);

  function logResult() {
    return 2 + 2;
  }
  useEffect(() => {
    setCount((count) => count + 1);
  }, [logResult]); // 函数作为依赖项
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

看上去，应该是只在第一次渲染时增加 count。实际上会报错。
因为，依赖项进行的是浅比较，每次 render 都会重新定义函数的引用。就会触发 useEffect 的更新，进入无限循环。

解决

使用 useCallback。

1
2
3
4
5
6

const logResult = useCallback(() => {
  return 2 + 2;
}, []);
useEffect(() => {
  setCount((count) => count + 1);
}, [logResult]);

当依赖项是对象

1
2
3
4
5
6
7
8
9
10
11
12

const [count, setCount] = useState(0);
const person = { name: "Rue", age: 17 }; //创建一个对象
useEffect(() => {
  // 每次增加count的值
  // person的值发生了变化
  setCount((count) => count + 1);
}, [person]); // 依赖项数组包含一个对象作为参数
return (
  <div className="App">
    <p> Value of {count} </p>
  </div>
);

同样和依赖项是函数一样，依赖项是对象也因为浅比较，每次 render 都重新得到一个新的对象，出现无限循环的问题。

解决

使用 useMemo，确保对象在每次渲染期间不会改变；

1
2
3
4

const person = useMemo(() => ({ name: "Tom", age: 10 }), []);
useEffect(() => {
  setCount((count) => count + 1);
}, [count]);

疑问： 如果是 useState 保存的对象作为依赖，该如何处理？

当依赖项是数组

1
2
3
4
5
6

const [count, setCount] = useState(0); //初始值为0。
const myArray = ["one", "two", "three"];

useEffect(() => {
  setCount((count) => count + 1); // 和前面一样，增加Count的值
}, [myArray]); // 将数组变量传递给依赖项

无限循环的原因与上面无异

解决

使用 useRef。

1
2
3
4
5
6

const [count, setCount] = useState(0);
const { current: myArrray } = useRef(["one", "two", "three"]);

useEffect(() => {
  setCount((count) => count + 1);
}, [myArray]);

注意

无限循环问题是在 useEffect 中 setState 了新值导致的，在其他地方是不会无限循环的。

Option 1 - 依赖于对象属性

在这个例子中，当前组件会从 props 获取一个对象，并在 useEffect 的依赖数组中使用这个对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import React, { useState, useEffect } from "react";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ team }) => {
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    if (team.active) {
      getPlayers(team.id).then(setPlayers);
    }
  }, [team]);

  return <Players team={team} players={players} />;
};

理想情况下，props 传入的 team 的内容是一样的话，其内存地址也会相同。但这其实是无法保证的。

所以，为了解决这个问题，我们可以只使用 team 对象里的一些属性，而不是使用整个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import React, { useState, useEffect } from "react";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ team }) => {
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    if (team.active) {
      getPlayers(team.id).then(setPlayers);
    }
  }, [team.id, team.active]);

  return <Players team={team} players={players} />;
};

假设 team 对象中的 id 和 active 属性都是基本数据类型，effect 就只会在 id 或者 active 属性发生变化的时候执行（注意是或，不是且）。

team 对象如果是在组件内被创建的话也能够起到作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React, { useState, useEffect } from "react";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ id, name, active }) => {
  // construct the object from props and/or state
  const team = { id, name, active };
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    if (team.active) {
      getPlayers(team.id).then(setPlayers);
    }
  }, [team.id, team.active]);

  return <Players team={team} players={players} />;
};

所以，即使 team 对象在每次渲染过程中都重新被创建，也不会导致 effect 每次渲染都会执行，因为 useEffect 只依赖于 id 和 active 属性。

需要注意的是，这个方案不适用于依赖元素为数组的情况。

Option2 - 在内部创建对象

在上一个例子中，如果 effect 不是使用对象里的元素，而是以整个对象作为依赖会发生什么呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React, { useState, useEffect } from "react";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ id, name, active }) => {
  // construct the object from props/state
  const team = { id, name, active };
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    if (team.active) {
      getPlayers(team).then(setPlayers);
    }
  }, [team]);

  return <Players team={team} players={players} />;
};

team 对象是在每次渲染下重新创建的，所以 useEffect 在每次重新渲染时都会执行。

幸运的是，react-hooks/exhaustive-depsESLint rule 提示道：

在我们使用 ESLint 推荐的使用 useMemo Hook 之前，我们可以尝试更加简单的操作。我们可以尝试两次创建 team 对象，一个用于传递给 Player 子组件，一个用于 useEffect 内部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React, { useState, useEffect } from "react";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ id, name, active }) => {
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    // recreate the `team` object within `useEffect`
    // from props/state
    const team = { id, name, active };

    if (team.active) {
      getPlayers(team).then(setPlayers);
    }
  }, [id, name, active]);

  const team = { id, name, active };

  return <Players team={team} players={players} />;
};

现在 team 对象是在 useEffect 内部被创建，并且只在 effect 要被执行的时候被创建。id、name、active 作为依赖，只有当这些值发生变化的时候 effect 才会执行。

创建对象相对来说开销是比较小的，所以在 useEffect 中重新创建一个 team 对象是可以接受的。
优化 useEffect 所带来的性能提升远远大于创建两个对象所带来的性能损耗。

Option3 - 记忆对象

然而，如果创建对象或数组的开销是昂贵的，那重复创建对象就会比执行多次 effect 更糟糕。在这种情况下，我们需要“缓存”创建的对象或数组，这样当其中的数据没有发生变化时，这个对象或数组就不会在渲染过程中发生变化。这个过程称为“记忆”（memoization），我们通过 useMemo 来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React, { useState, useEffect, useMemo } from "react";
import { createTeam } from "../utils";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ id, name, active }) => {
  // memoize calling `createTeam` because it's
  // an expensive operation
  const team = useMemo(
    () => createTeam({ id, name, active }),
    [id, name, active]
  );
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    if (team.active) {
      getPlayers(team).then(setPlayers);
    }
  }, [team]);

  return <Players team={team} players={players} />;
};

假设这个 createTeam()方法开销昂贵，那我们自然会希望它执行的次数越少越好。useMemo Hook 可以实现只有在 id、name 或者 active 在渲染过程中发生变化时，才会再次创建 team。但如果在 Team 组件重新渲染过程中，以上属性没有一个发生变化，team 对象就会是同一个对象。因为是同一个对象，我们就可以放心地使用 useEffect，不用担心会执行不必要的次数。

Option 4 - 自己创建

如果以上方案都无法解决问题怎么办？比如从 props 中传入了对象或者数组，这个对象或数组会成为 useEffect 的依赖数组元素，而且我们并不知道创建一个新的 team 对象所需的属性。但我们还是想要实现在组件渲染过程中“缓存”这个对象的值。

在这种情况下，我们可以使用 useRef Hook 替代 useMemo Hook。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React, { useState, useEffect, useRef } from "react";
import isDeepEqual from "fast-deep-equal/react";
import { getPlayers } from "../api";
import Players from "../components/Players";

const Team = ({ team }) => {
  const [players, setPlayers] = useState([]);
  const teamRef = useRef(team);

  if (!isDeepEqual(teamRef.current, team)) {
    teamRef.current = team;
  }

  useEffect(() => {
    if (team.active) {
      getPlayers(team).then(setPlayers);
    }
  }, [teamRef.current]);

  return <Players team={team} players={players} />;
};

这里使用了 isDeepEqual 来判断 teamRef.current 和 team 的值是否一致，而不是比较两者的内存地址。所以，即使在每次渲染过程中 team 对象是一个新的对象，如果它的内容是一致的，isDeepEqual()也会返回 true。

所以当两者在做深比较的时候，如果内容一致，isDeepEqual 会返回 true，teamRef.current 会继续指向原本 team 对象的内存地址。那依赖数组里的元素 teamRef.current 就没有发生变化，useEffect 也不会再执行。如果 isDeepEqual 返回 false，teamRef.current 就会被赋予新的 team 值，effect 就会执行。

如果你发现自己遇到了 Option4 这样的情况，我建议安装 react-usenpm 包，使用其中的 useDeepCompareEffect Hook 来解决问题，还能够避免 react-hooks/exhaustive-depslint rule 报错。

总结

大多数情况下，我能用 Option1 来解决问题。如果 Option1 无法解决，我就会使用 react-use 包里的 helper Hook 来解决问题。

多次调用同一个 setState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function App() {
  const [num, setNum] = React.useState(0); // 声明一个变量 num

  const add = () => {
    setNum(num + 1);
    console.log(num);
    setNum(num + 2);
    console.log(num);
  };

  return (
    <div>
      <div>{num}</div>
      <button onClick={add}>加1</button>
    </div>
  );
}

这样只会计算最后一个 setNum。
如果想依赖上一次的可以使用函数写法。

1
2
3
4
5

const add = () => {
  setNum((n) => n + 1);
  // 一些操作
  setNum((n) => n + 2);
};

这种写法是传入的就不是直接的值，而是一个 function，它接受前面的 state，我们可以根据这个 stat 来做一些处理以后，再返回一个 state。
所以我们这里调用完以后，页面上就会成功显示加 3 后的结果了。（但是一定要记住我说的：生效的只会是最后一个setState，如果你在最后仍写的是setNum(x)，最后都会以 x 的值作为渲染）

React 面试专题

React.js 是 MVVM 框架吗?

React 就是 Facebook 的一个开源 JS 框架，专注的层面为 View 层，不包括数据访问层或者那种 Hash 路由（不过 React 有插件支持），与 Angularjs，Emberjs 等大而全的框架不同，React 专注的中心是 Component，即组件。React 认为一切页面元素都可以抽象成组件，比如一个表单，或者表单中的某一项。

React 可以作为 MVVM 中第二个 V，也就是 View，但是并不是 MVVM 框架。MVVM 一个最显著的特征：双向绑定。React 没有这个，它是单向数据绑定的。React 是一个单向数据流的库，状态驱动视图。react 整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在 react 中，是单向数据流，推崇结合 immutable 来实现数据不可变。

hooks 用过吗？聊聊 react 中 class 组件和函数组件的区别

类组件是使用 ES6 的 class  来定义的组件。 函数组件是接收一个单一的  props  对象并返回一个 React 元素。

关于 React 的两套 API（类（class）API 和基于函数的钩子（hooks） API）。官方推荐使用钩子（函数），而不是类。因为钩子更简洁，代码量少，用起来比较”轻”，而类比较”重”。而且，钩子是函数，更符合 React 函数式的本质。

函数一般来说，只应该做一件事，就是返回一个值。 如果你有多个操作，每个操作应该写成一个单独的函数。而且，数据的状态应该与操作方法分离。根据函数这种理念，React 的函数组件只应该做一件事情：返回组件的 HTML 代码，而没有其他的功能。函数的返回结果只依赖于它的参数。不改变函数体外部数据、函数执行过程里面没有副作用。

类（class）是数据和逻辑的封装。 也就是说，组件的状态和操作方法是封装在一起的。如果选择了类的写法，就应该把相关的数据和操作，都写在同一个 class 里面。

类组件的缺点 :

大型组件很难拆分和重构，也很难测试。
业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
组件类引入了复杂的编程模式，比如 render props 和高阶组件。
难以理解的 class，理解 JavaScript 中  this  的工作方式。

区别：

函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。

1.状态的有无
hooks 出现之前，函数组件没有实例，没有生命周期，没有state，没有this，所以我们称函数组件为无状态组件。 hooks 出现之前，react 中的函数组件通常只考虑负责 UI 的渲染，没有自身的状态没有业务逻辑代码，是一个纯函数。它的输出只由参数 props 决定，不受其他任何因素影响。

2.调用方式的不同
函数组件重新渲染，将重新调用组件方法返回新的 react 元素。类组件重新渲染将 new 一个新的组件实例，然后调用 render 类方法返回 react 元素，这也说明为什么类组件中 this 是可变的。

3.因为调用方式不同，在函数组件使用中会出现问题
在操作中改变状态值，类组件可以获取最新的状态值，而函数组件则会按照顺序返回状态值

React Hooks（钩子的作用）

Hook  是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

React Hooks 的几个常用钩子:

1. useState() //状态钩子
2. useContext() //共享状态钩子
3. useReducer() //action 钩子
4. useEffect() //副作用钩子

还有几个不常见的大概的说下，后续会专门写篇文章描述下

• 1.useCallback 记忆函数
  一般把函数式组件理解为 class 组件 render 函数的语法糖，所以每次重新渲染的时候，函数式组件内部所有的代码都会重新执行一遍。而有了 useCallback 就不一样了，你可以通过 useCallback 获得一个记忆后的函数。

1
2
3
4
5
6

function App() {
  const memoizedHandleClick = useCallback(() => {
    console.log("Click happened");
  }, []); // 空数组代表无论什么情况下该函数都不会发生改变
  return <SomeComponent onClick={memoizedHandleClick}>Click Me</SomeComponent>;
}

第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。

• 2.useMemo 记忆组件
  useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。
  唯一的区别是：useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你。
  所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数计算得到一个确定的值，比如记忆组件。
• 3.useRef 保存引用值

useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用。useRef 返回的值传递给组件或者 DOM 的 ref 属性，就可以通过 ref.current 值访问组件或真实的 DOM 节点，重点是组件也是可以访问到的，从而可以对 DOM 进行一些操作，比如监听事件等等。

• 4.useImperativeHandle 穿透 Ref

通过 useImperativeHandle 用于让父组件获取子组件内的索引

• 5.useLayoutEffect 同步执行副作用

大部分情况下，使用 useEffect 就可以帮我们处理组件的副作用，但是如果想要同步调用一些副作用，比如对 DOM 的操作，就需要使用 useLayoutEffect，useLayoutEffect 中的副作用会在 DOM 更新之后同步执行。

useEffect 和 useLayoutEffect 有什么区别：简单来说就是调用时机不同，useLayoutEffect 和原来 componentDidMount&componentDidUpdate 一致，在 react 完成 DOM 更新后马上同步调用的代码，会阻塞页面渲染。而 useEffect 是会在整个页面渲染完才会调用的代码。官方建议优先使用useEffect

React 组件通信方式

react 组件间通信常见的几种情况:

• 1. 父组件向子组件通信
• 2. 子组件向父组件通信
• 3. 跨级组件通信
• 4. 非嵌套关系的组件通信

1）父组件向子组件通信

父组件通过 props 向子组件传递需要的信息。父传子是在父组件中直接绑定一个正常的属性，这个属性就是指具体的值，在子组件中，用 props 就可以获取到这个值

1
2
3
4
5
6
7
8
9

// 子组件: Child
const Child = (props) => {
  return <p>{props.name}</p>;
};

// 父组件 Parent
const Parent = () => {
  return <Child name="京程一灯"></Child>;
};

2）子组件向父组件通信

props+回调的方式，使用公共组件进行状态提升。子传父是先在父组件上绑定属性设置为一个函数，当子组件需要给父组件传值的时候，则通过 props 调用该函数将参数传入到该函数当中，此时就可以在父组件中的函数中接收到该参数了，这个参数则为子组件传过来的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 子组件: Child
const Child = (props) => {
  const cb = (msg) => {
    return () => {
      props.callback(msg);
    };
  };
  return <button onClick={cb("京程一灯欢迎你!")}>京程一灯欢迎你</button>;
};

// 父组件 Parent
class Parent extends Component {
  callback(msg) {
    console.log(msg);
  }
  render() {
    return <Child callback={this.callback.bind(this)}></Child>;
  }
}

3）跨级组件通信

即父组件向子组件的子组件通信，向更深层子组件通信。

• 使用 props，利用中间组件层层传递,但是如果父组件结构较深，那么中间每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是中间组件自己需要的。
• 使用 context，context 相当于一个大容器，我们可以把要通信的内容放在这个容器中，这样不管嵌套多深，都可以随意取用，对于跨越多层的全局数据可以使用 context 实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// context方式实现跨级组件通信
// Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据

const BatteryContext = createContext();

//  子组件的子组件
class GrandChild extends Component {
  render() {
    return (
      <BatteryContext.Consumer>
        {(color) => <h1 style={{ color: color }}>我是红色的:{color}</h1>}
      </BatteryContext.Consumer>
    );
  }
}

//  子组件
const Child = () => {
  return <GrandChild />;
};
// 父组件
class Parent extends Component {
  state = {
    color: "red",
  };
  render() {
    const { color } = this.state;
    return (
      <BatteryContext.Provider value={color}>
        <Child></Child>
      </BatteryContext.Provider>
    );
  }
}

4）非嵌套关系的组件通信

即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。

• 1. 可以使用自定义事件通信（发布订阅模式），使用 pubsub-js
• 2. 可以通过 redux 等进行全局状态管理
• 3. 如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。
• 4. 也可以 new 一个 Vue 的 EventBus,进行事件监听，一边执行监听，一边执行新增 VUE 的 eventBus 就是发布订阅模式，是可以在 React 中使用的;

setState 既存在异步情况也存在同步情况

1.异步情况 在React事件当中是异步操作

2.同步情况 如果是在setTimeout事件或者自定义的dom事件中，都是同步的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//setTimeout事件
import React, { Component } from "react";
class Count extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <>
        <p>count:{this.state.count}</p>
        <button onClick={this.btnAction}>增加</button>
      </>
    );
  }

  btnAction = () => {
    //不能直接修改state，需要通过setState进行修改
    //同步
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1,
      });
      console.log(this.state.count);
    });
  };
}

export default Count;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//自定义dom事件
import React, { Component } from "react";
class Count extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <>
        <p>count:{this.state.count}</p>
        <button id="btn">绑定点击事件</button>
      </>
    );
  }

  componentDidMount() {
    //自定义dom事件，也是同步修改
    document.querySelector("#btn").addEventListener("click", () => {
      this.setState({
        count: this.state.count + 1,
      });
      console.log(this.state.count);
    });
  }
}

export default Count;

生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

安装
当组件的实例被创建并插入到 DOM 中时，这些方法按以下顺序调用：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新中
更新可能由道具或状态的更改引起。当重新渲染组件时，这些方法按以下顺序调用：

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载
当组件从 DOM 中移除时调用此方法：

componentWillUnmount()

说一下 react-fiber

1）背景

react-fiber 产生的根本原因，是大量的同步计算任务阻塞了浏览器的 UI 渲染。默认情况下，JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中，他们之间是互斥的关系。如果 JS 运算持续占用主线程，页面就没法得到及时的更新。当我们调用setState更新页面的时候，React 会遍历应用的所有节点，计算出差异，然后再更新 UI。如果页面元素很多，整个过程占用的时机就可能超过 16 毫秒，就容易出现掉帧的现象。

2）实现原理

• react 内部运转分三层：
  • Virtual DOM 层，描述页面长什么样。
  • Reconciler 层，负责调用组件生命周期方法，进行 Diff 运算等。
  • Renderer 层，根据不同的平台，渲染出相应的页面，比较常见的是 ReactDOM 和 ReactNative。

Fiber 其实指的是一种数据结构，它可以用一个纯 JS 对象来表示：

1
2
3
4
5
6

const fiber = {
    stateNode,    // 节点实例
    child,        // 子节点
    sibling,      // 兄弟节点
    return,       // 父节点
}

• 为了实现不卡顿，就需要有一个调度器 (Scheduler) 来进行任务分配。优先级高的任务（如键盘输入）可以打断优先级低的任务（如 Diff）的执行，从而更快的生效。任务的优先级有六种：
  • synchronous，与之前的 Stack Reconciler 操作一样，同步执行
  • task，在 next tick 之前执行
  • animation，下一帧之前执行
  • high，在不久的将来立即执行
  • low，稍微延迟执行也没关系
  • offscreen，下一次 render 时或 scroll 时才执行
• Fiber Reconciler（react ）执行过程分为 2 个阶段：
  • 阶段一，生成 Fiber 树，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。阶段一可被打断的特性，让优先级更高的任务先执行，从框架层面大大降低了页面掉帧的概率。
  • 阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断。
• Fiber 树：React 在 render 第一次渲染时，会通过 React.createElement 创建一颗 Element 树，可以称之为 Virtual DOM Tree，由于要记录上下文信息，加入了 Fiber，每一个 Element 会对应一个 Fiber Node，将 Fiber Node 链接起来的结构成为 Fiber Tree。Fiber Tree 一个重要的特点是链表结构，将递归遍历编程循环遍历，然后配合 requestIdleCallback API, 实现任务拆分、中断与恢复。

从 Stack Reconciler 到 Fiber Reconciler，源码层面其实就是干了一件递归改循环的事情

传送门 ☞# 深入了解 Fiber

Portals

Portals 提供了一种一流的方式来将子组件渲染到存在于父组件的 DOM 层次结构之外的 DOM 节点中。结构不受外界的控制的情况下就可以使用 portals 进行创建
例如 模态框, 弹出的 loading

何时要使用异步组件？如和使用异步组件

• 加载大组件的时候
• 路由异步加载的时候

react 中要配合 Suspense 使用

1
2
3
4

// 异步懒加载
const Box = lazy(() => import("./components/Box"));
// 使用组件的时候要用suspense进行包裹
<Suspense fallback={<div>loading...</div>}>{show && <Box />}</Suspense>;

React 事件绑定原理

React 并不是将 click 事件绑在该 div 的真实 DOM 上，而是在document处监听所有支持的事件，当事件发生并冒泡至 document 处时，React 将事件内容封装并交由真正的处理函数运行。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。
另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。

React.lazy() 实现的原理

React 的懒加载示例：

1
2
3
4
5
6
7
8
9
10
11
12
13

import React, { Suspense } from "react";

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

React.lazy 原理

以下 React 源码基于 16.8.0 版本

React.lazy 的源码实现如下：

1
2
3
4
5
6
7
8
9
10
11

export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
  let lazyType = {
    $$typeof: REACT_LAZY_TYPE,
    _ctor: ctor,
    // React uses these fields to store the result.
    _status: -1,
    _result: null,
  };

  return lazyType;
}

可以看到其返回了一个 LazyComponent 对象。

而对于 LazyComponent 对象的解析：

1
2
3
4
5
6
7
8
9
10

case LazyComponent: {
  const elementType = workInProgress.elementType;
  return mountLazyComponent(
    current,
    workInProgress,
    elementType,
    updateExpirationTime,
    renderExpirationTime,
  );
}

1
2
3
4
5
6
7
8
9
10
11

function mountLazyComponent(
  _current,
  workInProgress,
  elementType,
  updateExpirationTime,
  renderExpirationTime,
) {
  ...
  let Component = readLazyComponentType(elementType);
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// Pending = 0, Resolved = 1, Rejected = 2
export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
  const status = lazyComponent._status;
  const result = lazyComponent._result;
  switch (status) {
    case Resolved: {
      const Component: T = result;
      return Component;
    }
    case Rejected: {
      const error: mixed = result;
      throw error;
    }
    case Pending: {
      const thenable: Thenable<T, mixed> = result;
      throw thenable;
    }
    default: {
      // lazyComponent 首次被渲染
      lazyComponent._status = Pending;
      const ctor = lazyComponent._ctor;
      const thenable = ctor();
      thenable.then(
        (moduleObject) => {
          if (lazyComponent._status === Pending) {
            const defaultExport = moduleObject.default;
            lazyComponent._status = Resolved;
            lazyComponent._result = defaultExport;
          }
        },
        (error) => {
          if (lazyComponent._status === Pending) {
            lazyComponent._status = Rejected;
            lazyComponent._result = error;
          }
        }
      );
      // Handle synchronous thenables.
      switch (lazyComponent._status) {
        case Resolved:
          return lazyComponent._result;
        case Rejected:
          throw lazyComponent._result;
      }
      lazyComponent._result = thenable;
      throw thenable;
    }
  }
}

注：如果 readLazyComponentType 函数多次处理同一个 lazyComponent，则可能进入 Pending、Rejected 等 case 中。

从上述代码中可以看出，对于最初 React.lazy() 所返回的 LazyComponent 对象，其 _status 默认是 -1，所以首次渲染时，会进入 readLazyComponentType 函数中的 default 的逻辑，这里才会真正异步执行 import(url)操作，由于并未等待，随后会检查模块是否 Resolved，如果已经 Resolved 了（已经加载完毕）则直接返回 moduleObject.default（动态加载的模块的默认导出），否则将通过 throw 将 thenable 抛出到上层。

为什么要 throw 它？这就要涉及到 Suspense 的工作原理，我们接着往下分析。

Suspense 原理

由于 React 捕获异常并处理的代码逻辑比较多，这里就不贴源码，感兴趣可以去看 throwException 中的逻辑，其中就包含了如何处理捕获的异常。简单描述一下处理过程，React 捕获到异常之后，会判断异常是不是一个 thenable，如果是则会找到 SuspenseComponent ，如果 thenable 处于 pending 状态，则会将其 children 都渲染成 fallback 的值，一旦 thenable 被 resolve 则 SuspenseComponent 的子组件会重新渲染一次。

为了便于理解，我们也可以用 componentDidCatch 实现一个自己的 Suspense 组件，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

class Suspense extends React.Component {
  state = {
    promise: null,
  };

  componentDidCatch(err) {
    // 判断 err 是否是 thenable
    if (
      err !== null &&
      typeof err === "object" &&
      typeof err.then === "function"
    ) {
      this.setState({ promise: err }, () => {
        err.then(() => {
          this.setState({
            promise: null,
          });
        });
      });
    }
  }

  render() {
    const { fallback, children } = this.props;
    const { promise } = this.state;
    return <>{promise ? fallback : children}</>;
  }
}

至此，我们分析完了 React 的懒加载原理。简单来说，React 利用 React.lazy 与 import()实现了渲染时的动态加载 ，并利用 Suspense 来处理异步加载资源时页面应该如何显示的问题。

参考传送门 ☞ React Lazy 的实现原理

1、什么是 TypeScript？

TypeScript 是 JavaScript 的加强版，它给 JavaScript 添加了可选的静态类型和基于类的面向对象编程，它拓展了 JavaScript 的语法。

而且 TypeScript 不存在跟浏览器不兼容的问题，因为在编译时，它产生的都是 JavaScript 代码。

2、TypeScript 和 JavaScript 的区别是什么？

Typescript 是 JavaScript 的超集，可以被编译成 JavaScript 代码。 用 JavaScript 编写的合法代码，在 TypeScript 中依然有效。Typescript 是纯面向对象的编程语言，包含类和接口的概念。 程序员可以用它来编写面向对象的服务端或客户端程序，并将它们编译成 JavaScript 代码。

TypeScript 和 JavaScript 的关系

TypeScript 引入了很多面向对象程序设计的特征，包括：

interfaces   接口
classes   类
enumerated types 枚举类型
generics 泛型
modules 模块

主要不同点如下：

TS 是一种面向对象编程语言，而 JS 是一种脚本语言（尽管 JS 是基于对象的）。
TS 支持可选参数， JS 则不支持该特性。
TS 支持静态类型，JS 不支持。
TS 支持接口，JS 不支持接口。

3. 为什么要用 TypeScript ？

TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。
作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解。
TS 非常流行，被很多业界大佬使用。像 Asana、Circle CI 和 Slack 这些公司都在用 TS。

4、TypeScript 和 JavaScript 哪个更好？

由于 TS 的先天优势，TS 越来越受欢迎。但是 TS 最终不可能取代 JS，因为 JS 是 TS 的核心。

选择 TypeScript 还是 JavaScript 要由开发者自己去做决定。如果你喜欢类型安全的语言，那么推荐你选择 TS。 如果你已经用 JS 好久了，你可以选择走出舒适区学习 TS，也可以选择坚持自己的强项，继续使用 JS。

5、什么是泛型？

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性。
可以把泛型理解为代表类型的参数
// 我们希望传入的值是什么类型，返回的值就是什么类型
// 传入的值可以是任意的类型，这时候就可以用到 泛型

// 如果使用 any 的话，就失去了类型检查的意义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

function createArray1(length: any, value: any): Array<any> {
  let result: any = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

let result = createArray1(3, "x");
console.log(result);

// 最傻的写法：每种类型都得定义一种函数
function createArray2(length: number, value: string): Array<string> {
  let result: Array<string> = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

function createArray3(length: number, value: number): Array<number> {
  let result: Array<number> = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}
// 或者使用函数重载，写法有点麻烦
function createArray4(length: number, value: number): Array<number>;
function createArray4(length: number, value: string): Array<string>;
function createArray4(length: number, value: any): Array<any> {
  let result: Array<number> = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}
createArray4(6, "666");
//使用泛型
// 有关联的地方都改成 <T>
function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}
// 使用的时候再指定类型
let result = createArray<string>(3, "x");
// 也可以不指定类型，TS 会自动类型推导
let result2 = createArray(3, "x");
console.log(result);

6、TS 中的类

TypeScript 是面向对象的 JavaScript。而其中的类描述了所创建的对象共同的属性和方法。

传统的 JavaScript 程序使用函数和基于原型的继承来创建可重用的组件，但这对于熟悉使用面向对象方式的程序员来说有些棘手，因为他们用的是基于类的继承并且对象是从类构建出来的。

从 ECMAScript 2015，也就是 ECMAScript 6，JavaScript 程序将可以使用这种基于类的面向对象方法。在 TypeScript 里允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，

7、什么是构造函数，构造函数作用是什么？

构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与 new 运算符一起使用在创建对象的语句中。而 TypeScript 的构造函数用关键字 constructor 来实现。可以通过 this（和 java/C#一样代表对象实例的成员访问）关键字来访问当前类体中的属性和方法。

8、实例化是什么？

一般情况下，创建一个类后并不能直接的对属性和方法进行引用，必须对类进行实例化，即创建一个对象。TypeScript 中用 new 关键字创建对象。实例化后通过“.”来访问属性和方法

9、方法重写是什么？

子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写

重写的作用在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。

10、什么是可索引类型接口？

一般用来约束数组和对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 数字索引——约束数组
// index 是随便取的名字，可以任意取名
// 只要 index 的类型是 number，那么值的类型必须是 string
interface StringArray {
  // key 的类型为 number ，一般都代表是数组
  // 限制 value 的类型为 string
  [index: number]: string;
}
let arr: StringArray = ["aaa", "bbb"];
console.log(arr);

// 字符串索引——约束对象
// 只要 index 的类型是 string，那么值的类型必须是 string
interface StringObject {
  // key 的类型为 string ，一般都代表是对象
  // 限制 value 的类型为 string
  [index: string]: string;
}
let obj: StringObject = { name: "ccc" };

11、什么是函数类型接口？

对方法传入的参数和返回值进行约束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 注意区别

// 普通的接口
interface discount1 {
  getNum: (price: number) => number;
}

// 函数类型接口
interface discount2 {
  // 注意:
  // “:” 前面的是函数的签名，用来约束函数的参数
  // ":" 后面的用来约束函数的返回值
  (price: number): number;
}
let cost: discount2 = function (price: number): number {
  return price * 0.8;
};

// 也可以使用类型别名
type Add = (x: number, y: number) => number;
let add: Add = (a: number, b: number) => a + b;

12、什么是类类型接口？

如果接口用于一个类的话，那么接口会表示“行为的抽象”
对类的约束，让类去实现接口，类可以实现多个接口
接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 接口可以在面向对象编程中表示为行为的抽象
interface Speakable {
  name: string;

  // ":" 前面的是函数签名，用来约束函数的参数
  // ":" 后面的用来约束函数的返回值
  speak(words: string): void;
}

interface Speakable2 {
  age: number;
}

class Dog implements Speakable, Speakable2 {
  name!: string;
  age = 18;

  speak(words: string) {
    console.log(words);
  }
}

let dog = new Dog();
dog.speak("汪汪汪");

13、什么是混合类型接口？

一个对象可以同时做为函数和对象使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

interface FnType {
  (getName: string): string;
}

interface MixedType extends FnType {
  name: string;
  age: number;
}
interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  let counter = <Counter>function (start: number) {};
  counter.interval = 123;
  counter.reset = function () {};
  return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

14、never 和 void 的区别？

void 表示没有任何类型（可以被赋值为 null 和 undefined）。
never 表示一个不包含值的类型，即表示永远不存在的值。
拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。

15、TS 的学前基础？

因为 TypeScript 是对 JavaScript 的扩展，更准确的说是 ECMAScript。所以，我们学习我们这套 TypeScript 的课程，需要具备 ECMAScript 语言的基础：

熟悉语法基础（变量、语句、函数等基础概念）
掌握内置对象（Array、Date 等）的使用
面向对象基本概念（构造函数、原型、继承）

JS 中的 8 种数据类型及区别

包括值类型(基本对象类型)和引用类型(复杂对象类型)
基本类型(值类型)： Number(数字),String(字符串),Boolean(布尔),Symbol(符号),null(空),undefined(未定义)在内存中占据固定大小，保存在栈内存中
引用类型(复杂数据类型)： Object(对象)、Function(函数)。其他还有 Array(数组)、Date(日期)、RegExp(正则表达式)、特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)等 引用类型的值是对象 保存在堆内存中，栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。
使用场景：
Symbol：使用 Symbol 来作为对象属性名(key)   利用该特性，把一些不需要对外操作和访问的属性使用 Symbol 来定义
BigInt：由于在 Number 与 BigInt 之间进行转换会损失精度，因而建议仅在值可能大于 253 时使用 BigInt 类型，并且不在两种类型之间进行相互转换。
传送门 ☞# JavaScript 数据类型之 Symbol、BigInt

JS 中的数据类型检测方案

1.typeof

1
2
3
4
5
6
7
8
9
10

console.log(typeof 1); // number
console.log(typeof true); // boolean
console.log(typeof "mc"); // string
console.log(typeof Symbol); // function
console.log(typeof function () {}); // function
console.log(typeof console.log()); // function
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof undefined); // undefined

优点：能够快速区分基本数据类型

缺点：不能将 Object、Array 和 Null 区分，都返回 object

2.instanceof

1
2
3
4
5
6

console.log(1 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log("str" instanceof String); // false
console.log([] instanceof Array); // true
console.log(function () {} instanceof Function); // true
console.log({} instanceof Object); // true

优点：能够区分 Array、Object 和 Function，适合用于判断自定义的类实例对象

缺点：Number，Boolean，String 基本数据类型不能判断

3.Object.prototype.toString.call()

1
2
3
4
5
6
7
8
9

var toString = Object.prototype.toString;
console.log(toString.call(1)); //[object Number]
console.log(toString.call(true)); //[object Boolean]
console.log(toString.call("mc")); //[object String]
console.log(toString.call([])); //[object Array]
console.log(toString.call({})); //[object Object]
console.log(toString.call(function () {})); //[object Function]
console.log(toString.call(undefined)); //[object Undefined]
console.log(toString.call(null)); //[object Null]

优点：精准判断数据类型

缺点：写法繁琐不容易记，推荐进行封装后使用

instanceof 的作用

用于判断一个引用类型是否属于某构造函数；

还可以在继承关系中用来判断一个实例是否属于它的父类型。

instanceof 和 typeof 的区别：

typeof 在对值类型 number、string、boolean 、null 、 undefined、 以及引用类型的 function 的反应是精准的；但是，对于对象{ } 、数组[ ] 、null 都会返回 object

为了弥补这一点，instanceof 从原型的角度，来判断某引用属于哪个构造函数，从而判定它的数据类型。

var && let && const

ES6 之前创建变量用的是 var,之后创建变量用的是 let/const

三者区别：

1. var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
   let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
   const 用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，且不能修改。
2. var 可以先使用，后声明，因为存在变量提升；let 必须先声明后使用。
3. var 是允许在相同作用域内重复声明同一个变量的，而 let 与 const 不允许这一现象。
4. 在全局上下文中，基于 let 声明的全局变量和全局对象 GO（window）没有任何关系 ;
   var 声明的变量会和 GO 有映射关系；
5. 会产生暂时性死区：

暂时性死区是浏览器的 bug：检测一个未被声明的变量类型时，不会报错，会返回 undefined
如：console.log(typeof a) //undefined
而：console.log(typeof a)//未声明之前不能使用
let a

6. let /const/function 会把当前所在的大括号(除函数之外)作为一个全新的块级上下文，应用这个机制，在开发项目的时候，遇到循环事件绑定等类似的需求，无需再自己构建闭包来存储，只要基于 let 的块作用特征即可解决

作用域和作用域链

创建函数的时候，已经声明了当前函数的作用域==>当前创建函数所处的上下文。如果是在全局下创建的函数就是[[scope]]:EC(G)，函数执行的时候，形成一个全新的私有上下文EC(FN)，供字符串代码执行(进栈执行)

定义：简单来说作用域就是变量与函数的可访问范围，由当前环境与上层环境的一系列变量对象组成 1.全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。 2.函数作用域：在固定的代码片段才能被访问

作用：作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

作用域链参考链接一般情况下，变量到 创建该变量 的函数的作用域中取值。但是如果在当前作用域中没有查到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

闭包的两大作用：保存/保护

• 闭包的概念
  函数执行时形成的私有上下文 EC(FN)，正常情况下，代码执行完会出栈后释放;但是特殊情况下，如果当前私有上下文中的某个东西被上下文以外的事物占用了，则上下文不会出栈释放，从而形成不销毁的上下文。 函数执行函数执行过程中，会形成一个全新的私有上下文，可能会被释放，可能不会被释放，不论释放与否，他的作用是：

（1）保护：划分一个独立的代码执行区域，在这个区域中有自己私有变量存储的空间，保护自己的私有变量不受外界干扰（操作自己的私有变量和外界没有关系）；

（2）保存：如果当前上下文不被释放【只要上下文中的某个东西被外部占用即可】，则存储的这些私有变量也不会被释放，可以供其下级上下文中调取使用，相当于把一些值保存起来了；

我们把函数执行形成私有上下文，来保护和保存私有变量机制称为闭包。

闭包是指有权访问另一个函数作用域中的变量的函数–《JavaScript 高级程序设计》

稍全面的回答： 在 js 中变量的作用域属于函数作用域, 在函数执行完后,作用域就会被清理,内存也会随之被回收,但是由于闭包函数是建立在函数内部的子函数, 由于其可访问上级作用域,即使上级函数执行完, 作用域也不会随之销毁, 这时的子函数(也就是闭包),便拥有了访问上级作用域中变量的权限,即使上级函数执行完后作用域内的值也不会被销毁。

• 闭包的特性：
  • 1、内部函数可以访问定义他们外部函数的参数和变量。(作用域链的向上查找，把外围的作用域中的变量值存储在内存中而不是在函数调用完毕后销毁)设计私有的方法和变量，避免全局变量的污染。
    1.1.闭包是密闭的容器，，类似于 set、map 容器，存储数据的
    1.2.闭包是一个对象，存放数据的格式为 key-value 形式
  • 2、函数嵌套函数
  • 3、本质是将函数内部和外部连接起来。优点是可以读取函数内部的变量，让这些变量的值始终保存在内存中，不会在函数被调用之后自动清除
• 闭包形成的条件：
  1. 函数的嵌套
  2. 内部函数引用外部函数的局部变量，延长外部函数的变量生命周期
• 闭包的用途：
  1. 模仿块级作用域
  2. 保护外部函数的变量 能够访问函数定义时所在的词法作用域(阻止其被回收)
  3. 封装私有化变量
  4. 创建模块
• 闭包应用场景
  闭包的两个场景，闭包的两大作用：保存/保护。 在开发中, 其实我们随处可见闭包的身影, 大部分前端 JavaScript 代码都是“事件驱动”的,即一个事件绑定的回调方法; 发送 ajax 请求成功|失败的回调;setTimeout 的延时回调;或者一个函数内部返回另一个匿名函数,这些都是闭包的应用。
• 闭包的优点：延长局部变量的生命周期
• 闭包缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏

JS 中 this 的情况

1. 普通函数调用：通过函数名()直接调用：this指向全局对象window（注意 let 定义的变量不是 window 属性，只有 window.xxx 定义的才是。即 let a =’aaa’; this.a 是 undefined）
2. 构造函数调用：函数作为构造函数，用 new 关键字调用时：this指向新new出的对象
3. 对象函数调用：通过对象.函数名()调用的：this指向这个对象
4. 箭头函数调用：箭头函数里面没有 this ，所以永远是上层作用域this（上下文）
5. apply 和 call 调用：函数体内 this 的指向的是 call/apply 方法第一个参数，若为空默认是指向全局对象 window。
6. 函数作为数组的一个元素，通过数组下标调用的：this 指向这个数组
7. 函数作为 window 内置函数的回调函数调用：this 指向 window（如 setInterval setTimeout 等）

call/apply/bind 的区别

相同：

1、都是用来改变函数的 this 对象的指向的。
2、第一个参数都是 this 要指向的对象。
3、都可以利用后续参数传参。

不同：

apply 和 call 传入的参数列表形式不同。apply 接收 arguments，call 接收一串参数列表

1
2

fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);

bind：语法和 call 一模一样，区别在于立即执行还是等待执行，bind 不兼容 IE6~8
bind 主要就是将函数绑定到某个对象，bind()会创建一个函数，返回对应函数便于稍后调用；而 apply、call 则是立即调用。

总结：基于 Function.prototype 上的 apply 、 call 和 bind调用模式，这三个方法都可以显示的指定调用函数的 this 指向。apply接收参数的是数组，call接受参数列表，`` bind方法通过传入一个对象，返回一个this绑定了传入对象的新函数。这个函数的this指向除了使用new `时会被改变，其他情况下都不会改变。若为空默认是指向全局对象 window。

参考：☞ call、apply、bind 三者的用法和区别

箭头函数的特性

1. 箭头函数没有自己的this，会捕获其所在的上下文的 this 值，作为自己的 this 值
2. 箭头函数没有constructor，是匿名函数，不能作为构造函数，不能通过 new 调用；
3. 没有new.target 属性。在通过 new 运算符被初始化的函数或构造方法中，new.target 返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是 undefined
4. 箭头函数不绑定Arguments 对象。取而代之用 rest 参数…解决。由于 箭头函数没有自己的 this 指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this），他们的第一个参数会被忽略。（这种现象对于 bind 方法同样成立）
5. 箭头函数通过 call()   或   apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
6. 箭头函数没有原型属性 Fn.prototype 值为 undefined
7. 箭头函数不能当做 Generator 函数,不能使用 yield 关键字

参考：箭头函数与普通函数的区别

原型 && 原型链

原型关系：

• 每个 class 都有显示原型 prototype
• 每个实例都有隐式原型 __proto__
• 实例的 __proto__ 指向对应 class 的 prototype

‌ 原型:   在 JS 中，每当定义一个对象（函数也是对象）时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype  属性，这个属性指向函数的原型对象。

原型链：函数的原型链对象 constructor 默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto,该指针是指向上一层的原型对象，而上一层的原型对象的结构依然类似。因此可以利用proto一直指向 Object 的原型对象上，而 Object 原型对象用 Object.prototype.** proto** = null 表示原型链顶端。如此形成了 js 的原型链继承。同时所有的 js 对象都有 Object 的基本防范

特点:  JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

new 运算符的实现机制

1. 首先创建了一个新的空对象
2. 设置原型，将对象的原型设置为函数的prototype对象。
3. 让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
4. 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

EventLoop 事件循环

JS是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是，Promise.then，MutationObserver，宏任务的话就是setImmediate setTimeout setInterval

JS 运行的环境。一般为浏览器或者 Node。 在浏览器环境中，有 JS 引擎线程和渲染线程，且两个线程互斥。 Node 环境中，只有 JS 线程。 不同环境执行机制有差异，不同任务进入不同 Event Queue 队列。 当主程结束，先执行准备好微任务，然后再执行准备好的宏任务，一个轮询结束。

浏览器中的事件环（Event Loop)

事件环的运行机制是，先会执行栈中的内容，栈中的内容执行后执行微任务，微任务清空后再执行宏任务，先取出一个宏任务，再去执行微任务，然后在取宏任务清微任务这样不停的循环。

• eventLoop 是由 JS 的宿主环境（浏览器）来实现的；
• 事件循环可以简单的描述为以下四个步骤:
  1. 函数入栈，当 Stack 中执行到异步任务的时候，就将他丢给 WebAPIs,接着执行同步任务,直到 Stack 为空；
  2. 此期间 WebAPIs 完成这个事件，把回调函数放入队列中等待执行（微任务放到微任务队列，宏任务放到宏任务队列）
  3. 执行栈为空时，Event Loop 把微任务队列执行清空；
  4. 微任务队列清空后，进入宏任务队列，取队列的第一项任务放入 Stack(栈）中执行，执行完成后，查看微任务队列是否有任务，有的话，清空微任务队列。重复 4，继续从宏任务中取任务执行，执行完成之后，继续清空微任务，如此反复循环，直至清空所有的任务。

• 浏览器中的任务源(task):
  • 宏任务(macrotask)：
    宿主环境提供的，比如浏览器
    ajax、setTimeout、setInterval、setTmmediate(只兼容 ie)、script、requestAnimationFrame、messageChannel、UI 渲染、一些浏览器 api
  • 微任务(microtask)：
    语言本身提供的，比如 promise.then
    then、queueMicrotask(基于 then)、mutationObserver(浏览器提供)、messageChannel 、mutationObersve

传送门 ☞ # 宏任务和微任务

Node 环境中的事件环（Event Loop)

Node是基于 V8 引擎的运行在服务端的JavaScript运行环境，在处理高并发、I/O 密集(文件操作、网络操作、数据库操作等)场景有明显的优势。虽然用到也是 V8 引擎，但由于服务目的和环境不同，导致了它的 API 与原生 JS 有些区别，其 Event Loop 还要处理一些 I/O，比如新的网络连接等，所以 Node 的 Event Loop(事件环机制)与浏览器的是不太一样。

执行顺序如下：

• timers: 计时器，执行 setTimeout 和 setInterval 的回调
• pending callbacks: 执行延迟到下一个循环迭代的 I/O 回调
• idle, prepare: 队列的移动，仅系统内部使用
• poll轮询: 检索新的 I/O 事件;执行与 I/O 相关的回调。事实上除了其他几个阶段处理的事情，其他几乎所有的异步都在这个阶段处理。
• check: 执行setImmediate回调，setImmediate 在这里执行
• close callbacks: 执行close事件的callback，一些关闭的回调函数，如：socket.on(‘close’, …)

setTimeout、Promise、Async/Await 的区别

1. setTimeout
   settimeout 的回调函数放到宏任务队列里，等到执行栈清空以后执行。
2. Promise
   Promise 本身是同步的立即执行函数， 当在 executor 中执行 resolve 或者 reject 的时候, 此时是异步操作， 会先执行 then/catch 等，当主栈完成后，才会去调用 resolve/reject 中存放的方法执行。

1
2
3
4
5
6
7
8
9
10
11
12
13

console.log("script start");
let promise1 = new Promise(function (resolve) {
  console.log("promise1");
  resolve();
  console.log("promise1 end");
}).then(function () {
  console.log("promise2");
});
setTimeout(function () {
  console.log("settimeout");
});
console.log("script end");
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

3. async/await
   async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}

console.log("script start");
async1();
console.log("script end");

// 输出顺序：script start->async1 start->async2->script end->async1 end

传送门 ☞ # JavaScript Promise 专题

Async/Await 如何通过同步的方式实现异步

Async/Await 就是一个自执行的 generate 函数。利用 generate 函数的特性把异步的代码写成“同步”的形式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个 promise 对象.

介绍节流防抖原理、区别以及应用

节流：事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。

防抖：多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！

使用场景：
节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/**
 * 节流函数 一个函数执行一次后，只有大于设定的执行周期才会执行第二次。有个需要频繁触发的函数，出于优化性能的角度，在规定时间内，只让函数触发的第一次生效，后面的不生效。
 * @param fn要被节流的函数
 * @param delay规定的时间
 */
function throttle(fn, delay) {
  //记录上一次函数触发的时间
  var lastTime = 0;
  return function () {
    //记录当前函数触发的时间
    var nowTime = Date.now();
    if (nowTime - lastTime > delay) {
      //修正this指向问题
      fn.call(this);
      //同步执行结束时间
      lastTime = nowTime;
    }
  };
}

document.onscroll = throttle(function () {
  console.log("scllor事件被触发了" + Date.now());
}, 200);

/**
 * 防抖函数  一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效
 * @param fn要被节流的函数
 * @param delay规定的时间
 */
function debounce(fn, delay) {
  //记录上一次的延时器
  var timer = null;
  return function () {
    //清除上一次的演示器
    clearTimeout(timer);
    //重新设置新的延时器
    timer = setTimeout(function () {
      //修正this指向问题
      fn.apply(this);
    }, delay);
  };
}
document.getElementById("btn").onclick = debounce(function () {
  console.log("按钮被点击了" + Date.now());
}, 1000);

axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

import axios from 'axios'

export const request = createAxiosInstance()

function createAxiosInstance () {
  const instance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    timeout: 5000,
    headers: {
      // 可定义统一的请求头部
      post: {
        'Content-Type': 'application/json'
      }
      ...
    }
  })
   // 添加请求拦截器(在发送请求之前做些什么)
  instance.interceptors.request.use((config) => {
      //可添加开启loading效果的函数
      loading.open()
      //token 存在就添加到请求头里
      token && (config.headers.Authorization = token)
     // 过滤请求参数中的 null undefined ''的函数
      cleanObject()
      return config
  })
  // 添加响应拦截器(对响应数据做点什么)
  instance.interceptors.response.use((response) => {
   //可添加关闭loading效果的函数
      loading.close()
      //解构出返回结果的数据
      const res = response.data
      //对自定义code码进行判断,将成功的数据返回出去
      const validateStatus = /^(2|3)\d{2}$/ //code为2或3开头的视作请求成功
      if (validateStatus.test(res.code)) {
        return res.data
      }
      //判断失败的code码并作出提示等操作
      if (res.code === 401) {
        message.error(res.msg)
      } else {
        message.warning(res.msg)
      }
      return Promise.reject(res)
      },
      (error) => {
      loading.close()  //可添加关闭loading效果的函数
      if (error.response.status === 401) {
        message.error('token失效，请重新登录！')
        removeStorageToken()
        setTimeout(() => {
          window.location.href = '/login'
        }, 2000)
      } else {
        if (!window.navigator.onLine) {
          message.warning('网络异常，请检查网络是否正常连接')
        } else if (error.code === 'ECONNABORTED') {
          message.warning('请求超时')
        } else {
          message.warning('服务器异常，请联系管理员')
        }
      }
      return Promise.reject(error) // 将错误继续返回给到具体页面
    }
      )

  return instance
}

axios 默认配置

全局 axios 默认值

1
2
3
4

axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

自定义实例默认值

1
2
3
4
5
6
7

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: "https://api.example.com",
});

// 创建实例后修改默认值
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;

优先级

1
2
3
4
5
6
7
8
9
10
11
12

// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();

// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;

// 重写此请求的超时时间，因为该请求需要很长时间
instance.get("/longRequest", {
  timeout: 5000,
});

请求配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// `params` 是与请求一起发送的 URL 参数
// 必须是一个简单对象或 URLSearchParams 对象
params: {
  ID: 12345
},

// `paramsSerializer`是可选方法，主要用于序列化`params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
  return Qs.stringify(params, {arrayFormat: 'brackets'})
},

// `data` 是作为请求体被发送的数据
// 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
// 在没有设置 `transformRequest` 时，则必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属: FormData, File, Blob
// - Node 专属: Stream, Buffer
data: {
  firstName: 'Fred'
},

// 发送请求体数据的可选语法
// 请求方式 post
// 只有 value 会被发送，key 则不会
data: 'Country=Brasil&City=Belo Horizonte',

Authorization

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 如果写在请求实例中
const accessToken = localStorage.getItem("accessToken");

this.instance = axios.create(config);
// 就加上common
this.instance.defaults.headers.common["Authorization"] = accessToken
  ? `Bearer ${accessToken}`
  : null;

// 写在请求拦截器中不用加common

//* 请求拦截器
this.instance.interceptors.request.use(
  (config) => {
    //* token
    config.headers["Authorization"] = accessToken
      ? `Bearer ${accessToken}`
      : null;

    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

竞态问题

无法保证异步操作会按照开始时的顺序执行。比如快速切换分页，但是网络刷新较慢，导致第 2 页请求到了，第 1 页才到。

如何解决

1. 取消请求
2. 忽略过期请求

从输入 URL 到页面加载的全过程

1. 首先在浏览器中输入 URL
2. 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

• 浏览器缓存：浏览器会记录 DNS 一段时间，因此，只是第一个地方解析 DNS 请求；
• 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的 DNS 查询缓存)；
• 路由器缓存：如果上述两个步骤均不能成功获取 DNS 记录，继续搜索路由器缓存；
• ISP 缓存：若上述均失败，继续向 ISP 搜索。

3. DNS 域名解析：浏览器向 DNS 服务器发起请求，解析该 URL 中的域名对应的 IP 地址。DNS服务器是基于UDP的，因此会用到UDP协议。
4. 建立 TCP 连接：解析出 IP 地址后，根据 IP 地址和默认 80 端口，和服务器建立 TCP 连接
5. 发起 HTTP 请求：浏览器发起读取文件的 HTTP 请求，，该请求报文作为 TCP 三次握手的第三次数据发送给服务器
6. 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的 html 文件发送给浏览器
7. 关闭 TCP 连接：通过四次挥手释放 TCP 连接
8. 浏览器渲染：客户端（浏览器）解析 HTML 内容并渲染出来，浏览器接收到数据包后的解析流程为：

• 构建 DOM 树：词法分析然后解析成 DOM 树（dom tree），是由 dom 元素及属性节点组成，树的根是 document 对象
• 构建 CSS 规则树：生成 CSS 规则树（CSS Rule Tree）
• 构建 render 树：Web 浏览器将 DOM 和 CSSOM 结合，并构建出渲染树（render tree）
• 布局（Layout）：计算出每个节点在屏幕中的位置
• 绘制（Painting）：即遍历 render 树，并使用 UI 后端层绘制每个节点。

9. JS 引擎解析过程：调用 JS 引擎执行 JS 代码（JS 的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）

• 创建 window 对象：window 对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于 window 的属性和方法，而 DOM Tree 也会映射在 window 的 doucment 对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
• 加载文件：完成 js 引擎分析它的语法与词法是否合法，如果合法进入预编译
• 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为 window 的属性加入到 window 对象中，并给变量赋值为’undefined’；寻找全局函数声明，把它作为 window 的方法加入到 window 对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在 ES6 中已经解决了，函数提升还存在。
• 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在 ES5 非严格模式下这个变量会成为 window 的一个属性，也就是成为全局变量。string、int 这样的值就是直接把值放在变量的存储空间里，object 对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS 作用域其实就是这样的执行流机制实现的。

传送门 ☞ # DNS 域名解析过程 ☞# 浏览器的工作原理

在浏览器中输入 URL 到显示页面经历哪些过程，涉及到哪些协议？

浏览器要将 URL 解析为 IP 地址，解析域名就要用到 DNS 协议，首先主机会查询 DNS 的缓存，如果没有就给本地 DNS 发送查询请求。DNS 查询分为两种方式，一种是递归查询，一种是迭代查询。如果是迭代查询，本地的 DNS 服务器，向根域名服务器发送查询请求，根域名服务器告知该域名的一级域名服务器，然后本地服务器给该一级域名服务器发送查询请求，然后依次类推直到查询到该域名的 IP 地址。DNS服务器是基于UDP的，因此会用到UDP协议。

得到 IP 地址后，浏览器就要与服务器建立一个 http 连接。因此要用到 http 协议。http 生成一个 get 请求报文，将该报文传给 TCP 层处理，所以还会用到 TCP 协议。如果采用 https 还会使用 https 协议先对 http 数据进行加密。TCP 层如果有需要先将 HTTP 数据包分片，分片依据路径 MTU 和 MSS。TCP 的数据包然后会发送给 IP 层，用到 IP 协议。IP 层通过路由选路，一跳一跳发送到目的地址。当然在一个网段内的寻址是通过以太网协议实现(也可以是其他物理层协议，比如 PPP，SLIP)，以太网协议需要直到目的 IP 地址的物理地址，有需要 ARP 协议。

其中：

1、DNS协议，http协议，https协议属于应用层

应用层是体系结构中的最高层。应用层确定进程之间通信的性质以满足用户的需要。这里的进程就是指正在运行的程序。应用层不仅要提供应用进程所需要的信息交换和远地操作，而且还要作为互相作用的应用进程的用户代理，来完成一些为进行语义上有意义的信息交换所必须的功能。应用层直接为用户的应用进程提供服务。

2、TCP/UDP属于传输层

传输层的任务就是负责主机中两个进程之间的通信。因特网的传输层可使用两种不同协议：即面向连接的传输控制协议 TCP，和无连接的用户数据报协议 UDP。面向连接的服务能够提供可靠的交付，但无连接服务则不保证提供可靠的交付，它只是“尽最大努力交付”。这两种服务方式都很有用，备有其优缺点。在分组交换网内的各个交换结点机都没有传输层。

3、IP协议，ARP协议属于网络层

网络层负责为分组交换网上的不同主机提供通信。在发送数据时，网络层将运输层产生的报文段或用户数据报封装成分组或包进行传送。在 TCP/IP 体系中，分组也叫作 IP 数据报，或简称为数据报。网络层的另一个任务就是要选择合适的路由，使源主机运输层所传下来的分组能够交付到目的主机。

4、数据链路层

当发送数据时，数据链路层的任务是将在网络层交下来的 IP 数据报组装成帧，在两个相邻结点间的链路上传送以帧为单位的数据。每一帧包括数据和必要的控制信息（如同步信息、地址信息、差错控制、以及流量控制信息等）。控制信息使接收端能够知道—个帧从哪个比特开始和到哪个比特结束。控制信息还使接收端能够检测到所收到的帧中有无差错。

5、物理层

物理层的任务就是透明地传送比特流。在物理层上所传数据的单位是比特。传递信息所利用的一些物理媒体，如双绞线、同轴电缆、光缆等，并不在物理层之内而是在物理层的下面。因此也有人把物理媒体当做第 0 层。

浏览器的主要功能

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI（统一资源标示符）指定。

浏览器的工作原理

渲染引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。

然后进行如下所示的基本流程：

图：渲染引擎的基本流程。

渲染引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的  DOM  节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：[渲染树](https://link.juejin.cn?target=https%3A%2F%2Fwww.html5rocks.com%2Fzh%2Ftutorials%2Finternals%2Fhowbrowserswork%2F%23Render_tree_construction)。

渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

渲染树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 渲染引擎会遍历渲染树，由用户界面后端层将每个节点绘制出来。

需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，渲染引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，渲染引擎会将部分内容解析并显示出来。

浏览器的主要组成部分是什么？

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

图：浏览器的主要组件。

值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

浏览器是如何渲染 UI 的？

1. 浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree
2. 与此同时，进行 CSS 解析，生成 Style Rules
3. 接着将 DOM Tree 与 Style Rules 合成为 Render Tree
4. 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
5. 随后调用 GPU 进行绘制（Paint），遍历 Render Tree 的节点，并将元素呈现出来

DOM Tree 是如何构建的？

1. 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为 HTML 字符串
2. 生成 Tokens: 之后开始 parser，浏览器会将 HTML 字符串解析成 Tokens
3. 构建 Nodes: 对 Node 添加特定的属性，通过指针确定 Node 的父、子、兄弟关系和所属 treeScope
4. 生成 DOM Tree: 通过 node 包含的指针确定的关系构建出 DOM
   Tree

浏览器重绘与重排的区别？

• 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
• 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让 UI 展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新 DOM 节点
• 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
• 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的 DOM 节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排？

1. 集中改变样式，不要一条一条地修改 DOM 的样式。
2. 不要把 DOM 结点的属性值放在循环里当成循环里的变量。
3. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
4. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
5. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
6. 动画开始GPU加速，translate使用3D变化
7. 提升为合成层
   将元素提升为合成层有以下优点：

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好方式是使用 CSS 的 will-change 属性：

1
2
3

#target {
  will-change: transform;
}

关于合成层的详解请移步无线性能优化：Composite

介绍下 304 过程

• a. 浏览器请求资源时首先命中资源的 Expires 和 Cache-Control，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效，可以通过 Cache-control: max-age 指定最大生命周期，状态仍然返回 200，但不会请求数据，在浏览器中能明显看到 from cache 字样。
• b. 强缓存失效，进入协商缓存阶段，首先验证 ETagETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化。服务器根据客户端上送的 If-None-Match 值来判断是否命中缓存。
• c. 协商缓存 Last-Modify/If-Modify-Since 阶段，客户端第一次请求资源时，服务服返回的 header 中会加上 Last-Modify，Last-modify 是一个时间标识该资源的最后修改时间。再次请求该资源时，request 的请求头中会包含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。

浏览器的缓存机制 强制缓存 && 协商缓存

浏览器与服务器通信的方式为应答模式，即是：浏览器发起 HTTP 请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：

由上图我们可以知道：

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

以上两点结论就是浏览器缓存机制的关键，他确保了每个请求的缓存存入与读取，只要我们再理解浏览器缓存的使用规则，那么所有的问题就迎刃而解了。为了方便理解，这里根据是否需要向服务器重新发起 HTTP 请求将缓存过程分为两个部分，分别是强制缓存和协商缓存。

• 强制缓存
  强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。当浏览器向服务器发起请求时，服务器会将缓存规则放入 HTTP 响应报文的 HTTP 头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是 Expires 和 Cache-Control，其中 Cache-Control 优先级比 Expires 高。
  强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：
  1. 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）。
  2. 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存。
  3. 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果
• 协商缓存
  协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，同样，协商缓存的标识也是在响应报文的 HTTP 头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match 的优先级比 Last-Modified / If-Modified-Since 高。协商缓存主要有以下两种情况：
  1. 协商缓存生效，返回 304
  2. 协商缓存失效，返回 200 和请求结果结果

传送门 ☞ # 彻底理解浏览器的缓存机制

Cookie、sessionStorage、localStorage 的区别

相同点：

• 存储在客户端

不同点：

• cookie 数据大小不能超过 4k；sessionStorage 和 localStorage 的存储比 cookie 大得多，可以达到 5M+
• cookie 设置的过期时间之前一直有效；localStorage 永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除
• cookie 的数据会自动的传递到服务器；sessionStorage 和 localStorage 数据保存在本地

说下进程、线程和协程

进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。进程是一种抽象的概念，从来没有统一的标准定义。

线程是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元，是处理器调度和分派的基本单位。一个进程可以有一个或多个线程，各个线程之间共享程序的内存空间(也就是所在进程的内存空间)。一个标准的线程由线程 ID、当前指令指针(PC)、寄存器和堆栈组成。而进程由内存空间(代码、数据、进程空间、打开的文件)和一个或多个线程组成。

协程，英文 Coroutines，是一种基于线程之上，但又比线程更加轻量级的存在，这种由程序员自己写程序来管理的轻量级线程叫做『用户空间线程』，具有对内核来说不可见的特性。

进程和线程的区别与联系

【区别】：

调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位；

并发性：不仅进程之间可以并发执行，同一个进程的多个线程之间也可并发执行；

拥有资源：进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源。

系统开销：在创建或撤消进程时，由于系统都要为之分配和回收资源，导致系统的开销明显大于创建或撤消线程时的开销。但是进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个进程死掉就等于所有的线程死掉，所以多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些。

【联系】：

一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程；

资源分配给进程，同一进程的所有线程共享该进程的所有资源；

处理机分给线程，即真正在处理机上运行的是线程；

线程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信的办法实现同步。

传送门 ☞ # 一文搞懂进程、线程、协程及 JS 协程的发展
☞ 了解更多

关于浏览器传送门 ☞# 深入了解现代 Web 浏览器

进程间的通信方式

进程通信：
每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到，所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程 A 把数据从用户空间拷到内核缓冲区,进程 B 再从内核缓冲区把数据读走,内核提供的这种机制称为进程间通信。

进程间的通信方式：管道、有名管道、信号、消息队列、共享内存、信号量、socket

匿名管道( pipe )： 管道是一种半双工的通信方式，数据只能单向流动，而且只能在具有亲缘关系的进程间使用。进程的亲缘关系通常是指父子进程关系。

高级管道(popen)：将另一个程序当做一个新的进程在当前程序进程中启动，则它算是当前程序的子进程，这种方式我们成为高级管道方式。

有名管道 (named pipe)： 有名管道也是半双工的通信方式，但是它允许无亲缘关系进程间的通信。

消息队列( message queue ) ： 消息队列是由消息的链表，存放在内核中并由消息队列标识符标识。消息队列克服了信号传递信息少、管道只能承载无格式字节流以及缓冲区大小受限等缺点。

信号量( semophore ) ： 信号量是一个计数器，可以用来控制多个进程对共享资源的访问。它常作为一种锁机制，防止某进程正在访问共享资源时，其他进程也访问该资源。因此，主要作为进程间以及同一进程内不同线程之间的同步手段。

信号 ( sinal ) ： 信号是一种比较复杂的通信方式，用于通知接收进程某个事件已经发生。

共享内存( shared memory ) ：共享内存就是映射一段能被其他进程所访问的内存，这段共享内存由一个进程创建，但多个进程都可以访问。共享内存是最快的 IPC 方式，它是针对其他进程间通信方式运行效率低而专门设计的。它往往与其他通信机制，如信号两，配合使用，来实现进程间的同步和通信。

套接字( socket ) 通信： 套接口也是一种进程间通信机制，与其他通信机制不同的是，它可用于不同机器间的进程通信

浏览器样式兼容

一、CSS 初始化

每个浏览器的 css 默认样式不尽相同，所以最简单有效的方式就是对其进行初始化（覆盖默认样式）

常见 :  *{ margin: 0; padding: 0;}

库：normalize.css

二、浏览器私有属性

常用的前缀有：

firefox 浏览器 ：-moz-

chrome、safari ：-webkit-

opera ：-o- / -xv-

IE 浏览器 ：-ms-（目前只有 IE 8+支持）

三、CSS hack（条件 hack、属性级 hack、选择符级 hack）

JS 垃圾回收机制

1. 项目中，如果存在大量不被释放的内存（堆/栈/上下文），页面性能会变得很慢。当某些代码操作不能被合理释放，就会造成内存泄漏。我们尽可能减少使用闭包，因为它会消耗内存。
2. 浏览器垃圾回收机制/内存回收机制:

   浏览器的Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

标记清除:在js中，最常用的垃圾回收机制是标记清除：当变量进入执行环境时，被标记为“进入环境”，当变量离开执行环境时，会被标记为“离开环境”。垃圾回收器会销毁那些带标记的值并回收它们所占用的内存空间。
谷歌浏览器：“查找引用”，浏览器不定时去查找当前内存的引用，如果没有被占用了，浏览器会回收它；如果被占用，就不能回收。
IE 浏览器：“引用计数法”，当前内存被占用一次，计数累加 1 次，移除占用就减 1，减到 0 时，浏览器就回收它。

3. 优化手段：内存优化 ; 手动释放：取消内存的占用即可。
   （1）堆内存：fn = null 【null：空指针对象】
   （2）栈内存：把上下文中，被外部占用的堆的占用取消即可。
4. 内存泄漏
   在 JS 中，常见的内存泄露主要有 4 种,全局变量、闭包、DOM 元素的引用、定时器

1. HTTP 和 HTTPS

1.http 和 https 的基本概念

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

2.http 和 https 的区别及优缺点？

• http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。
• http 协议的默认端口为 80，https 的默认端口为 443。
• http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
• https 缓存不如 http 高效，会增加数据开销。
• Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
• SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。

3.https 协议的工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

1. 客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
2. web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。
3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
5. web 服务器通过自己的私钥解密出会话密钥。
6. web 服务器通过会话密钥加密与客户端之间的通信。

传送门 ☞ # 解读 HTTP1/HTTP2/HTTP3

TCP 三次握手

1. 第一次握手：建立连接时，客户端发送 syn 包（syn=j）到服务器，并进入 SYN_SENT 状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
2. 第二次握手：服务器收到 syn 包并确认客户的 SYN（ack=j+1），同时也发送一个自己的 SYN 包（syn=k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态；
3. 第三次握手：客户端收到服务器的 SYN+ACK 包，向服务器发送确认包 ACK(ack=k+1），此包发送完毕，客户端和服务器进入 ESTABLISHED（TCP 连接成功）状态，完成三次握手。

握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。

TCP 四次 挥手

1. 客户端进程发出连接释放报文，并且停止发送数据。释放数据报文首部，FIN=1，其序列号为 seq=u（等于前面已经传送过来的数据的最后一个字节的序号加 1），此时，客户端进入 FIN-WAIT-1（终止等待 1）状态。 TCP 规定，FIN 报文段即使不携带数据，也要消耗一个序号。
   2）服务器收到连接释放报文，发出确认报文，ACK=1，ack=u+1，并且带上自己的序列号 seq=v，此时，服务端就进入了 CLOSE-WAIT（关闭等待）状态。TCP 服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个 CLOSE-WAIT 状态持续的时间。
   3）客户端收到服务器的确认请求后，此时，客户端就进入 FIN-WAIT-2（终止等待 2）状态，等待服务器发送连接释放报文（在这之前还需要接受服务器发送的最 后的数据）。
   4）服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，FIN=1，ack=u+1，由于在半关闭状态，服务器很可能又发送了一些数据，假定此时的序列号为 seq=w，此时，服务器就进入了 LAST-ACK（最后确认）状态，等待客户端的确认。
   5）客户端收到服务器的连接释放报文后，必须发出确认，ACK=1，ack=w+1，而自己的序列号是 seq=u+1，此时，客户端就进入了 TIME-WAIT（时间等待）状态。注意此时 TCP 连接还没有释放，必须经过 2∗∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的 TCB 后，才进入 CLOSED 状态。
   6）服务器只要收到了客户端发出的确认，立即进入 CLOSED 状态。同样，撤销 TCB 后，就结束了这次的 TCP 连接。可以看到，服务器结束 TCP 连接的时间要比客户端早一些。

TCP/IP / 如何保证数据包传输的有序可靠？

对字节流分段并进行编号然后通过 ACK 回复和超时重发这两个机制来保证。
（1）为了保证数据包的可靠传递，发送方必须把已发送的数据包保留在缓冲区；
（2）并为每个已发送的数据包启动一个超时定时器；
（3）如在定时器超时之前收到了对方发来的应答信息（可能是对本包的应答，也可以是对本包后续包的应答），则释放该数据包占用的缓冲区;
（4）否则，重传该数据包，直到收到应答或重传次数超过规定的最大次数为止。
（5）接收方收到数据包后，先进行 CRC 校验，如果正确则把数据交给上层协议，然后给发送方发送一个累计应答包，表明该数据已收到，如果接收方正好也有数据要发给发送方，应答包也可方在数据包中捎带过去。

TCP 和 UDP 的区别

1. TCP 是面向连接的，而 UDP 是面向无连接的。
2. TCP 仅支持单播传输，UDP 提供了单播，多播，广播的功能。
3. TCP 的三次握手保证了连接的可靠性; UDP 是无连接的、不可靠的一种数据传输协议，首先不可靠性体现在无连接上，通信都不需要建立连接，对接收到的数据也不发送确认信号，发送端不知道数据是否会正确接收。
4. UDP 的头部开销比 TCP 的更小，数据传输速率更高，实时性更好。

传送门 ☞ # 深度剖析 TCP 与 UDP 的区别

HTTP 请求跨域问题

1. 跨域的原理

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
跨域原理，即是通过各种方式，避开浏览器的安全限制。

2. 解决方案最初做项目的时候，使用的是 jsonp，但存在一些问题，使用 get 请求不安全，携带数据较小，后来也用过 iframe，但只有主域相同才行，也是存在些问题，后来通过了解和学习发现使用代理和 proxy 代理配合起来使用比较方便，就引导后台按这种方式做下服务器配置，在开发中使用 proxy，在服务器上使用 nginx 代理，这样开发过程中彼此都方便，效率也高；现在 h5 新特性还有 windows.postMessage()
   • JSONP：
     ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。步骤： 1. 去创建一个 script 标签 2. script 的 src 属性设置接口地址 3. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据 4. 通过定义函数名去接受返回的数据