重学前端，温故知新 🤔🤔🤔

# 1.小知识点

在head中可以出现任意多个meta标签。一般的meta标签由name和content两个属性来定义。name表示元信息的名，content则用于表示元信息的值。
浏览器实际的实现中会把阴影作为一个独立的盒来处理。
把宿主发起的任务称为宏观任务，把JavaScript引擎发起的任务称为微观任务。许多的微观任务的队列组成了宏观任务。
语义上void运算表示忽略后面表达式的值，变成undefined
javascript引擎在解释代码时对于“1.toString()”认为“.”是浮点符号，但因小数点后面的字符是非法的，所以报语法错误；1.2.toString()就不会报错

# 2.CSS

CSS支持一批特定的计算型函数：

calc() 加减乘除四则运算。在针对维度进行计算时，calc()函数允许不同单位混合运算
max()
min()
clamp() 是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。
toggle() 在规则选中多于一个元素时生效，它会在几个值之间来回切换
attr()

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

# css的渲染过程：

流式渲染，每生成一个dom节点，便立刻去匹配相应的css规则
dom节点的生成顺序是从父-> 子。 css的渲染顺序也是从父节点-》子节点

# 伪元素

目前兼容性达到可用的伪元素有以下几种。 ::first-line 第一行 ::first-letter 第一个字母 ::before 元素内容之前插入一个虚拟的元素 ::after 之后

# css动画

# animation的基本用法

@keyframes mykf
{
  from {background: red;}
  to {background: yellow;}
}

div
{
    animation:mykf 5s infinite;
}

animation-name 动画的名称，这是一个keyframes类型的值（我们在第9讲“CSS语法：除了属性和选择器，你还需要知道这些带@的规则”讲到过，keyframes产生一种数据，用于定义动画关键帧）；
animation-duration 动画的时长；
animation-timing-function 动画的时间曲线；
animation-delay 动画开始前的延迟；
animation-iteration-count 动画的播放次数；
animation-direction 动画的方向。

# 3.浏览器

从HTTP请求回来，就产生了流式的数据，后续的DOM树构建、CSS计算、渲染、合成、绘制，都是尽可能地流式处理前一步的产出：即不需要等到上一步骤完全结束，就开始处理上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。

3xx系列比较复杂，301和302两个状态表示当前资源已经被转移，只不过一个是永久性转移，一个是临时性转移。实际上301更接近于一种报错，提示客户端下次别来了。

304又是一个每个前端必知必会的状态，产生这个状态的前提是：客户端本地已经有缓存的版本，并且在Request中告诉了服务端，当服务端通过时间或者tag，发现没有更新的时候，就会返回一个不含body的304状态。

# DOM

一一对应：

Element: <tagname>...</tagname>
Text: text
Comment: <!-- comments -->
DocumentType: <!Doctype html>
ProcessingInstruction: <?a 1?>

我们可以把元素的Attribute当作字符串来看待，这样就有以下的API：

getAttribute
setAttribute
removeAttribute
hasAttribute

document节点提供了查找元素的能力。比如有下面的几种。

querySelector
querySelectorAll
getElementById
getElementsByName
getElementsByTagName
getElementsByClassName

# 4.CSSDOM

document.styleSheets 获取文档中所有样式表

# 窗口 API

窗口API用于操作浏览器窗口的位置、尺寸等。

moveTo(x, y) 窗口移动到屏幕的特定坐标；
moveBy(x, y) 窗口移动特定距离；
resizeTo(x, y) 改变窗口大小到特定尺寸；
resizeBy(x, y) 改变窗口大小特定尺寸。

# 视口滚动API

可视区域（视口）滚动行为由window对象上的一组API控制，我们先来了解一下：

scrollX 是视口的属性，表示X方向上的当前滚动距离，有别名 pageXOffset；
scrollY 是视口的属性，表示Y方向上的当前滚动距离，有别名 pageYOffset；
scroll(x, y) 使得页面滚动到特定的位置，有别名scrollTo，支持传入配置型参数 {top, left}；
scrollBy(x, y) 使得页面滚动特定的距离，支持传入配置型参数 {top, left}。通过这些属性和方法，我们可以读取视口的滚动位置和操纵视口滚动。不过，要想监听视口滚动事件，我们需要在document对象上绑定事件监听函数：

document.addEventListener("scroll", function(event){
  //......
})

# 全局尺寸信息

我们主要使用的是innerHeight、innerWidth和devicePixelRatio三个属性，因为我们前端开发工作只需要跟视口打交道，其它信息大概了解即可

获取盒子布局信息

getClientRects();
getBoundingClientRect()。

# 简单的编译原理

定义四则运算：产出四则运算的词法定义和语法定义。
词法分析：把输入的字符串流变成token。
语法分析：把token变成抽象语法树AST。
解释执行：后序遍历AST，执行得出结果。

派大星

重学前端，温故知新