2021 前端面试题及答案

废话不多说直接上干货

1.js运行机制

• JavaScript 单线程，任务需要排队执行
• 同步任务进入主线程排队，异步任务进入事件队列排队等待被推入主线程执行
• 定时器的延迟时间为 0 并不是立刻执行，只是代表相比于其他定时器更早的被执行
• 以宏任务和微任务进一步理解js执行机制
• 整段代码作为宏任务开始执行，执行过程中宏任务和微任务进入相应的队列中
• 整段代码执行结束，看微任务队列中是否有任务等待执行，如果有则执行所有的微任务，直到微任务队列中的任务执行完毕，如果没有则继续执行新的宏任务
• 执行新的宏任务，凡是在执行宏任务过程中遇到微任务都将其推入微任务队列中执行
• 反复如此直到所有任务全部执行完毕

2.盒子模型及border-sizing：border-box、box-sizing：box- content分别是怎么计算的？

• 盒子模型->widht,height,padding,margin,border
• border-box->重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
• 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height

3.浅克隆、深刻隆

• 浅克隆简单来说就是复制，因为引用型变量保存的是内存地址，其实后来操作的都是同一块内存，导致了数组内容都一样
• 深克隆就是在克隆的时候判断一下属性的类型是不是引用型变量，如果是的话就用递归方法让它一层一层进去复制自己。

4.浅拷贝、深拷贝

• 简单来说，就是一个变量赋值给另一个变量，其中一个变量的值改变，两个变量的值都变了，这就叫做浅拷贝。

  ES6语法中也给我们提供了一个浅拷贝的方法Object.assign(target, sources)

  target：拷贝的目标 sources： 被拷贝的对象
• 那么浅拷贝， 是拷贝后，新拷贝的对象内部仍然有一部分数据会随着源对象的变化而变化， 那么深拷贝就是，拷贝后， 新拷贝的对象内部所有数据都是独立存在的，不会随着源对象的改变而改变
• 深拷贝的话一共有两种方式： 递归拷贝 和 利用JSON函数深拷贝JSON.parse(JSON.stringify(a))

5.事件冒泡和事件捕获

• 事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
               从具体的元素到不确定的元素。
• 从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。

6.事件委托

• 当给父元素添加事件监听器时，事件监听器会分析从子元素 冒泡 上来的事件，找到到底是哪个子元素的事件。

7.css垂直居中

•  Content goes here
  #content {
  	position: absolute;
  	top: 50%;
  	height: 240px;
  	margin-top: -120px; /* negative half of the height */
  }

• 
  	
  Content here
  
  
  
  #floater {
  	float: left;
  	height: 50%;
  	margin-bottom: -120px;
  }
  
  #content {
  	clear: both;
  	height: 240px;
  	position: relative;
  }

    

•  Content here
  #content {
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	margin: auto;
  	height: 240px;
  	width: 70%;
  }

•  Content here
  #content {
  	height: 100px;
  	line-height: 100px;
  }

   

 

8.怎么实现边框为0.5px（准备两种）

• 通过伪元素

  .content:before{

  content: '';
  position: absolute;
  width: 200%;
  height: 1px;
  bottom: 0;
  border-bottom: 1px solid #d6e4ed;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(.5,.5);
  transform: scale(.5,.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box

  }

• 也可以实用背景渐变一半有色一半透明

9.性能优化（主要考察http和https，不能只说是代码封装方面的）

• 控制图片大小/图片懒加载
• 减少http请求（节流）
• 代码高内聚低耦合

• 使用事件委托（使用事件委托可以节省内存）

10.数据类型（也考察存的是堆还是栈）

(基本类型)：String、Number、Boolean、Null、Undefined、Symbol。

引用数据类型：Object、Array、Function。

11.闭包

   闭包就是一个函数，两个函数彼此嵌套，内部函数就是闭包形成闭包条件

   缺点：易造成内存泄漏不会被垃圾回收机制回收

12.es6新特性及es7,8

    let，const，箭头函数，promise，class，解构赋值，export，模版字符串，（...扩展符）

13.map和set

• Map是一组键值对的结构，具有极快的查找速度
• Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

14.webpack

• mode：编译模式

  entry：编译起始文件

  loaders：文件资源的转换

  plugins：提供额外功能的插件

  output：编译结果文件输出

15.js的原型和原型链

• 原型：所有的函数都有一个特殊的属性prototype(原型)，prototype属性是一个指针，指向的是一个对象(原型对象)，原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象，这些对象实例都可以共享构造函数的原型的方法。
• 原型链：原型链是用于查找引用类型（对象）的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中。
   

16.浏览器渲染流程

• DNS解析：把域名解析成IP地址
• TCP 建立连接：TCP三次握手
• 发送HTTP请求
• 服务器处理并响应报文
• 浏览器解析并渲染页面
• 断开连接：TCP 结束连接

17.跨域

18.vue生命周期

19.vue双向绑定

20.vue组件通讯

21.vuex

22.vue路由

23.vuex的使用场景及和全局变量的区别

24.rem、em、px、vh，vw

react

1.当你调用 setState 的时候，发生了什么事？

将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。

2.React 项目用过什么脚手架（本题是开放性题目）

creat-react-app Yeoman 等

3什么时候用类组件Class Component,或函数组件Function

如果您的组件具有状态( state ) 或 生命周期方法，请使用 Class 组件。否则，使用功能组件

4.React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

5.React 优势

1)、React 速度很快：它并不直接对 DOM 进行操作，引入了一个叫做虚拟 DOM 的概念，安插在 javascript 逻辑和实际的 DOM 之间，性能好。

2)、跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。

3)、一切都是 component：代码更加模块化，重用代码更容易，可维护性高。

4)、单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。

5)、同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。

6)、兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

6.react diff 原理（常考，大厂必考）

把树形结构按照层级分解，只比较同级元素。

给列表结构的每个单元添加唯一的 key 属性，方便比较。

React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.
到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

7react 生命周期函数

运行中：

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

componentWillMount：组件即将被装载、渲染到页面上

render:组件在这里生成虚拟的 DOM 节点

componentDidMount:组件真正在被装载之后

运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

销毁阶段：

componentWillUnmount:组件即将销毁

9

React 中 refs 的作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

 

class CustomForm extends Component {
  handleSubmit = () =› {
    console.log('Input Value: ', this.input.value);
  };
  render() {
    return (
      ‹form onSubmit={this.handleSubmit}›
        ‹input type='text' ref={input =› (this.input = input)} /›
        ‹button type='submit'›Submit‹/button›
      ‹/form›
    );
  }
}

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。

另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：

function CustomForm({ handleSubmit }) {
  let inputElement;
  return (
    ‹form onSubmit={() =› handleSubmit(inputElement.value)}›
      ‹input type='text' ref={input =› (inputElement = input)} /›
      ‹button type='submit'›Submit‹/button›
    ‹/form›
  );
}

10setState 和 replaceState 的区别

setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，
不会减少原来的状态

replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了

11React 中有三种构建组件的方式

React.createClass()、ES6 class 和无状态函数。

12描述事件在 React 中的处理方式

为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。
有趣的是，React 实际上并没有将事件附加到子节点本身。
React 将使用单个事件监听器监听顶层的所有事件。
这对于性能是有好处的，这也意味着在更新 DOM 时，React 不需要担心跟踪事件监听器。

13应该在 React 组件的何处发起 Ajax 请求

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。

更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。
在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

14调用 super(props) 的目的是什么

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。

传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

15除了在构造函数中绑定 this，还有其它方式吗

你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。

在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。

16为什么setState 的参数是一个 callback 而不是一个对

因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。

17在 React 当中 Element 和 Component 有何区别？

React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。
典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。

React Component 是一个函数或一个类，可以接收参数输入，并且返回某个 React Element

18状态(state)和属性(props)之间有何区别

State 是一种数据结构，用于组件挂载时所需数据的默认值。

State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。

组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

19createElement 和 cloneElement 有什么区别？

传入的第一个参数不同

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。

它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

 

React.createElement(type, [props], [...children]);

React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保留原始元素的键和引用。

 

React.cloneElement(element, [props], [...children]);

20React的协议？

答：React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议比较奇葩，如果你的产品跟facebook没有竞争关系，你可以自由的使用react，但是如果有竞争关系，你的react的使用许可将会被取消