chore: 全量图片替换为 WebP 格式
ZiuChen
|
Before Width: | Height: | Size: 56 KiB |
BIN
docs/note/CSS.assets/BFC-1.webp
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 92 KiB |
BIN
docs/note/CSS.assets/BFC-2.webp
Normal file
|
After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 48 KiB |
BIN
docs/note/CSS.assets/BFC-3.webp
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 52 KiB |
BIN
docs/note/CSS.assets/BFC-4.webp
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
@@ -1461,7 +1461,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
我们为两个元素分别设置垂直方向的`margin`，此时BFC的规则就被触发了：**在同一个BFC中**，垂直方向的`margin`会发生折叠，取二者较大的值，真正的边距变成了`20px`，而不是臆想中的`30px`
|
||||
|
||||
@@ -1478,7 +1478,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
这两个盒子位于同一个BFC之中进行布局：`<html>`标签形成的BFC
|
||||
|
||||
@@ -1550,7 +1550,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
我们不能简单的从现象归纳本质：*BFC让浮动元素向父级元素汇报了高度，所以解决了高度塌陷的问题*
|
||||
|
||||
@@ -1593,7 +1593,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
|
||||
给`.container`设置`overflow: auto;`，让`.container`创建一个新的BFC，这样之前的高度塌陷问题也能够被解决
|
||||
|
||||
|
||||
|
||||
|
||||
官方文档中是这样解释的：
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ Node.js是一个基于**V8 JavaScript引擎**的**JavaScript运行时环境**
|
||||
- JavaScript代码 -> V8 -> Node.js Bindings -> LibUV
|
||||
- LibUV是使用**C语言编写的库**，提供了**事件循环、文件系统读写、网络IO、线程池**等等内容
|
||||
|
||||
|
||||
|
||||
|
||||
### Node.js的应用场景
|
||||
|
||||
@@ -635,7 +635,7 @@ ESModule的解析过程可以分为三个阶段：
|
||||
- 运行代码，计算值，并且将值填充到内存地址中
|
||||
- 将导入导出的**值**赋给对应的变量`name = 'Ziu'`
|
||||
|
||||
|
||||
|
||||
|
||||
文章推荐：[ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
|
||||
|
||||
@@ -1001,7 +1001,7 @@ PNPM（performant npm）有以下优点：
|
||||
- 符号链接 是一类特殊的文件
|
||||
- 其包含有一条以绝对路径或者相对路径的形式**指向其他文件或者目录的引用**
|
||||
|
||||
|
||||
|
||||
|
||||
操作系统使用不同的**文件系统**，**对真实的硬盘读写操作做了一层抽象**，借由文件系统，我们得以方便地操作和访问文件的真实数据
|
||||
|
||||
@@ -1055,7 +1055,7 @@ PNPM（performant npm）有以下优点：
|
||||
- 在`node_modules/.pnpm`中，包含了附加版本信息的真实文件（硬链接到硬盘数据的文件）
|
||||
- 所有间接依赖，都通过软链接的方式，链接到被铺平在`.pnpm`文件夹中对应版本的硬链接文件上
|
||||
|
||||
|
||||
|
||||
|
||||
#### 常用命令
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1001 KiB |
BIN
docs/note/Front-end-Engineering.assets/esmodule-phases.webp
Normal file
|
After Width: | Height: | Size: 464 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 122 KiB |
BIN
docs/note/Front-end-Engineering.assets/how-pnpm-works.webp
Normal file
|
After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 49 KiB |
BIN
docs/note/Front-end-Engineering.assets/the-node.js-system.webp
Normal file
|
After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 41 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221122103111654.webp
Normal file
|
After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 36 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221122103256116.webp
Normal file
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 36 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221122103715428.webp
Normal file
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 249 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221125090752249.webp
Normal file
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 110 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221125094148365.webp
Normal file
|
After Width: | Height: | Size: 15 KiB |
@@ -1453,9 +1453,9 @@ inherit(Student, Person)
|
||||
|
||||
- 遇到`<script>`标签则向服务器请求下载`.js`文件
|
||||
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.png" alt="浏览器解析HTML过程" style="zoom:80%;" />
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.webp" alt="浏览器解析HTML过程" style="zoom:80%;" />
|
||||
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.png" alt="浏览器是和如何工作的" style="zoom:80%;" />
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.webp" alt="浏览器是和如何工作的" style="zoom:80%;" />
|
||||
|
||||
[How browsers work](https://web.dev/howbrowserswork/)
|
||||
|
||||
@@ -1580,7 +1580,7 @@ inherit(Student, Person)
|
||||
|
||||
在开发者工具的图层工具中可以看到，两个元素`.box1` 和 `.box2`都是在一个层（Document）下渲染的：
|
||||
|
||||
|
||||
|
||||
|
||||
##### 案例2：分层渲染
|
||||
|
||||
@@ -1595,7 +1595,7 @@ inherit(Student, Person)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### 案例3：transform 3D
|
||||
|
||||
@@ -1613,7 +1613,7 @@ inherit(Student, Person)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### 案例4：transition+transform
|
||||
|
||||
@@ -1731,7 +1731,7 @@ JavaScript代码下载好后，是如何一步步被执行的？
|
||||
|
||||
### JavaScript V8引擎
|
||||
|
||||
|
||||
|
||||
|
||||
JS源代码经过解析，生成抽象语法树（词法分析器、语法分析器），经过ignition转为字节码（二进制、跨平台），即可由CPU执行
|
||||
|
||||
@@ -1751,7 +1751,7 @@ JS源代码经过解析，生成抽象语法树（词法分析器、语法分析
|
||||
- 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码
|
||||
- 官方文档：https://v8.dev/blog/turbofan-jit
|
||||
|
||||
|
||||
|
||||
|
||||
Blink 获取到源码 => 转为Stream => Scanner扫描器
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 696 KiB |
BIN
docs/note/React.assets/prototype-setState.webp
Normal file
|
After Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 129 KiB |
BIN
docs/note/React.assets/react-life-cycle.webp
Normal file
|
After Width: | Height: | Size: 53 KiB |
@@ -1108,7 +1108,7 @@ export default function App() {
|
||||
|
||||
我们需要在组件的不同生命周期中执行不同的操作，比如添加解除监听器、发起网络请求等
|
||||
|
||||
|
||||
|
||||
|
||||
结合上图，解读一下组件的完整生命周期：
|
||||
|
||||
@@ -1979,7 +1979,7 @@ export default class Player extends Component {
|
||||
|
||||
从React的源码可以看到，setState方法是从Component集继承而来的
|
||||
|
||||
|
||||
|
||||
|
||||
### setState的异步更新
|
||||
|
||||
|
||||