浏览器

宏任务和微任务

Javascript 引擎单线程运行，有宏任务队列和微任务队列控制程序执行顺序。

Javascript 先按顺序执行宏任务队列，期间产生的新宏任务添加到新一个宏任务队列，产生的微任务添加到微任务队列。一个宏任务队列执行完毕后，执行微任务队列，期间产生的宏任务添加到新宏任务队列，产生的微任务添加到当前微任务队列尾。当前宏任务队列和微任务队列都执行结束后，执行下一个宏任务队列。

宏任务：setTimout，script，IO，渲染微任务：promise，ajax

一个 URL 访问的过程

DNS 解析
HTTP/HTTPS 请求
获取数据（HTML 和资源）
渲染页面和执行脚本

重绘与回流

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。

重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少
回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

会触发回流的操作:

页面初次渲染
浏览器窗口大小改变
元素尺寸、位置、内容发生改变
元素字体大小变化
添加或者删除可见的 dom 元素
激活 CSS 伪类（例如：:hover）
查询某些属性或调用某些方法：clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、getComputedStyle()、getBoundingClientRect()、scrollTo()

跨域

跨域指一个域名的网页请求另一个域名的资源。但浏览器有同源策略，即一般情况下网页只能获取协议、域名、端口号相同域下的资源，在跨域时会有限制：

Cookie、LocalStorage、IndexedDB 等存储性内容无法读取
DOM 节点和 Js 对象无法获得
AJAX 请求被浏览器拦截

跨域解决方法：

JSONP
CORS（Cross-origin resource sharing）
postMessge

网络

HTTP

特点：

可靠传输：基于 TCP
无状态：不保存发送方和接收方信息
灵活可扩展：只规定了基本格式，可以传输文本、图片、音频等任意数据

HTTP1.1：

持久连接：TCP 连接默认不关闭，可复用
新缓存机制：E-tag、If-Unmodified-Since,、If-Match,、If-None-Match
断点续传
新增方法：PUT、PATCH、OPTIONS、DELETE

HTTP2.0：

二进制分帧：彻底二进制传输
头部压缩
多路复用：同时双向发送和接收多个请求
服务器推送：服务器主动发送可能需要的资源

状态码：

1xx：信息类。表示接受的请求正在处理
2xx：成功
3xx：重定向
4xx：客户端错误
5xx：服务器错误

GET 和 POST 的区别：

从缓存角度看，GET 请求后浏览器会主动缓存，POST 默认情况下不能。
从参数角度来看，GET 请求一般放在 URL 中，因此不安全，POST 请求放在请求体中，相对而言较为安全，但是在抓包的情况下都是一样的。
从编码角度看，GET 请求只能经行 URL 编码，只能接受 ASCII 码，而 POST 支持更多的编码类型且不对数据类型限值。
GET 请求幂等，POST 请求不幂等，幂等指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致。
GET 请求会一次性发送请求报文，POST 请求通常分为两个 TCP 数据包，首先发 header 部分，如果服务器响应 100(continue)，然后发 body 部分。

作者：TianTianUp 链接：juejin.cn/post/685728… 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

缓存

强制缓存：

Expires：绝对过期时间
Cache-Control：相对过期时间

协商缓存：

Last-Modified：上一次修改时间
ETag：资源指纹

统一资源定位符

Uniform Resource Locator(URL)，网络上标准的资源地址。

格式：scheme://host[:port]/path/…/?query#anchor

含义：

scheme：协议
host：域名或 IP 地址
post：端口号
path：路径
query：查询字符串
anchor：锚点

HTTPS

HTTPS 协议由 HTTP 和 SSL/TLS 组合而成。

特点：

非对称加密传输
需要数字证书

Javascript

变量类型

基础变量类型：

boolean
number
string
undefined
null
symbol
bigint

复合变量类型：

Object
Function

类型判断

typeof：注意`typeof null === 'object'
instanceof：可以判断类
Object.prototype.toString

类型转换

转 boolean 的规则：

undefined、null、false、NaN、''、0、-0 转为false；其他所有值转为true。

转数字的规则：

true转为 1，false转为 0，null转为 0，undefined转为NaN，symbol报错，字符串看内容，如果是数字或者进制值就正常转，否则就NaN。

对于对象，将其转换为数字和字符串时，为按顺序检查它的 3 个方法：

[Symbol.toPrimitive]
valueOf
toString

如果有那么调用并将返回值进一步处理（继续检查或返回数字或字符串），否则报错。

运算符：

+：操作数至少有一个是字符串，那么得到字符串，否则的数字。
-*/：操作数至少有一个数字，那么得数字。

原型-构造函数-实例

原型：一个对象，为派生对象提供属性。构造函数：基于原型新建新对象的函数。实例：由构造函数创建的对象。

new 构造函数() === 实例
构造函数.prototype === 原型
原型.constructor === 构造函数
Object.getPrototypeOf(实例) === 原型

原型是对象，那么原型也有原型，组成了原型链。

基于同一个原型链的对象共享相同的原型属性。查找对象的属性时，如果对象自身找不到该属性，则沿着原型链向上需找，直至顶级原型对象。修改对象的属性时，如果对象自身没有这个属性，则添加该属性，不会直接修改原型链上的属性。

new 运算符的执行过程

创建对象
链接原型
绑定 this
返回对象

instanceof 原理

能在实例的原型对象链中找到该构造函数的 prototype 属性所指向的原型对象就返回true，否则返回false。

执行上下文

Execution Context（EC）。代码执行的作用返回和环境。

组成：变量对象，作用域链，this指针。分类：全局执行上下文，函数执行上下文，eval执行上下文。

闭包

闭包属于一种特殊的作用域，称为静态作用域。它的定义可以理解为: 父函数被销毁的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以继续访问到父级的变量对象，这样的函数称为闭包。

this 指向

对象调用方法，this 指向对象。
箭头函数中，this 为词法作用域中的 this 指向。
call、apply、bind 处理过的函数，this 指向参数指定的对象。

内存泄漏

原因：

全局变量无法被释放
定时器未被正确取消，导致所引用的外部变量无法被释放
事件监听没有正确取消 (低版本浏览器可能出现)
闭包中父作用域的变量无法被释放
dom 元素被删除时，引用未被删除

DOM 和 BOM

宽高和位置属性

clientWidth/clientHeight：可视内容宽高，不含边框和滚动条
offsetWidth/offsetHeight：元素宽高，包含边框和滚动条
scrollWidth/scrollWidth：内容宽高，不包含边框和滚动条
offsetLeft/offsetTop：元素与父元素内容区域左/上边的距离
clientLeft/clientTop：元素与自身边框外边沿左/上边的距离
scrollLeft/scrollLeft：可滚动元素的内容左/上边沿与元素左/上边沿的距离

URL 转义函数

encodeURI 用于转义整个 URL，不会对下列字符转义：数字、字母、~ ! @ ## $ & _ ( ) = : / , ; ? + '。 encodeURIComponent 用于转义查询字符串，不会对数字、字母、~ ! _ ( ) - _ ' .。

CSS

块级格式化上下文

Block formatting context（BFC）。表示一个独立的渲染区域的一个 DOM 元素，使得元素内容和元素外部相互隔离，包括定位、层级等不会相互影响。

比较明显的特点是：父元素高度包含 float 元素高度。

触发条件：

根元素
position 为 absolute 或 fixed
display 为 inline-block、inline-flex、inline-table、table
float
ovevflow 不为 visible

层叠上下文

元素有层叠等级，决定了元素在 Z 轴上的排列顺序。在一定条件下，元素称为层叠上下文元素，其子元素的层叠等级受限于上下文的层叠等级。而层叠上下文于其它层叠上下文元素之间也有层叠等级关系。

层叠等级有一定的规则，从上到下为：

z-index>0
z-index: auto / z-index: 0
inline/inline-block 水平盒子
float 盒子
block 盒子
z-index < 0
层叠上下文 background/border

创建层叠上下文的方法：

根元素
普通元素设置 position 属性为非 static 值并设置 z-index 属性为具体数值
CSS3 中的一些新属性

优先级

从高到低为：

!important
行内样式
选择器优先级
后写覆盖先写

不同的选择器有不同的权值，一个样式的选择器优先级由所有选择器的权值想加得出。

Web前端常识概览 - 其实就是面试题知识啦:)

浏览器