前端常见面试题总结

HTML相关问题

1.H5新特性有哪些？

答：1.新增语义化标签。

2.新增媒体元素。

3.新增用于绘画的Canvas元素。

4.新增本地存储方式。

5.新增webworker、websocket

6.新增表单控件。

2.如何理解HTML语义化？

答：1.代码可读性，更加能让人读懂。

2.更加能让搜索引擎读懂（SEO)。

3.如何理解块级元素、内联元素？

答：块级元素，独占一行。内联元素，不是独占一行。

CSS相关问题

1.盒模型宽度的计算？

答： offsetWidth = （内容宽度 + 内边距 + 边框） ，没有外边距。如果设置box-sizeing: border-box，宽度等于border-box。

2.margin重叠问题？

答：margin-top和margin-bottom会发生重叠问题，空p标签也会发生重叠。

3.margin负值问题？

答：margin-top和margin-left 负值，元素向上、向左移动。

margin-bottom负值，元素自身不改变，下面元素向上移动。

margin-right负值，元素自身不改变，右边元素向左移动。

4.BFC的理解与应用？

答：一块独立渲染的区域，内部元素的渲染不会影响外部边界的元素。

在清除浮动会用到。

5.圣杯布局和双飞翼布局？

答：1.都是使用float布局。

2.两侧都是使用margin的的负值，使得和中间的内容横向重叠。

3.防止两侧被覆盖，一个使用padding，一个使用margin。

6.手写清除浮动？

.clearfix:after { content:"";display:table;clear:both; }

7.flex布局-画三个骰子。

答：

.container {
  /* 设置flex */
  display: flex; 
  /* 设置两端对齐 */
  justify-content: space-between;
}

.item {
  /* 骰子样式 */
}

.item:nth-child(2) {
   /* 第二项居中对齐 */
  align-self: center;
}

.item:nth-child(3) {
  /* 第三项末端对齐 */
  align-self: flex-end;
}

8.absolute 和 relative 定位？

答：relative 定位相对自身定位。

absolute相对最近一层定位元素定位。

9.垂直居中对齐的实现方式？

答：1.inlint 元素：inlint-height的值等于height值。

absolute元素：top：50% + margin-top 50%

absolute元素：transform(-50%,-50%)

absolute元素：top、left、right、bottom 都等于0，margin:auto;

10.水平居中对齐实现方式？

答：inlint 元素：text-align:center;

block元素：margin: auto;

absolute元素：left: 50%,margin-left负值。

11.line-height 如何继承？

答：1.写具体数值，如30px,则直接继承该数值。

2.写比例，如1，1.5，则直接继承该比例。

3.写百分比，如200%，则先算出百分比的值再继承。

12.CSS常用的单位。

答：px，绝对长度值，最常用。

em，相对长度值，相对于父元素，不常用。

rem,相对长度值，相对于根元素，移动端响应式用到比较多。

vw和vh,相对长度值，相对于视口宽高比例，移动端响应式用到比较多。

浏览器相关问题

1.在浏览器输入URL之后发生了什么？

答：1.输入网址

2.缓存解析

3.域名解析，解析到对应的ip地址

4.浏览器向服务器发送tcp连接，与浏览器建立tcp三次握手。

5.握手成功之后，浏览器向服务端发送http请求，请求数据包。

6.服务器处理接收到的请求，将数据返回给浏览器。

7.浏览器接收到http响应。

8.读取页面内容，浏览器渲染，解析html代码。

9.生成dom树，解析css样式，js交互。

10.客户端与服务端交互。

11.ajax请求。

2.什么是回流与重绘？

答：1.回流，当浏览器发现页面某个部分发生了点变化，影响到布局，需要倒过重新渲染，这个过程叫做回流。

2.重绘，当改变DOM元素的背景颜色边框颜色，不会影响周围或者内部布局的属性时，有一部分要重画，这一个过程叫做重绘。

3.什么是浏览器缓存？

答：1.浏览器缓存即http缓存，将数据缓存保存在浏览器。

2.服务端通过设置http请求头来设置缓存策略，将资源缓存到本地浏览器。

HTTP协议

1.你http讲到了TCP协议，你能讲一下TCP三次握手吗？

JS相关问题

1.JS数据类型有那些？

答：分两种类型：

基础类型：string、bumber、boolean、null、undefind、symbol、bigInt

引用类型：object、array、function、Date

2.什么是防抖？什么是节流？

答：相同点都需要设置一个回调函数，和周期时间。

区别在于：节流：频繁触发函数只会定时执行一次，类似于技能冷却。

防抖：在于频繁触发函数都会重新设置定时器，定时器结束完执行一次。

3.this的概念？如何改变this。

答： this就是一个函数的内部对象。我们通常使用bind、apply、call 方法来改变this指向。

4.你知道事件循环中有两种任务吗？分别讲讲

答：宏任务和微任务。

宏任务：整体代码块、setInterval、setTimeout、异步请求。

微任务：new Promise().then、MutationOvserver。

5.为什么有事件循环？

答：因为JavaScript是单线程的，同一时间只能做一件事。而JavaScript中又存在异步http请求，定时器，事件触发，我们如何知道异步请求什么时候执行完？这时候我们就需要浏览器的帮助了，浏览器是多线程的，可以把这些异步或者事件触发，定时器回调放到一个任务队列中，等待JavaScript的调用，JavaScript循环的从任务队列中调用，这个过程就叫做事件循环。

6.为什么要有微任务？只有宏任务可以吗？

答：宏任务秉行着先进先出的概念，但是如果有一些优先级更高的任务时候，我们就需要用到微任务。

7.var 、let 、const有什么区别？

答：1.声明和赋值：var 和let可以允许先声明后赋值；const不允许，它声明变量时必须同时初始化变量。

2.修改变量：var和let允许修改变量的值和类型；const不允许，如果const是引用类型。这是时候不能更改变量的引用，但是可以修改对象内部的属性。

3.变量声明提升：var会声明提升，相当于在函数顶部声明了变量，const和let不会。

4.重复声明：var可以重复声明，const和let不会。

5.声明作用域：var是函数作用域后者全局作用域，const和let是块级作用域。

6.全局声明：var如果在全局作用域中声明的变量会成为window对象的属性；let和const不会。

8.什么函数作用域、块级作用域、全局作用域，词法作用域？

答：作用域是指，可以访问变量，函数，对象的集合。

函数作用域：只能在函数体访问，函数体外不可访问。

块级作用域：是指一个代码段,之外是不可见的。（就是一对大括号{...}包裹的一段代码）

全局作用域：是指script标签之中单独的js代码都是全局作用域。

词法作用域：是指在定义他们的作用域之中运行，而不是调用方法的作用域运行。

Vue.js 基础问题

1.v-if 和v-show区别？

答：v-if 控制DOM节点加载和销毁。
v-show 控制DOM的样式显示还是隐藏。

2.什么情况下使用v-if 和v-show?

答：一次性渲染DOM或者不频繁切换显示隐藏使用v-if，
频繁切换显示隐藏DOM使用v-show，性能更加好。

3.如何遍历对象?

答：Vue中，数组和对象都可以用v-for进行遍历。

4.Key的重要性？

答：key 的作用是为了在 diff 算法执行时更快的找到对应的DOM节点，优化diff算法渲染次数，提升渲染性能。如果使用index没有意义。

5.v-for 和 v-if能不能一起使用？

答：不建议一起使用，v-for 的运算优先级高于v-if，渲染出来每一条数据都进行v-if 进行判断，影响性能，建议在v-for 的父级进行判断。

6.双向绑定v-model实现原理？

答：input元素的value 值绑定this.name 变量。然后input事件会赋值this.name = $event.target.value ，data更新之后触发渲染。

7.对MVVM的理解。

答：分别对应三者，Model 、View 、ViewModel。

Model：代表数据模型，数据和业务逻辑都在Model层定义。

View：代表UI视图，负责数据的展示。

ViewModel：就是界面（View）对应的数据，因为数据库结构往往不能直接跟界面控件一一对应的，所以需要定义一个数据对象专门对应View上控件，而ViewModel的作用就是吧model对象封装成可以显示和接收输入的界面上的数据。

8.computed有什么特点？

答：缓存，data不变不会重新计算。提高性能。

9.computed 和watch有什么区别？

答： computed 是一个计算属性，根据依赖的数据计算新的结果，并且设置有缓存。

watch 更像一个data里面数据的监听回调，当依赖的data的属性值变动时触发回调。

Vue.js 组件问题

1.props和$emit 作用？

答： 父子组件通讯方式之一。props用于父组件传递参数给子组件。$emit用于子组件内调用父组件方法。

2.什么是自定义事件？

答：Vue实例对象 $on自定义事件，引入同样Vue实例对象 $emit 触发自定义事件，只要不直是父子组件，都可以直接互相调用。

3.Vue生命周期（单个组件）

答：三个阶段。

挂载阶段：beforeCreate => created => beforeMount => mounted

更新阶段：beforeUpdate => updated

销毁阶段：beforeDestroy => destroyed

4.Vue生命周期（ 父子组件）

答：也是三个阶段，

挂载阶段：父beforeCreate => 父created =>子beforeCreate =>子created => 子beforeMount => 子mounted => 父beforeMount => 父mounted

更新阶段：父beforeUpdate => 子beforeUpdate => 子updated => 父updated

销毁阶段：父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroyed

Vue高级特性

1.$nextTick有什么作用？

答：Vue是异步渲染的，在data改变之后不会立即渲染DOM，而$nextTick的作用就是在DOM渲染完成之后触发，以便拿到最新的DOM节点。

2.Vue如何异步加载组件?

答：使用import()函数，异步加载，按需加载大组件。

3.什么时候使用keep-alive？

答：是缓存组件用的，需要频繁切换，不要重复渲染的组件。

4.mixin的作用是什么？

答： 抽离多个组件中共同的业务逻辑，方便复用。

5.mixin 有什么问题？

答： 1.变量名来源不明确，不方便阅读。

2.多个mixin可能造成命名冲突。

3.mixin 和组件可能出现多对多的关系，复杂度较高。

6.React 和 Vue 区别？

答：相同点：都是数据驱动视图。

不同点：当数据改变时，React是以组为根目录，默认全部渲染。Vue是自动找到引用组件重新渲染。

7.你是如何优化Vue项目的？

答：编码阶段：1.尽量减少data中的数据，data中的数据都会增加getter和setter，会对应的数据监听。

2.图片懒加载。

3.key保证唯一。

4.长列表滚动到可视区域动态加载。

5.防抖、节流。

6.异步组件，路由懒加载。

7.第三方模块按需引入。

打包阶段：1.第三方模块，cdn引入。

2.压缩代码。

3.配置url-loader，图片转base64，减少http请求。

4.多线程打包配置happypack。

5.图片压缩。

6.代码分割。

8.Vue.use 有什么作用？

答：Vue.use 是用来使用插件的，插件本质就是一个install 方法，install方法内部实现的了什么逻辑就由插件自身的业务实现了。

Webpack相关问题

1.plugin和loader区别？

答：loader是使webpack拥有解析非js文件的一个能力

plugin 可以扩展webpack的功能，使得webpack更加灵活，可以在构建的过程中通过Webpack的API改变输出内容。

Axios 相关问题

1.Axios 的原理是什么？

答： 1.首先axios可以在浏览器环境和node环境使用的。

2.浏览器是用通过XMLHttpRequests实现axios，node是通过内置http模块实现axios。

3.都是通过promise 对象对结果进行处理。

2.Axios 取消请求原理是什么？

答：Axios是通过CancelToken方法取消请求的,原生是通过XMLHttpRequest 对象的abort方法进行取消的。