重学前端，温故知新

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

# 1.小知识点

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

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

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

1
2
3
4
5

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

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

div
{
    animation:mykf 5s infinite;
}

1
2
3
4
5
6
7
8
9
10

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

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

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

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

一一对应：

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

1
2
3
4
5

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

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

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

窗口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){
  //......
})

1
2
3

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

获取盒子布局信息

最近更新时间： 2021/06/17 10:13:36