收集的大厂面试题

一、BFC

块级格式化上下文（Block Formatting Context）。

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）

大白话来说呢就是，BFC就是一个相对封闭的容器，而这个容器内部的盒子布局不会影响到容器外边的盒子布局。常用来解决外边距折叠，和高度坍塌的问题

常见的BFC有哪些：

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible
root节点

它能解决什么

利用BFC避免外边距折叠
BFC包含浮动（高度塌陷问题）

二、CSS选择器权重问题

css选择器的权重问题看似简单，但是如果出错，想要找到出错的原因可是不容易的。本文具体介绍css选择器权重，希望对你有所帮助。

选择器的种类

• !important
• 内联样式
• ID选择器
• class选择器
• 元素选择器
• 通配符选择器

权值和权级的概念

我们可以通过给选择器添加权值和权级这两个概念的方式来更好的理解选择器的权重
（注意:“权值”和“权级”的概念是为了更好的理解权重而提出的，并不是真是存在的)

选择器的权重

有了权值和权级的概念以后，我们就可以参考表格来对元素的权重进行理解。
选择器的权重可以相加，例：

span的权值为 = id选择器100+类选择器10+元素选择器1 = 111

权值相同时

由于HTML代码的执行特点时从上往下执行，因此在权值相同的情况下，后面的选择器会覆盖前面的选择器相同的属性
例：

两个类选择器同时选中div元素，且color属性发生冲突，此时生效的是后面的class2，因此元素的前景色为蓝色

权值不同时

两种选择器覆盖了同一属性，此时权重高的选择器生效。

例：

当前形况下，元素选择器的权值为1，大于通配选择器的权值0，因此对div生效的样式应该是元素选择器里的样式。
权值跃迁
权值跃迁讨论的问题是，当有11个元素选择器和1个类选择器同时选中同一元素时，哪个选择器的样式会生效。
结论是：权级高的选择器的样式会生效。
理解方式1
因为权值不能跃迁，也就意味着无论有多少个0级的选择器，生效的仍然是1级选择器，因 为选择器的权级无法跃迁。
理解方式2
CSS里面的进制并不是10进制，而是256进制，所以10个低级选择器并不能等于1个高级选择器
其他选择器

• 伪类选择器
• 属性选择器
  伪类选择器和属性选择器的权重相当于类选择器的权重，权级为2级。
• 伪元素选择器
  伪元素选择器的权重相当于元素选择器的权重，权级为1级。
• 子代选择器
• 后代选择器
  子代和后代有可能是元素选择器、类选择器、id选择器，因此要根据具体情况来具体分析。

三、http状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。
HTTP状态码的英文为HTTP Status Code。

分类    描述
1XX    信息响应，表示服务器收到请求，需要请求者继续执行操作
2XX    成功响应，操作被成功接收并处理
3XX    重定向，需要进一步的操作以完成请求
4XX    客户端错误，请求包含语法错误或无法完成请求
5XX    服务器错误，服务器在处理请求的过程中发生了错误
状态码列表
状态码    英文名称    中文描述
100    Continue    继续。客户端应继续其请求
101    Switching Protocols    切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200    OK    请求成功。一般用于GET与POST请求
201    Created    已创建。成功请求并创建了新的资源
202    Accepted    已接受。已经接受请求，但未处理完成
203    Non-Authoritative Information    非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204    No Content    无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205    Reset Content    重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206    Partial Content    部分内容。服务器成功处理了部分GET请求
300    Multiple Choices    多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301    Moved Permanently    永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302    Found    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303    See Other    查看其它地址。与301类似。使用GET和POST请求查看
304    Not Modified    未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305    Use Proxy    使用代理。所请求的资源必须通过代理访问
306    Unused    已经被废弃的HTTP状态码
307    Temporary Redirect    临时重定向。与302类似。使用GET请求重定向
400    Bad Request    客户端请求的语法错误，服务器无法理解
401    Unauthorized    请求要求用户的身份认证
402    Payment Required    保留，将来使用
403    Forbidden    服务器理解请求客户端的请求，但是拒绝执行此请求
404    Not Found    服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405    Method Not Allowed    客户端请求中的方法被禁止
406    Not Acceptable    服务器无法根据客户端请求的内容特性完成请求
407    Proxy Authentication Required    请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408    Request Time-out    服务器等待客户端发送的请求时间过长，超时
409    Conflict    服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突
410    Gone    客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411    Length Required    服务器无法处理客户端发送的不带Content-Length的请求信息
412    Precondition Failed    客户端请求信息的先决条件错误
413    equest Entity Too Large    由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414    Request-URI Too Large    请求的URI过长（URI通常为网址），服务器无法处理
415    Unsupported Media Type    服务器无法处理请求附带的媒体格式
416    Requested range not satisfiable    客户端请求的范围无效
417    Expectation Failed    服务器无法满足Expect的请求头信息
500    Internal Server Error    服务器内部错误，无法完成请求
501    Not Implemented    服务器不支持请求的功能，无法完成请求
502    Bad Gateway    充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
503    Service Unavailable    由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504    Gateway Time-out    充当网关或代理的服务器，未及时从远端服务器获取请求
505    HTTP Version not supported    服务器不支持请求的HTTP协议的版本，无法完成处理

四、浏览器缓存策略

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的

强缓存

强缓存不需要请求接口，每次发起http请求资源时，直接用浏览器的缓存

强缓存可以通过设置两种 HTTP Header 实现： Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求， state code为 200

协商缓存

协商缓存需要请求接口，询问后端缓存的文件是否更改，更改了就只能重新请求，没有改变就直接用缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag
当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。
从index.js的加载来看待这个问题

1.首次加载，http请求，server正常返回

返回响应头加上强缓存的说明
expires：web 11 Aug 2019 20:50:00 (过期时间)
cache-control : max-age=3000000 (时间戳，http1.1 精准，优先级高)
两个header都是后端告诉浏览器，这个文件多少时间内不过期
浏览器接受到上面两个header 就会把文件保存起来
2.1个小时内再请求这个文件

浏览器识别到强缓存命中，请求不发出，直接用本地的缓存文件，状态码是200 from cache
3. 2个小时后，再次请求这个文件，强缓存失效，使用协商缓存

浏览器不会直接发出请求，而是问一下后端，header带上请求头
if-modified-since:日期 , 询问后端这个日期之后，这个文件有没有修改过
后端告诉没有修改过，使用缓存 状态码是304 not modified
优先级更高的是etag（文件的指纹），内容不变指纹不变
4.如果后端告诉你改过了，就只能重新加载了

如何高效利用缓存

1.缓存时间过长

发布上线了，用户端还用缓存，会有bug
2.缓存时间过短

重复加载文件太多，浪费带宽
解决：

1.模板（html）不能有缓存

强缓是针对静态资源使用，动态资源需要慎用。除了服务端页面可以看作动态资源外，那些引用静态资源的html也可以看作是动态资源，如果这种html也被缓存，当这些html更新之后，可能就没有机制能够通知浏览器这些html有更新，尤其是前后端分离的应用里，页面都是纯html页面，每个访问地址可能都是直接访问html页面，这些页面通常不加强缓存，以保证浏览器访问这些页面时始终请求服务器最新的资源

2.文件名+hash值

利用webpack打包，当文件内容有改变的时候。生成文件名的hash值也会改变，这样文件名就变了，浏览自然会重新请求，而不是用缓存中的文件。

当文件内容没有改变的时，hash值不变、文件名不变，浏览使用缓存的文件，不发送请求

五、JavaScript的BOM和DOM有什么区别

1、BOM 浏览器对象模型

Browser Object Model（浏览器对象模型），提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。 比如 alert();弹出一个窗口,这属于BOM
2、DOM 文档对象模型

Document Object Model（文档对象模型），DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。

DOM是Document ，简称文档对象模型。是用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。document.getElementById("").value;  这属于DOM

BOM和DOM的结构关系示意图

六、jsonp的原理

背景：
由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。

同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。

举个简单的例子：

http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（域名、端口相同但协议不同）
http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域（域名、协议相同但端口不同）
http://www.abc.com:3000到http://www.def.com:3000的请求会出现跨域（域名不同）
突破同源策略限制：
现在知道了同源策略，那我们就来看下jsonp是如何突破同源策略的限制实现跨域的

首先，不知道大家有没有注意，不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到

<img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=6d0bf83bda00baa1a52c41bb7711b9b1/0b55b319ebc4b745b19f82c1c4fc1e178b8215d9.jpg">
src或href链接的静态资源，本质上来说也是一个get请求，拿csdn上的静态资源举例：

可以看到，确实是个get请求无疑。同理img标签的src和link标签的href也会发送一个get请求去请求静态资源。那么我们通过这点，是不是发现了点什么，这些标签的src和link属性，并没有受同源策略的限制。说到这里jsonp的实现原理就浮出水面了。

jsonp就是使用同源策略这一“漏洞”，实现的跨域请求（这也是jsonp跨域只能用get请求的原因所在）。想象一下，既然是个get请求，那么服务端一定可以接收到，并做出反馈。ok，知道这两点之后，我们开始具体使用jsonp进行跨域请求。

JSONP跨域实现：
根据上边所说的，我们要用过利用srcipt标签的src属性来实现，那么我们如何做呢，我们来看一段简单的代码，为了方便，我这里使用jQuery：

$('#btn').click(function(){
            var frame = document.createElement('script');
            frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
            $('body').append(frame);
        });
可以看到，让我们点击按钮的时候，创建了一个script标签(即会发送一个get请求到src指向的地址)，src地址是"localhost:3000/article-list",这个src地址，就是我们请求的服务端接口。注意，这里我们有是那个参数，name,age和callback，name和age不说了，这跟我们平时普通的get请求参数无异。主要说下callback这个参数，callback参数就是核心所在。为什么要定义callback呢？首先我们知道，这个get请求已经被发出去了，那么我们如何接口请求回来的数据呢，callback=func则可以帮我们做这件事。我们继续看下边的代码 

<button id="btn">点击</button>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').click(function(){
            var frame = document.createElement('script');
            frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
            $('body').append(frame);
        });
        
        function func(res){
            alert(res.message+res.name+'你已经'+res.age+'岁了');
        }
  </script>
这里可以看到，我们声明了一个func函数，但没有执行，你可以想一下，如果服务端接口到get请求，返回的是func({message:'hello'})，这样的话在服务端不就可以把数据通过函数执行传参的方式实现数据传递了吗。

服务端代码实现：
接下来，我们看服务端应该如何实现：

router.get('/article-list', (req, res) => {
  console.log(req.query, '123');
  let data = {
    message: 'success!',
    name: req.query.name,
    age: req.query.age
  }
  data = JSON.stringify(data)
  res.end('func(' + data + ')');
});
ok，接下来当我们点击提交的时候，就获取到了服务端反回的数据。如下：

这样下来，就完成了实现jsonp的跨域。

总结：
需要注意的是，callback参数定义的方法是需要前后端定义好的，具体什么名字，商讨好就可以了。其实jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据，整个过程实际非常简单易懂