2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）

整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。

篇幅过长，大家可以先点赞收藏以后慢慢看。

关于HTML

的title和alt属性有什么区别

alt：图片加载失败时，显示在网页上的替代文字
title：鼠标（手机端该属性无意义）放在图片上时显示的文字
alt是必需属性（但属性值可为空），title非必需

图片懒加载的原理

图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。

懒加载的思路及实现代码详见js实现图片懒加载原理

H5新增了哪些标签？

常见的有：article、aside、audio、video、footer、header、nav、section

H5和H4有什么不同？

H5新特性有：
用于媒体回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素，如article、footer、header、nav、section

简单地说，它更标准，提供更多的多功能支持。更标准、更可读性、更好的性能和更方便的执行。

块级元素、行内元素分别有哪些？

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite

SVG和CANVAS的区别？

SVG

表示以XML格式定义图像的可伸缩矢量图形。

CANVAS

通过 JavaScript 来绘制 2D 图形。

二者比较

菜鸟教程

关于CSS

css3新的特性？

RGBA和透明度

是RGB颜色模型的一个扩展。本质上，在设置元素中添加了一个alpha通道，即一个表示除红色、绿色和蓝色三种颜色之外的透明度的通道。

background属性

background-image：设置元素的背景图像。
background-origin：规定背景图片的定位区域。
background-size ：规定背景图片的尺寸。
background-repeat：设置是否及如何重复背景图像。

word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注：所有主流浏览器都支持 word-wrap 属性。

基础语法：

word-wrap: normal|break-word;

text-shadow属性

text-shadow 属性：向文本设置阴影。

text-shadow基础语法：

text-shadow： 5px 5px 5px #FF0000;

参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；

font-face属性

font-face属性：定义自己的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

border-radius属性

border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。

基础语法：

border-radius: 1-4 length|% / 1-4 length|%;

注：该属性允许您为元素添加圆角边框！

border-image属性

border-image：将图片规定为包围 div 元素的边框

border-image基础语法：

border-image: url(border.png) 30 30 round

box-shadow属性

box-shadow属性：向框添加一个或多个阴影。（盒阴影）

box-shadow基础语法：

box-shadow: 10px 10px 5px #888888

媒体查询

媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

元素居中的方式有哪些？

水平居中

1.行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

2.块级元素的水平居中
①将该块级元素左右外边距margin-left和margin-right设置为auto。
②使用table+margin
先将子元素设置为块级表格来显示（类似），再将其设置水平居中。
display:table在表现上类似block元素，但是宽度为内容宽。
③使用absolute+transform
先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。
不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。
④使用flex+justify-content
通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
⑤使用flex+margin
通过flex将父容器设置为为Flex布局，再设置子元素居中。

3.多块级元素水平居中
①利用flex布局
利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
②利用inline-block
将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

4.浮动元素水平居中
对于定宽的浮动元素，通过子元素设置relative + 负margin
对于不定宽的浮动元素，父子容器都用相对定位
通用方法(不管是定宽还是不定宽)：flex布局

垂直居中

1.多行内联元素垂直居中
①利用flex布局（flex）
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。
②利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

2.块级元素垂直居中
①使用absolute+负margin(已知高度宽度)
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。
②使用absolute+transform
当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
③使用flex+align-items
通过设置flex布局中的属性align-items，使子元素垂直居中。
④使用table-cell+vertical-align
通过将父元素转化为一个表格单元格显示（类似和），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

水平垂直居中

1、绝对定位+CSS3(未知元素的高宽)
利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。
2、flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。
3、flex/grid与margin:auto(最简单写法)
容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

自适应的方案？

viewport方案

配置默认根字号、默认字号、默认设计稿宽度，然后使用postcss插件将代码中的px自动转换成rem，这种方法可以完成使用1080p设计稿再不同手机下的适应方案，所有元素大小均按照1080p下的大小来定义px。配置上述插件后，px单位在编译后会默认转为rem单位，如果不需要被转换，可以将小写的px改成大写的PX或Px。取消使用viewport.js文件，如果遇到不能适配的公共组件，则拷贝一个新的版本，适配新的方案，逐步淘汰老版本。

// 引用该mixin，其中包含了默认的变量等
$default-font-size: 100;    // 默认根字号大小，用于换算vw单位
$baseFontSize: 100px;   // 默认字号大小，用于计算rem值
$pageWidth: 1080;       // 默认的设计稿宽度
@import '@oppobrowser/lib-browser-scss/src/mixins.scss';//项目的vue.config.js中增加如下postcss配置
// 在css配置项中增加postcss配置，用于px转rem单位，后续合到master后就统一配置了
css: {loaderOptions: {sass: {data: '@import "@/common/scss/variables.scss";',},postcss: {plugins: [require('postcss-pxtorem')({// 把px单位换算成rem单位rootValue: 100, // 换算的基数(设计图1080的根字体为100)selectorBlackList: [], // 忽略转换正则匹配项propList: ['*'],}),],}
}

rem方案

针对Android4.4以下版本，全部使用rem单位兼容方案，并在head标签内添加脚本重写html根字号的大小，1080p下为100px。并且针对受影响的公共组件写出兼容性代码。

<script type="text/javascript">(function(doc, win) {var basicWidth = 1080;var minWidth = 360;var htmlElement = doc.documentElement;var dpr = parseInt(window.devicePixelRatio || 1, 10);var recalc = function() {var clientWidth = htmlElement.clientWidth || (basicWidth / 2);window.rootFontSize = 100 * (clientWidth / basicWidth);clientWidth = clientWidth < minWidth? minWidth : clientWidth;htmlElement.style.fontSize = 100 * (clientWidth / basicWidth) + 'px';htmlElement.setAttribute("data-dpi", dpr);};recalc();if (!win.addEventListener) return;win.addEventListener('resize', recalc, false);})(document, window);
</script>

父容器高度塌陷的解决方案？

overflow:hidden

利用伪元素

div::after {display: block;    content: "";clear: both;
}

添加一个div

<style>.cf {clear: both;}
</style>
<div>..............<div class="cf"></div>
</div>

清除浮动的方法有哪些？

额外标签法：

给谁清除浮动，就在其后额外添加一个空白标签。
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

父级添加overflow方法：

可以通过触发BFC的方式，实现清楚浮动效果。
优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

使用after伪元素清除浮动：

after方式为空元素的升级版，好处是不用单独加标签了。
优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

注意：这个也是给父亲添加 clearfix

使用before和after双伪元素清除浮动：

注意：是给父亲添加clearfix

less和sass的区别？

不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。

关于JS、ES6

es6兼容的浏览器版本

支持ie 11+

var，let，const的比较？

var声明变量存在变量提升，let和const不存在变量提升
let、const都是块级局部变量
同一作用域下let和const不能声明同名变量，而var可以

继承的方式有那几种？

原型链继承

父类的实例作为子类的原型

借用构造函数继承（伪造对象、经典继承）

复制父类的实例属性给子类

实例继承（原型式继承）

组合式继承

调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用

寄生组合继承

通过寄生的方式来修复组合式继承的不足，完美的实现继承

es6 extends继承

代码量少，易懂

ES5继承和ES6继承的区别

es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this

说说对原型链的理解

原型链，简单理解就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样可以一直通过__proto__想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

有哪些数据类型？

值类型(基本类型)：

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：

对象(Object)、数组(Array)、函数(Function)。

判断数据类型的方式有哪些？

typeof
instanceof
constructor
Object.prototype.toString.call()

防抖和节流的区别？

debounce和throttling 各有特点，在不同的场景要根据需求合理的选择策略。如果事件触发是高频但是有停顿时，可以选择debounce；在事件连续不断高频触发时，只能选择throttling，因为debounce可能会导致动作只被执行一次，界面出现跳跃。

二叉树的遍历有几种方法？

先序
中序
后序
层序遍历

具体实现方法详见：二叉树遍历的几种常见方法

数组扁平化有几种方法？

二维数组时，可以简单使用flat()方法

let arr = [[1,2],[3,4],[5,6]].flat();

let arr = [[1,2],[3,4],[5,6]].flat();
console.log(arr); // [1,2,3,4,5,6]

如果是多维数组，则flat()将达不到效果，

需要给flat()传一个参数，var newArray = arr.flat([depth])，

参数：depth ，可选，指定要提取嵌套数组的结构深度，默认值为 1。

let arr = [[1,2],[3,4],[5,6]].flat(Infinity);
console.log(arr); // [1,2,3,4,5,6]

迭代实现（ES6扩展运算符…）

const arr = [1,2,[3,4,5,[6,7],8],9,10,[11,[12,13]]];
const flatten = (arr) => {
while(arr.some(item=>Array.isArray(item))){
arr=[].concat(…arr);
}
return arr;
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

普通递归实现

const arr = [1,2,[3,4,5,[6,7],8],9,10,[11,[12,13]]];
const flatten = (arr) => {
let result = [];
arr.forEach((item, i, arr) => {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(arr[i])
}
})
return result;
};
console.log(flatten(arr));

高级递归（reduce方法）

const flatten = (array) => array.reduce((acc,cur)=>
(Array.isArray(cur)?[…acc,…flatten(cur)]:[…acc,cur]),[])

toString()

该方法利用了 toString 把数组变成以逗号分隔的字符串，然后可通过遍历数组把每一项再变回原来的类型。

const arr = [1,2,[3,4,5,[6,7],8],9,10,[11,[12,13]]];
const flatten = (arr) => arr.toString().split(',').map((item) => +item);
console.log(flatten(arr));

[].concat.apply

const arr = [1,2,[3,4,5,[6,7],8],9,10,[11,[12,13]]];const flatten = (arr) => {
while (arr.some(item => Array.isArray(item))){
arr = [].concat.apply([], arr);
}
return arr;
}console.log(flatten(arr));

关于浏览器、HTTP

盒模型的差异？

css盒模型本质是一个盒子，它由边距、边框、填充和实际内容组成。盒模型能够让我们在其他元素和周边元素边框之间的空间放置元素。

标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）。标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算。

什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

跨域解决方法：

设置document.domain解决无法读取非同源网页的 Cookie问题
跨文档通信 API：window.postMessage()
JSONP
CORS

登录鉴权怎么处理？

HTTP Auth Authentication
Cookie + Session
JWT
OAuth

后端返回的错误码及含义？

常见状态代码、状态描述、说明：

200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg:输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

三次握手的过程？

在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认；
SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。

完成三次握手,客户端与服务器开始传送数据

前端性能优化方案有哪些？

关于VUE

双向绑定的原理？

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过
object.defineproperty劫持各个属性的setter和gettr，在数据
变动时发布消息给订阅者，触发相应的的监听回调。

vue的生命周期有哪些？

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

vue生命周期

说说兄弟组件的生命周期

父组件在执行到beforeMount就开始初始化兄弟组件A，兄弟组件A同样执行到beforeMount就初始化兄弟组件B,当兄弟组件B执行beforeMount完的时候，兄弟组件A才开始挂载。在父兄子组件挂载前，各组件的实例已经初始化完成。

computed和watch的区别？

计算属性computed :

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数。immediate：组件加载立即触发回调函数执行；deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是watch和computed最大的区别。

diff算法的作用？

Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。

首屏加载空白的解决方案？

单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏。

解决办法：

优化 webpack 减少模块打包体积，code-split 按需加载
服务端渲染，在服务端事先拼装好首页所需的 html
首页加 loading 或骨架屏（仅仅是优化体验）
服务端开启gzip压缩
打包文件分包，提取公共文件包

谈谈对keep-alive的理解

在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。

也就是说，kee-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存。

vue性能优化方案？

均衡页面加载文件的大小和数量

项目中小图片图片转base64，通过工具如webpack进行图片压缩，文件进行压缩混淆等
vue-router 懒加载，异步路由
第三方依赖按需加载，比如使用element-ui框架，但是里面的组件只用到了其中一部分，可以单独建一个引入element组件的文件，在里面引入我们项目中需要的组件，然后vue.use它
通过webpack进行处理，有一个externals属性，可以在里面设置不需要打包的文件，比如可以设置将vue、vue-router、element-ui等等设置进去，打包的时候就不会打包他们，然后将vue、vue-router、element-ui等资源在html中引入
可以借助开启gzip压缩文件，减小文件大小；
生产环境build时不生成map文件

减少等待通过xhr获取数据的时间

在redis中添加缓存
在并发允许且数据量较多的情况下，分页可以交给后端做，利用数据库进行排序后取出需要的分页内容，这样虽然增加了xhr请求，但是单次请求耗费时间会大大降低；后端分页每次取数据不一定是仅取当前分页的数据，可以一次性取当前页以及当前页的前后各两页的数据，这样用户进行前后页的切换时，不需要重新继续发起xhr请求。
一些内容固定的数据（但又需要进行管理），可以将这些数据的获取合并为一个请求，每次刷新只需要取一次
提前发起xhr请求：可以在dom渲染完成之前就发起xhr请求，而不是等待dom渲染完成之后才进行。created时，或者beforeRouteEnter时就调用。

通过交互，在视觉效果上提升

可以通过一些加载loading动画，以及资源加载完成前，可以通过占位符占位的方式，避免渲染时出现空白页，视觉上提升加载速度
优先加载当前用户可视区域的内容，其他内容待用户切换tab或者滚动鼠标或者可视区域加载完成后再继续加载
图片预渲染，可以在当前页上根据页面上的跳转链接（或者tab页可能的切换），预渲染一些图片

善用vue的一些属性

v-if与v-show根据具体业务场景适当选取
善用kee-alive

将项目根据业务和模块，改造为多页面，而不是紧靠单页面支撑

代码优化

一些前端能做的事情，可以在前端本地做，比如当分页是前端分页的时候，伴随的一些排序、筛选等，也可以由前端实现，节省xhr请求，减少时间损耗
通用方法封装为模块，减少代码冗余
写一些性能高的代码

vue可以兼容的浏览器版本

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。使用Vuex和axios时需要浏览器支持：Promise，而IE并不支持Promise。

vue和jquery的对比

jQuery是使用选择器（ $）选取 D O M 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 H T M L 的区别只在于可以更方便的选取和操作 D O M 对象，而数据和界面是在一起的。比如需要获取 l a b e l 标签的内容： ‘$ (“lable”).val();`,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。

vue适用的场景：复杂数据操作的后台页面，表单填写页面

jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求。

mvvm和mvc的区别

MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

有封装过组件吗？

～可以讲出自己封装过的组件，或者是团队协作时其他大佬封装的组件，前提是只要你能说清楚。

其他

git和svn对比

SVN优缺点

优点：

管理方便，逻辑明确，符合一般人思维习惯。
易于管理，集中式服务器更能保证安全性。
代码一致性非常高。
适合开发人数不多的项目开发。

缺点：

服务器压力太大，数据库容量暴增。
如果不能连接到服务器上，基本上不可以工作，看上面第二步，如果服务器不能连接上，就不能提交，还原，对比等等。
不适合开源开发（开发人数非常非常多，但是Google app engine就是用svn的）。但是一般集中式管理的有非常明确的权限管理机制（例如分支访问限制），可以实现分层管理，从而很好的解决开发人数众多的问题。

Git优缺点

优点：

适合分布式开发，强调个体。
公共服务器压力和数据量都不会太大。
速度快、灵活。
任意两个开发者之间可以很容易的解决冲突。
离线工作。

缺点：

学习周期相对而言比较长。
不符合常规思维。
代码保密性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。

最后

HTML

浏览器页面有哪三层构成，分别是什么，作用是什么?
HTML5的优点与缺点？
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
HTML5有哪些新特性、移除了哪些元素？
你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
说说你对HTML5认识?（是什么,为什么）
对WEB标准以及W3C的理解与认识?
HTML全局属性(global attribute)有哪些?
说说超链接target属性的取值和作用？
iframe有哪些缺点？
Label的作用是什么，是怎么用的？
如何实现浏览器内多个标签页之间的通信?
谈谈你对canvas的理解？

CSS

解释一下CSS的盒子模型？
请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
请你说说CSS有什么特殊性?（优先级、计算特殊值）
常见浏览器兼容性问题与解决方案？
列出display的值并说明他们的作用？
如何居中div, 如何居中一个浮动元素?
请列举几种清除浮动的方法(至少两种)?
block，inline和inlinke-block细节对比？
什么叫优雅降级和渐进增强？
说说浮动元素会引起的问题和你的解决办法
你有哪些性能优化的方法？
为什么要初始化CSS样式？
CSS样式表根据所在网页的位置，可分为哪几种样式表？
请你说说em与rem的区别？

JavaScript

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
js拖拽功能的实现
异步加载js的方法
js的防抖与节流
说一下闭包
说说你对作用域链的理解
JavaScript原型，原型链 ? 有什么特点？
请解释什么是事件委托/事件代理
Javascript如何实现继承？
函数执行改变this
babel编译原理
函数柯里化
说一下类的创建和继承
说说前端中的事件流
如何让事件先冒泡后捕获
说一下图片的懒加载和预加载
js的new操作符做了哪些事情
改变函数内部this指针的指向函数（bind，apply，call的区别）
Ajax解决浏览器缓存问题

如果你需要这份完整版的面试笔记，可以点击这里直达领取方式。

Vue

Vue中 key 值的作用
Vue 组件中 data 为什么必须是函数？
vuex的State特性是？
介绍一下Vue的响应式系统
computed与watch的区别
介绍一下Vue的生命周期
为什么组件的data必须是一个函数
组件之间是怎么通信的
Vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
Vue如何实现按需加载配合webpack设置
简单描述每个周期具体适合哪些场景
scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？
聊聊你对Vue.js的template编译的理解？
Vue 路由跳转的几种方式
Vue如何实现按需加载配合webpack设置?
Vue的路由实现：hash模式和history模式
Vue与Angular以及React的区别？
Vue路由的钩子函数
什么是Vue的计算属性？

React

React单项数据流
react生命周期函数和react组件的生命周期
react和Vue的原理，区别，亮点，作用
reactJs的组件交流
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
项目里用到了react，为什么要选择react，react有哪些好处
怎么获取真正的dom
选择react的原因
react的生命周期函数
setState之后的流程
react高阶组件知道吗？
React的jsx，函数式编程
react的组件是通过什么去判断是否刷新的
如何配置React-Router
路由的动态加载模块
Redux中间件是什么东西，接受几个参数
redux请求中间件如何处理并发

浏览器

跨标签页通讯
浏览器架构
浏览器下事件循环(Event Loop)
从输入 url 到展示的过程
重绘与回流
存储
Web Worker
V8垃圾回收机制
内存泄露
reflow(回流)和repaint(重绘)优化
如何减少重绘和回流?
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
localStorage 与 sessionStorage 与cookie的区别总结
http多路复用
cookie可设置哪些属性？
正向代理和反向代理

服务端与网络

HTTPS和HTTP的区别
HTTP版本
从输入URL到页面呈现发生了什么？
HTTP缓存
缓存位置
强缓存
协商缓存
缓存的资源在那里
用户行为对浏览器缓存的影响
缓存的优点
不同刷新的请求执行过程
为什么会有跨域问题
如何解决跨域
访问控制场景（简单请求与非简单请求）
withCredentials 属性
服务器如何设置CORS
URL类中的常用方法

算法与数据结构

二叉树层序遍历
B树的特性，B树和B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
说一下冒泡快排的原理
Heap排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前10个数

最后

跳槽是升职涨薪最直接有效的方式，备战2021金九银十，各位做好面试造火箭，工作拧螺丝的准备了吗？

掌握了这些知识点，面试时在激烈竞争中又可以夺目不少。机会都是留给有准备的人，只有充足的准备，才可能让自己可以在候选人中脱颖而出。

如果你需要这份完整版的面试笔记，可以点击这里直达领取方式！

2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）相关推荐

2021前端面试题系列：fetch与axios、浏览器内多个标签页面通信及安全问题
大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列:fetch与axios.浏览器内标签页之间的通讯方法.XSS 和CSRF以及如何防范,此方面内容在我们的工作中常用到, 也是 ...
2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】）
对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
2018最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)--转载
版权声明:本文为转载文章,感谢博主小胖梅的博客,如有侵权,请联系我删除,谢谢转载链接: https://blog.csdn.net/xm1037782843/article/details/8070 ...
2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
近期总结一一些面试题都是企业的面试题笔记题感觉薪资10k-15k的常见面试题个人录制的最新Vue项目学习视频:B站小胖梅-的个人空间_哔哩哔哩_Bilibili 红色为常见面试题 ====== ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
超全前端面试题及答案
HTML+CSS 1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用 ...