web前端面试题 -- 2019最新,最全

最近在找工作，面试了好多家公司，结果都不怎么理想。要么公司环境氛围不行，要么工资达不到理想的薪资。大部分公司对程序员的面试流程几乎都一样，来了先填一份登记表，写一套面试题，然后技术面，人事面。至于有的大牛说，四面web前端，拿到10K+的工资，反正我这个渣渣程序员是没有碰到。

现在来整理一下这几天我所碰到的面试题。

html、css相关

如何垂直居中一个浮动元素

• 父盒子有宽高

父元素相对定位，子元素绝对定位，top：50%；left：50%。margin负的左右二分之一的height，width

.content{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    float: left;
    height: 100px;
    background-color: #ff6700;
    margin-top: -50px;
    margin-left: -50px;
}

• 父盒子没有高宽

父盒子相对定位，子盒子决定定位，上下左右都为0，margin：auto；

.content{
    width: 200px;
    height: 200px;
    background-color: #ff6700;
    float: left;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

说一下css的三大特性以及选择器的优先级

css三大特性：继承、优先级、层叠
选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承

简单说一下盒模型

盒模型: 内容 + padding + border + margin

有用过less这种预编译吗?用过它的那些方法

less是对css进行一个预编译,它重新定义了css样式的书写,样式可以嵌套,同时还定义了变量和函数

<!--定义变量-->
@color: #ccc;
.content{
  background-color:@color;
}
<!--定义函数-->
.textCenter(@marginT: 10px){
  text-align:center;
  margin-top:@marginT;
}

Css3颜色渐变有那两种

线性渐变所用的属性是linear-gradien
径向渐变用到的属性是radial-gradient

说说H5和C3新增了那些特性

H5主要新增了一些语义化标签，比如header,nav,main等等，还有音频视频，本地存储等技术。
Css3新增了一些属性选择器，伪类选择器，过度transition，2D3D旋转transform，动画animation等

实现页面间通信有那些方法,他们有什么区别

可以使用H5新增的本地存储技术localstorage, 将数据存储到本地硬盘
使用cookie存储,sessitionStorage
区别:cookie兼容性较好,但是存储体积小只有时4kb,生命周期短,会话结束数据就消失,而且不安全容易被劫持。而其他两者不一样,存储体积大,存储时间长,除非手动删除否则不会消失。

说一下rem和em的区别

在css中的单位主要有px,em,rem
px单位是固定的像素,一但设置就无法适应页面大小而改变
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
em相对于父元素，rem相对于根元素(参照的是html)

说一下flex弹性布局的属性

justify-content： //子元素水平排列的方式
                center  //居中
                space-between  //两端对齐
                space-around   // 子元素拉手分布
                flex-start     // 居左
                flex-end      //居右

align-items  ：  // 子元素的垂直居中的排列方式
                enter    // 居中
                flex-end   //底部
                flex-start   //开始

align-content :  //多行的时候，子元素的垂直排列方式
                 center    //居中
                 flex-end   //底部
                 flex-start   //开始
                 flx-direction：  // 排列方式row 横向排列
                 row-reverse    //横向反向排列

flex-wrap ： //子元素是否在一行显示
                no-wrap   //不换行
                wrap    //换行

控制元素显示隐藏有那些方式,有什么区别

display:none和visibility:hidden
display:none控制隐藏的元素不占位置
visibility:hidden隐藏元素,但保留元素空间

js相关

怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值

      getElementById()    //通过元素Id，唯一性

说说js中操作数组字符串的方法

这个我在之前的文章也有总结过

谈谈你对闭包的理解

之所以有闭包是因为js存在一个变量作用域，变量的作用域分为局部全局作变量和局部变量，在js函数中，可以访问到外部定义的全局变量，但在函数外面却无法访问函数内部定义的局部变量。所以闭包就是用来解决函数外部无法访问函数内部的局部变量。
闭包是在一个函数内部，return一个子函数，在子函数中可以访问到父函数定义的局部变量。它可以读取函数内部的变量，让这些变量的值始终保持在内存中，避免变量全局污染。所以导致它不能被浏览器垃圾回收机制回收，容易造成页面性能问题，内存泄漏

垃圾回收机制

JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。

当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。

说一下原型和原型链

• 原型

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。这个对象的所有属性和方法，都会被构造函数的所拥有。
Prototype作为对象的内部属性，是不能被直接访问的，我们一般通过__proto__这个属性进行访问。
在原型对象中还有一个属性constructor，这个属性对应创建所有指向该原型的实例的构造函数

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

 

构造函数-实例-原型之间的关系.png

 

 

• 原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

 

原型链.png 画的有点丑

事件机制和事件委托

事件流的三个阶段:
事件捕获
处于目标阶段
事件冒泡

事件委托:
事件委托是利用了事件的冒泡原理实现的,子元素的事件通过冒泡形式委托父元素执行

说一下JS面对对象有那些特性,怎样实现

• 对象三大特性:封装,继承,多态

• 封装:将面向过程每一步进行推进:对同种对象的属性和方法进行抽象，成为一个类(js中没有类的概念，实际上也是一个对象)，然后通过类的方法和属性来访问类

• 继承:在封装的基础上，将同类事物继续抽象，继承时，子类拥有父类的属性和方法，同时拥有自己特有的属性和方法

js的继承实现方法：
1.属性拷贝（浅拷贝）
2.属性拷贝（深拷贝）
3.原型式继承
4.原型链继承
5.借用构造函数
6.组合继承

• 多态:不同对象对同一事物做出不同的回应，通常出现在继承后对方法的重写

特点：对于同一个操作（指令），不同的对象表现出不同的反应 隐藏不同

谈谈你对同步异步的理解

• 同步:在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。

• 异步:执行完函数或方法后，不必阻塞性地等待返回值或消息

• 区别:同步会阻塞程序的执行,效率低。异步可以同时执行多个程序,效率高

一次完整的HTTP请求是怎样一个过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

Ajax原理

ajax是用来实现页面异步加载,同步刷新。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest对象的属性：
open准备发送请求的数据
send发送请求

　　onreadystatechange 每次状态改变所触发事件的事件处理程序。
　　responseText 从服务器进程返回数据的字符串形式。
　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。
　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
　　status Text 伴随状态码的字符串信息
　　readyState 对象状态值

Ajax中get请求和post有什么区别

GET和POST请求方式的差异
GET请求没没有请求体，请求的数据在xhr.open()里面拼接，xhr.send(null)
POST请求数据在xhr.send()里面，在设置请求体之前需要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

解决跨域

产生跨域是因为浏览器的同源策略：域名 协议 端口必须保持一致

• CORS

在服务器端设置响应头
header("Access-Control-Allow-Origin:*")
这种方式需要前后台的一个配后,而且相对而言不安全

• JSONP

利用script标签src天然支持跨域的特征,将请求的地址写在src,在script里面定义一个处理函数,并把函数名传递给后台,后台接收并返回这个函数的调用,将传递的参数以函数形参的方式传递给前端
这种通过src放送的是一个同步请求,而且只能发送get请求,和ajax不一样

• 方向代理

通过访问第三方服务器,让第三方服务器帮我们发送请求.

es6你知道多少

• 字符串扩展
  includes断字符串中是否包含子字符串,第一个参数表示要测试的子字符串,第二个参数表示从那个位置开始查找,不传默认从索引0开始。
  startsWith判断字符串是否以特定的字符串开始
  endsWith判断字符串是否以特定的字符串结束
  字符串填充:padStart()和padEnd()可以对字符串进行填充

• 解构赋值
  数组的结构赋值

// 解构

    let [a,b,c] = [1,2,3];

    console.log(a,b,c); // 1 2 3

    // 解构时设置默认值

    let [a = 1,b,c] = [,5,6];

    console.log(a,b,c); // 1 5 6

    // 解构时没有的数据为undefined

    let [a = 1,b,c] = [4,5,];

    console.log(a,b,c); // 4 5 undefined

对象的解构赋值

let {name,age} = {name:'zxx',age:18}

console.log(name,age); // zxx 18

// 顺序无关

let {name,age} = {age:18,name:'zxx'}

console.log(name,age); // zxx 18

// 属性别名,一旦设置了别名,原来的名字就无效了

let {name:tag,age} = {age:18,name:'zxx'}

console.log(name,age); // ReferenceError: name is not defined

console.log(tag,age); // zxx 18

// 解构赋值时设置默认值

let {name:tag='zxx',age} = {age:18}

console.log(tag,age); // zxx 18

字符串的解构赋值

let [a,b,c,d] = 'zxx';

console.log(a,b,c,d); // z x x undefined

let [a,b,c,d] = 'zxx';

console.log(a,b); z x

// 得到字符串长度

let { length } = 'zxx';

console.log(length); //

• 扩展运算符
  合并数组

let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3); // [1,2,3,4,5,6]

• 箭头函数

let f = function(v) {
    return v;
};
let f = v => v;

• Promise

Promise 是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。

// 1. 创建promise实例,在实例中执行异步操作(比如发送网络请求)
// 2. 异步操作成功时,调用reslove函数传递数据
// 3. 异步操作失败时,调用reject函数传递错误信息

const promise = new Promise(function(resolve, reject) {
    // 异步操作

    if (/* 异步操作成功 */){

        resolve(value);

    } else {

        reject(error);

    }

});

//  使用promise实例then方法接收reslove或reject返回的数据

promise.then(function(value) {

    // 此处数据即为reslove回来的数据

    // success

}, function(error) {

    // 此处数据即为reject回来的数据

    // failure

});

VUE相关

vue有那些指令

v-text v-bind v-for v-if v-on

谈谈MVVM

MVVM是一种分层次开发思想,它是CommonJS规范的实现
M代表module模型层
V代码view视图层
VM模型层和视图层之间没有任何的联系,而VM会充当一个调度者,将他们联系起来,实现双向数据绑定

组件化

从页面视图的角度出发，对页面功能的封装，实现项目可独立维护，可复用性大大提高

什么是Vue双向数据绑定?原理?

v-model指令、数据视图同步更新、使用的是ES5提供的Object.defineProperty()这个方法实现数据劫持

数据如何从模型同步到视图?当模型中数据发生变化时会触发Object.defineProperty的set方法,在这个方法内部能够劫持到数据的改变,然后就可以在该方法内部通知视图更新

视图中的数据如何同步到模型中?(v-model指令是怎么实现改变了元素中的数据同步到模型中)监听表单元素的change事件,在change事件中可以拿到用户输入的数据,然后给模型中的数据赋值

v-if和v-show的区别

v-if和v-show都是用来控制元素的显示和隐藏,当值是true，元素显示，值为false,元素隐藏

区别: v-if当切换布尔值时,会创建/删除元素；v-show当切换布尔值时,会改变元素的样式,display:block

Vue生命周期函数的理解?

生命周期就是在vue实例执行过程中会触发的一批函数,这些函数可以帮助我们处理不同时间段的业务逻辑

• 创建阶段
  • beforeCreatevue实例被创建出来,此时仅仅只是分配了内存,属性和方法都还没有挂载到vue实例上
  • created此时vue实例已经创建完毕,data中的属性和methods中的方法都已经挂载到vue实例上
• 渲染阶段
  • beforeMountvue实例中的数据被解析渲染到内存中的虚拟DOM上,真实中的DOM指令还没有被解析
  • mountedvue实例中的数据已经完全被渲染到了真实DOM中
    -更新阶段
  • beforeUpdate模型中的数据已经改变,但视图中的数据还没有同步更新
  • updated此时模型中的数据改变,视图层数据已经同步更新
• 销毁阶段
  -beforeDestroyvue中的数据和方法还能继续使用,但是指令不能再被vue解析
  • destroyedvue中的数据和方法都已经被销毁

说一下单向数据流

组件之间的传值,数据从父级组件传递给子组件，只能单向绑定。

• 父组件向子组件传值

  在父组件中定义数据,通过属性绑定的形式绑定到子组件上,在子组件中定义props接收传递过来的变量

• 子组件向父组件传值
  

  在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据第一个参数就是自定义的方法名,第二个参数就是需要传递给父组件的数据

  this.$emit('func',this.msg)
  

  在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名

  <div id='app'>
     <son @func = 'getmsg'></son>
  </div>
  

vue-router路由模式有几种,原理分别是什么?

vue-router路由库是用哪种技术实现的,总共有两种,分别叫hash模式和history模式,默认是hash模式

• hash模式:地址上带有#号;url地址可以放在任意标签中打开;可以兼容低版本的浏览器

  hash模式原理:监听hashchange事件,可以调用window.location.hash获取到锚点值,和路由规则进行匹配,匹配到之后将路由规则中定义的组件渲染到页面
  history模式:地址上没有#号,更加符合URL形式;url地址不能重复打开;

• history模式原理:利用HTML5新提供的history.pushState API 来完成 URL 跳转而无须重新加载页面

  history模式需要后台进行相关配置:要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

Vuex怎么用,它相对与localstorage有什么优点和缺点

vuex的核心是：state,getter,actions,mutations

• state用来定义存放公共数据

  this.$store.state.msg
  

• mutations定义方法

  this.$store.commit('change','我是被修改的数据')
  

• getters用于获取数据 进行一些操作 类似于Vue实例中的过滤器和计算属性

   this.$store.getters.fixmsg
  

• actionactions和mutations都是定义对数据进行操作的方法,mutations中都是同步方法,mutations中定义异步方法

  this.$store.dispatch('asyncchange','我是被异步修改的数据')
  

区别
localstorage无法实现双向数据绑定,模型层的数据改变视图中数据不会发生改变,vuex数据不能持久化,需要结合localstorage使用,比较臃肿,小型项目不建议使用

总结

以上就是我最近面试遇到的面试题,希望对各位有所帮助,后期我也会持续更新,有遇到新的问题会及时更新。如果有什么错误,还请各位大佬指出在评论留言,小子会更改。最后希望大家能顺利的找到自己满意的工作,喜欢的可以支持一下,毕竟座在床上写了一下午(别问我为什么还在床上)也蛮辛苦的。

小礼物走一走

链接：https://www.jianshu.com/p/605a6f60ca92