Web前端最全2021 前端面试题及答案，web前端开发工程师面试题

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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;
}

    


* ```
<div id="content"> Content here</div>
#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›
    );
  }
}

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】