真实前端面试题自我介绍姓名，毕业院校，毕业专业，技术年限，主要的技术栈，使用过的技术栈(jq，vue,asp,jsp)

自我介绍

姓名，毕业院校，毕业专业，技术年限，主要的技术栈，使用过的技术栈(jq，vue,asp,jsp)都说说，还有项目的功能亮点

HTML

1.HTML有哪些新特性？

WebStorage（本地化持久存储）
Canvas绘图
视频和音频
地理定位
拖放API
WebSocket

CSS

1. 说一下rem和em的区别

rem是根据文档根节点html的字体大小设置
em是根据父节点的字体大小设置的

吹rem的时候可以往自适应方向吹，比如通过rem配合fixable实现了多端设备自适应。

如果有更好的建议，评论吧

2. 有哪些选择器？

类选择器
id选择器
标签选择器
后代选择器
子选择器

3. 水平垂直居中有几种方式，分别是什么？

绝对定位+margin
绝对定位+transform
flex
文字居中+行高

4. 什么是盒模型？

盒模型由这四个部分组成：

content（内容区）
padding（填充区）
border（边框区）
margin（外边界区）

5. 列举几种清除浮动

clear
伪元素
创建BFC（BFC是块级格式化上下文，作用：其内部的元素布局状态不会影响到外部元素的布局状态）
flex
父级overflow：hidden

JS

构造函数和class类有什么区别和联系

1. 什么是闭包

闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。

匿名函数就是没有名字的函数比如：functio（）{} ; ()=>{}

2. 请你说说js有哪些数据类型？

基本数据类型

String

Number

Undefined

Symbol

Null

布尔（booloan）

引用数据类型

Function

Object

数组（Array）

2. 数组都有哪些方法？

改变原数组

push添加数据

pop末尾删除数据

unshift头部添加数据

shift头部删数据

reverse翻转数组

sort排序

splice截取

不改变原数组

concat合并

join转字符串

slice截取部分

indexof从左检测是否有该数值

lastindexof从右检测是否有该数值

es6新增的

forEach循环for

map隐射

filter过滤

every是否满足所有条件

some是否满足条件（只要有一个）

find获取满足条件的第一个数据

reduce叠加

3. 数组slice和splice的区别？

splice它会改变数组，返回一个新的数组，
slice不会修改数组，而是返回一个子数组。

4. 下面的代码的结果是？

var a = 2
var fun = (function(){
    var a = 3;
    return function(){
        a++;
        alert(a)
    }
})()
fun(); // 4
fun(); // 5

5. for of 和 for in区别？

for...in 循环只遍历可枚举属性（包括它的原型链上的可枚举属性）。像 Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性。
- 例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。
for...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

7. 一个数组有重复元素，怎么用简单的方式去重？

Array.from(new Set([1,1,1,1,1,1,4]))

8. cookie，localstorage，sessionstorage区别？

区分

localStorage

sessionStorage

相同点

保存在浏览器端，且是同源的

存储大小

4kb

有效期

永久，除非手动删除

关闭页面或者浏览器

可设置时长，超时失效。

与服务器端的通信

不可能

参与，每次都会携带http请求头

9. 原型prototype和_proto_有什么区别？

Object.prototype是所有对象的爹

10. 原型和原型链

11. event loop

12. 改变this指向方法

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

Ajax-网络-http

1. get和post区别？

区分

get

post

参数位置

url

请求体（request body）

参数长度

有限制

无限制

参数编码

ASCII编制

无限制

后退/刷新

不重复提交，回退无害

重复提交，回退有害

安全性

参数暴露，不安全

安全

缓存

YES

收藏书签

同上

历史

参数保留在浏览器历史中

不保留

相同点

都是http请求，tcp连接

重大区别

get产生一个TCP数据包
post产生两个TCP数据包

2. 出现错误时会返回错误状态码，分别是什么？

简单几个

401 无法解析此请求。
403 禁止访问：访问被拒绝。
404 找不到文件或目录
500 服务器内部错误

3. 介绍一下ajax

ajax是什么？

ajax就是异步的javascr和xml的结合

作用

通过AjAx与服务器进行数据交换，AjAx可以使用网页实现布局更新

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

4. 说一下ajax执行流程

5. 向服务器请求有哪些方式？请求有几种格式？

两种提交方式：get、post

三种格式

表单提交 get，post

超链接 get

地址栏跳转 get

6. 前端向后端发送请求有几种方式？

link src=""
script src=""
img src=""
ajax请求
表单提交
a href=""
iframe src=""

7. websocket是怎么与后端交互的？

8. 项目升级后，前端js脚本在不要求用户强刷浏览器的情况怎么更新?

思路：监听加载js的错误信息》处理错误信息加入刷新页面功能》获取最新的runtime.[hash].js文件》用户正常访问

blog.csdn.net/guzhao593/a…

9 如何实现拖拽

Es6

1. 介绍一下promise

什么是promise

Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。

promise有三个状态：

pending[待定]未完成
fulfilled[实现]完成
rejected[被否决]拒绝

有两种过度：pending -> fulfilled 或者是 pending -> rejected 总的来说呢，就是Promise对于错误处理机制的理解

如果错误已经捕获了，那么错误不会继续传递下去

如果错误没有被捕获，那么错误会隐式传递下去，直到有错误处理函数来捕获这个错误

Promise 常用的方法有哪些？它们的作用是什么？

Promise.resolve(value) :返回一个状态已变成 resolved 的 Promise 对象。
Promise.reject :类方法，且与 resolve 唯一的不同是，返回的 promise 对象的状态为 rejected。
Promise.prototype.then: 就是将Promise中的resolve或者reject的结果拿到,实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果，then 中的函数一定要 return 一个结果或者一个新的 Promise 对象，才可以让之后的then 回调接收。
Promise.prototype.catch:实例方法，捕获异常，函数形式：fn(err){}, err 是 catch 注册之前的回调抛出的异常信息。
Promise.race :多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败
Promise.all: 类方法，多个 Promise 任务同时执行。

作用/使用场景

解决地狱回调

将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

主要用于异步计算

可以在对象之间传递和操作promise，帮助我们处理队列

1.1 then接收两个参数，为什么赋空也能执行（涉及promise源码）

1.2 then的链式调用如何实现

1.3 prmise.resolve,promise.reject,promise.all如何实现

2. var、let、const三者的区别？

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

3. apply bind call实现

4. 普通函数和箭头函数有什么区别

写法不同
this指向不同，
arguments不同，普通用arguments，箭头用 ...参数名（扩展运算符）

Vue

简单的diff算法

vue-vdom的算法主要是哪种，主要核心api是哪两个

1. Vue的双向数据绑定原理是什么？

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.definePorperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1.1 如何监听object.propertype触发相应的监听回调。

2. 自定义指令如何定义，它的生命周期是什么？

 Vue.directive('red',{
    * bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
    * inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
    * update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
    * componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
    * unbind:只调用一次，指令与元素解绑时调用。
});

3. 子组件如何主动获取父组件中的数据？

this.$parent.数组
this.$parent.方法

4. 组件通信有哪些方案？

4.1 路由传参方式有哪些？

4.2 query params区别？

5. 数组变动

这行代码是否正确，原因是什么？ vm.items[1] = 'x';

var vm = new Vue({
    data:{
        items:['a','b','c']
    }
})
vm.items[1] = 'x';

6. computed和watch的区别？

computed

支持缓存，只有依赖数据发生改变，才会重新进行计算

不支持异步，当computed内有异步操作时无效，无法监听数据的变化

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法

watch

不支持缓存，数据变，直接会触发相应的操作；

watch支持异步；

监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

当一个属性发生变化时，需要执行对应的操作；一对多；

7. 页面中定义一个定时器，在哪个阶段清除？

beforeDestroy

为什么销毁它：在页面 a 中写了一个定时器，比如每隔一秒钟打印一次 1，当我点击按钮进入页面 b 的时候，会发现定时器依然在执行，这是非常消耗性能的。

8. 在哪个生命周期发ajax请求？为什么?

9. 介绍一下vuex

vuex是状态管理模式，通过创建集中式数据存储，给程序中所有组件访问

使用场景：当我们开发中大型项目或者数据量较大的时候，就会使用vuex

核心

state：数据共享/存储
getter：对共享数据进行过滤
mutation：注册改变数据状态
action：解决异步改变共享数据
module(模块)：每个模块都有自己的state，getter，mutation，action，解决项目臃肿

9.1 vuex 如何发异步请求

性能或其他

1. 前端性能优化有哪些？

v-show 和 v-if 的区分使用
图片压缩
图片/路由懒加载
代码压缩
组件按需引入
开启gzip压缩
减少或合并http请求
CDN资源引入

2. 跨域方案有哪些？

同协议+同域名+同端口=同源策略，不满足其中之一都是跨域

CORS：由后端解决，后端跨域自由配置某个域名地址可访问

jsonp:通过发现js实现跨域，并不是xhr请求

服务器代理:vue通过proxy代理

真实前端面试题