前端面试题汇总

1.BFC了解（什么是BFC，如何实现BFC，解决什么问题）

BFC是浏览器自带的一种CSS渲染模式,也是一种盒子模型

四种方式开启BFC盒子

• float不是none (有float属性且不为none,此时盒子自动变成BFC盒子)

• overflow属性不是visible(有overflow属性且不为visible,此时盒子自动变成BFC盒子)

• position属性不是static和relative

• display属性为以下值 ： table-cell 、 inline-block 、 table-caption

开启BFC 盒子变化

• 当一个块级盒子触发BFC之后，其内部形成独立环境，在里面做任何事都不会对盒子外部有影响。

• 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

BFC解决哪些问题

• 清除元素内部浮动

• 解决盒子margin合并问题（塌陷也可以解决）

• 实现元素宽度自适应多列布局

  • 制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）

    • 当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。

2.事件委托

• 1.什么是事件委托

  • 给父元素注册事件，委托给子元素处理

• 2.事件委托原理：==事件冒泡==

• 3.事件委托注意点

  • this : 指向父元素

  • e.target : 指向触发事件的子元素

• 4.事件委托场景 ： 给动态新增元素注册委托事件

3.如何判断数据类型

• typeof有两种数据类型无法检测： null 、array
• Object.prototype.toString.call(数据)

4.浅拷贝与深拷贝

• 1.浅拷贝：拷贝地址， 修改拷贝后的数据原数据也会变化

• 2.深拷贝：拷贝数据， 修改拷贝后的数据原数据不会变化

  • 推荐 json : let obj = JSON.parse( JSON.stringify( 对象 ) )

  • 递归

5.for in与for of区别

1.功能不同

    for-in是遍历数组的下标

    for-of是遍历数组的元素

2.原型的属性

    for-in会遍历原型的属性

    for-of不会遍历原型的属性

3.数据类型

    for-in可以遍历Object类型

    for-of不可以遍历Object类型

总结：如果只想要属性值/元素，使用for-of效率更高

6.get请求与post请求区别

• 1.传参方式不同

  • get在url后面拼接(请求行)

  • post在请求体传参

• 2.大小限制不同

  • get有大小限制，不同浏览器大小限制不同。 一般2-5 MB

  • post没有大小限制

• 3.安全性不同

  • get参数直接暴露在url，不安全(一般查询类数据都是get)

  • post参数在请求体中，更加安全（一般登录注册必须是post）

• 4.传输速度不同

  • get传输速度快

  • post传输速度慢

7.一个页面从输入url到呈现过程

• 1.DNS域名解析： 将url中的域名解析成ip地址

• 2.TCP三次握手： 建立安全的网络传输协议

  • 2.1 什么是TCP : 一种 传输控制协议

  • 2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的）

  • 2.3 TCP三次握手 :

    第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)

    第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送)

    第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)

• 3.HTTP建立连接

  • 3.1 客户端发送请求

  • 3.2 服务器处理请求

  • 3.3 服务器响应请求

• 4.渲染引擎开始渲染响应返回的HTML文本

  • 4.1 解析html生成：dom树

  • 4.2 解析css生成：样式树

  • 4.3 dom树 与 样式树 合并得到 渲染树

  • 4.4 呈现页面

8.防抖节流

• 函数防抖：单位时间内，频繁触发事件，只会触发最后一次

• 函数防抖实际开发应用场景： 实时获取输入框文本

• 函数节流：单位时间内，频繁触发事件，只会触发一次

• 函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能

 9.什么是跨域

跨域是浏览器一种安全策略，如果你的ajax地址与页面地址不同源，也就是协议名和ip地址和端口号不一致的时候，浏览器就会拒收服务器响应的数据。一般在开发中，公司后台主要使用cors技术来解决跨域，前端不需要做任何处理，后台大概好像是设置一个响应头'Access-Control-Allow-Origin '.前端出来在config.js中设置代理服务器,服务器与服务器不存在跨域.

10.前端web优化方案

• 1.减少HTTP请求数

  • 这是必须要放在第一个回答的，因为这是优化web最优方案

  • 具体示例 ： 精灵图、多个文件合并成一个

    • 精灵图适用场景 : （1）图片不经常更换的，比如按钮图标 （2）图片不能太大

• 2.资源压缩

  • 就是一般我们第三方包有一个min版本,就是通过压缩文件体积来优化web

• 具体示例 ：响应min文件

• 3.合理利用浏览器缓存

  • 某些接口的数据是固定的,服务器就没有必要每一次都响应数据。可以让浏览器进行缓存。

  • 具体示例：例如省市县数据, 这种数据一般不会变化

11.请说一下你对promise的理解

promise是ES6新增的一个构造的数，主更是用干好决开发中的回调地默问题。promise对象有三种工作状态，分别是进行中，已成功，已失败。一旦创建promise就会立即进入进行中状态，此时立即执行promise里面的代码
promise状态改变有两种，从进行中到已成功，此时对应resolve方法(通过resolve修改状态为已成功)从进行中到己失败，此时对应reject方法
promise状态一旦改变就不会再变，resolve和reject分别对应promise实例的then和catch

promise相关的几个静态方法

1. promise.race():接收多个promise实例，可以得到最先处理完毕的结果（可能成功，可能失败）
2. promise.all():接收多个promise实例&