前端面试零碎知识储备

前言

本文是分为三大块分别是css、js、网络主要是略微讲解一下我面试中过程当中的问到的一些面试题。第一次发文章未免有些紧张，想我在掘金社区白piao了半年多了(老脸一红)，如今面试已经经过了，拿了几个小小的offer，相对比较清闲，以为是时候未社区作点力所能及的贡献了。假如感受这篇小文章对你有所帮助，请给我点个赞呗(毕竟是第一次写，紧张)。假若有些问题说得不正确，还请各位掘友们在评论区斧正，感激涕零！

1、CSS相关

（一）盒子模型（box-model）

1. 盒子模型分为两种，一种是标准的盒模型，另一种是IE盒模型。
2. 区别：盒模型的组成由内到外分别是content、padding、border、margin。标准盒模型的宽高只包括content；而IE盒模型的宽高则是由content、padding、border一块儿撑开。
3. css中设置
   标准盒模型：box-sizing: content-box
   IE盒模型： box-sizing: border-box

（二）CSS选择器的优先级

选择器	CSS权重
!important	infinity
行间样式	1000
id选择器	100
class选择器、属性选择器、伪类选择器	10
标签选择器、关系选择器、伪元素选择器	1
通配符选择器	0

注意：这些数值权重采用的是256进制，其中权重是能够叠加的。

（三）BFC、层叠上下文

1. BFC的定义
   BFC是块级格式上下文，它是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。
2. 触发BFC的条件
   • 根元素
   • float的值不为none
   • overfloat的值不为visible
   • display的值为inline-block、flex、table-cell等
   • position的值为absolute或者fixed
3. BFC的约束条件
   • 内部的Box会在垂直方向上一个接一个的放置
   • 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
   • 每一个元素的左外边距与包含块的左边界相接触（从左向右），即便浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素能够超出他的包含块边界）
   • BFC的区域不会与float的元素区域重叠
   • 计算BFC的高度时，浮动子元素也参与计算
   • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。
4. 层叠上下文 层叠上下文是一个三维上的概念，简单来讲若一个元素含有层叠上下文，那么这个元素在Z轴上就“高人一等”，最终表现就是离观察者越近。
5. 怎么产生层叠上下文。
   • HTML中的根元素自己j就具备层叠上下文，称为“根层叠上下文”。
   • 普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
   • CSS3中的新属性也能够产生层叠上下文。
6. 层叠等级
   • 在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
   • 在其余普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。

结论：普通元素的层叠等级优先由其所在的层叠上下文决定，层叠等级的比较只有在当前层叠上下文元素中才有意义。不一样层叠上下文中比较层叠等级是没有意义的。

（四）主流浏览器以及其内核

主流浏览器	内核
Google	Webkit
IE	Trident
Safari	webkit
Firefox	Gecko
Opera	Presto

2、js相关

（一）Nodejs和浏览器js的区别

1. 浏览器中的js
   遵循ES的语法规范，添加了DOM（文档对象模型）和BOM（浏览器对象模型）
2. Nodejs
   遵循ES的语法规范，由于这是在服务器端操做来实现操做服务器端的script，因此它没有DOM，它增长了核心API，使用频繁的API被内置到node环境中，而且它也能够引进第三方的API。

（二）js读写cookie

1. 读cookie
   console.log(document.cookie)
2. 写cookie
   document.cookie = 'username=zhangsan;password=123;'

注意：假如服务端设置了httpOnly，那么能够防止客户端读取cookie，能够在必定程度上预防xss攻击。在服务端设置httpOnly样例

res.setHeader('Set-Cookie', `userid=${userId}; path=/; httpOnly;expires=${getCookieExpires()}`)
复制代码

（三）常见的类数组对象

arguments、NodeList（节点对象）、String构造出来的实例对象；顺便提一下常见的类数组的转数组的一些方式，以arguments为例

1. 用点运算符展开(写法优雅)[...arguments]
2. 用slice方法(性能推荐)Array.prototype.slice.call(arguments)
3. 用splice方法Array.prototype.splice.call(arguments, 0)

（四）如何作一个AJAX Request?

const xhr = new XMLHttPRequest();
xhr.open('POST', 'http://www.baidu.com', true);  // method、url、async
xhr.send('username=zhangsan&password=123');
复制代码

其中XMLHttpRequest中有readyState和onreadystatechange

1. readyState中有五个状态

   state	name	description
   0	Uninitialized	XMLHttpRequest 对象已创建，但未初始化(未调用open方法)
   1	open	初始化，open方法已经调用，可是请求尚未被发送
   2	sent	请求已经发送(send方法已经调用)
   3	receiving	全部响应头部都已经接收到。响应体开始接收但未完成。
   4	loaded	数据接收完毕, 此时能够经过responseBody和responseText获取完整的响应数据

2. onreadystatechange事件回调方法在readystate状态改变时触发

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) { // 响应数据接收完毕
        const status = xhr.status;  // 获取服务器响应的状态码
        if(status === 200) {
            let res = xhr.responseText;
            // todo...
        }
    }
}
复制代码

（五）模块化之AMD、CMD、Commonjs、ES6 module

1. commonJS用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取很是快，因此这样作不会有问题。可是在浏览器端，限于网络缘由，更合理的方案是使用异步加载。
2. AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。
3. CMD是另外一种js模块化方案，它与AMD很相似，不一样点在于：AMD推崇依赖前置、提早执行，CMD推崇依赖就近、延迟执行。
4. CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用。CommonJS模块是运行时加载，ES6模块是编译时输出接口。
5. exports和module.exports的区别：require导出的内容是module.exports的指向的内存块内容，并非exports的。区分他们之间的区别就是exports只是module.exports的引用，辅助后者添加内容用的。用内存指向的方式更好理解。

（六）Promise.all()和Promise.race()的区别

let allP = Promise.all([p1, p2, p3]);
let raceP = Promise.race([p1, p2, p3]);
复制代码

• 他们都是将多个promise实例包装成一个promise实例
• 可是Promise.all()中只要有一个的状态返回rejected，那么promise实例就会变成rejected，假如想要allP是resolved状态，那么p1，p2，p3必须都返回resolved才能够。
• 而Promise.race()只要p一、p二、p3之中有一个实例率先改变状态，raceP的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给raceP的回调函数。Promise.race()的应用场景例如超时通知用户。

// 超时通知用户，超过5s假如没接收到响应就返回request timeout
const p = Promise.race([
  fetch('/test'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);
复制代码

（七）执行上下文

执行上下文的生命周期分为两个:

1. 建立阶段 建立阶段主要作的工做就是建立变量对象、创建做用域链、肯定this指向。其中建立变量对象可分为四部曲：
   • 建立变量对象即VO(VariableObject，初始时是一个空对象)。
   • 添加arguments属性，并赋值。找出当前函数执行环境下的被var定义的变量或者形参，并赋值为undefined。
   • 将形参和实参进行统一。
   • 找出当前执行环境下的函数定义的函数名做为VO的属性，属性值就为定义的函数(假如出现与变量相同的属性名会覆盖掉，即函数提高的优先级更高)。
2. 执行阶段 将执行到的函数环境下的VO转化为AO(Activation Object活动对象)，而后同步执行每条语句，须要赋值的话就更新AO对象。

注意：上面讲的是函数的执行上下文的建立和执行，全局的执行上下文跟上面的步骤是同样的，可是它的变量对象是window。

3、网络相关

（一）HTTP1.0、HTTP1.一、SPDY、HTTP2.0、HTTP3.0

1. HTTP1.1跟HTTP1.0的区别主要体如今 +缓存处理(增长了if-match、cache-control、if-none-match、etag等)

   • 带宽优化(请求头引入range，支持只请求资源的某一部分)
   • host处理(请求头部信息必须带上host，由于一个ip地址可能对应多个主机)
   • 长链接(connection: keep-alive)
   • 错误通知管理(增长了24个错误状态码响应码)。

2. HTTPS和HTTP的区别

   • HTTPS须要到CA申请证书
   • HTTP协议是运行在TCP之上，HTTPS协议是运行在SSL/TLS之上，SSL/TLS是运行在TCP之上。
   • HTTP传输的内容都是明文，HTTPS传输的内容都是通过加密的。
   • HTTP的默认端口为80，HTTPS的默认端口为443。

3. SPDY与HTTP1.*的区别

   • SPDY是基于HTTPS协议进行加密传输的；
   • 下降延迟(采用多路复用的方法)；
   • 能够设置请求优先级(为了解决多路复用带来的问题)；
   • 进行header压缩；
   • 服务端推送。

4. HTTP2.0跟SPDY的区别 HTTP2.0是基于SPDY进行改进的，不过仍是有一些区别

   • HTTP2.0支持明文传输，SPDY强制使用HTTPS。
   • HTTP2.0采用的消息头压缩算法是HPACK，SPDY采用的压缩算法是DEFLATE。

5. HTTP2.0跟HTTP1.*的区别(跟SPDY跟HTTP1.*的区别有点接近)
   新的二进制格式(由于http1.*是基于文本进行解析的，而http2.0是基于二进制格式进行解析的)、多路复用、header压缩、服务端推送。

6. HTTP3.0 HTTP3.0是基于QUIC协议，而QUIC协议是基于UDP协议的，不过QUIC协议在这上面增长了一些功能例如多路复用、0-RTT(往返时延)、纠错机制、使用TLS1.3加密、流量控制、有序交付、重传等。

（二）TCP三次握手和四次挥手

1. TCP三次握手
   • 第一次握手：客户端向服务端发送带有SYN标记位的链接请求报文段，客户端进入SYN_SENT状态。
   • 第二次握手：服务端接收到来自客户端的请求链接的报文后，若是赞成链接，则向客户端发送带有SYN和ACK标记位的应答报文，发送以后服务端进入了SYN_RECEIVED状态。
   • 第三次握手：当客户端接收到服务器端赞成创建链接的报文后，客户端再向服务器端发送带有ACK标记的确认创建链接的报文段，随后客户端进入了ESTABLISHED状态，当服务端收到这个应答后也进入ESTABLISHED 状态，此时链接创建成功。
2. TCP四次挥手
   • 第一次挥手：客户端向服务端发送带有FIN标记的请求释放链接的报文段，此时客户端进入了FIN_WAIT1(终止等待1)状态。
   • 第二次挥手：服务器端接收到客户端的请求释放链接的报文段时，会告诉应用层要释放TCP链接了。而后会向客户端发送带有ACK的报文，随后服务端进入了CLOSE_WAIT状态，客户端接收到来自服务器端的应答后会进入FIN_WAIT2(终止等待2)。此时不会再接收来自客户端的数据，可是服务端还能够发送数据给客户端。
   • 第三次挥手：若此时还有数据没发送给客户端，那么会继续发送，发送完毕后会向客户端发送带有FIN标记的请求释放链接的报文，而后服务端进入到LAST_ACK状态。
   • 第四次挥手：客户端收到服务端的请求释放链接的请求后，会向服务器发送带有ACK标记的确认应答报文，此时客户端进入到TIME_WAIT状态，该状态会持续2MSL(最大段生存期，指报文段在网络中生存的时间，超时会被抛弃)时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入CLOSED状态。

结语

你的一个承认，将是我不断前进的动力。同时我也祝福你们能找到本身满意的工做，激流勇进，丝绝不殆。最后还祝掘友们，国庆节快乐！！！