web前端面试题整理

HTML5+CSS3

1、写出meta标签里面有哪些属性及作用

属性：
http-equiv 模拟http标头字段
name 主要用于描述网页，比如网页的关键词，叙述等
content content中的内容是对name填入类型的具体描述，便于搜索引擎查找
Charset 声明字符编码

Name类型 keywords description viewport robots 

2、如何实现一个容器垂直水平居中（至少三种）

方法一：position加margin (ie6不兼容)
方法二：display : table-cell （ie7不兼容）
方法三：position加transform（ie9一下不支持transform，手机端表现比较好）
方法四：flex ；align-items ：center；justify-content ：center（移动端首选）
方法五：display : flex ; margin : auto（移动端首选）
方法六：纯position（适用所有浏览器）

Javascript

1、你对闭包的理解？编写代码实现一个截流或者防抖函数

闭包：就是可以访问其他函数内部变量的函数 在js中只有函数内部的子函数才能访问函数内部的局部变量 所以闭包就是嵌套在一个函数内的另一个函数 是连接函数内部与外部的桥梁 可以突破作用域链。
函数节流
定义：就是一定时间内，只执行一次任务。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

function throttle(method,duration){
        var  begin=new Date();
        return function(){
            var context=this, args=arguments, current=new Date();
            if(current-begin>=duration){
                 method.apply(context,args);
                 begin=current;
            }
        }
}

防抖函数
定义：就是一定时间内，只会执行最后一次任务。

function debounce(method,delay){
      var timer=null;
       return function(){
            var context=this, args=arguments;
            clearTimeout(timer);
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
}

2、什么操作会引起重绘、回流

其实任何对render tree中元素的操作都会引起回流或者重绘，比如：
1. 添加、删除元素(回流+重绘)
2. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3. 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
4. 对style的操作(对不同的属性操作，影响不一样)
5. 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

3、原型与原型链

原型链：函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针__proto__，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用__proto__一直指向Object的原型对象上，而Object的原型对象用Object.prototype.proto = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法

原型：原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象，因此有别于实例方法或属性，原型对象仅有一份

4、同步和异步的理解？

同步交互: 指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；
异步交互: 指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。
同步一般在共享某一资源的时候用，如果每个人都有修改权限，同时修改一个文件，有可能使一个人读取另一个人已经删除的内容，就会出错， 同步就会按顺序来修改，同步机制能够保证资源的安全。
异步与非阻塞类似，当应用程序在对象上调用了一个需要花费很长时间来执行的方法，并且不希望让程序等待方法的返回时，就应该使用异步编程，异步能够提高程序的效率。
同步和异步最大的区别就在于。一个需要等待，一个不需要等待。
哪些情况建议使用同步交互呢？比如银行的转账系统，对数据库的保存操作等等，都会使用同步交互操作，其余情况都优先使用异步交互。

5、var 和 let 的区别？

相同点: 作用都是定义变量关键字

区别点：
let作用域只限制于当前代码块
var的作用域则是函数体function(){}

使用let声明变量的作用域不会提升
而var会自动提升

let在相同的作用域下不能有相同的变量，否则报错
而var中则可以出现相同变量名，且不会报错 for循环提现父子作用域。

6、let和const

相同
都是ES6新特性
作用定义变量关键字
作用域一样
都不能重复声明相同的变量
区别点：

let是声明普通变量
const是声明常量

let初始化可以不赋值。
const初始化必须赋值

let声明的变量值可以被修改
const声明的常量不能修改值。否则报错(除对象。或者引用类以外）

7、js中的数据类型分为哪几类

基本数据类型：number string undefined null boolean 
引用数据类型：Object

8、map（）和 for each（）的区别

首先map方法：
map对一个数组对象进行操作时，一般是生成一个新的数组，可以在map中限制生成新数组的条件，有返回值 可以return出来

forEach方法：
forEach方法一般是对原有的数组进行操作，没有返回值 不能使用return

9、promise的理解？作用？解决什么？

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。
这时候我们的promise就应运而生、粉墨登场了

Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch方法。

promise是用来解决两个问题的：

回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
promise可以支持多个并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，本身不能说promise是异步的

Vue

1、vue的生命周期分为哪几个阶段？每个阶段的状态如何？

阶段：创建前后，挂载前后，更新前后，销毁前后
状态：
Beforecreate（创建前）：主要做初始化工作，我可以创建一个loading
Created（创建后）：1、访问vm身上所有的属性和方法；
2、将data和methods身上所有的属性和方法都挂载到vm的实例身上；
3、将data身上所有的属性添加getter/setter方法，因此如果需要进行前后端数据交互的时候必须在当前生命周期中进行（响应式原理），如果数据没有提前在data中进行绑定那么这个属性身上就不会有getter/setter方法，因此数据也不会动态的进行改变。
Before mounted（挂载前）：在数据和模板还没有进行相结合，在这个生命周期函数中我们可以进行数据最后的修改，并且在当前生命周期中是访问不到真实的DOM结构。
Mounted（挂载后）：挂载和模板已经结合，在这个生命周期函数中我们可以通过this.$refs访问真实的DOM结构。
Beforeupdate（更新前）：当data中的数据发生了改变的时候就会执行，在当前生命周期函数中：1、可以访问到真实的DOM结构，2、可以对数据做最后的修改，3、数据和模板还没有更新完毕。
Updated（更新后）：数据更新后最新的DOM数据结构，在当前生命周期函数中需要特别注意，因为当前函数是一个频繁触发的函数。因此如果在当前生命周期函数中做一些事件绑定或实例化的时候需要做一个提前判断。
BeforDeatroy（销毁前）：1、在这个生命周期中，还是可以继续访问到真实的DOM结构以及data中的数据；2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作。
Destroyted（销毁后）：1、将DOM与数据之间的关联进行断开；2、在当前生命周期中是访问不到真实的DOM结构的。

2、计算属性computed与监听属性watch的区别？

1、computed在调用的时候不需要加（），watch是不需要调用的；
2、computed如果属性没有发生改变的时候会在缓存中读取，watch当属性发生改变的时候会接收到2个值，一个为新值，一个为就值；
3、computed里面的函数必须要有一个return的结果；
4、watch如果需要监听对象的情况下必须设置深度监听；
5、命名：computed里面的函数的名称可以随意命名，但是watch中函数的名称必须是data中属性的名称。

3、vue通信

父子通信：
传递：当子组件在父组件中当作标签使用的时候，通过给子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内通过props进行接收
接收方式有两种：1、数组接收，2、对象接收（一般情况下使用对象接收，它可以校验数据类型）
子父通信：
传递：当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的组定义事件，然后将数值传递过去
接收：父组件通过自定义事件的函数来接收子组件传递过来的数据
非父子通信（兄弟间通信）：
1、 在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的$on/$eimt来传递数据，传递的一方调用$emit，接收的一方调用$on
2、 Vuex

4、v-if和v-show有什么区别？

v-show:操作的是元素的display属性
v-if:操作的是元素的创建和插入
相比较而言v-show的性能要高

5、vuex 的数据传递流程

当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会 有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改 ，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

6、vue双向数据绑定的原理

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是后的属性描述符。
属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和s et就是属于存取描述符对象的属性。
然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

7、vuex有哪几种属性

有五种，分别是 State、 Getter、Mutation 、Action、 Module

• vuex的State特性 A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的 data
  B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个 数据的组件也会发生更新
  C、它通过mapState、mapGetters把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
• vuex的Getter特性 A、getters 可以对State进行计算操作，它就是Store的计算属性
  B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
  C、 如果一个状态只在一个组件内使用，是可以不用getters
• vuex的Mutation特性 Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包 含任意异步操作。

8、第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

9、使用vue的时候会一下子加载所有的东西使得初始化页面很卡，该如何解决？

vue-router解决首次加载缓慢的问题。懒加载简单来说就是按需加载。
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时， 需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载 则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
用法：在配置路由时使用：component:resolve=>require([“@components/路由的路径”]，resolve)。 就是用了懒加载后打完包直接运行那个index.html会报错，报文件引用错误其实是打包时候路径配置有点问 题，找到build下面的webpack.prod.conf.js 添加 publicPath：“./”,

10、路由传值的方式有哪几种

1、path路径属性传值。例如：path:“/home/:id/name”; 接受的时候通过 this.$route.params2、query传值。因为在url中？后面的参数不会被解析，因此我们可以通过query进行传值。接受的时候通过this.$route.query
3、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受

11、computed和watch区别

computed

• 初始化显示的属性数据发生变化的时候调用；
• 计算属性不在 data 中，它是基于data 或 props 中的数据通过计算得到的一个新值，这个新值根据已知值的变化而变化；
• 在 computed 属性对象中定义计算属性的方法，和取data对象里的数据属性一样，以属性访问的形式调用；
• 如果 computed 属性值是函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值就是属性的属性值；
• computed属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed才会重新计算；
• 在computed中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

watch

• 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体；
• 可以监听的数据来源：data，props，computed内的数据；
• watch支持异步；
• 不支持缓存，监听的数据改变，直接会触发相应的操作；
• 监听函数有两个参数，第一个是最新的值，第二个参数是输入之前的值，顺序是新值，旧值。

（未完，待更新。。。）