重排(Reflow) 重绘 (Repaint)
重排: pixel 中 position 改变才改变
重绘: pixel 中 position 和 rgba 改变才改变
bfc
不希望去影响其他元素，自己内部的元素也不受外部的影响
babel
parse 解析
- high code 转 token
- token 转 high ast
transform 转换
- hight ast 转 low ast
generate 生成
- low ast 转 low code
webpack
根据 entry 拿到文件 txt
根据读到的 txt code 生成 ast, 生成 ast
根据 entry, ast 来收集所有的依赖
json-parse
json string -> tokens -> dict or list
lisp interpreter
code string -> tokens -> ast -> result
react 核心功能
- createElement， 将 reactElement 转 vdom
- vdom 结构
<div id="test">
<span>grammyli</span>
</div>
{
type: 'div',
props: {
id: 'test',
},
children: [
{
type: 'span',
props: {},
children: [
{
type: 'text',
data: 'grammyli',
nodeValue: 'grammyli',
},
],
}
],
}
-
render 方法： 创建dom元素 =》 绑定事件 =》添加 props中属性值 =》 递归 处理 children
编译原理基础知识
编译程序
源程序-》词法-》语法（ast语法抽象树）-》中间语言（自己的汇编语法）-》汇编 -》 目标代码
翻译程序
源语言 -》 翻译程序 -》 目标语言
编译前端: 前端主要由源语言有关但与目标机无关的那些部分组成，通常包括词法分析、语法分析、语义分析与中间代码的产生，有的代码优化工作也可以包括在前端。
编译后端:
后端包括编译程序中与目标机有关的那些部分，如与目标机有关的代码优化和目标代码生成等。通常后端不依赖源语言而仅仅依赖于中间语言
