diff --git a/docs/note/CSS.assets/BFC-1.jpg b/docs/note/CSS.assets/BFC-1.jpg
new file mode 100644
index 00000000..42698b48
Binary files /dev/null and b/docs/note/CSS.assets/BFC-1.jpg differ
diff --git a/docs/note/CSS.assets/BFC-2.jpg b/docs/note/CSS.assets/BFC-2.jpg
new file mode 100644
index 00000000..51e2d121
Binary files /dev/null and b/docs/note/CSS.assets/BFC-2.jpg differ
diff --git a/docs/note/CSS.assets/BFC-3.jpg b/docs/note/CSS.assets/BFC-3.jpg
new file mode 100644
index 00000000..05cba17b
Binary files /dev/null and b/docs/note/CSS.assets/BFC-3.jpg differ
diff --git a/docs/note/CSS.assets/BFC-4.jpg b/docs/note/CSS.assets/BFC-4.jpg
new file mode 100644
index 00000000..3f651256
Binary files /dev/null and b/docs/note/CSS.assets/BFC-4.jpg differ
diff --git a/docs/note/CSS.md b/docs/note/CSS.md
new file mode 100644
index 00000000..e043e04b
--- /dev/null
+++ b/docs/note/CSS.md
@@ -0,0 +1,2153 @@
+---
+sidebar: auto
+sidebarDepth: 2
+editLink: false
+---
+
+# CSS基础
+
+CSS提供了三种方法，可以将CSS样式应用到元素上：
+
+- 内联样式
+  - 直接将样式写到元素的`style`属性上
+- 内部样式表
+  - 将样式通过`<style>`标签写在`<head>`标签中，通过选择器应用到元素上
+- 外部样式表
+  - 将样式写在外部文件如`style.css`中，再通过`<link>`标签引入
+
+## 文本样式(text)
+
+- text-decoration 框线样式
+  - line-through 删除线
+  - overline 上划线
+  - underline 下划线
+  - none 不设置装饰线
+- text-transform
+  - `text-transform` 属性指定如何将元素的文本大写。
+  - 它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。
+- text-indent
+  - `text-indent` 属性能定义一个块元素首行文本内容之前的缩进量。
+- text-align
+- word/letter-spacing
+
+### text-align（重要）
+
+行内内容（例如文字）如何相对它的块父元素对齐，`left`靠左 `center`居中 `right`靠右 `justify`两端对齐
+
+默认值为`left`
+
+需要注意的是，当子元素是`div`时，对父元素设置`text-align`是不生效的：
+
+```css
+.box {
+  height: 500px;
+  text-align: center;
+  background-color: red;
+}
+.inner {
+  height: 200px;
+  width: 200px;
+  background-color: blue;
+}
+```
+
+然而此时`.inner`并没有在`.box`里居中对齐
+
+`text-align`决定了**行内级元素在父元素中是如何对齐的**，而`<div>`元素默认的`display`属性是`block`块级元素，不属于行内级元素
+
+可以将`.inner`的特性改掉：`display: inline-block;` 这样就可以通过`text-align`实现居中对齐了
+
+另外的，如果为`.inner`设置`margin: 0 auto;`也可以实现居中对齐
+
+### letter-spacing word-spacing（了解）
+
+分别用于设置字母、单词之间的间距
+
+默认为`0`，可以设置为负数
+
+## 字体样式(font)
+
+- font-size
+- font-family
+- font-weight
+- line-height
+- font缩写属性
+
+### font-size
+
+单位有`px` `em` `%` 可以被继承
+
+- `px` 像素 `15px`
+- `em` **相对父元素**字体大小的倍数 `1.5em`
+- `%` **相对父元素**字体大小的倍数 `150%`
+
+浏览器默认的字体大小是`16px`，这个值是因浏览器而异的，也与用户设置有关
+
+### font-family（了解）
+
+用于设置字体名称
+
+- 可以设置1个或多个字体名称
+- 浏览器会选择列表中第一个计算机中安装有的字体
+- 或者是通过@font-face指定的可以直接下载的字体
+
+### font-weight（重要）
+
+用于设置文字的粗细
+
+- 取值范围：1~1000
+- normal：400
+- bold：700
+
+不同的浏览器展示效果是不同的
+
+### font-style（了解）
+
+设置文本样式
+
+- normal：常规展示
+- italic：斜体（可以使用字体自带的斜体字体）
+- oblique：斜体（让文字倾斜展示）
+
+### font-variant（了解）
+
+可以改变小写字母的显示样式
+
+- normal：常规战士
+- small-caps：将小写字母替换为缩小后的大写字母
+
+### line-height（重要）
+
+`line-height`用于设置文本的行高：一行文本占据的高度
+
+> 行高 = 文本占据的高度 + 平分剩余的空隙
+
+#### 利用line-height实现垂直居中
+
+行高 = **两行文字基线（baseline）之间的间距**
+
+```css
+.box {
+  height: 200px;
+  line-height: 200px;
+  color: red;
+}
+```
+
+此时`.box`内的文字将会垂直居中，如果是文本可以通过此方式
+
+### font 缩写属性
+
+font属性可以将上述所有属性表示出来：
+
+- `font-style` `font-variant` `font-weight` `font-size/line-height` `font-family`
+- 其中，前三个（`font-style` `font-variant` `font-weight`）可以随意调换顺序，也可以省略
+- ` line-height`可以省略，如果不省略则必须跟在`font-size`后面
+- `font-size`font-family` 不可以调换顺序，不可以省略
+
+```css
+.box {
+  font: italic small-caps 700 30px/30px serif;
+}
+.box {
+  font: 30px/1.5 serif;
+}
+```
+
+需要注意的是，`font-size/line-height`中的`line-height`在书写时，不必一定要有单位，例如`30px/1.5`表示的是字体大小为30px 而行高为30px的1.5倍，即45px
+
+## CSS选择器
+
+- 通用选择器
+- 简单选择器
+  - 元素选择器 `img`
+  - 类选择器 `.`
+  - ID选择器 `#`
+- 属性选择器 `h2[title=something]`
+  - `*=` 属性包含某个值
+  - `^=`属性以某值开始
+  - `$=`属性以某值结尾
+- 组合
+- 伪类
+- 伪元素
+
+### 后代选择器
+
+选择`.box`元素内的所有标签为`span`的子元素
+
+```css
+.box span {
+  color: red;
+}
+```
+
+匹配`div`元素下的所有**子元素**
+
+```css
+div * {
+  color: red;
+}
+```
+
+### 直接子代选择器
+
+选择`.box`中为`span`的所有子元素，且该子元素是直接子代
+
+```css
+.box > span {
+  color: red;
+}
+```
+
+### 兄弟选择器
+
+#### 相邻兄弟选择器
+
+使用符号`+`连接
+
+相邻的`.bro`兄弟元素的颜色为红色：
+
+```css
+.brother + .bro {
+  color: red;
+}
+```
+
+#### 普遍兄弟选择器
+
+使用符号`~`连接
+
+所有的`.bro`兄弟元素的颜色都为红色：
+
+```css
+.brother ~ .bro {
+  color: red;
+}
+```
+
+### 选择器组
+
+#### 交集选择器
+
+同时符合两个选择器条件，可以实现精准选择某一个元素
+
+1.元素类型为`div` 2.类名为`.box`
+
+```css
+div.box {
+  color: red;
+}
+```
+
+#### 并集选择器
+
+同时匹配多个元素，可以给多个元素设置相同的样式
+
+```css
+body, p, div, h2, span {
+  margin: 0;
+}
+```
+
+### 伪类
+
+伪类是选择器的一种，它用于选择处于特定状态的元素
+
+```css
+div:hover {
+  color: red;
+}
+```
+
+#### 常见伪类
+
+- 动态伪类
+  - `:link` `:visited` `:hover` `:active` `:focus`
+- 目标伪类
+  - `:target` 匹配URL上的fragment
+- 语言伪类
+  - `:lang()`
+- 元素状态伪类
+  - `:enabled` `:disabled` `:checked`
+- 结构伪类
+  - `nth-child()` `:nth-last-child()` `nth-of-type()` `nth-last-of-type()`
+  - `:first-child` `:last-child` `:first-of-type` `:last-of-type`
+  - `:root` `:only-child` `:only-of-type` `:empty`
+
+### 结构伪类
+
+#### :nth-child
+
+- `:nth-child(1)`
+  - 父元素的**第一个子元素**
+- `:nth-child(2n)`
+  - `n`代表任意`正整数` 和 `0`
+  - 是父元素中的第偶数个子元素（2 4 6 8 ···）
+  - 与`:nth-child(even)`同义
+- `:nth-child(2n+1)`
+  - `n`代表任意`正整数` 和 `0`
+  - 是父元素中的第奇数个子元素（1 3 5 7 ···）
+  - 与`nth-child(odd)`同义
+- `:nth-child(-n+2)`
+  - 代表**前2个子元素**
+
+#### :nth-last-child
+
+- `:nth-last-child(···)`
+  - 规则与`:nth-child`相同，但是是**从后向前数**
+
+#### :nth-of-type
+
+与`:nth-child`不同的是，`:nth-of-type`只会在相同类型的元素中计数并选中，忽略掉其他类型的元素
+
+#### 其他常用结构伪类
+
+上述结构伪类的简化写法
+
+- `:first-child` 等同于 `:nth-child(1)`
+- `:last-child` 等同于 `:nth-last-child(1)`
+- `:first-of-type` 等同于 `:nth-of-type(1)`
+- `:last-of-type` 等同于 `:nth-last-of-type(1)`
+
+- `:only-child` 是父元素中唯一的子元素
+- `:only-of-type` 是父元素中唯一的这种类型的子元素
+
+- `:root` 根元素 也就是html元素
+- `:empty` 代表里面完全空白的元素（没有子节点）
+
+```css
+:root {
+  font-size: 16px;
+}
+```
+
+等价于
+
+```css
+html {
+  font-size: 16px;
+}
+```
+
+#### 否定伪类
+
+`:not(···)`
+
+- `···`中填写的是一个简单选择器
+- 元素选择器 通用选择器 属性选择器 类选择器 id选择器 伪类
+
+### 伪元素
+
+用于选中某个特定的元素
+
+- `::first-line`
+  - 对首行文本进行设置属性
+- `::first-letter`
+  - 对首个字母进行设置属性
+- `::before`
+  - 向目标元素前加入内容
+- `::after`
+  - 向目标元素后加入内容
+
+伪元素采用`::`作为前缀用于和伪类作区分
+
+`content`属性可以是字符串，可以是图片/SVG，也可以借助伪类插入图形
+
+```css
+.box::after {
+  content: 'Something';
+}
+.box::before {
+  content: url(../assets/icon.svg);
+}
+.box::after {
+  content: '';
+  /* 8*8正方形 */
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-color: red;
+}
+```
+
+## CSS特性（重要）
+
+- CSS属性的继承
+- CSS属性的层叠
+- HTML元素的类型
+- display属性
+- 元素的隐藏
+- overflow属性
+
+### 属性的继承
+
+CSS的某些属性具有继承性
+
+- 如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性
+- 如果后代元素自己设置有该属性，则会优先使用自己的属性
+
+```css
+.box {
+  color: red;
+}
+```
+
+```html
+<div class="box">
+  <span> Span1 </span>
+  <span> Span2 </span>
+  <span> Span3 </span>
+</div>
+```
+
+上例中的`color`属性可以被`.box`的每个子元素继承，所有的`<span>`都为红色
+
+常见的属性都是具有继承性的，不必特意去记忆
+
+需要注意的是：子元素从父元素继承来的`font-size: 2em;`继承的是计算值，而不是原始值，如果父元素设置了`font-size: 2em;`，此时子元素再设置`font-size: 2em;`达到的效果实际上是在父元素的基础上的`2em`，实质上是`font-size: 4em;`
+
+ #### 强制继承
+
+当某些属性不具备继承性，但是我们希望子元素能直接继承时：
+
+```css
+.father {
+  border: 2px soild red;
+}
+.child {
+  border: inherit;
+}
+```
+
+将属性值设置为`inherit`即可直接继承来自父元素的样式
+
+### 属性的层叠
+
+CSS的翻译是：层叠样式表，那么什么是层叠？
+
+- 对于一个元素来说，相同的一个属性我们可以通过不同的选择器对它进行多次设置
+- 那么属性会被一层层覆盖上去
+- 但是最终只有一个会真正生效
+
+多个样式属性覆盖上去，生效的顺序
+
+- 选择器的权重，选择器权重更高的生效
+- 先后顺序，权重相同时，后设置的生效
+
+权重值：
+
+CSS样式优先级：内联样式 > **ID选择器 > 类选择器 > 标签选择器** > 通配符
+
+- !important 10000
+- 内联样式 1000
+- id选择器 `#` 100
+- 类选择器、属性选择器、伪类 `.` `[]` `:hover` 10
+- 元素选择器、伪元素 `button` `::before` 1
+- 通配符 `*` 0
+
+### HTML元素的类型
+
+`<div>`是块级元素，会独占一行，而`<span>`是行内元素，会在同一行显示
+
+HTML元素有很多，当把元素放到页面上时，元素被设置的CSS `display`属性决定了它占据页面中一行多大的空间
+
+- 某些元素很重要，需要独占一行：块级元素（block-level）如 `h1` `div` `p`
+- 某些元素属于内容的一部分，没有必要独占一行，与其他内容在同一行显示：行内级元素（inline-level）如 `span` `a` `img` `strong` `i`
+- 块级元素会独占父元素的一行
+- 多个行内级元素可以在父元素的同一行中显示
+
+例如，我们手动修改`div`元素`display: inline-block;`那么它此时也会在行内显示，而不再独占一行
+
+#### display属性
+
+CSS的`display`属性可以修改元素的显示类型，有四个常用值
+
+- `block` 让元素显示为块级元素
+  - 块级元素 独占一行 可以设置宽度和高度
+  - 如 `h1` `div` `p`
+- `inline` 让元素显示为行内级元素
+  - 行内级元素 和其他行内级元素在同一行显示 **不能设置宽度和高度** 其宽高由包裹的内容决定
+  - 如 `span` `a` `img` `strong` `i`
+- `inline-block` 让元素同时具备行内级、块级元素的特征
+  - 行内块级元素 可以和其他行内级元素在同一行显示 **可以设置宽度和高度**
+- `none` 隐藏元素
+
+当我们为一个`div`元素设置了更小的宽度，它将仍然独占一行，剩余的宽度会被浏览器分配给了`margin-right: auto`填满一行
+
+我们为`span`设置宽高时不会生效，但是为`img`设置宽高时则会生效，这是因为`img`元素是一个**行内替换元素**（官方文档），它具有以下特点：
+
+- 和其他行内元素在同一行显示
+- 可以被设置宽度和高度
+- 类似的`video` `input`标签也是一个行内替换元素
+
+#### 编写HTML时的注意事项
+
+- 块级元素、`inline-block`元素
+  - 一般情况下，可以包含其他任何元素，比如块级元素、行内级元素、inline-block元素
+  - 特殊情况：p元素不能包含其他块级元素
+- 行内级元素
+  - 一般情况下，只能包含**行内级元素**
+
+## CSS技巧
+
+### 元素隐藏方法
+
+- 方法一：display设置为none
+  - 元素显示不出来 也不占据位置 **不占据任何空间**（和不存在此DOM元素一样）
+- 方法二：visibility设置为hidden
+  - 设置为hidden 虽然元素不可见 但是仍然**会占据元素应该占据的空间**
+  - 默认值为visible 元素是可见的
+- 方法三：rgba设置颜色 将a的值设置为0
+  - rgba的a代表alpha值 可以设置透明度为0 **不影响子元素**
+- 方法四：opacity设置透明度 设置为0
+  - 设置整个元素的透明度 **会影响所有子元素**
+
+### 样式不生效
+
+- 选择器优先级太低
+- 选择器未选中目标元素
+- CSS属性使用形式不对
+  - 元素不支持此CSS属性 比如`span`默认不支持width与height
+  - 浏览器不支持此CSS属性 比如旧版本的浏览器不支持一些CSS Module3的某些属性
+  - 被同类型的CSS属性覆盖 比如`font`覆盖了`font-size`
+
+## CSS盒子模型
+
+HTML中的每个元素都可以看做是一个盒子，可以具备以下四个属性：
+
+- 内容 content
+  - 元素的内容 width/height
+- 内边距 padding
+  - 元素和内容之间的间距
+- 边框 border
+  - 元素自己的边框
+- 外边距 margin
+  - 元素和其他元素之间的间距
+
+### 内容 width / height
+
+设置内容是通过width / height实现的，需要注意的是，对行内非替换元素来说，设置宽高是无效的
+
+- `min-width` 最小宽度 无论内容为多少 宽度都大于等于 `min-width`
+- `max-width` 最大宽度 无论内容为多少 宽度都小于等于 `max-width`
+- 在移动端适配时 可以设置最大宽度和最小宽度
+
+当我们不给元素手动设置`width`时，其默认值为 `width: auto;` 由浏览器决定其宽度
+
+- 对于`div`这类块级元素 `auto` 代表其独占一行
+- 对于`span`这类行内级元素 `auto` 代表其宽度与内容相同
+
+### 内边距 padding
+
+- padding包含四个方向：top right bottom left
+- `padding: 5px 6px 7px 8px;` 对应上右下左
+- `padding: 10px 20px 30px;` 缺少`left`，`left`使用`right`的值
+- `padding: 10px 20px;` 上下`10px`，左右`20px`
+- `padding: 10px;` 上下左右都为`10px`
+
+### 边框 border
+
+- 宽度 `border-width`
+- 样式 `border-style`
+- 颜色 `border-color`
+- 圆角 `border-radius`
+  - 值：具体数值或百分比
+  - 百分比：相对于border-box的宽度/高度
+  - `border-box`： 内容 + `pending` + `border`
+
+缩写属性 `border: 1px soild red;`
+
+### 外边距 margin
+
+特性：上下的`margin`重叠部分会被折叠，但左右的`margin`不影响
+
+`margin`同样由上下左右组成 可以缩写 规则同`padding`
+
+当`margin-left`或`margin-right`的值为百分比时，它是相对于父元素宽度的偏移量
+
+### 额外知识点
+
+#### margin与padding比较
+
+考虑嵌套元素：
+
+```html
+<div class="container">
+  <div class="child"></div>
+</div>
+```
+
+要将`.child`相对父元素下移10px 可以通过为`.container`设置`padding-top: 10px;` 也可以为`.child`设置`margin-top: 10px;`实现
+
+但是需要注意的是，为`.container`设置`padding`时，其自身的宽度也会跟着改变，此时可以为`.container`设置`box-sizing: border-box;`来修正其宽度的改变
+
+当为`.child`设置`margin`时，实际效果却是连带着父元素`.container`一起移动了，这时需要为`.container`设置`overflow: auto;`创建`BFC`
+
+- margin 一般是用来设置兄弟元素之间间距的
+- padding 一般是用来设置父子元素之间的间距
+
+#### margin的传递和折叠
+
+- `margin-top`的传递
+  - 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的`margin-top`值会传递给父元素
+  - 左右`margin`是不会传递的
+  - 这也是上例中为子元素设置`margin-top`时不生效的原因
+- `margin-bottom`的传递（不常见 不常用）
+  - 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是`auto`，那么这个块级元素的`margin-bottom`值会传递给父元素
+- 如何规避`margin`传递导致的问题
+  - 给父元素设置`padding-top` / `padding-bottom`来实现相同的效果（推荐）
+  - 给父元素设置带宽度的`border` 中止`margin`的传递（不好用）
+  - 触发父元素的`BFC`：块级格式化上下文，给当前盒子建立一个独立的空间，不会再受外界属性的影响
+
+- `margin`的折叠
+  - 垂直方向上相邻的`margin-bottom` 与 `margin-top` 可能合并为1个`margin` 这种现象称为折叠
+  - 水平方向上的`margin`不会发生折叠
+  - 折叠的计算规则：两个值进行比较，取其中较大的值
+  - 防止`margin`折叠：只设置其中一个元素的`margin`
+  - 另外的 父子块级元素之间设置的`margin`也会发生折叠（不常见）
+
+#### 块级元素的水平居中问题
+
+问题：`text-align`只对行内级元素起作用，如果非要用此属性实现水平居中，可以将`div`改为`display: inline-block;`
+
+块级元素一定占据父元素的整行，浏览器是依靠设置`margin: auto;`实现的，如果我们手动设置了`margin: 0;`那么该元素将无法整行显示，剩余的宽度空间会被默认分配给`margin-right`，让元素居左显示。
+
+这时，我们可以为元素指定`margin: 0 auto;`让浏览器自动决定左右边距的大小，此时元素就可以居中显示了
+
+### 外轮廓 outline
+
+`outline`表示元素的外轮廓
+
+- 不占用空间
+- 默认显示在`border`的外面
+- 例如通过Tab键选中`<a>`，或焦点位于`<input>`时的外轮廓 都是通过`outline`属性实现的
+
+### 盒子阴影 box-shadow
+
+`box-shadow`属性可以设置一个或多个阴影
+
+- 每个阴影用`<shadow>`表示
+- 多个阴影之间用逗号 `,` 隔开，从前到后叠加
+
+参数说明：
+
+- `offset-x` 水平方向偏移量 向右偏移
+- `offset-y` 垂直方向偏移量 向下偏移
+- `blur-radius` 模糊半径
+- `spread-radius` 延伸半径
+- `color` 阴影颜色 如果未设置 则会跟随`color`前景色
+- `inset` 外框阴影变成内框阴影（不常用）
+
+### 行内非替换元素的注意事项
+
+盒子模型属性在某些**行内非替换元素**上不生效或具有特殊的特性：
+
+- 例如对`<span>`设置`padding: 30px;`此时`padding`虽然会将`span`的背景颜色撑开，但是实际却不占用空间（上下不占用空间，但左右正常占用空间）
+- 对`span`设置`border`也是一样的，会将背景颜色撑开，但是上下不占用空间，左右正常
+- 对其设置的`margin`上下不会生效，左右正常
+
+这是因为行内非替换元素本来就是在一个段落中和其他内容在一行里显示的，如果对某个元素设置了上下移动，整个段落布局将会被破坏
+
+## CSS元素定位
+
+- 标准流布局
+- 相对定位
+- 固定定位
+- 绝对定位
+- 粘性定位
+- z-index
+
+### 标准流
+
+默认情况下，元素都是按照 Normal Flow 进行排布的（标准流、常规流、正常流、文档流 document flow）
+
+- 从左到右、从上到下按顺序排好
+- 默认情况下，互相之间不存在层叠现象
+
+在标准流中想要调整元素之间的间距，可以使用`margin` 或 `padding`对元素进行定位
+
+- 设置某一个元素的`margin` 或`padding` 就会影响到标准流中其他元素的定位效果
+- 不便于实现元素层叠的效果
+
+如果希望能实现层叠，将某个元素从标准流中移出，实现层叠的效果，需要设置元素的`position`属性，将元素**脱离标准流**
+
+例如，为某个元素设置了`display: fixed;` 那么以后对这个元素设置的定位都不再对标准流中的其他元素造成影响了
+
+### 认识元素的定位
+
+定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为：
+
+- 例如放在另一个元素的上面
+- 或者始终保持在浏览器视窗的同一个位置
+
+###  position属性取值
+
+- `static` 静态定位 **默认值**
+
+当`position`被设置为以下四个属性时，元素将变为定位元素
+
+- `relative` 相对定位
+- `absolute` 绝对定位
+- `sticky` 粘性定位
+- `fixed` 固定定位
+
+#### static 静态定位
+
+是`position`的默认值
+
+- 元素按照normal flow布局
+- `left` `right` `top` `bottom`均不起作用
+
+#### relative 相对定位
+
+- 元素仍然按照normal flow布局 （在标准流中）
+- 可以通过`left` `right` `top` `bottom`进行定位
+  - 定位参照对象是元素自己原来的位置（左上角）
+- 当设置了`left`属性 元素将发生移动 但是原来占据的大小仍然被占据（仍然在标准流中）
+
+应用场景：在不影响其他元素位置的前提下，对当前元素位置进行微调
+
+```css
+.span {
+  font-size: 10px;
+  position: relative;
+  bottom: 8px;
+}
+```
+
+```html
+<div>
+  2<span>3</span> = 8
+</div>
+```
+
+这样最终的样式就成为了：$2^3=8$
+
+>  绝对定位是相对于最近的一个定位元素
+
+#### fixed 固定定位
+
+- 元素脱离normal flow 
+- 可以通过`left` `right` `top` `bottom`进行定位
+- 定位的参照对象是视口（viewpoint）
+- 当画布滚动时，固定不动
+
+- 视口（ViewPort）：文档的可视区域
+- 画布（Canvas）：渲染文档的区域 文档内容超出视口范围 则可以滚动查看
+- 画布 >= 视口
+
+#### absolute 绝对定位
+
+- 元素脱离 normal flow
+- 可以通过`left` `right` `top` `bottom`定位
+  - 定位参照对象是**最邻近的定位祖先元素**
+    - 定位元素：`position`值不为`static`的元素，即：`relative` `absolute` `fixed`
+  - 如果找不到这样的祖先元素 参照对象是视口
+
+`position: absolute;`一般与`position: relative;`共同使用，让父元素变成定位元素的同时不脱离标准流，还能让其中的子元素实现在父元素内的绝对定位。
+
+#### sticky 粘性定位
+
+- 可以看做是**相对定位和固定(绝对)定位的结合体**
+- 它允许被定为的元素表现得像相对定位一样，直到它滚动到某个阈值点
+- 当达到这个阈值点时，就会变成固定(绝对)定位
+
+```css
+.nav-bar {
+  position: sticky;
+  top: 0; /* 滚动出scrollport后元素固定的位置 */
+}
+```
+
+`sticky`是相对于最近的滚动祖先包含视口的（the nearest ancestor scroll container's scrollport）
+
+### 绝对定位元素的特点
+
+此处的绝对定位 （*absolutely positioned element*）：`absolute` `fixed` 在某些情况下 二者的特性是相同的
+
+- 可以随意设置宽高 `width` `height`
+  - 即使这个元素是行内级元素 `span` `strong`
+- 默认宽高由内容决定 （如果没有设置宽高 那么包裹元素）
+  - 这个特性很像`inline-block` 行内级元素但是可以设置宽高（**但是实际上并不是**）
+- 不再受标准流的约束
+  - 不再严格按照从上到下、从左到右排布
+  - 不再严格区分块级、行内级元素，很多元素特性都会消失
+- 不再向父元素汇报宽高数据
+  - 如果父元素没有设置宽高，子元素设置了绝对定位，那么此时父元素就会因失去高度而消失
+
+|            | 脱离标准流 | 定位元素 | 绝对定位元素 | 定位参照物                                                   |
+| :--------- | :--------: | :------: | :----------: | :----------------------------------------------------------- |
+| `static`   |     ❌      |    ❌     |      ❌       | ❌                                                            |
+| `relative` |     ❌      |    ✔     |      ❌       | 元素自身原来的位置                                           |
+| `absolute` |     ✔      |    ✔     |      ✔       | 最临近的定位**祖先元素**（如果找不到这样的元素 参照对象为视口） |
+| `fixed`    |     ✔      |    ✔     |      ✔       | 视口                                                         |
+
+- 对于绝对定位元素来说
+  - 定位参照对象的宽度 = `left` + `right` + `margin-left` + `margin-right` + 绝对定位元素的实际占用宽度
+  - 定位参照对象的高度 = `top` + `bottom` + `margin-top` + `margin-bottom` + 绝对定位元素的实际占用高度
+
+#### 例子1
+
+下例中，`margin`的左右值被设置为了`auto` 
+
+> 父元素的宽度 = 块级子元素自身宽度 + `margin-left` + `margin-right`
+
+那么左右间距由浏览器决定，将剩余的宽度平均分配给`margin-left`和`margin-right`
+
+```css
+.container {
+  width: 800px;
+  height: 300px;
+  background-color: red;
+}
+.box {
+  height: 100px;
+  background-color: green;
+  
+  width: 200px;
+  margin: 0 auto;
+}
+```
+
+```html
+<div class="container">
+  <div class="box"></div>
+</div>
+```
+
+#### 例子2
+
+在上例的基础上修改属性，此时子元素`.box`的相对定位相对的是父元素定位元素`.container`
+
+此时满足公式
+
+> .container width = .box width + `left` + `right` + `margin-left` + `margin-right`
+
+```css
+.container {
+  position: relative;
+}
+.box {
+  position: absolute;
+  width: auto;
+  left: 0;
+  right: 0;
+}
+```
+
+此时`.box`的`width`被修改为了默认值`auto` 且`left`和`right`被设置为了0，那么剩余的宽度将由`ml` `mr`的默认值决定，他们的默认值都为0，这时公式可以写作：`800px = auto + 0 + 0 + 0 + 0`，此时`.box`将占据100%
+
+这和下面的代码是同等效果的：
+
+```css
+.container {
+  position: relative;
+}
+.box {
+  position: absolute;
+  width: 100%;
+}
+```
+
+#### 例子3
+
+下例中，我们明确设置`.box`的宽度为`200px`，公式变为`800px = 200px + 0 + 0 + 0 + 0`，这时浏览器会默认将剩余的值都分配给`mr`（由不同浏览器决定）
+
+```css
+.container {
+  position: relative;
+}
+.box {
+  position: absolute;
+  width: 200px;
+  left: 0;
+  right: 0;
+}
+```
+
+在此基础上，我们修改代码，将`mr` `ml`都修改为`auto`，此时公式就变成了 `800px = 200px + 0 + 0 + auto + auto`，浏览器会将剩余值平均分配给`ml`与`mr` 即可实现水平居中
+
+```css
+.container {
+  position: relative;
+}
+.box {
+  position: absolute;
+  width: 200px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+```
+
+水平方向是如此，那么同理，垂直居中也是一样的，在高度上也符合公式
+
+> outer box height = inner box height + `top` + `bottom` + `margin-top` + `margin-bottom`
+
+修改代码，为其添加上`top` `bottom`为0 并指定所有的`margin`都为`auto`（height在先前的代码设置过，此处只展示修改的代码）
+
+公式变为 `300px = 100px + 0 + 0 + auto + auto`，`mt` `mb`由浏览器平均分配，可以实现垂直居中
+
+```css
+.container {
+  position: relative;
+}
+.box {
+  position: absolute;
+  width: 200px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+```
+
+至此，我们实现了元素的水平垂直居中：父元素设置相对定位，子元素设置绝对定位，子元素`left` `right` `top` `bottom`设置为`0`，`margin`都设置为`auto` 由浏览器平均分配
+
+#### 总结
+
+- 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
+  - `left` `right` `top` `bottom`都为0，`margin`为0
+- 如果希望绝对定位元素在定位参照对象中剧中展示，可以给绝对定位元素设置以下属性
+  - `left` `right` `top` `bottom`都为0，`margin`为`auto`
+  - 另外，还需要设置具体的宽高值，让宽高小于定位参照对象的宽高
+
+#### auto值解读
+
+为元素的属性设置`auto`并不代表着让这个元素居中，而是**交给浏览器处理，让浏览器决定其展示效果**
+
+例如设置`800px = 200px + ml0 + mr0 + left(auto) + right(auto)`时并不会居中，浏览器对`left` `right`属性的`auto`值给出的默认行为是：该元素原来在哪里，那么就仍然放在哪里
+
+以`width`属性为例：`width: auto;`
+
+- 行内非替换元素：包裹内容
+- 块级元素：包含块的宽度
+- 绝对定位元素：包裹内容
+
+### z-index解析
+
+- `z-index`属性用来设置定位元素的层叠属性（仅对**定位元素**有效）
+  - 只有定位元素才可能发生层叠，所以只有定位元素才能被设置`z-index`
+  - 取值可以是**正整数、负整数、0** 默认值为 `auto`（`0`）
+- 比较原则
+  - 如果是**兄弟关系**
+    - `z-index`越大，层叠在越上面
+    - `z-index`相等，写在后面的那个元素层叠在上面
+  - 如果不是**兄弟关系**
+    - 各自从元素自己以及祖先元素中，找出最临近的2个定位元素进行比较
+    - 而且这两个定位元素必须设置有`z-index`的具体数值
+
+## 浮动布局
+
+- 认识浮动
+- 浮动的规则
+- 浮动的案例
+- 清除的问题
+- 清除浮动
+- 布局方案对比
+
+### 认识浮动布局
+
+float属性可以指定一个元素**沿其容器**的**左侧**或者**右侧**放置，允许**文本和内联元素环绕它**
+
+- float属性最初只用于在一段文本内浮动图像，实现文字环绕的效果
+- 但是早期CSS标准中并没有提供好的左右布局方案，因此在一段时间里面它成为网页多列布局的最常用工具
+- 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
+- 可以通过`float`属性让元素产生浮动效果
+  - 常用取值：`right` `left` `none`(默认值)
+
+### 浮动案例
+
+小问题：行内级元素如`<span>`之间的空格：
+
+以下内容展示在浏览器上时，中间会出现间隙，这是因为浏览器将`<span>`之间的空格识别为了换行符
+
+```html
+<div class="box">
+  <span>123</span>
+  <span>asd</span>
+  <span>www</span>
+</div>
+```
+
+这样书写的时候，就不会有间隙了，但是代码的可阅读性大打折扣：
+
+```html
+<div class="box">
+  <span>123</span><span>asd</span><span>www</span>
+</div>
+```
+
+可以通过这样的方法解决，换行符的字体大小为0，自然就不再展示出来了：
+
+```css
+.box {
+  font-size: 0;
+}
+.box span {
+  font-size: 16px;
+}
+```
+
+上述的方法不优雅，通过浮动来实现更优雅，所有的`<span>`都脱离标准流并且紧挨着：
+
+```css
+.box span {
+  float: left;
+}
+```
+
+### 浮动规则
+
+- 元素一旦浮动 将脱离标准流
+  - 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（**一般是父元素**） 或者其他浮动元素的边界为止
+  - 定位元素会层叠在浮动元素上面
+  - 普通元素(`static`) < `float` < `!static`
+- 如果元素是向左浮动，浮动元素的左边界不能超过**包含块**的左边界（右边界亦然）
+  - 例如如果`div`设置了`padding` 那么浮动元素将至多浮动到`padding`的边缘 不会超过
+- 浮动元素之间不能层叠
+  - 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素
+  - 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
+  - 利用这个特性，可以实现元素基本的水平排布
+- 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
+  - 比如行内级元素、`inline-block`元素、块级元素的内容
+  - 浮动只能**在当前行**向左或向右浮动，而不能上下浮动
+  - 可以利用这个规则实现图文混排 图文环绕效果
+
+### 通过清除浮动实现布局(TODO)
+
+**TODO: 案例 缺视频**
+
+## Flex布局
+
+- 认识flex布局
+- flex布局的理解
+- flex-container属性
+- flex-item属性
+
+### 认识Flex布局
+
+- flexbox 弹性盒子
+  - 弹性盒子是一种用于按行或按列(`flex-direction`)布局元素的一维布局方法(`grid`二维布局)
+  - 元素可以膨胀以填充额外的空间 收缩以适应更小的空间（弹性 `flex-grow`拉伸元素）
+  - 通常我们使用flexbox来进行布局的方案称之为 Flex布局（flex layout）
+- flex 布局是目前web开发中使用最多的布局方案
+  - flex布局 flexible布局 弹性布局
+  - 目前特别在移动端已经完全普及
+  - 在PC端也几乎完全普及和使用，少数网站仍然在用浮动布局
+- 为什么需要Flex布局
+  - 长久以来 CSS布局唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
+  - 这两种方法本身具有很大局限性 且属于无奈之举
+
+### flex布局的重要概念
+
+- 开启了flex布局的元素交 flex container
+- flex container 里面的**直接子元素**叫 flex item
+
+当flex container中的子元素变成了 flex item时，具备以下特点
+
+- flex item的布局将受 flex container属性的设置来进行控制和布局
+- flex item不再严格区分块级元素和行内级元素
+- flex item默认情况下是包裹内容的，但是可以设置宽度和高度
+
+设置 `display` 属性为 `flex` 或者 `inline-flex` 时，元素可以成为flex container
+
+- `flex`: flex container以**block-level**的形式存在
+- `inline-flex`: flex container以**inline-level**形式存在
+
+主轴与交叉轴
+
+- `flex-direction`: 设置主轴的方向`row` `row-reverse` `column` `column-reverse`
+- 元素默认沿着主轴排列，主轴排列不下时沿着交叉排列
+
+### flex相关的属性
+
+#### 应用在 flex container 上的CSS属性
+
+- `flex-flow`
+  - 是`flex-direction`和`flex-wrap`的简写 顺序随意 且都可以省略
+  - `flex-direction: column wrap;`
+
+- `flex-direction`
+  - items默认都是沿着main axis（主轴）从main start 向 main end方向排布的
+  - flex-direction决定了 main axis的方向 有四个取值
+  - `row` `row-reverse` `column` `column-reverse`
+- `flex-wrap`
+  - 当flex item放不下时会被自动压缩，填充满一行，即使我们设置了`width`属性，这是因为flex item的宽度和很多因素有关
+  - flex-wrap属性决定了 flex container 是单行还是多行
+    - `no-wrap` （默认值） 单行显示
+    - `wrap` 多行显示
+    - `wrap-reverse` 多行显示但是从下向上显示（沿着主轴的排列顺序不变）
+
+- `justify-content`
+  - 决定了 flex items在main axis上的对齐方式
+    - `flex-start` （默认值） 与 main start 对齐
+    - `flex-end` 与 main end 对齐
+    - `center` 居中对齐
+    - `space-between`
+      - flex items之间的距离相等
+      - 与 main start、main end 两端对齐
+
+    - `space-around`
+      - flex items之间的距离相等
+      - flex items与main start 、 main end之间的距离是flex items之间距离的一半（左右距离等于items间距一半）
+
+    - `space-evently`
+      - flex items之间的距离相等
+      - flex items与main start、main end之间的距离 等于flex items之间的距离（将剩下的距离全部等分）
+
+- `align-items`
+  - 决定了 flex items 在 cross axis 上的对齐方式
+    - `normal` 在弹性布局中，效果和stretch一样
+    - `stretch` 当 flex items 在 cross axis 方向的 size 为 `auto` 时，会自动拉伸至填充 flex container
+      - `stretch` 要想生效，高度（宽度）必须为`auto`
+
+    - `flex-start` 与 cross start 对齐
+    - `flex-end` 与 cross end 对齐
+    - `center` 居中对齐
+    - `baseline` 与基准线对齐
+
+- `align-content` (不常用)
+  - 决定了多行 flex items 在 cross axis 上的对齐方式，用法与`justify-content`类似
+
+
+#### 应用在 flex item 上的CSS属性
+
+- `flex-grow`
+  - 决定了 flex items 如何扩展（拉伸/成长） 
+    - 可以设置任意非负数字（正小数 正整数 0） 默认值为0（不拉伸）
+    - 当flex container在max axis 方向上有剩余size时，flex-grow属性才会生效
+
+  - 给某一个item设置了grow时，那么剩余的空间都将分配给这个item 此item获得剩余空间并拉伸
+  - 如果所有 flex items 的 `flex-grow` 属性总和超过1，每个flex item扩展的size为
+    - flex container的剩余size * flex-grow / sum
+    - flex items扩展后的最终size不能超过max-width / max-height
+
+- `flex-basis` 
+  - 用来设置flex items在main axis方向上的base size
+  - auto（默认值）、具体的宽度数值（100px）
+
+- `flex-shrink`
+  - 决定 flex items 如何收缩
+    - 可以设置任意非负数字（正小数、正整数、0）默认值为1，这也是为什么items填满一行后会自动压缩
+  - 决定flex items最终的base size的因素，优先级从高到低：
+    - max-width max-height min-width min-height
+    - flex-basis
+    - width height
+    - 内容本身的size
+
+- `order` (不常用)
+  - 重新指定元素顺序，值越小排列越靠前，值越大排列越靠后
+  - 支持正整数、负整数、0，默认值为0
+
+- `align-self`
+  - 指定某一个元素在 cross axis 上的对齐方式
+
+- `flex`
+  - 是一个缩写属性
+  - `none`: 相当于设置了`flex: 0 0 auto` 分别代表`flex-grow` `flex-shrink` `flex-basis`
+  - `auto`: 相当于设置了 `flex: 1 1 auto`
+  - 如果只设置了一个值：
+    - 无单位：`flex-grow`
+    - 有单位：`flex-shrink`
+  - 设置了两个值：
+    - `flex: 1 1` `flex-grow` `flex-shrink`
+    - `flex: 1 10px` `flex-grow` `flex-basis`
+
+  - 设置了三个值
+    - 对应设置即可 `flex: 1 1 10px;`
+
+
+### 案例：解决布局问题
+
+列表元素在向下排列时，如果遇到最后一行元素不能填满整行的情况，此时设置的`justify-content: space-between;`就会导致最后一行显示异常，要让最后一行能够居左对齐，可以采用这种方法：
+
+```html
+<div class="box">
+  <div class="item"> Item </div>
+  <div class="item"> Item </div>
+  <div class="item"> Item </div>
+  <div class="item"> Item </div>
+  <div class="item"> Item </div>
+  <span></span>
+  <span></span>
+</div>
+```
+
+```less
+.box {
+  width: 500px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .item {
+    width: 110px;
+    height: 140px;
+  }
+  & > span {
+    width: 110px;
+  }
+}
+```
+
+在列表元素末尾添加若干个`<span>`元素（行内级元素，数量为列数-2），并且为其设置宽度（不设置高度），当最后一行没被`.item`填满时，就由`<span>`补充，而其他的`<span>`由于没有高度，不会被展示，所以自然就会隐藏起来
+
+## CSS中的函数
+
+在前面我们使用过一些CSS函数：
+
+- `rgb rgba translate rotate scale` 等
+- CSS函数通常可以帮助我们更加灵活的来编写样式的值
+
+下面我们再学习几个非常好用的CSS函数：
+
+- `var` 使用CSS定义的变量
+- `calc` 计算CSS值 通常用于计算元素的大小或位置
+- `blur` 毛玻璃（高斯模糊）效果
+- `gradient` 颜色渐变函数
+
+### var  变量
+
+CSS中可以自定义属性
+
+- 属性名需要以两个减号（--）开始
+- 属性值可以是任何有效的CSS值
+
+```css
+/* 两种方式皆可 */
+/* 只在其后代元素内可以使用 */
+.html {
+  --primary-color: #fff;
+}
+:root {
+  --primary-color: #0f0;
+}
+```
+
+```css
+.box {
+  color: var(--primary-color);
+}
+.title {
+  color: var(--primary-color);
+}
+```
+
+规则集定义的选择器，是自定义属性的**可见作用域**（只在选择器内部有效）
+
+所以推荐给自定义属性定义在`html`中，也可以使用`:root`选择器选中`html`，这样变量可以在全局使用
+
+### calc 计算
+
+```html
+<div class="container">
+  <div class="left-box"></div>
+  <div class="right-box"></div>
+</div>
+```
+
+```less
+.container {
+  width: 300px;
+  .left-box {
+    width: 50px;
+  }
+  .right-box {
+    width: calc(100% - 50px)
+  }
+}
+```
+
+要让右侧的`.right-box`实现占满`300px - 50px`的剩余空间，且考虑左侧块宽度的动态伸缩
+
+此处的`100%`代表了`width`属性的`100%`，而`width`的`100%`则代表相对于**包含块**（父元素）宽度的百分比
+
+### blur 高斯模糊
+
+blur函数可以将高斯模糊应用于输出图片或元素
+
+- `blur(radius)`
+- `radius` 模糊的半径 用于定义高斯函数的偏差值 偏差值越大 图片越模糊
+
+通常会和这两个属性一起使用：
+
+- `filter` 将模糊或颜色偏移等图形效果应用于元素
+- `backdrop` 为元素后面的区域添加模糊或者其他效果
+
+例如音乐歌词的背景展示的一般是音乐封面模糊+遮罩后的样式：
+
+```css
+.box {
+  position: relative;
+}
+.cover {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  /* 添加模糊的同时 添加黑色半透明遮罩 */
+  background-color: rgba(0, 0, 0, .2);
+  backdrop-filter: blur(10px);
+}
+```
+
+### gradient 颜色渐变
+
+`gradient`是一种`<image>` CSS数据类型的子类型
+
+- CSS 的 `<image>` 数据类型描述的是2D图形
+- 比如`background-image list-style-image border-image content`等
+- `<image>` 常见的方式是通过URL来引入一个图片资源
+
+设置颜色渐变，本质上是设置了一张图片的颜色渐变。重点了解线性渐变的使用：
+
+```css
+.box {
+  width: 100px;
+  height: 100px;
+  
+  background-image: liner-gradient(to right, red, blue); /* 由红变蓝线性渐变 方向从左到右 */
+  background-image: liner-gradient(to right top, red, blue); /* 方向右上角 */
+  background-image: liner-gradient(45deg, red, blue); /* 方向45度 */
+}
+```
+
+其他渐变函数：
+
+- `radial-gradient()`
+- `repeating-linear-gradient()`
+- `repeating-radial-gradient()`
+
+## CSS求值过程
+
+- DOM树、样式规则
+- filtering 对应用到该页面的规则用一下条件进行筛选：选择器匹配、属性有效、符合当前media等
+  - 声明值 Declared Values 一个元素的某个属性可能有0 到多个声明值，比如 `p { font-size: 16px; }` 和 `p.text { font-size: 1.2em; }`
+- cascading 按照来源、!important、选择器特异性、书写顺序等选出优先级最高的**一个属性值**
+  - 层叠值 Cascaded Value 在层叠的过程中，赢得优先级比赛的那个值 比如`1.2em`
+- defaulting 当层叠值无效或为空时，使用继承或者默认值
+  - 指定值 Specified Value 经过cascading 和 defaulting 之后，保证指定值一定不为空
+- resolving 将一些相对值或者关键字转化成绝对值，比如em转为px，相对路径转为绝对路径
+  - 计算值 Computed Value 一般来说是浏览器在不进行实际布局的情况下，所能得到的最具体的值，比如60%
+- formatting 将计算值进一步转化，比如将`inherit`、百分比转为绝对值
+  - 使用值 Used Value 进行实际布局时使用的值，不会再有相对值或关键字，比如400.2px
+- constraining 将小数像素值转为整数
+  - 实际值 渲染上实际生效的值 比如400px
+
+## 移动端开发
+
+- 原生App开发
+  - iOS Android RN uniapp Flutter
+- 小程序开发
+  - 原生小程序 uniapp Taro
+- Web页面
+  - 移动端的Web页面 可以使用浏览器或WebView浏览
+
+自适应和响应式
+
+- 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
+- 响应式：会随着屏幕的实时变动而自动调整 是一种自适应
+
+在PC端是不区分视口宽度的，在移动端可以通过`<meta>`标签设置布局视口的宽度：
+
+`width`设置布局视口的宽度
+
+```html
+<meta name="viewport" content="width=980px">
+<meta name="viewport" content="width=device-width">
+```
+
+为了避免布局元素放到不同宽度设备上展示会出现缩放，所以一般不会直接指定布局视口的宽度为某一值
+
+而是设置为`device-width`等于设备的宽度
+
+## 额外知识补充
+
+### 浏览器前缀
+
+有时候可能会看到：一些CSS属性名前带有前缀
+
+`-o-* -xv-* -ms-* mso-* -moz-* -webkit-*`
+
+```css
+.box {
+  -o-transform: translate(100px);
+  -ms-transform: translate(100px);
+  -webkit-transform: translate(100px);
+  -moz-transform: translate(100px);
+}
+```
+
+官方文档中称之为：vendor-specific extensions 供应商特定扩展
+
+为什么需要浏览器前缀？ CSS属性在制定之初并没有成为标准，浏览器为了防止后续会修改名字，给新的属性添加了浏览器前缀
+
+浏览器私有前缀，只有对应的浏览器才能解析
+
+- -o-*  -xv-*  Opera等
+- -ms-* mso-*  IE等
+- -moz-  Firefox等
+- -webkit-*  Safari  Chrome等
+
+模块化打包工具会自动添加浏览器前缀
+
+### 深入理解BFC（重点）
+
+FC全称是 Formatting Context， 译作格式化上下文。元素在标准流里面都是属于一个BFC的
+
+> Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
+>
+> 标准流中的元素属于格式化上下文，它可以是块级或行内级的，但不能同时是块级和行内级的。块级元素参与块级格式化上下文。行内级元素参与行内级格式上下文。
+
+- 块级盒子都是在BFC (Block Formatting Context)中布局的（`div p h1 h2`）
+- 行内元素都是在IFC(Inline Formatting Context)中布局的（`a span i`）
+
+#### 在哪些具体情况下，会创建BFC呢？
+
+> Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
+>
+> 浮动、绝对定位元素、不是块级元素的块容器（例如内联块、表格单元格和表格标题），以及`overflow`值不为`visible`的块级元素（除非该值已被传播到视口）为其内容建立新的块格式化上下文。
+
+- 根元素 `<html>`
+- 浮动元素 `float`不为`none`
+- 绝对定位元素 `position`为`absolute`或`fixed`
+- 行内块元素 `display`为`inline-block`
+- 表格单元格 `display`为`table-cell` `table-caption`（表格单元格&表格标题默认值）
+- 匿名表格单元格元素 `display`为`inline-table table table-row table-row-group table-header-group table-footer-group` （ HTML table 默认属性）
+- `overflow`计算值 不为`visible`的块元素
+- 弹性元素 `display`为`flex` `inline-flex`元素的直接子元素
+- 网格元素 `display`为`grid` `inline-grid`元素的直接子元素
+- `display`值为`flow-root`的元素
+
+#### 形成BFC有什么作用？
+
+> In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
+>
+> 在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直放置。两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。
+>
+> In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
+>
+> 在块格式上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会因浮动而缩小），除非框建立了新的块格式上下文（在这种情况下框本身可能会因浮动而变窄）。
+
+ 在BFC中，所有的块级元素都会遵循BFC的规则排列：
+
+- 块级元素在BFC中，会在垂直方向上一个接一个地放置
+- 相邻块级元素之间的垂直边距会被折叠（`margin`的折叠特性`collapse`）
+- 在BFC中，每个元素的左边缘紧挨着包含块的左边缘
+
+**根据文档中的这段描述，就可以解释：为什么BFC可以解决`margin`的折叠问题、浮动高度塌陷的问题了**
+
+#### BFC如何解决margin折叠问题
+
+两个位于`body`下的块级元素在正常情况下按照BFC的排布规则，从上至下依次排列，二者之间没有距离
+
+```html
+<body>
+  <div class="box1"></div>
+  <div class="box2"></div>
+</body>
+```
+
+```css
+.box1 {
+  height: 100px;
+  background-color: red;
+}
+.box2 {
+  height: 100px;
+  background-color: blue;
+}
+```
+
+![](CSS.assets/BFC-1.jpg)
+
+我们为两个元素分别设置垂直方向的`margin`，此时BFC的规则就被触发了：**在同一个BFC中**，垂直方向的`margin`会发生折叠，取二者较大的值，真正的边距变成了`20px`，而不是臆想中的`30px`
+
+```css
+.box1 {
+  height: 100px;
+  background-color: red;
+  margin-bottom: 10px;
+}
+.box2 {
+  height: 100px;
+  background-color: blue;
+  margin-top: 20px;
+}
+```
+
+![](CSS.assets/BFC-2.jpg)
+
+这两个盒子位于同一个BFC之中进行布局：`<html>`标签形成的BFC
+
+**那么我们让这两个盒子中的某个盒子形成一个新的BFC，让盒子在两个不同的BFC中进行布局，就可以解决`margin`的折叠问题**
+
+我们在`.box1`外面包裹一个`.container`，并且为`.container`设置`overflow: auto;`。此时`.container`内就形成了一个新的BFC，`.box1`在这个新的BFC中进行布局，这样两个盒子就不会再出现`margin`折叠的问题了
+
+```html
+<body>
+  <div class="container">
+    <div class="box1"></div>
+  </div>
+  <div class="box2"></div>
+</body>
+```
+
+```css
+.container {
+  overflow: auto;
+}
+.box1 {
+  height: 100px;
+  background-color: red;
+  margin-bottom: 10px;
+}
+.box2 {
+  height: 100px;
+  background-color: blue;
+  margin-top: 20px;
+}
+```
+
+需要注意的是：
+
+- 不要给`.box1`设置`overflow: auto;`，这是无效的，这只代表了`.box1`内形成了一个新的BFC，其中元素将在这个新的BFC中布局，而`.box1`仍然在`<html>`内的BFC中并未改变。
+- 此时如果我们为`.container`设置了垂直方向的`margin`，`.container`仍然会与`.box2`发生边距折叠
+
+#### BFC如何解决浮动高度塌陷问题
+
+浮动布局元素没有高度，需要清除浮动
+
+实质上，通过BFC来“清除浮动”的说法是存在误解的，我们此次从原理上解释：为什么BFC可以做到清除浮动的效果
+
+下例中`.container`宽度为`350px`，其中包裹了四个浮动元素，一行最多容纳三个浮动元素，第四个浮动元素将换到下一行，可以发现`.container`的高度发生了塌陷，在页面上不可见，这是因为**浮动元素由于脱离了标准流，不会向父级元素汇报高度**
+
+```html
+<body>
+  <div class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</body>
+```
+
+```css
+.container {
+  width: 350px;
+  background-color: red;
+}
+.item {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  border: 1px solid black; 
+
+  float: left;
+}
+```
+
+![](CSS.assets/BFC-3.jpg)
+
+我们不能简单的从现象归纳本质：*BFC让浮动元素向父级元素汇报了高度，所以解决了高度塌陷的问题*
+
+绝对定位元素`position: absolute | fixed;`也脱离了标准流，也不会向父元素汇报高度，相应的也会产生同样的父元素高度塌陷的问题
+
+但是BFC能解决`float`的父元素高度塌陷问题，却无法解决绝对定位元素的高度塌陷问题
+
+要通过清除浮动的方式解决，可以修改以下代码：
+
+```html
+<div class="container clear-fix">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+```
+
+```css
+.clear-fix::after {
+  content: '';
+  display: block;
+  clear: both;
+  height: 0;
+  visibility: hidden;
+}
+```
+
+相当于给父元素内部创建了一个新元素，这个元素在浮动元素的下面。
+
+如果要使用BFC解决此方案，也十分简单：
+
+```css
+.container {
+  width: 350px;
+  background-color: red;
+  overflow: auto;
+}
+```
+
+给`.container`设置`overflow: auto;`，让`.container`创建一个新的BFC，这样之前的高度塌陷问题也能够被解决
+
+![](CSS.assets/BFC-4.jpg)
+
+官方文档中是这样解释的：
+
+> In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:
+>
+> 在某些情况下（例如，参见上文第10.6.4和10.6.6节），建立块格式化上下文的元素的高度计算如下：
+>
+> If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
+>
+> 如果它只有内联级别子级，则高度是最上面的线框顶部和最下面的线框底部之间的距离。
+>
+> If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
+>
+> 如果它有块级子框，则高度是最上面的块级子盒的上边距边缘与最下面的块级个子盒的下边距边缘之间的距离。
+>
+> Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.
+>
+> 绝对定位的子对象被忽略，相对定位的框被认为没有偏移。请注意，子框可能是匿名块框。
+>
+> In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
+>
+> 此外，如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则会增加高度以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位子体内的浮点数或其他浮点数。
+
+从原理上解释，要实现这样的效果必须同时满足两个条件：
+
+- 浮动元素的父元素触发BFC，形成独立的块级格式化上下文
+- 浮动元素的父元素的高度值为`auto`（`height`的默认值即为`auto`）
+
+BFC的高度是`auto`的情况下，是按照如下方法计算高度的：
+
+- 如果只有`inline-level`元素，是行高的顶部和底部的距离
+- 如果有`block-level`元素，是由最底层的快上边缘和最底层块盒子的下边缘之间的距离
+- 如果有绝对定位元素，它的高度将被忽略（`display: absolute | fixed;`）
+- **如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘**
+
+将`overflow`设置为`auto`是开发中较为常用的创建BFC的方法之一，这个方法的优点是简单且没有副作用（`overflow`默认值为`visibile`）
+
+[W3C 9.4.1 Block formatting contexts](https://www.w3.org/TR/CSS2/visuren.html#block-formatting)
+
+[W3C 10.6.7 'Auto' heights for block formatting context roots](https://www.w3.org/TR/CSS2/visudet.html)
+
+### 媒体查询
+
+媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口，可以根据特定的特性比如屏幕的宽度来修改你的页面
+
+媒体查询的使用方式主要有三种：
+
+- 方式一：通过`@media @import`使用不同的CSS规则（常用）
+- 方式二：使用`media`属性，为`<style> <link> <source>`和其他HTML元素指定特定的媒体类型
+- 方式三：使用`Window.matchMedia()`和`MediaQueryList.addListener()`方法来测试/监控媒体状态
+
+在日常开发中更为常用的是通过`@media`来应用不同的CSS规则
+
+当屏幕宽度小于`800px`时，应用`miniScreen.css`的样式
+
+```css
+@import url(./css/miniScreen.css) (max-width: 800px);
+```
+
+```html
+<link rel="stylesheet" media="(max-width: 800px)" href="./css/miniScree.css" />
+```
+
+```css
+@media (max-width: 800px) {
+  body {
+    background: orange;
+  }
+}
+```
+
+#### 媒体类型
+
+在使用媒体查询时，必须指定要使用的媒体类型
+
+- 媒体类型是可选的，并且会隐式地应用`all`类型
+  - 在书写`@media`时，后面的条件可以省略掉，省略时其值为`all`
+- 常见的媒体类型值
+  - all 适用于所有设备
+  - print 适用于在打印预览模式下载屏幕查看的分页材料和文档
+  - screen 主要用于屏幕（掌握）
+  - speech 主要用于语音合成器
+
+#### 媒体特性
+
+媒体特性描述了浏览器、输出设备的具体特征
+
+- 通常会将媒体特性描述为一个表达式
+- 每条媒体特性表达式都用括号括起来
+
+常用的媒体特性
+
+- width 宽度
+- height 高度
+- color 颜色
+- device-aspect-ratio 设备比例
+- device-width 设备高度
+- device-height 设备宽度
+- orientation 方向：例如用户屏幕的旋转方向，根据横屏/竖屏应用不同的CSS样式
+- resolution 分辨率
+
+除了方向`orientation`，其余媒体特性都支持设置最大/最小值 `min-* max-*`
+
+#### 逻辑操作符
+
+当媒体特性中包含多个特性表达式，他们之间通过逻辑操作符连接起来
+
+```css
+@media (max-width: 800px) and (min-width: 200px) {
+  body {
+    color: red;
+  }
+}
+```
+
+- `and` 组合多个媒体查询规则
+- `not` 否定媒体查询
+- `only` 仅在整个查询都匹配时才应用样式
+- `,` 逗号用于将多个媒体查询合并为一个规则
+
+#### 常见的移动端适配
+
+根据屏幕尺寸，动态修改`font-size`以优化文字在不同屏幕的展示效果
+
+```css
+@media (min-width: 320px) {
+  body {
+    font-size: 10px;
+  }
+}
+@media (min-width: 768px) {
+  body {
+    font-size: 15px;
+  }
+}
+@media (min-width: 1025px) {
+  body {
+    font-size: 20px;
+  }
+}
+```
+
+### link元素的使用
+
+`link`元素是外部资源链接元素，规范了文档与外部资源的关系，通常位于`head`标签中
+
+常见的应用：
+
+- 最常用的链接是样式表（CSS）
+- 用来创建站点图标（favicon）
+
+常见的属性：
+
+- `href`：此属性指定被链接资源的URL 可以是绝对的，也可以是相对的
+- `rel`：指定链接类型，常见的链接类型：
+  - `icon`：站点图标
+  - `stylesheet`：CSS样式
+  - （拓展）`dns-prefetch`：对链接指向的资源进行DNS预解析与协议握手
+
+### CSS颜色的表示方式
+
+CSS中的颜色为RGB表示法，每个位置的值的范围为`0~255`
+
+```css
+.div {
+  /* 红色 */
+  color: rgb(255, 0, 0);
+  /* 黑色 */
+  color: rgb(0, 0, 0);
+  /* 白色 */
+  color: rgb(255, 255, 255);
+}
+```
+
+此处的`rgb()`是一个CSS函数，RGB颜色也可以用十六进制的方式表示：
+
+```css
+.div {
+  /* 红色 */
+  color: #ff0000;
+  /* 黑色 */
+  color: #000000;
+  /* 白色 */
+  color: #ffffff;
+}
+```
+
+每2位数字代表了一个颜色的数值，当值为`255`时，即对应十六进制中的`FF`
+
+除了使用RGB格式表示颜色，还有RGBA表示法，其中的A代表透明度
+
+### 网络字体
+
+ 设置的`font-family`只有当字体在系统中存在才会被展示，如果要使用自定义的字体就需要用到网络字体
+
+- 保存字体文件`xxx.ttf` 并放到对应的目录中
+- 在CSS中通过`@font-face`引入字体，并设置格式
+- 在CSS代码中使用该字体
+- 部署静态资源时 将`HTML/CSS/Javascript/Font` 一起部署在静态服务器中
+
+``` css
+@font-face {
+  font-family: 'ziu';
+  src: url('./fonts/ZiuFont.ttf');
+}
+.box {
+  font-family: 'ziu';
+}
+```
+
+- 用户浏览一个网页时，因为代码中有引入字体文件，字体文件会被一起下载下来
+- 浏览器会根据使用的字体，在下载的字体文件中查找、解析、使用对应的字体
+- 在浏览器中使用对应的字体显示内容
+
+#### 网络字体的兼容性
+
+- 在上文中使用的字体文件是`.ttf` 它是TrueType字体
+  - 在开发中某些浏览器可能不支持该字体 所以为了浏览器兼容性问题 我们需要有对应其他格式的字体
+- TrueType字体 拓展名 `.ttf`
+  - OpenType / TrueType 字体
+    - 拓展名 `.ttf` `.otf`
+    - 建立在TrueType字体之上
+  - Embedded OpenType 字体
+    - 拓展名是 `.eot` 
+    - 是OpenType字体的压缩版
+  - SVG 字体
+    - 拓展名是`.svg` `.svgz`
+  - WOFF 字体
+    - 表示 WebOpenFontFormatWeb 开放字体
+    - 拓展名是`.woff` 建立在TrueType上
+
+### 字体图标
+
+将字体直接设计为图标的样子
+
+- 放大不会失真
+- 可以任意切换颜色
+- 用到很多图标时 文件相对图片较小
+
+用例：在iconfont中收藏图标，到个人中心中下载代码，其中就包含字体图标文件，以`ttf`为后缀
+
+```css
+@font-face {
+  font-family: 'iconfont';
+  src: url(./fonts/iconfont.ttf);
+}
+i {
+  font-family: 'iconfont';
+}
+```
+
+```html
+<i>\e63e</i>
+```
+
+在HTML中以`字体图标的Unicode`的方式引入，即可显示图标
+
+更常见的做法，是通过伪元素引入字体图标
+
+```css
+.icon-video:before {
+  content: '\e63e';
+}
+```
+
+### 精灵图 雪碧图
+
+CSS Sprite 是一种CSS图像合成技术 将各种小图片合并到一张图片上 然后利用CSS的背景定位 来显示指定位置的图片部分
+
+- 减少网页的http请求数量 加快网页的响应速度 减轻服务器压力
+- 减小图片总大小
+- 解决了图片命名困扰 只需要针对一张集合的图片命名
+
+将精灵图保存下来后，在代码中通过`background-image`引入
+
+```css
+i.hot-icon {
+  /* background: url('../asset/topbar.png') no-repeat -192px 0; */
+  background-image: url('../asset/topbar.png'); /* 引入精灵图 */
+  background-repeat: no-repeat; /* 不重复显示 */
+  background-position: -192px 0; /* 偏移到目标元素的位置(x,y) */
+  
+  /* 改为inline-block展示 使能width与height */
+  display: inline-block;
+  
+  /* 宽高调整为要展示小图标的宽高 */
+  width: 26px;
+  height: 13px;
+}
+```
+
+[SpriteCow 获取元素位置](http://spritecow.com)
+
+### white-space
+
+由于以下这段文字中包含空格、换行符，但是实际展示中空格和换行符会被合并，遇到完整单词时会发生换行
+
+```html
+<div class="box">
+  我是Ziuuuuu         ziu Ziuuuuuuuu
+  你好你好你好你好        你好你好 my name is ziu
+</div>
+```
+
+```css
+.box {
+  white-space: nowrap; /* 不换行 */
+}
+```
+
+`white-space`用于设置空白处理和换行规则
+
+- normal 不换行 合并
+- nowrap 不换行 不合并
+- pre 换行 不合并
+- pre-wrap 换行 合并
+
+空格、Tab、
+
+### text-overflow
+
+text-overflow通常用来设置文本溢出时的行为
+
+- clip 溢出的内容直接裁减掉（字符可能会显示不完整）
+- ellipsis 溢出的那行结尾处用省略号表示
+
+`text-overflow`生效的前提是`overflow`不为`visible`，例如`overflow: auto;`
+
+**常用写法：**将超出部分隐藏，并且在末尾缀上`...`
+
+```css
+.title {
+  width: 150px;
+  
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+```
+
+### 水平垂直居中方案
+
+#### margin: auto
+
+> 父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高
+>
+> 这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个`margin：auto`它就可以上下左右都居中了
+
+```css
+div {
+  width: 600px;
+  height: 600px;
+  position: relative;
+}
+img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+```
+
+#### flex
+
+> 利用flex，`align-items:center`是控制垂直方向居中，`justify-content:center`是控制水平方向的居中。
+
+```css
+div {
+  width: 600px;
+  height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+img {}
+```
+
+#### 负margin
+
+> 通过百分比将图片移动到容器中心，再对齐中心点就行了。
+
+```css
+div {
+  width: 600px;
+  height: 600px;
+  position: relative;
+}
+img {
+  width: 400px;
+  height: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -200px;
+  margin-left: -200px;
+}
+```
+
+#### translate
+
+> 与负margin方法原理相同，只不过用到了`translate(-50%, -50%);`来移动自身的50%
+
+```css
+div {
+  width: 600px;
+  height: 600px;
+  position: relative;
+}
+img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+```
+
+#### margin: 0 auto;
+
+```css
+.child {
+  width: 200px;
+  height: 200px;
+  margin: 0 auto; /* 定宽块级元素 */
+  background-color: red;
+}
+```
+
+### 内联元素居中布局
+
+水平居中
+
+- 行内元素可设置：**text-align: center**
+- **flex** 布局设置父元素：**display: flex** ; **justify-content: center**
+
+垂直居中
+
+- 单行文本父元素确认高度：**height === line-height**
+- 多行文本父元素确认高度：**disaply: table-cell**; **vertical-align: middle**
+
+### 块级元素居中布局
+
+水平居中
+
+- 定宽: **margin: 0 auto**
+- 绝对定位 + **left:50%** + **margin:** 负自身一半
+
+垂直居中
+
+- **position: absolute** 设置 **left**、**top**、**margin-left**、**margin-top**(定高)
+- **display: table-cell**
+- **transform: translate(x, y)**
+- **flex** (不定高，不定宽)
+- **grid**(不定高，不定宽)，兼容性相对比较差
+
+
+
+## HTML5新增内容
+
+### 语义化元素
+
+在HTML5之前，网站分布层级通常包括以下内容：
+
+- `header nav main footer`
+- 过多的使用`div`标签，通过id或class来区分元素
+- 对浏览器来说 这些标签不够语义化，对于搜索引擎来说，不利于SEO的优化
+
+HTML5新增了语义化的元素
+
+- `header` 头部元素
+- `nav` 导航元素
+- `section` 定义文档某个区域的元素
+- `article` 内容元素
+- `aside` 侧边栏元素
+- `footer `尾部元素
+
+### video标签
+
+HTML5增加了对媒体类型的支持：
+
+- 音频 `audio`
+- 视频 `video`
+
+使用方式一般有两个：
+
+- 可以通过元素使用`<video>`和`<audio>`
+- 可以通过JavaScript的API对其进行控制
+
+```html
+<video src="./assets/video.mp4"></video>
+```
+
+#### 常见的属性
+
+- `src` 视频播放的URL地址
+- `width` `height` 设置视频宽高
+- `controls` 是否展示控制栏
+- `autoplay` 是否自动播放
+- `muted` 是否静音播放
+- `preload: none | metadata | auto` 是否需要预加载视频，`metadata`表示预加载元数据（比如视频时长）
+- `poster` 一海报帧的URL
+
+#### 兼容性写法
+
+可能有些视频格式当前浏览器不支持，可以预设好多个地址，浏览器会自动加载直到加载到支持的格式
+
+```html
+<video src="./assets/video.mp4">
+  <source src="./assets/video.ogg" />
+  <source src="./assets/video.webm" />
+</video>
+```
+
+### audio标签
+
+```html
+<audio src="./assets/music.mp4" controls></audio>
+```
+
+### input元素
+
+#### 扩展属性
+
+- `placeholder` 占位文本
+- `multiple` 多选标签
+- `autofocus` 自动聚焦输入框
+
+#### 扩展type属性的值
+
+- `date`
+- `time`
+- `number`
+- `tel`
+- `color`
+- `email`
+- ···
+
+### 全局新增属性 data-*
+
+在HTML5中，新增了一种全局属性的格式`data-*` 用于自定义数据属性
+
+- data设置的属性可以在JavaScript的DOM操作中通过`dataset`轻松获取到
+- 通常用于HTML和JavaScript数据之间的传递
+- 在小程序中，就是通过`data-*`来传递数据的
+
+```html
+<div class="item" age="18" data-name="ziu" data-age="18"></div>
+```
+
+```js
+const el = document.querySelector('.item')
+console.log(el.dataset.age) // 18
+console.log(el.dataset.name) // 'ziu'
+```
+
+
+
+ 
\ No newline at end of file
diff --git a/docs/note/JavaScript.md b/docs/note/JavaScript.md
new file mode 100644
index 00000000..7ec3a3ed
--- /dev/null
+++ b/docs/note/JavaScript.md
@@ -0,0 +1,14 @@
+---
+sidebar: auto
+sidebarDepth: 2
+editLink: false
+---
+
+# JavaScript 基础
+
+JavaScript 组成
+
+- ECMAScript 定义语言规范
+- DOM 用于操作文档的API
+- BOM 用于操作浏览器的API
+
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.png b/docs/note/JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.png
new file mode 100644
index 00000000..e1401965
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.png differ
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.png b/docs/note/JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.png
new file mode 100644
index 00000000..e8b43a5e
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.png differ
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221122103111654.png b/docs/note/JavaScriptEnhanced.assets/image-20221122103111654.png
new file mode 100644
index 00000000..17fed40f
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221122103111654.png differ
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221122103256116.png b/docs/note/JavaScriptEnhanced.assets/image-20221122103256116.png
new file mode 100644
index 00000000..fc529fc1
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221122103256116.png differ
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221122103715428.png b/docs/note/JavaScriptEnhanced.assets/image-20221122103715428.png
new file mode 100644
index 00000000..6e8f3764
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221122103715428.png differ
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221125090752249.png b/docs/note/JavaScriptEnhanced.assets/image-20221125090752249.png
new file mode 100644
index 00000000..64fa3929
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221125090752249.png differ
diff --git a/docs/note/JavaScriptEnhanced.assets/image-20221125094148365.png b/docs/note/JavaScriptEnhanced.assets/image-20221125094148365.png
new file mode 100644
index 00000000..4add68da
Binary files /dev/null and b/docs/note/JavaScriptEnhanced.assets/image-20221125094148365.png differ
diff --git a/docs/note/JavaScriptEnhanced.md b/docs/note/JavaScriptEnhanced.md
new file mode 100644
index 00000000..e15820d6
--- /dev/null
+++ b/docs/note/JavaScriptEnhanced.md
@@ -0,0 +1,3541 @@
+---
+sidebar: auto
+sidebarDepth: 2
+editLink: false
+---
+
+# JavaScript 高级教程
+
+## 函数中this指向
+
+函数在调用时, Javascript会默认为this绑定一个值
+
+```js
+// 定义一个函数
+function foo() {
+  console.log(this)
+}
+
+// 1. 直接调用
+foo() // Window
+
+// 2. 绑定对象调用
+const obj = { name: 'ziu', aaa: foo }
+obj.aaa() // obj
+
+// 3. 通过call/apply调用
+foo.call('Ziu') // String {'Ziu'}
+```
+
+this的绑定: 
+
+- 和定义的位置没有关系
+- 和调用方式/调用位置有关系
+- 是在运行时被绑定的
+
+**this始终指向最后调用它的对象**
+
+```js
+function foo() {
+  console.log(this)
+}
+foo() // Window
+
+const obj = {
+  name: 'ziu',
+  bar: function () {
+    console.log(this)
+  }
+}
+obj.bar() // obj
+
+const baz = obj.bar
+baz() // Window
+```
+
+### 如何改变this的指向
+
+### new 实例化一个函数
+
+> new一个对象时发生了什么:
+>
+> 1. 创建一个空对象
+> 2. 这个空对象会被执行prototype连接
+> 3. 将this指向这个空对象
+> 4. 执行函数体中的代码
+> 5. 没有显式返回这个对象时 会默认返回这个对象
+
+函数可以作为一个构造函数, 作为一个类, 可以通过new关键字将其实例化
+
+```js
+function foo() {
+  console.log(this)
+  this.name = 'Ziu'
+}
+foo() // 直接调用的话 this为Window
+
+new foo() // 通过new关键字调用 则this指向空对象
+```
+
+### 使用 call apply bind
+
+在 JavaScript 中, 函数是对象。
+
+JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。 
+
+两个方法可用于调用函数，两个方法的第一个参数必须是对象本身
+
+****
+
+要将`foo`函数中的`this`指向`obj`，可以通过赋值的方式：
+
+```js
+obj.foo = foo // 绑定
+obj.foo() // 调用
+```
+
+但是也可以通过对函数调用call / apply实现
+
+```js
+var obj = {
+  name: 'Ziu'
+}
+
+function foo() {
+  console.log(this)
+}
+
+foo.call(obj) // 将foo执行时的this显式绑定到了obj上 并调用foo
+foo.call(123) // foo的this被绑定到了 Number { 123 } 上
+foo.call("ziu") // 绑定到了 String { "ziu" } 上
+```
+
+#### 包装类对象
+
+当我们直接使用类似：
+
+```js
+"ZiuChen".length // String.length
+```
+
+的语句时，`JS`会为字符串 `ZiuChen` 包装一个对象，随后在这个对象上调用 `.length` 属性
+
+#### call和apply的区别
+
+- 相同点：第一个参数都是相同的，要求传入一个对象
+  - 在函数调用时，会将this绑定到这个传入的对象上
+- 不同点：后面的参数
+  - apply 传入的是一个数组
+  - call 传入的是参数列表
+
+```js
+function foo(name, age, height) {
+  console.log(this)
+}
+
+foo('Ziu', 18, 1.88)
+
+foo.apply('targetThis', ['Ziu', 18, 1.88])
+
+foo.call('targetThis', 'Ziu', 18, 1.88)
+```
+
+当我们需要给一个带参数的函数通过call/apply的方式绑定this时，就需要使用到call/apply的第二个入参了。
+
+#### 参数列表
+
+当传入函数的参数有多个时，可以通过`...args`将参数合并到一个数组中去
+
+```js
+function foo(...args) {
+  console.log(args)
+}
+
+foo("Ziu", 18, 1.88) // ["Ziu", 18, 1.88]
+```
+
+#### bind绑定
+
+如果我们希望：在每次调用`foo`时，都能将`obj`绑定到`foo`的`this`上，那么就需要用到`bind`
+
+```js
+// 将obj绑定到foo上
+const fun = foo.bind(obj)
+// 在后续每次调用foo时, foo内的this都将指向obj
+fun() // obj
+fun() // obj
+```
+
+`bind()`方法将创建一个新的函数，当被调用时，将其`this`关键字
+
+### 箭头函数
+
+箭头函数是`ES6`新增的编写函数的方式，更简洁。
+
+- 箭头函数不会绑定`this`、`arguments`属性
+  - `arguments`
+
+- 箭头函数不能作为构造函数来使用（不能与`new`同用，会报错）
+
+#### 箭头函数中的this
+
+在箭头函数中是没有`this`的：
+
+```js
+const foo = () => {
+  console.log(this)
+}
+foo() // window
+console.log(this) // window
+```
+
+之所以找到了`Window`对象，是因为在调用`foo()`时，函数内部作用域并没有找到`this`，转而向上层作用域找`this`
+
+因此找到了顶层的全局`this`，也即`Window`对象
+
+#### 箭头函数中this的查找规则
+
+检查以下代码：
+
+```js
+const obj = {
+  name: "obj",
+  foo: function () {
+    const bar = () => {
+      console.log(this)
+    }
+    return bar
+  }
+}
+const fn = obj.foo()
+fn() // obj
+```
+
+代码执行完毕，控制台输出`this`值为`obj`对象，这是为什么？
+
+箭头函数中没有`this`，故会向上层作用域寻找`this`，`bar`的上层作用域为函数`foo`，而函数`foo`的`this`由其调用决定
+
+调用`foo`函数的为`obj`对象，故内部箭头函数中的`this`指向的是`obj`
+
+检查以下代码：
+
+```js
+const obj = {
+  name: "obj",
+  foo: () => {
+    const bar = () => {
+      console.log(this)
+    }
+    return bar
+  }
+}
+const fn = obj.foo()
+fn() // Window
+```
+
+和上面的代码不同之处在于：`foo`也是由箭头函数定义的，`bar`向上找不到`foo`的`this`，故而继续向上，找到了全局`this`，也即`Window`对象
+
+### 严格模式
+
+- 在严格模式下，全局的`this`不是`Window`对象，而是`undefined`。
+- 在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。
+- 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
+
+### this面试题
+
+```js
+var name = 'window'
+
+var person = {
+  name: 'person',
+  sayName: function () {
+    console.log(this.name)
+  }
+}
+
+function sayName() {
+  var sss = person.sayName
+
+  sss() // 默认绑定: window
+  person.sayName();  // 隐式绑定: person
+  (person.sayName)() // 隐式绑定: person, 本质与上一行代码相同
+  ;(person.sayName = person.sayName)() // 间接调用: window
+}
+
+sayName()
+```
+
+```js
+var name = 'window'
+
+var person1 = {
+  name: 'person1',
+  foo1: function () {
+    console.log(this.name)
+  },
+  foo2: () => console.log(this.name),
+  foo3: function () {
+    return function () {
+      console.log(this.name)
+    }
+  },
+  foo4: function () {
+    return () => console.log(this.name)
+  }
+}
+
+var person2 = {
+  name: 'person2'
+}
+
+person1.foo1() // 隐式绑定: person1
+person1.foo1.call(person2) // 显式绑定: person2
+
+person1.foo2() // 上层作用域: window
+person1.foo2.call(person2) // 上层作用域: window
+
+person1.foo3()() // 默认绑定: window
+person1.foo3.call(person2)() // 默认绑定: window
+person1.foo3().call(person2) // 显式绑定: person2
+
+person1.foo4()() // 隐式绑定: person1
+person1.foo4.call(person2)() // 显式绑定: person2
+person1.foo4().call(person2) // 隐式绑定: person1
+```
+
+## 原型与继承
+
+JavaScript中，任何一个对象都有一个特殊的内置属性`[[prototype]]`，称之为原型
+
+- 可以通过`.__proto__`或`Object.getPrototypeOf(obj)`获取到这个原型对象
+
+```js
+const obj = {
+  name: 'Ziu',
+  age: 18
+}
+
+console.log(obj) // obj
+console.log(obj.__proto__) // 由浏览器添加 非标准
+console.log(Object.getPrototypeOf(obj)) // 标准的获取原型的方法
+```
+
+### 原型有什么作用？
+
+当我们通过`[[getter]]`执行 `obj.name` 时：
+
+- 首先在自身上找`name`属性，如果找到了则直接返回
+- 如果没找到，则沿着原型链向上查找，检查其原型是否存在该属性
+
+手动为`obj`的原型添加`message`属性后，在`obj`上获取`name`属性，会沿着原型链找到原型上的`message`属性
+
+```js
+const proto = Object.getPrototypeOf(obj)
+proto.message = 'Hello, Prototype.'
+console.log(obj.message) // Hello, Prototype.
+```
+
+### 函数的显式原型
+
+之前我们说**对象的原型都是隐式的**，不能直接通过属性直接获取（`.__proto__`的方式是非标准）
+
+而**函数是存在一个名为`prototype`的显式原型的**，可以通过这个属性获取到函数的原型，向原型添加额外的属性
+
+每次在通过`new`操作符创建对象时，将对象的隐式原型指向这个显式原型
+
+```js
+function Student(name, age) {
+  this.name = name
+  this.age = age
+}
+
+// 向构造函数的显式原型添加公共方法
+Student.prototype.running = function () {
+  console.log(`${this.name} is running`)
+}
+
+const s1 = new Student('ziu', 18)
+const s2 = new Student('kobe', 19)
+const s3 = new Student('brant', 20)
+
+// 任何一个由该构造函数创建的对象实例的原型都指向函数的显式原型
+// 可以调用原型上的公共方法
+s1.running() // ziu is running
+s2.running() // kobe is running
+
+// 对象实例的原型上包含构造函数与我们手动添加上去的公共方法
+console.log(Object.getPrototypeOf(s1)) // {running: ƒ, constructor: ƒ}
+```
+
+添加在对象原型上的方法，在被多个实例调用时只会开辟一块内存空间
+
+如果将公共方法放到构造函数中，那么每创建一个实例，都会为这个方法开辟一块新的内存空间
+
+构造函数的显式原型中的属性`constructor`，这个属性即指向构造函数，因此存在关系`Student --proto-> {constructor: Student}`
+
+### Object的原型
+
+当我们定义了一个对象，它的原型即为`Object`，而`Object`的原型则为`Null`
+
+```js
+const obj = {
+  name: 'Ziu'
+}
+
+const p1 = Object.getPrototypeOf(obj) // Object
+const p2 = Object.getPrototypeOf(p1) // null
+
+console.log(p1)
+console.log(p2)
+```
+
+以上一节的例子举例：
+
+```js
+// s1是构造函数Student的实例
+const p1 = Object.getPrototypeOf(s1)
+const p2 = Object.getPrototypeOf(p1)
+const p3 = Object.getPrototypeOf(p2)
+
+console.log(Student.prototype) // {running: ƒ, constructor: ƒ}
+console.log(p1) // {running: ƒ, constructor: ƒ}
+console.log(p2) // Object
+console.log(p3) // null
+```
+
+### 原型链实现继承
+
+创建两个构造函数`Person`与`Student`，各自有自身的方法，我们希望实现`Student`继承`Person`的方法
+
+```js
+function Person(name, age) {
+  this.name = name
+  this.age = age
+}
+
+Person.prototype.running = function () {
+  console.log(`${this.name} is running.`)
+}
+
+function Student(name, age, id, score) {
+  this.name = name
+  this.age = age
+  this.id = id
+  this.score = score
+}
+
+Student.prototype.studying = function () {
+  console.log(`${this.name} is studying.`)
+}
+
+const s1 = new Student('Ziu', 18, 2, 60)
+s1.running() // ERROR: s1.running is not a function
+```
+
+显然现在`Student`和`Person`是没有任何关联的，要让二者联系起来有以下几种方法：
+
+#### 方法一（错误）
+
+```js
+Student.prototype = Person.prototype
+```
+
+可以让`Student`构造函数的显式原型指向`Person`的显式原型，这时可以顺利在`s1`实例上调用`.running()`方法，但是存在问题：
+
+- 在子类`Student`添加的`studying`方法会被添加到父类`Person`的显式原型上，这并不合理
+  - 父类和子类共享一个原型对象，子类的方法都被添加到了父类的原型对象上
+  - 此后如果有从`Person`继承的子类，那这个子类也将可以调用`studying`方法，这是因为所有子类的方法都被放到了父类`Person`的显式原型上
+
+#### 方法二（有效但不合理）
+
+创建一个父类的实例对象（`new Person()`）用这个实例对象作为子类的原型对象
+
+```js
+const p = new Person()
+Student.prototype = p
+```
+
+创建一个`p`对象，其隐式原型`__proto__`指向`Person`的显式原型对象上
+
+通过这个方法，`Student`添加的`studying`方法将被放到`p`对象上，此后由`Student`派生的类，其隐式原型也将被指定到`p`对象上，而不会污染原始的原型
+
+但是当我们会发现，两个构造函数的内容是有重复的：
+
+```js
+function Person(name, age) {
+  this.name = name
+  this.age = age
+}
+function Student(name, age, id, score) {
+  this.name = name
+  this.age = age
+  this.id = id
+  this.score = score
+}
+```
+
+针对`name`与`age`的定义完全可以被复用
+
+#### 方法三（最终）
+
+借用构造函数方法
+
+```js
+function Student(name, age, id, score) {
+  Person.call(this, name, age) // 通过Person.call 绑定this到当前的s实例上
+  this.id = id
+  this.score = score
+}
+
+Student.prototype = Person.prototype
+
+const s = new Student('ziu', 18, 2, 60)
+s.running()
+```
+
+- 借用继承的方法很简单：在子类构造函数内部调用父类型构造函数
+  - 因为函数可以在任意时刻被调用
+  - 通过`apply()` `call()`方法也可以在创建新的对象上执行构造函数
+
+### 创建原型对象的方法
+
+```js
+function Person(name, age, height) {}
+function Student() {}
+```
+
+要实现Student对Person的继承：
+
+之前我们通过`new`关键字，为`Student`创建一个新的原型对象，也介绍了这种方法存在的弊端
+
+```js
+const p = new Person()
+Student.prototype = p.prototype
+```
+
+可以使用另一种更优秀的方案：
+
+```js
+var obj = {}
+// obj.__proto__ = Person.prototype // 非规范用法 兼容性不保证
+Object.setPrototypeOf(obj, Person.prototype) // 挂载原型对象
+Student.prototype = obj
+```
+
+社区中也有一种方案：
+
+不需要再`new Person()`，而是用另外一个构造函数，此后需要挂载原型时都通过`new F()`来实现
+
+- 更具备通用性，此处做`Person`的继承，后续也可以做`Animal`的继承
+- 如果浏览器不支持`Object.setPrototypeOf()`则此方法更优
+
+```js
+function F() {}
+F.prototype = Person.prototype
+Student.prototype = new F()
+```
+
+最终方案：
+
+从之前的代码可知，要达到的目的有两个：`1. 创建一个新对象 让原型对象不要被污染 2. 将新对象的原型挂载到目标原型上`
+
+```js
+var obj = Object.create(Person.prototype)
+Student.prototype = obj
+```
+
+`Object.create()`传入的参数是原型对象，可以在创建新对象的同时将此对象的原型指向目标原型对象上
+
+#### 开发封装
+
+根据上述最终方案的原理，在开发中可以对继承方案做如下封装：
+
+```js
+function inherit(subType, superType) {
+  // 创建一个新对象并将新对象的原型指向父类构造函数的原型
+  subType.prototype = Object.create(superType.prototype)
+
+  // 为子类的原型添加constructor属性
+  Object.defineProperty(subType.prototype, 'constructor', {
+    enumerable: false, // 不可被枚举
+    configurable: true, // 值可被修改
+    writable: true, // 值可被覆写
+    value: subType // 初始值: 父类构造函数
+  })
+}
+
+inherit(Student, Person)
+```
+
+另外，如果担心`Object.create()`的兼容性，也可以将创建对象的代码替换为：
+
+```js
+function createObject(o) {
+  function F() {}
+  F.prototype = o
+  return new F()
+}
+...
+  subType.prototype = createObject(superType.prototype)
+...
+```
+
+也可以实现：创建对象并修改新对象的原型指向
+
+### 对象方法补充
+
+- hasOwnProperty
+  - 对象上是否有某一个属于自己的属性（不是在原型上的属性）
+
+```js
+const info = {
+  name: 'Ziu',
+  age: 18
+}
+const obj = createObject(info) // 创建一个新对象并将新对象的原型指向info
+console.log(obj.name) // Ziu: 对象自身上并没有该属性 会沿着原型链找到info对象
+console.log(obj.hasOwnProperty('name')) // false: 因为对象身上并没有该属性
+```
+
+- in 或 for-in
+  - 判断某个属性是否存在于某个对象或对象的原型上
+
+以上文中例子举例，用`in`操作符可以沿着原型链获取属性：
+
+`for-in`遍历的不只是自己身上的属性，也包括原型上的属性，因为对象都是继承自`Object`，而`Object`中的属性其属性描述符`enumerable`默认为false，故自己创建的对象在遍历时不会遍历到`Object`对象上的属性
+
+```js
+console.log('name' in obj) // true: 对象上没有 则沿着原型链找到原型上的属性
+for (const key in obj) {
+  console.log(key) // name age
+}
+```
+
+- instanceof
+  - 用于判断构造函数（Person Student类）的prototype，是否出现在某个实例对象的原型链上
+  - **用于判断对象与构造函数之间的关系**
+  - 该运算符右侧必须为一个对象：`s instanceof null`将报错
+
+```js
+function Person() {}
+function Student() {}
+
+inherit(Student, Person) // 将Student的隐式原型指向Person的隐式原型（继承）
+
+const s = new Student()
+console.log(s instanceof Student) // true
+console.log(s instanceof Person) // true
+console.log(s instanceof Object) // true
+console.log(s instanceof Array) // false
+```
+
+`instanceof`会沿着原型链查找：s -> Student -> Person -> Object
+
+- isPrototypeOf
+  - **用于检测某个对象是否出现在某个实例对象的原型链上**
+  - 可以用于判断对象之间的继承关系
+
+```js
+const s = new Student()
+console.log(Student.prototype.isPrototypeOf(s)) // true
+```
+
+### 解读原型继承关系图
+
+- f1是Foo的实例对象
+- obj是Object的实例对象
+- Function/Object/Foo都是Function的实例对象
+- 原型对象默认创建时，其隐式原型都是指向Object的显示原型（Object指向null）
+
+![JavaScript Object Layout](https://clarkdo.js.org/public/img/jsobj_full.jpg)
+
+在解读之前首先明确以下几点：
+
+- 对象都有隐式原型，可以通过`Object.getPrototypeof()`或`__proto__`（非标准）获取到
+- 函数也是对象，有隐式原型，也有显式原型，显式原型可以通过`.prototype`获取到
+- `Object.getPrototypeOf()`本应传入的是一个对象，当我们为其传入一个构造函数时，是将此构造函数视为对象，此时通过`Object.getPrototypeOf(Foo)`获取到的是**函数对象**的原型，即`Function.prototype`
+
+由上至下解读，首先解读`function Foo()`这一层：
+
+通过构造函数`new Foo()`创建了两个实例对象`f1 f2`，`f1 f2`是由`function Foo`创建出来的，故其隐式原型指向`Foo.prototype`
+
+Foo既是一个函数，也是一个对象（由`new Function()`创建出来的）。
+
+- 作为函数，它拥有显式原型`prototype`，指向`Foo.prototype`这个原型对象
+- 作为对象，它拥有隐式原型`__proto__`，指向`Function.prototype`这个原型对象
+
+而`Foo.prototype`作为一个原型对象，拥有他的构造函数`constructor`指向`Foo`，也拥有它的隐式原型`__proto__`指向`Object.prototype`（本质上`Foo.prototype`也是由`new Object()`创建出来的）
+
+随后，开始解读`function Object()`这第二层：
+
+通过构造函数`new Object()`创建出来两个实例对象`o1 o2`，它们是由`function Object`创建出来的，故其隐式原型指向`Object.prototype`
+
+同样的，`function Object`作为构造函数对象，它既拥有作为函数的显式原型对象，也拥有作为对象的隐式原型对象
+
+- 作为函数，它拥有显式原型，指向`Object.prototype`
+- 作为对象，它是由`new Function()`创建的，其隐式原型指向`Function.prototype`
+
+需要注意的是，原型对象`Object.prototype`的隐式原型指向`null`，它的构造函数`constructor`指向`function Object`
+
+继续解读`function Function()`第三层：
+
+`JavaScript`中的函数对象都是通过`function Function()`这个构造函数创建出来的，所以所有函数的隐式原型`__proto__`都指向`Function.prototype`
+
+- `function Function()`作为函数，其显式原型指向`Function.prototype`
+- 而当其作为对象，是由`new Function()`创建出来的，故其隐式原型也指向`Function.prototype`
+
+### 构造函数的类方法
+
+需要区分一下类方法与实例方法：
+
+- 实例方法：在实例上调用，会沿着原型链向上查找
+- 类方法：在类上（构造函数上）直接调用
+
+在下面的例子中，我们向`Person.prototype`上添加了方法`running`，当我们在实例对象`p`上调用`running`时，会沿着`p` `p.__proto__`(`Person.prototype`)查找，在`Person.prototype`上找到`running`方法后进行调用
+
+然而我们在`Person`类上直接调用`running()`则不行，这是因为`Person`只是`Person.prototype`的`constructor`属性，是它的构造函数，与原型链没有关系，`Person`上并没有`running()`方法，`Person.prototype`上才有
+
+```js
+function Person(name) {
+  this.name = name
+}
+Person.prototype.running = function () {
+  console.log(`${this.name} is running.`)
+}
+const p = new Person('Ziu')
+p.running() // Ziu is running
+Person.running() // undefined
+```
+
+要实现类方法，只需要直接在构造函数上添加新属性即可，因为构造函数本身也是一个对象：构造函数对象
+
+```js
+const names = ['abc', 'cba', 'nba', 'mba']
+Person.randomPerson = function () {
+  const randName = names[Math.floor(Math.random() * names.length)]
+  return new Person(randName)
+}
+
+const p2 = Person.randomPerson()
+console.log(p2)
+```
+
+上例中，我们手动向`Person`构造函数对象中添加了类方法`randomPerson`，可以直接在`Person`上进行调用
+
+## ES6继承
+
+- class方式定义类
+- extends实现继承
+- Babel的ES6转ES5
+- 面向对象多态理解
+- ES6对象的增强
+
+ES6提供了`class`定义类的语法糖，其本质的特性是与ES6之前实现继承的方式是一样的
+
+```js
+class Person {
+  constructor(name) {
+    this.name = name
+  }
+  // 实例方法
+  running() {
+    console.log(`${this.name} is running.`)
+  }
+  // 静态方法(类方法)
+  static randomPerson() {
+    console.log('static func: random person')
+  }
+}
+
+const p = new Person('Ziu') // 根据类创建实例
+
+console.log(Person.prototype === p.__proto__) // true
+console.log(Person.prototype.constructor) // class Person ...
+console.log(typeof Person) // function
+```
+
+当我们通过`new`关键字操作类时，会调用这个`constructor`函数，并执行以下操作：
+
+1. 在内存中创建一个新的对象（空对象）
+2. 这个对象内部的`[[prototype]]`属性（隐式原型`__proto__`）会被赋值为该类的`prototype`属性
+3. 构造函数内部的this，会指向创建出来的新对象
+4. 执行构造函数内的代码
+5. 如果构造函数没有返回非空对象，则返回创建出来的新对象
+
+### 与function的异同
+
+区别在于：定义构造函数与定义实例方法的部分聚合到了一起（高内聚、低耦合）相同的功能如果要用`function`来实现：
+
+```js
+function Person(name) {
+  this.name = name
+}
+Person.prototype.running = function () {
+  console.log(`${this.name} is running.`)
+}
+const p = new Person('Ziu')
+console.log(Person.prototype === p.__proto__) // true
+console.log(Person.prototype.constructor) // function Person ...
+console.log(typeof Person) // function
+```
+
+运行代码可知，几个`console.log`输出都是相同的，这证明二者的本质是相同的，`Class`语法只是一种语法糖
+
+二者之间是存在区别的：
+
+- 构造函数`function Person`可以通过`()`作为普通函数调用
+- `class Person`则不可以直接调用：`Class constructor Person cannot be invoked without 'new'`
+
+### 定义访问器方法
+
+为对象属性定义访问器（`Object.defineProperty()`）：
+
+```js
+const obj = {}
+let value
+
+Object.defineProperty(obj, 'name', {
+  get: function () {
+    console.log('name getted')
+    return value
+  },
+  set: function (val) {
+    console.log('name setted ' + val)
+    value = val
+    return value
+  }
+})
+
+obj.name = 'Ziu' // name setted Ziu
+const tmp = obj.name // name getted
+```
+
+直接在对象中定义访问器：
+
+```js
+const obj = {
+  _name: 'Ziu',
+  get name() {
+    return this._name
+  },
+  set name(val) {
+    this._name = val
+    return true
+  }
+}
+```
+
+在ES6的`class`关键字中定义访问器：
+
+```js
+class Person {
+  constructor(name) {
+    this._name = name
+  }
+  get name() {
+    return this._name
+  }
+  set name(val) {
+    this._name = val
+    return true
+  }
+}
+```
+
+#### 访问器的应用场景
+
+当我们需要频繁的对某些属性组合进行调用时，可以将这些属性组合，在外部可以通过访问器获得计算好的值
+
+例如下述代码中实现了一个简单的`Rectangle`类，可以通过访问器直接获取其`position`与`size`属性
+
+```js
+class Rectangle {
+  constructor(x, y, width, height) {
+    this.x = x
+    this.y = y
+    this.width = width
+    this.height = height
+  }
+
+  get position() {
+    return { x: this.x, y: this.y }
+  }
+
+  get size() {
+    return this.width * this.height
+  }
+}
+
+const rect = new Rectangle(10, 15, 20, 50)
+console.log(rect.position, rect.size)
+```
+
+### 类的静态方法
+
+**在ES6之前我们将这种方法称为`类方法`，在其之后我们将其称为静态方法**
+
+静态方法通常用于定义直接使用类来执行的方法，不需要有类的实例，使用`static`关键字来定义：
+
+```js
+class Person {
+  constructor(name) {
+    this.name = name
+  }
+  // 实例方法
+  running() {
+    console.log(`${this.name} is running.`)
+  }
+  // 静态方法(类方法)
+  static randomPerson() {
+    console.log('static func: random person')
+  }
+}
+```
+
+本质上：
+
+```js
+Person.randomPerson = function() {
+  console.log('static func: random person')
+}
+```
+
+### extends实现继承
+
+在`Person`类的基础上实现`Student`类继承自`Person`
+
+在子类的构造函数内需要通过`super()`并传入父类（超类）构造函数需要的参数，这样就可以调用父类的构造函数
+
+```js
+class Person {
+  constructor(name) {
+    this.name = name
+  }
+  running() {
+    console.log(`${this.name} is running.`)
+  }
+  sitting() {
+    console.log(`${this.name} is sitting.`)
+  }
+}
+
+class Student extends Person {
+  constructor(name, score) {
+    super(name) // 在子类的constructor中通过super()调用父类的构造函数
+    this.score = score
+  }
+  studying() {
+    super.sitting() // 在子类中通过super.method()调用父类的方法
+    console.log(`${this.name} is studying.`)
+  }
+}
+
+const s = new Student('Ziu', 60)
+s.running() // 可以调用父类方法
+s.studying() // 也可以调用自己的方法
+```
+
+- 在子类中，执行`super.method(...)`可以调用一个父类方法
+- 在子类的`constructor`中，执行`super(...)`来调用父类`constructor`
+
+**在子（派生）类的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数**
+
+```js
+...
+constructor(name, score) {
+  this.score = score
+  super(name) // 这是不对的，应该在使用this之前先调用super
+}
+...
+```
+
+### 继承自默认类
+
+可以通过继承，为内置类做修改或扩展，方便我们使用：
+
+在下例中，我们对内置类`Array`做了扩展，添加了访问器属性`lastItem`可以获取数组内最后一个元素
+
+```js
+class SelfArray extends Array {
+  get lastItem() {
+    return this[this.length - 1]
+  }
+}
+
+const arr = new SelfArray(5).fill(false)
+console.log(arr)
+console.log(arr.lastItem)
+```
+
+传统方式也可以实现，通过操作原型：
+
+为`Array.prototype`定义属性`lastItem`，并为其添加`getter`函数，可以通过`lastItem`获取最后一个元素
+
+需要注意的是，这种方法会对所有`Array`对象产生影响，所有的数组都可以调用这个方法
+
+```js
+Object.defineProperty(Array.prototype, 'lastItem', {
+  get: function () {
+    return this[this.length - 1]
+  }
+})
+
+const arr = new Array(5).fill(false)
+console.log(arr.lastItem)
+```
+
+### 类的混入mixin
+
+JavaScript只支持单继承，不支持多继承。要让一个类继承自多个父类，调用来自不同父类的方法，可以使用`mixin`
+
+下例中我们希望`Bird`能够同时继承自`Animal`和`Flyer`类，直接使用`extends`会报错
+
+```js
+function mixinAnimal(BaseClass) {
+  // 1. 创建一个新的类 继承自baseClass
+  // 2. 对这个新的类进行扩展 添加running方法
+  return class extends BaseClass {
+    running() {
+      console.log('running')
+    }
+  }
+}
+function mixinFlyer(BaseClass) {
+  return class extends BaseClass {
+    flying() {
+      console.log('flying')
+    }
+  }
+}
+
+class Bird {
+  eating() {
+    console.log('eating')
+  }
+}
+class newBird extends mixinAnimal(mixinFlyer(Bird)) {}
+
+const b = new newBird()
+b.eating() // eating
+b.running() // running
+b.flying() // flying
+```
+
+通过调用`mixin`方法，创建一个新的类 继承自baseClass，对这个新的类进行扩展 添加我们希望新类能够继承的方法
+
+除了这种方式，也可以通过复制对象的方法实现继承`Object.assign(Bird.prototype, {})`
+
+#### React中的高阶组件
+
+在React的高阶组件实现中有`connect`方法，即是使用到了类似`mixin`的方法实现多继承
+
+### Babel是如何转化ES6的
+
+Babel可以对更高级的代码进行转义，转义后的代码支持在更低级的浏览器上运行。开发者可以使用高级语法进行开发而不需要担心在低级浏览器上的兼容问题。
+
+例如Babel会将ES6的类（Class）写法转义为ES5的`prototype`继承式写法
+
+#### class是如何转化的
+
+假设有以下ES6代码，我们解读通过Babel转义后的ES5代码：
+
+```js
+class Person {
+  constructor(name) {
+    this.name = name
+  }
+  running() {
+    console.log(`${this.name} is running.`)
+  }
+  static randomPerson() {
+    return new this('xxx')
+  }
+}
+
+const p = new Person('Ziu')
+```
+
+```js
+'use strict'
+
+function _typeof(obj) {
+  '@babel/helpers - typeof'
+  return (
+    (_typeof =
+      'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+        ? function (obj) {
+            return typeof obj
+          }
+        : function (obj) {
+            return obj &&
+              'function' == typeof Symbol &&
+              obj.constructor === Symbol &&
+              obj !== Symbol.prototype
+              ? 'symbol'
+              : typeof obj
+          }),
+    _typeof(obj)
+  )
+}
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError('Cannot call a class as a function')
+  }
+}
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i]
+    descriptor.enumerable = descriptor.enumerable || false
+    descriptor.configurable = true
+    if ('value' in descriptor) descriptor.writable = true
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor)
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps)
+  if (staticProps) _defineProperties(Constructor, staticProps)
+  Object.defineProperty(Constructor, 'prototype', { writable: false })
+  return Constructor
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, 'string')
+  return _typeof(key) === 'symbol' ? key : String(key)
+}
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== 'object' || input === null) return input
+  var prim = input[Symbol.toPrimitive]
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || 'default')
+    if (_typeof(res) !== 'object') return res
+    throw new TypeError('@@toPrimitive must return a primitive value.')
+  }
+  return (hint === 'string' ? String : Number)(input)
+}
+var Person = /*#__PURE__*/ (function () {
+  function Person(name) {
+    _classCallCheck(this, Person)
+    this.name = name
+  }
+  _createClass(
+    Person,
+    [
+      {
+        key: 'running',
+        value: function running() {
+          console.log(''.concat(this.name, ' is running.'))
+        }
+      }
+    ],
+    [
+      {
+        key: 'randomPerson',
+        value: function randomPerson() {
+          return new this('xxx')
+        }
+      }
+    ]
+  )
+  return Person
+})()
+var p = new Person('Ziu')
+```
+
+`_createClass`传入一个构造函数，在`_createClass`内部：
+
+- 检查是否传入了原型方法（实例方法）
+  - 如果传入了原型方法，通过调用`_defineProperties`将这些方法挂载到`Constructor.prototype`上
+  - 在此例中，传入`_defineProperties`的第一个参数为原型对象，第二个参数为原型方法，通过for循环挂载方法，并分别配置每个方法的属性描述符：`enumerable: false`，配置其`configurable: true`，如果配置了`'value'`属性，则`writable: true`
+- 检查是否传入了静态方法（类方法）
+  - 如果传入了静态方法，通过调用`_defineProperties`将这些方法挂载到`Constructor`上
+  - 在此例中，具体执行过程是相同的，只不过第一个入参变成了构造函数（类），将方法直接挂载到类上
+- 为`Constructor`类添加显式原型`prototype`属性，其值不可被覆写
+- 返回该构造函数`Person`
+- 直接通过`var p = new Person()`创建实例对象
+  - 在使用`new`关键字调用函数时，在函数内部调用了`_classCallCheck`
+    - 检查调用方式，不允许通过调用函数的方法调用类，而只能通过`new`关键字
+    - 使用`new`关键字时会默认创建一个`Person`实例，此时函数内部的`this`自然指向这个实例
+    - 入参为`this`与该构造函数，如果`this`不是该构造函数的实例，则抛出错误
+
+- 代码中`_toPropertyKey _toPrimitive _typeof`都是方法类
+- 其中涉及到纯函数（pure function）的概念：纯函数是没有任何副作用的函数，可以直接被删除而不用考虑其影响，在Tree-Shaking时有较大作用（将代码从依赖树上删除）
+
+#### extends是如何转化的
+
+```js
+class Person {
+  constructor(name) {
+    this.name = name
+  }
+  running() {
+    console.log(`${this.name} is running.`)
+  }
+  static randomPerson() {
+    return new this('xxx')
+  }
+}
+
+class Student extends Person {
+  constructor(name, score) {
+    super(name)
+    this.score = score
+  }
+  studying() {
+    console.log(`${this.name} is studying.`)
+  }
+  static randomStudent() {
+    return new this('xxx', 66)
+  }
+}
+
+const s = new Student('Kobe', 66)
+```
+
+```js
+'use strict'
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== 'function' && superClass !== null) {
+    throw new TypeError('Super expression must either be null or a function')
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: { value: subClass, writable: true, configurable: true }
+  })
+  Object.defineProperty(subClass, 'prototype', { writable: false })
+  if (superClass) _setPrototypeOf(subClass, superClass)
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf
+    ? Object.setPrototypeOf.bind()
+    : function _setPrototypeOf(o, p) {
+        o.__proto__ = p
+        return o
+      }
+  return _setPrototypeOf(o, p)
+}
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct()
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+      result
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor
+      result = Reflect.construct(Super, arguments, NewTarget)
+    } else {
+      result = Super.apply(this, arguments)
+    }
+    return _possibleConstructorReturn(this, result)
+  }
+}
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
+    return call
+  } else if (call !== void 0) {
+    throw new TypeError('Derived constructors may only return object or undefined')
+  }
+  return _assertThisInitialized(self)
+}
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
+  }
+  return self
+}
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === 'undefined' || !Reflect.construct) return false
+  if (Reflect.construct.sham) return false
+  if (typeof Proxy === 'function') return true
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}))
+    return true
+  } catch (e) {
+    return false
+  }
+}
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf
+    ? Object.getPrototypeOf.bind()
+    : function _getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o)
+      }
+  return _getPrototypeOf(o)
+}
+function _typeof(obj) {
+  '@babel/helpers - typeof'
+  return (
+    (_typeof =
+      'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+        ? function (obj) {
+            return typeof obj
+          }
+        : function (obj) {
+            return obj &&
+              'function' == typeof Symbol &&
+              obj.constructor === Symbol &&
+              obj !== Symbol.prototype
+              ? 'symbol'
+              : typeof obj
+          }),
+    _typeof(obj)
+  )
+}
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError('Cannot call a class as a function')
+  }
+}
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i]
+    descriptor.enumerable = descriptor.enumerable || false
+    descriptor.configurable = true
+    if ('value' in descriptor) descriptor.writable = true
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor)
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps)
+  if (staticProps) _defineProperties(Constructor, staticProps)
+  Object.defineProperty(Constructor, 'prototype', { writable: false })
+  return Constructor
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, 'string')
+  return _typeof(key) === 'symbol' ? key : String(key)
+}
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== 'object' || input === null) return input
+  var prim = input[Symbol.toPrimitive]
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || 'default')
+    if (_typeof(res) !== 'object') return res
+    throw new TypeError('@@toPrimitive must return a primitive value.')
+  }
+  return (hint === 'string' ? String : Number)(input)
+}
+var Person = /*#__PURE__*/ (function () {
+  function Person(name) {
+    _classCallCheck(this, Person)
+    this.name = name
+  }
+  _createClass(
+    Person,
+    [
+      {
+        key: 'running',
+        value: function running() {
+          console.log(''.concat(this.name, ' is running.'))
+        }
+      }
+    ],
+    [
+      {
+        key: 'randomPerson',
+        value: function randomPerson() {
+          return new this('xxx')
+        }
+      }
+    ]
+  )
+  return Person
+})()
+var Student = /*#__PURE__*/ (function (_Person) {
+  _inherits(Student, _Person)
+  var _super = _createSuper(Student)
+  function Student(name, score) {
+    var _this
+    _classCallCheck(this, Student)
+    _this = _super.call(this, name)
+    _this.score = score
+    return _this
+  }
+  _createClass(
+    Student,
+    [
+      {
+        key: 'studying',
+        value: function studying() {
+          console.log(''.concat(this.name, ' is studying.'))
+        }
+      }
+    ],
+    [
+      {
+        key: 'randomStudent',
+        value: function randomStudent() {
+          return new this('xxx', 66)
+        }
+      }
+    ]
+  )
+  return Student
+})(Person)
+var s = new Student('Kobe', 66)
+```
+
+创建`Student`类的代码仍然是一个纯函数：
+
+- 立即执行函数传入了一个实参`Person`，随后实参作为内部函数的形参读取到函数内部以供使用
+- 可以消除副作用，避免直接调用外部变量形成闭包，让立即执行函数在得到参数的同时成为纯函数
+
+在`Student`内部通过调用`_inherits`，传入`Student`与`Person`，将二者之间做了关联：
+
+- 创建一个`Person`实例对象，并将`Student`的原型对象指向此对象
+- 向此对象上添加`constructor`属性，指向构造函数`Student`
+- 经过`_setPrototypeOf`，`Student`的`__proto__`指向了`Person`，这样带来的好处：让`Student`函数对象可以继承`Person`的类方法
+
+实现继承后，通过`_createClass`创建类，相关内容不再重复叙述（挂载实例方法、类方法、`prototype`属性）
+
+至此完成了`Student`类的创建，随后我们通过`var s = new Student(...)`创建一个`Student`实例
+
+- 通过`new`关键字调用`Student`时，将执行其内部的`function Student`
+- 首先执行`_classCallCheck`检查调用方式是否合法
+- 在内部通过借用构造函数继承`_this = _super.call(this, name)`
+  - 此处的`_super`本质上就是父类（可以理解为`_this = Person.call(this, name)`）下面来解释一下`_super`的创建过程
+  - 通过`_createSuper`方法创建`_super`
+    - 检查是否支持`Reflect`，返回的新的函数`_createSuperInternal`实际上就是`_super`
+    - 当外部通过`_this = _super.call(this, name)`调用时，实际上调用的就是这个函数
+    - 首先获取子类的原型，通过`_getPrototypeof`，该函数内部进行了一些兼容性判断，检查是否支持各种获取原型的方法
+    - 最终获取到`Student`的隐式原型`Person`并赋值给`_Super`
+      - 如果支持`Reflect`，通过`Reflect.construct`实现借用构造函数继承，调用父类的构造方法
+      - 如果不支持`Reflect`，通过`Super.apply()`实现···
+  - 绕了一圈，本质上就是调用了`_Person.call(this, name)`，并且将创建的对象返回出来赋值给`result`
+
+#### 自己实现的ES5对比
+
+在之前的内容中我们自己实现了相关的类定义/继承功能
+
+```js
+function Person(name) {
+  this.name = name // 定义内部属性
+}
+// 定义实例方法
+Person.prototype.running = function() {
+  console.log(`${this.name} is running.`)
+}
+// 定义类方法（静态方法）
+Person.randomPerson = function() {
+  return new this('xxx')
+}
+```
+
+自己实现的继承：
+
+```js
+function inherit(SubClass, SuperClass) {
+  // 创建一个新对象并将新对象的原型指向父类构造函数的原型
+  subType.prototype = Object.create(superType.prototype)
+
+  // 为子类的原型添加constructor属性
+  Object.defineProperty(subType.prototype, 'constructor', {
+    enumerable: false, // 不可被枚举
+    configurable: true, // 值可被修改
+    writable: true, // 值可被覆写
+    value: subType // 初始值: 父类构造函数
+  })
+}
+
+inherit(Student, Person)
+```
+
+相比之下不难发现，Babel转义用ES5实现相关功能的核心思想是一致的，只不过Babel转义后的代码添加了更多的边界条件的判定。
+
+
+
+## 浏览器运行原理
+
+### 网页解析过程
+
+输入域名 => DNS解析为IP => 目标服务器返回`index.html`
+
+> DNS：Domain Name System
+
+#### HTML解析过程
+
+- 浏览器开始解析`index.html`文件，当遇到`<link>`则向服务器请求下载`.css`文件
+
+- 遇到`<script>`标签则向服务器请求下载`.js`文件
+
+<img src="JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.png" alt="浏览器解析HTML过程" style="zoom:80%;" />
+
+<img src="JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.png" alt="浏览器是和如何工作的" style="zoom:80%;" />
+
+[How browsers work](https://web.dev/howbrowserswork/)
+
+#### 生成CSS规则
+
+在解析的过程中，如果遇到`<link>`元素，那么会由浏览器负责下载对应的CSS文件
+
+- 注意：下载CSS文件不会影响到DOM解析
+- 有单独一个线程对CSS文件进行下载与解析
+
+浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树：
+
+- 我们可以称之为CSSOM（CSS Object Model，CSS对象模型）
+
+#### 构建Render Tree
+
+有了DOM Tree和CSSOM Tree之后，就可以将二者结合，构建Render Tree了
+
+此时，如果有某些元素的CSS属性`display: none;`那么这个元素就不会出现在Render Tree中
+
+- 下载和解析CSS文件时，不会阻塞DOM Tree的构建过程
+- 但会阻塞Render Tree的构建过程：因为需要对应的CSSOM Tree
+
+#### 布局和绘制(Layout & Paint)
+
+第四步是在渲染树（Render Tree）上运行布局（Layout），以计算每个节点的几何体
+
+- 渲染树会表示显示哪些节点以及其他的样式，但是不表示每个节点的尺寸、位置等信息
+- 布局是确定呈现树中所有节点的宽度、高度和位置信息
+
+第五步是将每个节点绘制（Paint）到屏幕上
+
+- 在绘制阶段，浏览器布局阶段计算的每个frame转为屏幕上实际的像素点
+- 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素
+
+#### 回流和重绘(Reflow & )
+
+回流也可称为重排
+
+理解回流（Reflow）：
+
+- 第一次确定节点的大小和位置，称之为布局（layout）
+- 之后对节点的大小、位置修改重新计算，称之为回流
+
+什么情况下会引起回流？
+
+- DOM 结构发生改变（添加新的节点或者移除节点）
+- 改变了布局（修改了width height padding font-size等值）
+- 窗口resize（修改了窗口的尺寸等）
+- 调用getComputedStyle方法获取尺寸、位置信息
+
+理解重绘（Repaint）：
+
+- 第一次渲染内容称之为绘制（paint）
+- 之后的重新渲染称之为重绘
+
+什么情况下会引起重绘？
+
+- 修改背景色、文字颜色、边框颜色、样式等
+
+**回流一定会引起重绘，所以回流是一件很消耗性能的事情**
+
+- 开发中要尽量避免发生回流
+- 修改样式尽量一次性修改完毕
+  - 例如通过cssText一次性设置样式，或通过修改class的方式修改样式
+- 尽量避免频繁的操作DOM
+  - 可以在一个DocumentFragment或者父元素中，将要操作的DOM操作完成，再一次性插入到DOM树中
+- 尽量避免通过getComputedStyle获取元素尺寸、位置等信息
+- 对某些元素使用position的absolute或fixed属性
+  - 并不是不会引起回流，而是开销相对较小，不会对其他元素产生影响
+
+#### 特殊解析: composite合成
+
+在绘制的过程中，可以将布局后的元素绘制到多个合成图层中
+
+- 这是浏览器的一种优化手段
+- 将不同流生成的不同Layer进行合并
+
+```
+标准流 => LayouTree => RenderLayer
+`position:fixed;` => RenderLayer
+```
+
+默认情况，标准流中的内容都是被绘制在同一个图层（Layer）中的
+
+而一些特殊的属性，浏览器会创建一个新的合成层（CompositingLayer），并且新的图层可以利用GPU来加速绘制
+
+- 每个合成层都是单独渲染的
+- 单独渲染可以避免所有的动画都在同一层中渲染导致性能问题
+- 在各自的层中渲染完成后，只需要将渲染结果更新回合成层即可
+
+当元素具有哪些属性时，浏览器会为其创建新的合成层呢？
+
+- 3D Transforms
+- video canvas iframe
+- opacity 动画转换时
+- position: fixed
+- will-change: 一个实验性的属性，提前告诉浏览器此元素可能发生哪些变化
+- animation 或 transition设置了opacity、transform
+
+##### 案例1：同一层渲染
+
+```css
+.box1 {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+.box2 {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+```
+
+```html
+<body>
+  <div class="box1"></div>
+  <div class="box2"></div>
+</body>
+```
+
+在开发者工具的图层工具中可以看到，两个元素`.box1` 和 `.box2`都是在一个层（Document）下渲染的：
+
+![image-20221122103111654](JavaScriptEnhanced.assets/image-20221122103111654.png)
+
+##### 案例2：分层渲染
+
+当我们为`.box2`添加上`position: fixed;`属性，这时`.box2`将在由浏览器创建出来的合成层，分层单独渲染
+
+```css
+.box2 {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  position: fixed;
+}
+```
+
+![image-20221122103256116](JavaScriptEnhanced.assets/image-20221122103256116.png)
+
+##### 案例3：transform 3D
+
+为元素添加上`transform`属性时，浏览器也会为对应元素创建一个合成层，需要注意的是：只有3D的变化浏览器才会创建
+
+如果是`translateX`或`translateY`则不会
+
+```css
+.box2 {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  /* position: fixed; */
+  transform: translateZ(10px);
+}
+```
+
+![image-20221122103715428](JavaScriptEnhanced.assets/image-20221122103715428.png)
+
+##### 案例4：transition+transform
+
+当我们为元素添加上动画时，动画的中间执行过程的渲染会在新的图层上进行，但是中间动画渲染完成后，结果会回到原始图层上
+
+```css
+.box2 {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  transition: transform 0.5s ease;
+}
+.box2:hover {
+  transform: translateY(10px);
+}
+```
+
+- 这也是使用`transform`执行动画性能更高的原因，因为浏览器会为动画的执行过程单独创建一个合成层
+- 如果是通过修改`top` `left`等定位属性实现的动画，是在原始的图层上渲染完成的。“牵一发则动全身”，动画过程中将导致整个渲染树回流与重绘，极大的影响性能
+
+##### 案例5：transition+opacity
+
+与`transform`类似，使用`transition`过渡的`opacity`动画，浏览器也会为其创建一个合成层
+
+```css
+.box2 {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  opacity: 1;
+  transition: opacity 0.5s ease;
+}
+.box2:hover {
+  opacity: 0.2;
+}
+```
+
+##### 总结
+
+分层确实可以提高性能，但是它是以内存管理为代价的，因此不应当作为Web性能优化策略的一部分过度使用
+
+### 浏览器对script元素的处理
+
+之前我们说到，在解析到`link`标签时，浏览器会异步下载其中的css文件，并在DOM树构建完成后，将其与CSS Tree合成为RenderTree
+
+但是当浏览器解析到`script`标签时，整个解析过程将被阻塞，当前`script`标签后面的DOM树将停止解析，直到当前`script`代码被下载、解析、执行完毕，才会继续解析HTML，构建DOM树
+
+为什么要这样做呢？
+
+- 这是因为Javascript的作用之一就是操作DOM，并且可以修改DOM
+- 如果我们等到DOM树构建完成并且渲染出来了，再去执行Javascript，会造成回流和重绘，严重影响页面性能
+- 所以当浏览器构建DOM树遇到`script`标签时，会优先下载和执行Javascript代码，而后再继续构建DOM树
+
+这也会带来新的问题，比如在现代的页面开发中：
+
+- 脚本往往比HTML更“重”，浏览器也需要花更多的时间去处理脚本
+- 会造成页面的解析阻塞，在脚本下载、解析、执行完成之前，用户在界面上什么也看不到
+
+为了解决这个问题，浏览器的`script`标签为我们提供了两个属性（attribute）：`defer` 和 `async`
+
+#### defer属性
+
+`defer` 即推迟，为`script`标签添加这个属性，相当于告诉浏览器：不要等待此脚本下载，而是继续解析HTML，构建DOM Tree
+
+- 脚本将由浏览器进行下载，但是不会阻塞DOM Tree的构建过程
+- 如果脚本提前下载好了，那么它会等待DOM Tree构建完成，在`DOMContentLoaded`**事件触发之前**先执行`defer`中的代码
+
+```html
+<script>
+  console.log('script enter')
+  window.addEventListener('DOMContentLoaded', () => {
+    console.log('DOMContentLoaded enter')
+  })
+</script>
+<script src="./defer.js" defer></script>
+```
+
+```js
+// defer.js
+console.log('defer script enter')
+```
+
+上述代码在控制台的输出为：
+
+```
+script enter
+defer script enter
+DOMContentLoaded enter
+```
+
+- 多个带`defer`的脚本也是按照自上至下的顺序执行的
+- 从某种角度来说，`defer`可以提高页面的性能，并且推荐放到`head`元素中
+- 注意：`defer`仅适用于外部脚本，对于`script`标签内编写的默认`JS`代码会被忽略掉
+
+#### async属性
+
+`async`属性也可以做到：让脚本异步加载而不阻塞DOM树的构建，它与`defer`的区别：
+
+- 用`async`标记的脚本是**完全独立**的
+- `async`脚本不能保证执行顺序，因为它是独立下载、独立运行，不会等待其他脚本
+- 使用`async`标记的脚本不会保证它将在`DOMContentLoaded`之前或之后被执行
+
+要使用`async`属性标记的`script`操作DOM，必须在其中使用`DOMContentLoaded`监听器的回调函数，在该事件触发（DOM树构建完毕）后，执行相应的回调函数
+
+## JavaScript 运行原理
+
+### JS代码的执行
+
+JavaScript代码下载好后，是如何一步步被执行的？
+
+浏览器内核是由两部分组成的，以Webkit为例：
+
+- WebCore：负责HTML解析、布局、渲染等相关的工作
+- JavaScriptCore：解析、执行JavaScript代码
+
+### JavaScript V8引擎
+
+![image-20221125090752249](JavaScriptEnhanced.assets/image-20221125090752249.png)
+
+JS源代码经过解析，生成抽象语法树（词法分析器、语法分析器），经过ignition转为字节码（二进制、跨平台），即可由CPU执行
+
+在ignition的过程中，会由TurboFan收集类型信息（检查哪些函数是被重复执行的），对优化生成的机器码，得到性能更高的机器指令
+
+如果生成的优化的机器码不符合函数实际执行，则会进行Deoptimization（反优化），降级回普通的字节码
+
+- Parse模块会将JavaScript代码转化为AST（抽象语法树），因为解释器并不直接认识JavaScript代码
+  - 如果函数没有被调用，那么是不会被转换成AST的
+  - 官方文档：https://v8.dev/blog/scanner
+- Ignition是一个解释器，会将AST转换成ByteCode（字节码）
+  - 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的计算）
+  - 如果函数只调用一次，Ignition会直接解释执行ByteCode
+  - 官方文档：https://v8.dev/blog/ignition-interpreter
+- TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码
+  - 如果一个函数被多次调用，那么就会被标记为热点函数，经过TurboFan转化成优化的机器码，提高代码的执行性能
+  - 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码
+  - 官方文档：https://v8.dev/blog/turbofan-jit
+
+![image-20221125094148365](JavaScriptEnhanced.assets/image-20221125094148365.png)
+
+Blink 获取到源码 => 转为Stream => Scanner扫描器
+
+- 词法分析（lexical analysis，简称lexer）
+  - 将字符序列转换成token序列的过程，例如`var name = 'Ziu'`，词法分析器会将每个词转为token
+  - token是记号化（tokenization）的缩写
+  - 词法分析器，也叫扫描器（scanner）
+- 语法分析（syntactic analysis，也叫parsing）
+  - 语法分析器也可以称之为parser 解析器
+
+### JavaScript代码执行过程
+
+- 初始化全局对象
+  - js引擎会在执行代码之前，在堆内存中创建一个全局对象：Global Object (GO)
+  - 该对象可以在所有的作用域（scope）中被访问
+  - 里面会包含Date、Array、String、Number、setTimeout、setInterval等内置对象
+  - 其中还包含一个window属性指向自己
+- 执行上下文
+  - JS引擎内部有一个执行上下文栈（Execution Context Stack 简称ECS），它是用于执行代码的调用栈
+  - 那么现在它要执行谁呢？执行的是全局的代码块：
+    - 全局的代码块为了执行会构建一个Global Execution Context（GEC）
+    - GEC会被放入到ECS中执行
+  - GEC被放入到ECS中里面包含两部分内容：
+    - 第一部分：在代码执行之前，在parser转化为AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中，但是并不会赋值
+      - 这个过程也被称为变量的作用域提升（hoisting）
+    - 第二部分：在代码的执行过程中，对变量进行赋值，或者执行其他的函数
+      - 当代码被翻译为可执行代码，将进入到一个可执行的上下文中，活跃的函数执行上下文在逻辑上是一个栈，
+
+```js
+console.log('script start')
+
+function fun1() {
+  console.log('fun1')
+}
+
+function fun2() {
+  console.log('fun2 start')
+  fun1()
+  console.log('fun2 end')
+}
+
+fun2()
+
+console.log('script end')
+```
+
+创建全局执行上下文 => 函数执行到`fun2()` => 创建`fun2`执行上下文 => 函数执行到`fun1()` => 创建`fun1`执行上下文 => `fun1`执行完毕出栈 => 继续执行`fun2`后续代码 => `fun2`执行完毕出栈 => 继续执行全局上下文后续代码 => 结束
+
+```sh
+'script start'
+'fun2 start'
+'fun1'
+'fun2 end'
+'script end'
+```
+
+## Proxy与Reflect
+
+- 监听对象的操作
+- Proxy类基本使用
+- Proxy常见捕获器
+- Reflect介绍和作用
+- Reflect基本使用
+- Reflect的receiver
+
+### 监听对象方法
+
+#### Proxy监听对象
+
+可以使用Proxy对象将原对象包裹，此后的操作都对`proxy`进行，每次`get`与`set`被触发时都会自动执行相应代码
+
+- 可以为`handler`传入不同的捕获器
+- 需要注意的是 `get` 与 `set` 都需要有返回值
+  - `get` 默认行为是返回属性值
+  - `set` 返回`true`表示设置成功 也可以做其他`if-else`抛出错误表示执行失败
+
+```js
+const obj = {
+  name: 'ziu',
+  age: 18,
+}
+const proxy = new Proxy(obj, {
+  // 需要注意的是 get 与 set 都需要有返回值
+  get(target, key) {
+    console.log('get', key)
+    return target[key] // 默认行为是返回属性值
+  },
+  set(target, key, value) {
+    console.log('set', key, value)
+    target[key] = value
+    return true // 代表执行成功
+  }
+})
+```
+
+```js
+const tmp = proxy.age // getter被触发
+proxy.name = 'Ziu' // setter被触发
+```
+
+#### defineProperty监听对象
+
+除此之外，可以通过`Object.defineProperty`为对象中某个属性设置`getter`与`setter`函数，可以达到类似的效果
+
+需要注意的是，此处要用`for-in`遍历对象的所有属性，并逐个为其设置`getter`与`setter`
+
+```js
+for (const key of Object.keys(obj)) {
+  let value = obj[key]
+  Object.defineProperty(obj, key, {
+    get() {
+      console.log('get', value)
+      return value
+    },
+    set(newVal) {
+      console.log('set', key, newVal)
+      value = newVal
+      return true
+    }
+  })
+}
+```
+
+#### Proxy与defineProperty的区别
+
+[defineProperty 和 Proxy区别](https://segmentfault.com/a/1190000041084082)
+
+1. **监听数据的角度**
+
+   1. `defineproperty`只能监听某个属性而不能监听整个对象。
+   2. `proxy`不用设置具体属性，直接监听整个对象。
+   3. `defineproperty`监听需要知道是哪个对象的哪个属性，而`proxy`只需要知道哪个对象就可以了。也就是会省去`for in`循环提高了效率。
+
+2. **监听对原对象的影响**
+
+   1. 因为`defineproperty`是通过在原对象身上新增或修改属性增加描述符的方式实现的监听效果，一定会修改原数据。
+   2. 而`proxy`只是原对象的代理，`proxy`会返回一个代理对象不会在原对象上进行改动，对原数据无污染。
+
+3. **实现对数组的监听**
+
+   1. 因为数组 `length` 的特殊性 `(length 的描述符configurable 和 enumerable 为 false，并且妄图修改 configurable 为 True 的话 js 会直接报错：VM305:1 Uncaught TypeError: Cannot redefine property: length)`
+   2. `defineproperty`无法监听数组长度变化, `Vue`只能通过重写数组方法的方式变现达成监听的效果，光重写数组方法还是不能解决修改数组下标时监听的问题，只能再使用自定义的`$set`的方式
+   3. 而`proxy`因为自身特性，是创建新的代理对象而不是在原数据身上监听属性，对代理对象进行操作时，所有的操作都会被捕捉，包括数组的方法和`length`操作，再不需要重写数组方法和自定义`set`函数了。(代码示例在下方)
+
+   **4. 监听的范围**
+
+   1. `defineproperty`只能监听到`value`的 `get set` 变化。
+   2. `proxy`可以监听除 `[[getOwnPropertyNames]]` 以外所有`JS`的对象操作。监听的范围更大更全面。
+
+### Proxy
+
+```JS
+const proxy = new Proxy(target, handler)
+```
+
+即使不传入handler，默认也会进行基本的代理操作，将对代理对象的操作透传给原始对象
+
+```js
+const obj = {
+  name: 'ziu',
+  age: 18
+}
+const proxy = new Proxy(obj, {})
+proxy.height = 1.88 // 添加新属性
+proxy.name = 'Ziu' // 修改原属性
+
+console.log(obj) // { name: 'Ziu', age: 18, height: 1.88 }
+```
+
+#### 捕获器 (trap)
+
+[handler 对象的方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy#handler_%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95)
+
+常用的捕获器有`set`与`get`函数
+
+```js
+const proxy = new Proxy(obj, {
+  set: function (target, key, newVal) {
+    console.log(`监听: ${key} 设置 ${newVal}`)
+    target[key] = newVal
+  },
+  get: function (target, key) {
+    console.log(`监听: ${key} 获取`)
+    return target[key]
+  }
+})
+```
+
+- set函数有四个参数
+  - target 目标对象（侦听的对象）
+  - property 即将被设置的属性key
+  - value 新属性值
+  - receiver 调用的代理对象
+- get函数有三个参数
+  - target 目标对象（侦听的对象）
+  - property 被获取的属性key
+  - receiver 调用的代理对象
+
+另外介绍两个捕获器：`has`与`deleteProperty`
+
+```js
+const proxy = new Proxy(obj, {
+  ...
+  has: function (target, key) {
+    console.log(`监听: ${key} 判断`)
+    return key in target
+  },
+  deleteProperty: function (target, key) {
+    console.log(`监听: ${key} 删除 `)
+    return true
+  }
+})
+
+delete proxy.name // 监听: name 删除
+console.log('age' in proxy) // 监听: age 判断
+```
+
+#### this指向问题
+
+`Proxy`对象可以对我们的目标对象进行访问，但没有做任何拦截时，也不能保证与目标对象的行为一致，因为目标对象内部的`this`会自动改变为`Proxy`代理对象。
+
+```js
+const obj = {
+  name: 'ziu',
+  foo() {
+    return this === proxy
+  }
+}
+
+const proxy = new Proxy(obj, {})
+
+console.log(obj.foo()) // false
+console.log(proxy.foo()) // true
+```
+
+#### 使用Proxy监听嵌套对象
+
+TODO
+
+### Reflect
+
+Reflect是ES6新增的一个API，它本身是一个对象
+
+- 提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法
+- 比如`Reflect.getPrototypeOf(target)`类似于`Object.getPrototypeOf()`
+- 比如`Reflect.defineProperty(targetm propertyKey, attributes)`类似于`Object.defineProperty()`
+
+如果我们又Object对象可以完成这些操作，为什么还需要Reflect呢？
+
+- Object作为一个构造函数，这些操作放到它身上并不合适
+- 包含一些类似于 in delete的操作符
+- 在ES6新增了Reflect，让这些操作都集中到了Reflect对象上
+- 在使用Proxy时，可以做到不操作原对象
+
+#### 与Object操作的区别
+
+删除对象上的某个属性
+
+```js
+const obj = {
+  name: 'ziu',
+  age: 18
+}
+// 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变
+// 同时该属性也能从对应的对象上被删除。 默认为 false。
+Object.defineProperty(obj, 'name', {
+  configurable: false
+})
+
+// 1. 旧方法 检查`delete obj.name`是否执行成功
+// 结果: 需要额外编写检查代码且存在问题(严格模式下删除configurable为false的属性将报错)
+delete obj.name
+if (obj.name) {
+  console.log(false)
+} else {
+  console.log(true)
+}
+
+// 2. Reflect
+// 结果: 根据是否删除成功返回结果
+if (Reflect.deleteProperty(obj, 'name')) {
+  console.log(true)
+} else {
+  console.log(false)
+}
+```
+
+#### Reflect常见方法
+
+其中的方法与Proxy的方法是一一对应的，一共13个。其中的一些方法是Object对象中没有的：
+
+- `has` 判断一个对象是否存在某个属性，和 `in` 运算符功能完全相同
+- `get` 获取对象身上某个属性的值，类似于`target[key]`
+- `set` 将值分配给属性的函数，返回一个Boolean，如果更新成功则返回true
+- `deleteProperty` 作为函数的 `delete` 操作符，相当于执行 `delete target[key]`
+- ··· 
+
+代理对象的目的：不再直接操作原始对象，一切读写操作由代理完成。我们先前在编写Proxy的代理代码时，仍然有操作原对象的行为：
+
+```js
+const proxy = new Proxy(obj, {
+  set: function (target, key, newVal) {
+    console.log(`监听: ${key} 设置 ${newVal}`)
+    target[key] = newVal // 直接操作原对象
+  },
+})
+```
+
+这时我们可以让Reflect登场，代替我们对原对象进行操作，之前的代码可以修改：
+
+```js
+const proxy = new Proxy(obj, {
+  set: function (target, key, newVal) {
+    console.log(`监听: ${key} 设置 ${newVal}`)
+    Reflect.set(target, key, newVal)
+  },
+  get: function (target, key) {
+    console.log(`监听: ${key} 获取`)
+    return Reflect.get(target, key)
+  },
+  has: function (target, key) {
+    console.log(`监听: ${key} 判断`)
+    return Reflect.has(target, key)
+  }
+})
+```
+
+使用Reflect替代之前的对象操作有以下好处：
+
+- 代理对象的目的：不再直接操作原对象
+- Reflect.set方法有返回Boolean值，可以判断本次操作是否成功
+- receiver就是外层的Proxy对象
+
+针对好处三，做出如下解释。以下述代码为例，`set name(){}`函数中的`this`指向的是`obj`
+
+```js
+const obj = {
+  _name: 'ziu',
+  set name(newVal) {
+    console.log(`set name ${newVal}`)
+    console.log(this)
+    this._name = newVal
+  },
+  get name() {
+    console.log(`get name`)
+    console.log(this)
+    return this._name
+  }
+}
+
+console.log(obj.name)
+obj.name = 'Ziu'
+```
+
+```js
+const proxy = new Proxy(obj, {
+  set: function (target, key, newVal, receiver) {
+    console.log(`监听: ${key} 设置 ${newVal}`)
+    Reflect.set(target, key, newVal, receiver)
+  },
+  get: function (target, key, receiver) {
+    console.log(`监听: ${key} 获取`)
+    return Reflect.get(target, key, receiver)
+  }
+})
+```
+
+我们使用Proxy代理，并且使用Reflect操作对象时，输出的`this`仍然为`obj`，需要注意的是，此处的`this`指向是默认指向原始对象`obj`，而如果业务需要改变`this`指向，此时可以为`Reflect.set()`的最后一个参数传入`receiver`
+
+#### Reflect.construct方法
+
+以下两段代码的实现结果是一样的：
+
+```js
+function Person(name, age) {
+  this.name = name
+  this.age = age
+}
+
+function Student(name, age) {
+  Person.call(this, name, age) // 借用
+}
+
+const stu = new Student('ziu', 18)
+console.log(stu)
+```
+
+```js
+function Person(name, age) {
+  this.name = name
+  this.age = age
+}
+
+function Student(name, age) {
+  // Person.call(this, name, age) // 借用
+}
+
+const stu = new Reflect.construct(Person, ['ziu', 18], Student)
+console.log(stu)
+```
+
+### 理解Proxy与Reflect中的receiver参数
+
+[Proxy和Reflect中的receiver到底是个什么东西](https://juejin.cn/post/7085742282476879902)
+
+[ES6的Proxy中，为什么推荐使用Reflect.get而不是target[key]？](https://juejin.cn/post/7050489628062646286)
+
+## Promise详解
+
+- 异步代码的困境
+- 认识Promise
+- Promise状态变化
+- Promise实例方法
+- Promise的类方法
+
+### 异步代码
+
+ES5之前，都是通过回调函数完成异步逻辑代码的，如果存在多次异步操作，会导致回调函数不断嵌套，回调地狱
+
+```js
+function fetchData(callback) {
+  setTimeout(() => {
+    const res = ['data1', 'data2', 'data3']
+    callback(res)
+  }, 2000)
+}
+fetchData((res) => {
+  const div = document.createElement('div')
+  div.innerHTML = res
+  document.body.appendChild(div)
+})
+```
+
+### 认识Promise
+
+用Promise改造上述代码：
+
+```js
+function fetchData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const res = ['data1', 'data2', 'data3']
+      resolve(res)
+    }, 2000)
+  })
+}
+const data = fetchData()
+data.then((res) => {
+  const div = document.createElement('div')
+  div.innerHTML = res
+  document.body.appendChild(div)
+})
+```
+
+- 通过new创建Promise对象时，需要传入一个回调函数，称之为executor
+  - 这个回调函数**会被立即执行**，并且传入另外两个回调函数 `resolve reject`
+  - 当我们调用`resolve`时，会执行Promise对象的then方法传入的回调函数
+  - 当我们调用`reject`时，会执行Promise对象的catch方法传入的回调函数
+
+> `.catch()` 其实只是没有给处理已兑现状态的回调函数预留参数位置的 `.then()` 而已。
+
+#### Promise状态变化
+
+- Promise有三种状态 只修改一次 后续状态将被锁定
+  - `pending` 初始状态 既没有被兑现，也没有被拒绝
+    - 执行executor中代码时，处于该状态
+  - `fulfilled` 操作已完成
+    - 执行resolve时，Promise已经被兑现
+  - `rejected` 操作失败
+    - 执行reject时，Promise已经被拒绝
+
+#### resolve值
+
+为`resolve`函数传入普通值，Promise的状态会被设置为兑现，而为`resolve`传入一个Promise对象时，当前Promise对象的状态将由传入的Promise对象决定。如下述代码中，`'Outer Promise Result'`会被作为最终结果被兑现
+
+```js
+const p = new Promise((res, rej) => {
+  res('Outer Promise Result')
+})
+function fetchData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const res = ['data1', 'data2', 'data3']
+      resolve(p)
+    }, 2000)
+  })
+}
+```
+
+`resolve`还可以传入`thenable`对象：该对象中的`then`方法会被回调
+
+```js
+function fetchData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const res = ['data1', 'data2', 'data3']
+      resolve({
+        name: 'Ziu',
+        then: (resolve, reject) => {
+          resolve('thenable Object resolve')
+        }
+      })
+    }, 2000)
+  })
+}
+```
+
+综上：
+
+- 如果resolve传入一个普通的值或对象，那么这个值会作为then回调的参数
+- 如果resolve中传入的是另一个Promise，那么这个新Promise会决定原Promise的状态
+- 如果resolve中传入的是一个对象，并且这个对象中实现了then方法，那么会执行该then方法，并且根据then方法的结果来决定Promise 的状态
+
+#### .then方法
+
+实际上，then方法可以传入两个回调函数，可以同时传入成功处理的回调函数和失败处理的回调函数。
+
+```js
+const data = fetchData()
+data
+  .then(
+  (res) => {
+    const div = document.createElement('div')
+    div.innerHTML = res
+    document.body.appendChild(div)
+  },
+  (err) => {
+    console.log(err)
+  }
+)
+```
+
+在前文中我们描述`.catch`为：
+
+> `.catch()` 其实只是没有给处理已兑现状态的回调函数预留参数位置的 `.then()` 而已。
+
+那么`.catch`的实现本质上就是为成功回调传入null的`.then`
+
+```js
+const data = fetchData()
+data
+  .catch((err) => {
+  console.log(err)
+})
+  .then(null, (err) => {
+  console.log(err)
+})
+```
+
+Promise的`.then`方法可以被多次调用，下例中，控制台只会输出一次`'execute'`而会输出三次`'success'`，证明三次`.then`都被调用了。同理，`.catch`方法也可以被多次调用
+
+```js
+const p = new Promise((res, rej) => {
+  console.log('execute')
+  res(['data1', 'data2', 'data3'])
+})
+
+p.then(() => {
+  console.log('success')
+})
+p.then(() => {
+  console.log('success')
+})
+p.then(() => {
+  console.log('success')
+})
+```
+
+#### .then的返回值
+
+Promise本身支持链式调用，`.then`方法实际上是返回了一个新的Promise，链式调用中的`.then`是在等待这个新的Promise兑现之后执行
+
+```js
+const p = new Promise((res, rej) => {
+  res('aaa')
+})
+
+p.then((res) => {
+  console.log(res)
+  return 'bbb' // return new Promise((res) => res('bbb'))
+}).then((res) => {
+  console.log(res)
+})
+```
+
+#### .catch的返回值
+
+可以通过`throw`抛出一个错误实现在链式调用中抛出异常，让`.catch`对异常进行处理
+
+```js
+const p = new Promise((res, rej) => {
+  res('aaa')
+})
+
+p.then((res) => {
+  console.log(res)
+  return 'bbb' // return new Promise((res) => res('bbb'))
+})
+  .then((res) => {
+  console.log(res)
+  throw new Error('Error Info') // return new Promise((_, rej) => rej('Error Info'))
+})
+  .catch((err) => {
+  console.log(err)
+})
+```
+
+### Promise类方法
+
+#### `Promise.resolve()`
+
+类方法与实例方法，下例中两个方式是等效的，其中`Promise.resolve()`即为类方法。如果你现在已经有了一个数据内容，希望通过Promise包装来使用，这时就可以通过`Promise.resolve()`方法
+
+```js
+Promise.resolve(['data1', 'data2', 'data3'])
+// 等价于
+new Promise((res) => res(['data1', 'data2', 'data3']))
+```
+
+#### `Promise.reject()`
+
+与`resolve`方法类似，下述两种写法的效果是相同的
+
+```js
+Promise.reject(['data1', 'data2', 'data3'])
+// 等价于
+new Promise((_, rej) => rej(['data1', 'data2', 'data3']))
+```
+
+#### `Promise.all()`
+
+> `**Promise.all(iterable)**` 方法返回一个 [`Promise`](006949885979dbd292ab622df526fdf7.html) 实例，此实例在 `iterable` 参数内所有的 `promise` 都“完成（resolved）”或参数中不包含 `promise` 时回调完成（resolve）；如果参数中 `promise` 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 `promise` 的结果。
+
+- 将多个Promise包裹在一起形成一个新的Promise
+- 新的Promise状态由包裹的所有Promise共同决定
+  - **当所有的Promise状态都变成fulfilled状态时**，新的Promise状态为`fulfilled`，并且会将所有的Promise返回值组成一个数组
+  - **当有一个Promise状态为reject时**，新的Promise状态为`reject`，并且会将第一个`reject`的返回值作为参数
+
+```js
+const p1 = new Promise((res) => res(['data1', 'data2', 'data3']))
+const p2 = new Promise((res) => res('Hello, Promise.'))
+const p3 = new Promise((_, rej) => rej('Failed'))
+
+const promises = [p1, p2, p3]
+
+Promise.all(promises)
+  .then((res) => {
+  console.log(res)
+})
+  .catch((err) => {
+  console.log(err)
+})
+```
+
+#### `Promise.allSettled()` (ES11)
+
+`.all()`方法有一个缺陷：当某一个Promise被reject时，新的Promise会立刻变成reject状态，此时对于其他处于resolved和pending状态的Promise就获取不到结果了
+
+- 会在所有的Promise都有结果（settled） 无论是fulfilled 还是 rejected时，才会有最终的状态
+- **这个Promise的结果一定是fulfilled的**
+- 返回的结果是一个数组，每个元素包含Promise的状态与结果
+
+```js
+Promise.allSettled(promises)
+  .then((res) => {
+  console.log(res)
+})
+  .catch((err) => {
+  console.log(err)
+})
+```
+
+#### `Promise.race()`
+
+> **`Promise.race(iterable)`** 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。
+
+```js
+Promise.race(promises)
+  .then((res) => {
+  console.log(res)
+})
+  .catch((err) => {
+  console.log(err)
+})
+```
+
+#### `Promise.any()` (ES12)
+
+- any方法是ES12新增的方法，与race类似
+  - any方法会等到一个fulfilled状态，才会决定新的Promise状态
+  - 如果所有Promise都是reject的，那么也会等到所有Promise都变成rejected状态
+  - （race方法一旦fulfilled或rejected会直接修改新的Promise状态）
+
+## 迭代器与生成器
+
+### 异步处理
+
+#### 请求代码结构
+
+假设有如下场景：请求3的数据依赖请求2，请求2的数据依赖请求1，这样会存在嵌套的问题
+
+```js
+// 第一次请求
+reqData('ziu').then((res) => {
+  // 第二次请求
+  reqData('Ziu').then((res) => {
+    // 第三次请求
+    reqData('Ziuc').then((res) => {
+      console.log(res)
+    })
+  })
+})
+```
+
+可以通过Promise链式调用，避免深层嵌套回调，但是代码并不足够优秀
+
+```js
+reqData('ziu')
+  .then((res) => {
+  return reqData(res + 'Ziu')
+})
+  .then((res) => {
+  return reqData(res + 'Ziuc')
+})
+  .then((res) => {
+  console.log(res)
+})
+```
+
+生成器写法
+
+```js
+function* getData() {
+  const res1 = yield reqData('ziu')
+  const res2 = yield reqData(res1 + 'Ziu')
+  const res3 = yield reqData(res2 + 'Ziuc')
+  console.log(res3)
+}
+
+const generator = getData()
+generator.next().value.then((res) => {
+  generator.next(res).value.then((res) => {
+    generator.next(res).value.then((res) => {
+      generator.next(res)
+    })
+  })
+})
+```
+
+通过递归优化生成器代码
+
+```js
+function execGenFn(genFn) {
+  const generator = genFn()
+  function exec(res) {
+    const result = generator.next(res)
+    if (result.done) return
+    else result.value.then((res) => exec(res))
+  }
+  exec()
+}
+
+execGenFn(getData)
+```
+
+此时引入`async`和`await`可以提高代码的阅读性，**本质上就是生成器函数和`yeild`的语法糖**
+
+```js
+async function getData() {
+  const res1 = await reqData('ziu')
+  const res2 = await reqData(res1 + 'Ziu')
+  const res3 = await reqData(res2 + 'Ziuc')
+  console.log(res3)
+}
+getData()
+```
+
+## await async 事件循环
+
+- async await
+- 浏览器进程 线程
+- 宏任务、微任务队列
+- Promise面试题解析
+- throw try catch
+- 浏览器存储Storage
+
+### 异步函数 async
+
+```js
+// 普通函数
+function fun() {}
+const fun = function () {}
+// 箭头函数
+const fun = () => {}
+// 生成器函数
+function* fun() {}
+```
+
+```js
+// 异步函数写法
+async function fun() {}
+const fun = async function () {}
+const fun = async () => {}
+
+// 默认包裹Promise
+async function getData() {
+  return '123'
+}
+const res = getData()
+console.log(res) // Promise {<fulfilled>: '123'}
+
+res.then((r) => {
+  console.log(r) // '123'
+})
+```
+
+异步函数的返回值默认会被包裹一层Promise。
+
+如果代码中抛出了错误，不会像普通函数一样报错，而是会在内部调用`reject(err)`将错误抛给`.catch`方法（如果有的话），否则会直接抛出
+
+```js
+async function getData() {
+  throw new Error('Error Info')
+  return '123'
+}
+
+const res = getData()
+.then((r) => {
+  console.log(r)
+})
+.catch((err) => {
+  console.log(err)
+})
+```
+
+### await关键字
+
+- await关键字只能在异步函数中使用
+- 通常await后面跟上一个表达式，该表达式会返回一个Promise
+- await会**等到Promise的状态变为fulfilled状态**，之后继续执行异步函数
+
+会阻塞代码执行，与yeild类似
+
+```js
+async function reqData(param) {
+  return param
+}
+
+async function getData() {
+  const data1 = await reqData('ziu')
+  const data2 = await reqData('Ziu')
+  const data3 = await reqData('Ziuc')
+
+  console.log(data1, data2, data3)
+}
+
+getData()
+```
+
+如果代码在await过程中出现异常，也可以通过`.catch`捕获到异常
+
+```js
+async function reqData(param) {
+  throw new Error('Error Info')
+  return param
+}
+
+async function getData() {
+  const data = await reqData('ziu')
+  console.log(data)
+}
+
+getData().catch((err) => {
+  console.log(err) // 捕获到异步函数内抛出的异常
+})
+```
+
+### 进程与线程
+
+- 进程：计算机已经运行的程序，是操作系统管理程序的一种方式
+  - 启动一个应用程序时就会默认启动**一个或多个进程**
+- 线程：操作系统能够运行运算调度的最小单元，通常情况下它被包含在进程中
+  - **每一个进程**中，都会启动**至少一个线程**用来执行程序中的代码，这个线程被称之为**主线程**
+  - 可以认为进程是线程的容器
+
+操作系统可以同时让多个进程同时工作
+
+- CPU的运算速度很快，可以快速地在多个进程之间迅速地切换
+- 当进程中的线程获取到时间片时，就可以快速执行我们编写的代码
+- 用户是感受不到这种快速的切换的
+
+### JavaScript线程
+
+JavaScript是单线程（可以开启Worker）的，但是JavaScript线程应该有自己的容器进程：浏览器或Node
+
+- 浏览器是一个应用程序，是多进程的，每打开一个Tab页面就会开启一个新的进程：防止一个页面卡死导致浏览器崩溃
+- 每个进程都有很多的线程，其中就**包括执行JavaScript代码的线程**
+- JavaScript的代码执行是在一个单独的线程执行的
+  - 这意味着JavaScript的代码在同一个时刻只能做一件事
+  - 如果某些任务非常消耗时间，当前线程就会被阻塞
+  - timer函数、onClick、ajax callback
+
+#### setTimeout
+
+当函数执行到`setTimeout`时，会由浏览器单独的另一个线程负责计时，将这个定时器任务放到Event Table，计时完成后Event Table会将定时器的回调函数放入Event Queue，当主线程的代码执行完毕后，会去Event Queue中取出队头的任务放入主线程中执行
+
+这样的过程会不断重复，这也就是常说的Event Loop 事件循环
+
+```js
+setTimeout(() => {
+  console.log('timeout')
+}, 500)
+```
+
+#### setInterval
+
+`setInterval`与`setTimeout`类似，只不过`setInterval`会每隔将注册的回调函数放入Event Queue，如果前面的事件处理得太久也会出现延迟执行的问题，如果队列前面的事件阻塞的时间太长，那么后续队列中就连续被放入了多个`setInterval`的回调函数任务，这样就失去了定期执行的初衷。
+
+```js
+setInterval(() => {
+  console.log('interval')
+}, 500)
+```
+
+#### onClick
+
+DOM监听时注册的回调函数也会作为异步任务进入事件循环中，每次点击都会将回调函数任务加入到Event Queue中。
+
+```js
+const btn = document.querySelector('button')
+btn.addEventListener('click', () => {
+  console.log('btn Clicked')
+})
+```
+
+### 微任务与宏任务
+
+- 宏任务队列`macrotask queue`
+  - `ajax、setTimeout、setInterval、DOM监听、UI Rendering等`
+- 微任务`microtask queue`
+  - `Promise的.then回调、Mutation Observer API、queueMicrotask()等`
+
+- 微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序，Event Loop的走向和取值。
+- 主线程的代码先执行
+- 在执行任何一个宏任务之前，都会先查看微任务队列中是否有任务需要执行
+  - 宏任务执行之前，保证微任务队列是空的
+  - 如果不为空，那么优先执行微任务队列中的任务（回调）
+
+```js
+console.log('script start')
+
+setTimeout(() => {
+  console.log('timeout1')
+})
+
+new Promise((res) => {
+  console.log('promise')
+  res()
+}).then((res) => {
+  console.log('then')
+})
+
+setTimeout(() => {
+  console.log('timeout2')
+})
+
+console.log('script end')
+```
+
+```sh
+'script start'
+'promise'
+'script end'
+'then'
+'timeout1'
+'timeout2'
+```
+
+Promise内的代码会直接在主线程中执行，而`.then`内的回调则会作为微任务进入微任务队列
+
+### 事件循环 面试题
+
+#### 面试题1
+
+```js
+console.log('script start')
+
+setTimeout(() => {
+  console.log('setTimeout1')
+  new Promise((res) => {
+    res()
+  }).then(() => {
+    new Promise((res) => {
+      res()
+    }).then(() => {
+      console.log('then4')
+    })
+    console.log('then2')
+  })
+})
+
+new Promise((res) => {
+  console.log('promise1')
+  res()
+}).then(() => {
+  console.log('then1')
+})
+
+setTimeout(() => {
+  console.log('setTimeout2')
+})
+
+console.log('2')
+
+queueMicrotask(() => {
+  console.log('queueMicrotask1')
+})
+
+new Promise((res) => {
+  res()
+}).then(() => {
+  console.log('then3')
+})
+
+console.log('script end')
+```
+
+```sh
+'script start'
+'promise1'
+'2'
+'script end'
+'then1'
+'queueMicrotask1'
+'then3'
+'setTimeout1'
+'then2'
+'then4'
+'setTimeout2'
+```
+
+- 主线程 `script start` `promise1` `2` `script end`
+- 宏任务 `setTimeout1` `setTimeout2`
+- 微任务 `then1` `queueMicrotask1` `then3`
+
+先开始执行微任务队列，微任务队列执行完毕清空后，开始`setTimeout1`宏任务
+
+- `setTimeout1` 宏任务开始，`then4`进入微任务队列，`then2`直接执行
+- `setTimeout1` 宏任务结束，微任务队列非空，执行`then4`，清空微任务队列
+- `setTimeout2` 宏任务开始，执行完毕
+
+#### await的使用
+
+```js
+console.log('script start')
+
+function reqData(param) {
+  return new Promise((res) => {
+    setTimeout(() => {
+      console.log('setTimeout')
+      res(param)
+    }, 2000)
+  })
+}
+
+function getData() {
+  console.log('getData start')
+
+  reqData('Ziu').then((res) => {
+    console.log('res', res)
+  })
+
+  console.log('getData end')
+}
+
+getData()
+
+console.log('script end')
+```
+
+```sh
+'script start'
+'getData start'
+'getData end'
+'script end'
+'setTimeout'
+'res Ziu'
+```
+
+- 主线程 `script start` `getData start` `getData end` `script end`
+
+主线程运行过程中，执行到`getData start`后的`Promise`时，其中代码在主线程中进行
+
+遇到`setTimeout`，放入Event Table由浏览器开始计时，计时2s结束后，将回调函数放入宏任务队列中执行`setTimeout`
+
+`setTimeout`执行完毕，`res(param)`执行后，返回的Promise成功`resolved`，将`.then`回调函数放入微任务队列并开始执行
+
+微任务`.then`执行完毕输出`res` 代码执行结束
+
+#### 改用await实现微任务
+
+```js
+console.log('script start')
+
+function reqData(param) {
+  return new Promise((res) => {
+    setTimeout(() => {
+      console.log('setTimeout')
+      res(param)
+    }, 2000)
+  })
+}
+
+async function getData() {
+  console.log('getData start')
+
+  const res = await reqData('Ziu')
+
+  console.log('res', res)
+  console.log('getData end')
+}
+
+getData()
+
+console.log('script end')
+```
+
+改写上述面试题2，将res部分代码改为使用`await`，这里的代码输出为：
+
+```sh
+'script start'
+'getData start'
+'script end'
+'setTimeout'
+'res Ziu'
+'getData end'
+```
+
+**`await`后续的代码，实质上就是一个微任务，这些代码不在主线程中被执行，而是被放入微任务队列：**
+
+```js
+/* 使用await */
+const res = await reqData('Ziu')
+console.log('res', res)
+console.log('getData end')
+/* 不使用await */
+reqData('Ziu').then((res) => {
+  console.log('res', res)
+})
+console.log('getData end')
+```
+
+这样就会出现：先`script end`，后`setTimeout, res Ziu, getData end`的情况
+
+#### 面试题2
+
+```js
+console.log('script start')
+
+async function async1() {
+  console.log('async1 start')
+  await async2()
+  console.log('async1 end')
+}
+
+async function async2() {
+  console.log('async2')
+}
+
+setTimeout(() => {
+  console.log('setTimeout')
+})
+
+async1()
+
+new Promise((res) => {
+  console.log('promise1')
+  res()
+}).then(() => {
+  console.log('promise2')
+})
+
+console.log('script end')
+```
+
+```sh
+'script start'
+'async1 start'
+'async2'
+'promise1'
+'script end'
+'async1 end'
+'promise2'
+'setTimeout'
+```
+
+`await`前的代码是跟随之前代码的执行顺序执行的，而其后的代码会被放入微任务队列中延迟执行
+
+### Node事件循环
+
+TODO
+
+## 防抖与节流
+
+- 认识防抖与节流
+- underscore使用
+- 防抖函数实现优化
+- 节流函数实现优化
+- 深拷贝函数的实现
+- 事件总线工具实现
+
+### 防抖函数
+
+降低高频操作的发生频次，如输入框防抖
+
+- 当事件触发时，相应的函数不会立即触发，而是会等待一定的时间
+- 当事件密集触发时，函数的触发会被频繁的推迟
+- 只有等待了一段时间也没有事件触发，才会真正的执行响应函数
+
+防抖的应用场景
+
+- 输入框中频繁输入内容
+- 频繁的点击按钮
+- 监听浏览器的滚动事件
+- 用户缩放浏览器的resize事件
+
+#### 基本实现
+
+- 入参：函数、防抖时间
+- 返回值：一个新的函数
+
+```js
+function debounce(callback, timeout) {
+  let timer = null
+  const _debounce = function () {
+    if (timer) clearTimeout(timer) // 高频调用 清理上次调用的timer
+    // 创建本次调用的timer
+    timer = setTimeout(() => {
+      callback()
+      timer = null // 执行回调 清理此次调用的timer
+    }, timeout)
+  }
+  return _debounce
+}
+
+const input = document.querySelector('input')
+input.oninput = debounce(function() {
+  console.log(this.value)
+}, 500)
+```
+
+#### 优化 绑定this 传入参数
+
+此时并没有绑定`this`，无法通过`this.value`获取到当前输入框内的值，现在要将返回的函数`_debounce`绑定给`input`
+
+以DOM事件绑定的函数为例，事件触发回调的入参会有参数`event`可供使用
+
+```js
+function debounce(callback, timeout) {
+  let timer = null
+  const _debounce = function (...args) {
+    if (timer) clearTimeout(timer) // 高频调用 清理上次调用的timer
+    // 创建本次调用的timer
+    timer = setTimeout(() => {
+      callback.apply(this, args)
+      timer = null // 执行回调 清理此次调用的timer
+    }, timeout)
+  }
+  return _debounce
+}
+
+const input = document.querySelector('input')
+input.oninput = debounce(function (event) {
+  console.log(this.value, event)
+}, 500)
+```
+
+需要注意的是：在箭头函数中没有`this`，会直接去上层作用域找`this`，直到找到`function`定义的函数。
+
+#### 优化 取消功能
+
+如果用户输入过程中执行了页面跳转，旧的防抖函数需要被取消
+
+给`_debounce`绑定一个取消的函数`cancel()`，执行后如果有timer，则清理此timer
+
+```js
+function debounce(callback, timeout) {
+  let timer = null
+  const _debounce = function (...args) {
+    if (timer) clearTimeout(timer) // 高频调用 清理上次调用的timer
+    // 创建本次调用的timer
+    timer = setTimeout(() => {
+      callback.apply(this, args)
+      timer = null // 执行回调 清理此次调用的timer
+    }, timeout)
+  }
+  _debounce.cancel = function () {
+    if (timer) clearTimeout(timer)
+    timer = null
+  }
+  return _debounce
+}
+
+const input = document.querySelector('input')
+const callback = debounce(function (event) {
+  console.log(this.value, event)
+}, 2000, true)
+input.oninput = callback
+
+const cancel = () => {
+  console.log('debounce canceled')
+  callback.cancel()
+}
+```
+
+#### 优化 立即执行功能
+
+第一次触发时立即执行，后续时才防抖（默认为`false`）
+
+```js
+function debounce(callback, timeout, immediate = false) {
+  let timer = null
+  let isInvoke = false
+  const _debounce = function (...args) {
+    if (timer) clearTimeout(timer) // 高频调用 清理上次调用的timer
+
+    // 需要立即执行 并且是第一次执行 立即执行回调
+    if (immediate && !isInvoke) {
+      callback.apply(this, args)
+      isInvoke = true // 标记已经执行过
+      return
+    }
+    // 创建本次调用的timer
+    timer = setTimeout(() => {
+      callback.apply(this, args)
+      timer = null // 执行回调 清理此次调用的timer
+      isInvoke = false // 恢复初始状态
+    }, timeout)
+  }
+  _debounce.cancel = function () {
+    if (timer) clearTimeout(timer)
+    timer = null
+    isInvoke = false
+  }
+  return _debounce
+}
+```
+
+#### 优化 获取返回值
+
+在某些场景下，我们希望获取防抖函数中回调的返回值
+
+```js
+const myDebounce = debounce(function (name, age, height) {
+  const res = `${name} ${age} ${height}`
+  console.log(res)
+  return res
+}, 1000)
+
+// 三次调用只会执行最后一次
+const res1 = myDebounce('Ziu', 18, 1.88)
+const res2 = myDebounce('Ziu', 18, 1.88)
+const res3 = myDebounce('Ziu', 18, 1.88)
+
+console.log(res1, res2, res3) // undefined undefined undefined
+```
+
+可以将`callback`的返回值用Promise返回，后续有结果直接通过`.then`即可获取到返回值，同时通过`try-catch`包裹，抛出代码执行错误
+
+```js
+function debounce(callback, timeout, immediate = false) {
+  let timer = null
+  let isInvoke = false
+  const _debounce = function (...args) {
+    return new Promise((resolve, reject) => {
+      try {
+        if (timer) clearTimeout(timer) // 高频调用 清理上次调用的timer
+        // 需要立即执行 并且是第一次执行 立即执行回调
+        if (immediate && !isInvoke) {
+          const res = callback.apply(this, args)
+          resolve(res)
+          isInvoke = true // 标记已经执行过
+          return
+        }
+        // 创建本次调用的timer
+        timer = setTimeout(() => {
+          const res = callback.apply(this, args)
+          resolve(res)
+          timer = null // 执行回调 清理此次调用的timer
+          isInvoke = false // 恢复初始状态
+        }, timeout)
+      } catch (error) {
+        reject(error)
+      }
+    })
+  }
+  return _debounce
+}
+
+const myDebounce = debounce(function (name, age, height) {
+  const res = `${name} ${age} ${height}`
+  return res
+}, 1000)
+
+myDebounce('Ziu', 18, 1.88).then((res) => {
+  console.log(res) // Ziu 18 1.88
+})
+```
+
+### 节流函数
+
+#### 基本实现
+
+```js
+function throttle(callback, interval) {
+  let startTime = 0 // 开始时间
+  const _throttle = function (...args) {
+    const nowTime = new Date().getTime() // 当前时间
+    const waitTime = interval - (nowTime - startTime) // 需要等待的时间
+    // 结束等待 调用函数
+    if (waitTime <= 0) {
+      callback.apply(this, args)
+      startTime = nowTime // 重置开始时间 准备下一次调用
+    }
+  }
+  return _throttle
+}
+
+const input = document.querySelector('input')
+const callback = throttle(function (event) {
+  console.log(this.value, event)
+}, 2000)
+input.oninput = callback
+```
+
+#### 立即执行
+
+一般情况下需要立即执行，也是默认状态。当需要取消第一次输入时的立即执行时，可以令`startTime`与`nowTime`相等，这样`_throttle`第一次触发时，计算出来的`waitTime`值就为`interval`的值，也就是等待一个间隔的时间再执行。
+
+需要注意的是触发条件为`!immediate && startTime ===0`同时满足，默认立即执行，只有同时满足`startTime === 0`即第一次触发函数时才会设置`startTime = nowTime`
+
+```js
+function throttle(callback, interval, immediate = true) {
+  let startTime = 0 // 开始时间
+  const _throttle = function (...args) {
+    const nowTime = new Date().getTime() // 当前时间
+
+    if (!immediate && startTime === 0) {
+      startTime = nowTime
+    }
+
+    const waitTime = interval - (nowTime - startTime) // 需要等待的时间
+    // 结束等待 调用函数
+    if (waitTime <= 0) {
+      callback.apply(this, args)
+      startTime = nowTime // 重置开始时间 准备下一次调用
+    }
+  }
+  return _throttle
+}
+
+const input = document.querySelector('input')
+const callback = throttle(
+  function (event) {
+    console.log(this.value, event)
+  },
+  2000,
+  false
+)
+input.oninput = callback
+```
+
+## 深拷贝与浅拷贝
+
+对象属于引用类型，如果单纯复制
+
+### 浅拷贝
+
+- 直接引用赋值
+  - 两个对象仍然共用一块内存
+- 浅拷贝
+  - 解构创建一个新对象
+  - `Object.assign(target, source)`
+
+```js
+const obj1 = {
+  name: 'ziu',
+  age: 18,
+  friend: {
+    name: 'kobe'
+  }
+}
+
+// 1. 引用赋值
+// 修改obj2会影响原数据
+const obj2 = obj1
+obj2.name = 'Ziu'
+console.log(obj1, obj2)
+
+// 2. 浅拷贝
+// 修改基本数据类型不会影响原对象
+// 但是引用类型数据仍然是原对象的引用
+const obj3 = { ...obj1 } // Object.assign({}, obj1)
+obj3.name = 'Ziuc'
+obj3.friend.name = 'james'
+console.log(obj1, obj3)
+```
+
+### 深拷贝
+
+- `JSON.stringify()` `JSON.parse()`
+  - 性能较差 对`function` `Symbol`无能为力（只能解析标准JSON格式 其他内容默认会被忽略）
+  - 局限性较大
+- 实现深拷贝函数（第三方库）
+
+#### 基本实现
+
+封装函数`isObject`判断传入变量是否为对象类型
+
+```js
+function isObject(variable) {
+  // null | object | array -> object
+  // function -> function
+  const type = typeof variable
+  return variable !== null && (type === 'object' || type === 'function')
+}
+
+console.log(isObject(() => {})) // true
+console.log(isObject(null)) // false
+console.log(isObject({})) // true
+console.log(isObject(undefined)) // false
+```
+
+通过递归实现基本的`deepCopy`函数，可以深拷贝嵌套对象
+
+传入的对象如果包含数组，通过 `Array.isArray()` `.toString()` 等方法对数据类型进行具体的判断
+
+```js
+function deepCopy(originValue) {
+  // 递归的值非对象 直接返回其本身
+  if (!isObject(originValue)) {
+    return originValue
+  }
+  const target = Array.isArray(originValue) ? [] : {} // 判断原始值是数组还是对象
+  for (const key in originValue) {
+    // 递归调用deepCopy 实时创建新对象
+    target[key] = deepCopy(originValue[key])
+  }
+  return target
+}
+```
+
+#### 支持Set
+
+此时的代码，如果原始对象包含`Set()`，他也会被当做`Object`处理，但是需要注意的是：
+
+- `Set()`不支持 `for-in` 遍历
+- `Set()`只支持 `for-of` 遍历
+
+```js
+// 处理Set
+if (originValue instanceof Set) {
+  const set = new Set()
+  for (const item of originValue) {
+    console.log(item)
+    set.add(deepCopy(item))
+  }
+  return set
+}
+```
+
+#### 支持函数
+
+一般情况下是不需要深拷贝函数的，对性能有较大的影响，当然，如果一定要支持深拷贝函数，只需要对函数做一次判断即可
+
+直接返回其本身，这样两个函数都是同一片内存空间的引用，不必重新开辟新的内存空间
+
+```js
+// 处理Function
+if (typeof originValue === 'function') {
+  return originValue
+}
+```
+
+#### 支持Symbol作为值
+
+`typeof Symbol()` 返回的是 `'symbol'`，同时需要考虑到如果`Symbol()`传入了`description`的情况
+
+```js
+// 处理Symbol
+if (typeof originValue === 'symbol') {
+  return Symbol(originValue.description)
+}
+```
+
+#### 支持Symbol作为键
+
+当`Symbol`作为键在执行`for-in`时不会被遍历得到，以下是MDN对`for-in`的说明：
+
+> **`for...in`** **语句**以任意顺序迭代一个对象的除[Symbol](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol)以外的[可枚举](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)属性，包括继承的可枚举属性。
+
+```js
+// 遍历对象中的Symbol键
+const symbolKeys = Object.getOwnPropertySymbols(originValue)
+for (const symbol of symbolKeys) {
+  target[Symbol(symbol.description)] = deepCopy(originValue[symbol])
+}
+```
+
+使用`Object.getOwnPropertySymbols()`方法获取所有键名类型为`Symbol`的`Symbo`对象并遍历，逐个向新的深拷贝对象中添加对应`description`的新的`Symbol`键值对
+
+#### 支持循环引用
+
+循环引用：在使用`JSON.stringify`对包含循环引用的对象进行转化时会报错
+
+```js
+const obj = {
+  name: 'Object'
+}
+obj.self = obj
+console.log(obj === obj.self) // true
+console.log(obj.self.self.self.self.self.self) // obj
+```
+
+如果使用我们之前编写的`deepCopy`拷贝一个包含循环引用的对象，会出现函数执行栈溢出的问题，这是因为`target[key] = deepCopy(originValue[key])`不会跳出而是会一直递归，最终导致栈溢出
+
+可以为增加一个默认入参，每次调用`deepCopy`时为其传入一个`Map`，其中保存着拷贝出来的新对象的引用，在调用`deepCopy`时对此`Map`进行判断，如果其中已经包含了拷贝出来的新对象则直接取值并赋给当前的key，不再重新拷贝
+
+每次执行完深拷贝需要对这个`Map`中保存的对象进行删除操作，如果通过`map = null`销毁此`map`，由于`Map`是强引用，里面保存的对象在内存中并不会被真正销毁。可以使用`WeakMap`替换，`WeakMap`中的引用是弱引用，如果引用的原始对象被销毁，能保证其引用的对象也被销毁
+
+### 完整代码
+
+```js
+function isObject(variable) {
+  // null | object | array -> object
+  // function -> function
+  const type = typeof variable
+  return variable !== null && (type === 'object' || type === 'function')
+}
+
+function deepCopy(originValue, map = new WeakMap()) {
+  // 处理Symbol
+  if (typeof originValue === 'symbol') {
+    return Symbol(originValue.description)
+  }
+
+  // 递归的值非对象 直接返回其本身
+  if (!isObject(originValue)) {
+    return originValue
+  }
+
+  // 处理Set
+  if (originValue instanceof Set) {
+    const set = new Set()
+    for (const item of originValue) {
+      console.log(item)
+      set.add(deepCopy(item))
+    }
+    return set
+  }
+
+  // 处理Function
+  if (typeof originValue === 'function') {
+    return originValue
+  }
+
+  // 如果存在引用循环 且上次已经设置过引用 则跳出递归
+  if (map.get(originValue)) {
+    return map.get(originValue)
+  }
+
+  // 如果是对象/数组类型 需要创建新的对象/数组
+  const target = Array.isArray(originValue) ? [] : {} // 判断原始值是数组还是对象
+  map.set(originValue, target) // 将新对象自身保存到WeakMap中
+
+  // 遍历当前对象中所有普通的key
+  for (const key in originValue) {
+    // 递归调用deepCopy 实时创建新对象
+    target[key] = deepCopy(originValue[key], map)
+  }
+
+  // 遍历对象中的Symbol键
+  const symbolKeys = Object.getOwnPropertySymbols(originValue)
+  for (const symbol of symbolKeys) {
+    target[Symbol(symbol.description)] = deepCopy(originValue[symbol], map)
+  }
+
+  return target
+}
+
+const obj = {
+  name: 'Ziu',
+  age: 18,
+  friend: {
+    name: 'kobe',
+    address: {
+      name: '洛杉矶',
+      detail: '斯坦普斯中心'
+    }
+  },
+  array: [
+    { name: 'JavaScript权威指南', price: 99 },
+    { name: 'JavaScript高级程序设计', price: 66 }
+  ],
+  set: new Set(['abc', 'cba', 'nba']),
+  func: function () {
+    console.log('hello, deepCopy')
+  },
+  [Symbol('abc')]: 'Hello, Symbol Key.',
+  [Symbol('cba')]: 'Hello, Symbol Key.'
+}
+obj.self = obj
+
+const newObj = deepCopy(obj)
+console.log(newObj)
+```
+
+## 事件总线
+
+```js
+class ZiuEventBus {
+  constructor() {
+    this.eventMap = {}
+  }
+
+  on(eventName, eventFn) {
+    // 获取保存事件回调的数组
+    let eventFns = this.eventMap[eventName]
+    if (!eventFns) {
+      eventFns = []
+      this.eventMap[eventName] = eventFns // 一个事件名可以同时注册多个回调函数
+    }
+    // 将当前回调存入数组
+    eventFns.push(eventFn)
+  }
+
+  off(eventName, eventFn) {
+    let eventFns = this.eventMap[eventName]
+    if (!eventFns) return // 如果没有注册过事件回调 直接返回
+
+    for (let i = 0; i < eventFns.length; i++) {
+      const fn = eventFns[i]
+
+      // 是同一个函数引用
+      if (fn === eventFn) {
+        eventFns.splice(i, 1)
+        break
+      }
+    }
+  }
+
+  emit(eventName, ...args) {
+    let eventFns = this.eventMap[eventName]
+    if (!eventFns) return
+    eventFns.forEach((fn) => {
+      fn(...args)
+    })
+  }
+}
+
+const eventBus = new ZiuEventBus()
+
+const callBack = (payload) => {
+  console.log('navClick', payload)
+}
+
+// 支持为同一事件注册多个回调
+eventBus.on('navClick', callBack)
+eventBus.on('navClick', callBack)
+
+const btn = document.querySelector('button')
+btn.onclick = () => {
+  // 手动触发事件回调
+  eventBus.emit('navClick', {
+    name: 'Ziu',
+    age: 18
+  })
+}
+
+// 支持移除回调
+setTimeout(() => {
+  eventBus.off('navClick', callBack) // 移除某个事件的某次回调
+}, 5000)
+```
+
diff --git a/docs/note/README.md b/docs/note/README.md
new file mode 100644
index 00000000..3d4e4d4d
--- /dev/null
+++ b/docs/note/README.md
@@ -0,0 +1,11 @@
+---
+sidebar: auto
+sidebarDepth: 2
+editLink: false
+---
+
+[JavaScript 基础](./JavaScript.md)
+
+[CSS 基础](./CSS.md)
+
+[JavaScript 高级教程](./JavaScriptEnhanced.md)
\ No newline at end of file
