第一次面试题目总结

一面

css

1.css引用的方式和优先级

行内样式、内嵌样式、链接样式、导入样式

2.左固定右自适应布局的两种方式

• 1.将左侧div浮动，右侧div设置margin-left
• 2.flex ：

  .outer{display: flex;}
  .left{flex:0 0 200px;height:150px;}
  .right{flex: 1;height:100px;}
  

注意：flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;

3.父盒子内的两个子盒子如果都设置了margin会发生什么

1、水平边距永远不会重合。
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。

解决方法：
外层元素padding代替
外层元素 overflow:hidden;

内层元素绝对定位 postion:absolute:
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
内层元素透明边框 border:1px solid transparent;

4.flex布局兼容低版本浏览器

比如说 display: flex; 兼容safari，ios这一类浏览器是display:-webkit-box.
firefox(buggy) ：-moz-box;ie10 ：display: -ms-flexbox;

.flex-box{
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
 }
 
.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
 }

js

1.js的数据类型

六种基本类型：字符串，布尔，数值，null，undefined，es6引入的symbol（表示独一无二的值）
一种复杂类型：Object

2.判断数据类型的方法：typeof 和instanceof的区别

共同点：typeof和instanceof都是用来判断变量类型的，
区别:

• 1.typeof判断所有变量的类型，返回值有number，boolean，string，function，object，undefined。
• 2.typeof对于丰富的对象实例，只能返回"Object"字符串。
• 3.instanceof用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。
• 4.instanceof可以对不同的对象实例进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在obj1的原型链上，（obj1 instanceof obj2）值为true。

3.对象沿着原型链查找的规则

• 先在自己身上找，找到即返回
  构造函数中是否有该属性，有则返回，如果未赋值，返回undefined
• 自己身上找不到，则沿着原型链向上查找，找到即返回
• 如果一直到原型链的末端还没有找到，则返回 undefined

4.this在不同情况下的指向

this的指向基于函数执行环境动态绑定
1、当函数作为对象的方法被调用时，指向对象本身
2、当函数作为普通函数方式调用时，this总是指向window对象
3、作为构造器调用
使用new 运算符调用函数通常返回一个对象，构造器的this指向返回的这个对象
,即例子中myObject。

var myObject =function(){this.name = 'hi';};
var  obj=new myObject();
console.log(obj.name);//hi

4、动态改变传入函数的this指向：.call() .apply()方法
区别在于传递参数的方式，前者是参数数组，后者是直接写在apply()函数里面作为一个个参数

5.es6常用的新特性

在js面试题2里总结过

6.promise的使用

在js面试题2里总结过

vue

1.vuex的使用

核心概念：
Vuex 使用一个 Store 对象管理应用的状态，一个 Store 包括 State, Getter, Mutation, Action 四个属性。
State：State 意为“状态”，是 vuex 状态管理的数据源。
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Mutaion 使得状态变得可追踪，配合一些 devtools 可以实现 time-travel 的调试体验。
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module。

使用场景：
vuex 一般在中大型 web 单页应用中用于解决跨组件通信以及作为数据中心集中式存储数据。
vuex中一般存储两类数据：
1、组件之间全局共享的数据
2、通过后端异步请求的数据

本人所在团队在实际的项目开发过程中更多的是应用第二种，即把通过后端异步请求的数据都纳入 vuex 状态管理，在 Action 中封装数据的增删改查等逻辑，这样可以一定程度上对前端的逻辑代码进行分层，使组件中的代码更多地关注页面交互与数据渲染等视图层的逻辑，而异步请求与状态数据的持久化等则交由 vuex 管理。
比如说使用 vuex 管理用户数据（获取，更新）

2.Vue 有哪些生命周期钩子函数？分别有什么用？

1. created
   此时状态：Vue里的数据在内存中已经创建完毕，但是还没有渲染到页面上。
   可做操作：从服务器获取一些初始化的数据，或者通过ajax向服务器发送一些数据。

2. mounted
   此时状态： 数据已经渲染在了浏览器的页面上。
   可做操作：操作DOM节点

3. beforeDestory
   此时状态：奄奄一息。
   可做操作：移除定时器或者事件绑定。
   但是销毁的时候需要手动销毁

3.nextTick怎么用的

原理:eventloop事件循环
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的 DOM。

官方文档里说，Vue 是异步执行 DOM 更新的.而且Vue在修改数据后，视图并不会立刻更新，
而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新
而使用了nextTick,就可以在修改数据之后获取更新后的 DOM。

使用了nextTick事件循环基本上是这样的：
同步代码执行 -> 查找异步队列，推入执行栈，执行Vue.nextTick[事件循环1] ->查找异步队列，推入执行栈，执行Vue.nextTick[事件循环2]...

应用场景：需要在视图更新之后，基于新的视图进行操作。

• 1.在 created 和 mounted 阶段，如果需要操作渲染后的视图，也要使用 nextTick 方法。

mounted: function () {
  this.$nextTick(function () {
  })
}

• 2.点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点或者获取元素宽度。

异步执行的运行机制如下。
（1）所有同步任务都在主线程上执行，形成一个执行栈。
（2）主线程之外，还存在一个"任务队列"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。
那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

二面

1.在项目中用到哪些性能优化

• 1.js的加载和执行：因为浏览器在解析DOM树的时候，当解析到script标签的时候，它会阻塞其他的所有任务，所以我通常将js放在body后面
• 2.对象读取，因为访问数组元素和对象成员相对较慢，所以在需要多次使用一个变量时，先把它赋值给一个临时变量
• 3.dom操作优化，因为对dom节点操作过多会导致页面卡顿，所以尽可能的用javascript来处理，并且尽可能的使用局部变量储存DOM节点。
  还有重排和重绘过多也会影响性能，所以我一般针对于节点样式的修改是合并所有的修改并且一次处理。在为多个同类元素绑定事件时使用事件委托。
• 4.优化首屏加载速度

• 前端的资源动态加载
  前端可以做路由动态加载、组件动态加载、图片懒加载
• 前端做一些接口缓存
  缓存的位置有两个，一个是内存，即保存给变量，另一个是localStorage。比如用户的签到日历（展示用户是否签到）
  ，我们可以缓存这样的接口到localStorage，有效期是当天。
• 页面使用骨架屏
  意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。可以减少用户在首屏等待的急躁情绪

vue项目中需要做哪些项目优化

• 1.减少不必要的请求
  代码拆分和按需加载，比如基于路由的代码拆分。使用elementui，vantui组件库时按需加载组件
• 2.减少包体大小

• 使用 UglifyJS 做源码级别的压缩
• Tree Shaking
  本质是通过检测源码中不会被使用到的部分，将其删除，从而减小代码的体积。
• 使用Polyfill.io 根据浏览器特性动态打补丁的方案。

2.vuex在项目中你是怎么用的

上面写了

3.jquery和vue的区别

jquery是js库，而vue是js框架。

• 1.技术角度：
  jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面是在一起的。
  vue是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。
  它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染，数据和界面是分离的。

• 2.使用场景：
  vue适用的场景：复杂数据操作的后台页面，表单填写页面
  jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

4.vue如何操作dom

• 1.原生js获取dom就很简单了，例如：根据id、class
• 2.使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
  在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空，

5.对vue虚拟dom的理解

1.什么是vdom
vdom是一种使用js对象来描述真实DOM的技术，通过这种技术,们能精确知道哪些真实DOM改变了，从而尽量减少DOM操作的性能开销。
2.实现步骤
vdom是通过snabbdom.js库实现的,大概过程有以下三步：

• compile（把真实DOM编译成Vnode）
• diff（利用diff算法，比较oldVnode和newVnode之间有什么变化）
• patch（把这些变化用打补丁的方式更新到真实dom上去）
  在源码中我看到，snabbdom中有两个核心函数h()、patch()
  h( ) 函数主要根据传进来的参数，返回一个 vnode（虚拟节点） 对象
  patch有两个作用：patch(container, vnode) //将虚拟dom渲染成真实的dom
  patch(vnode, newVnode) //利用diff算法比较新旧vnode之间的差异