前端面试题(1)

一，HTML(css)部分

1，什么是盒模型？

一个html元素，从里到外分为4个部分，内容盒(content)，内间距(padding)，边框(border)，外间距(margin)。
默认情况下，给元素设置的宽高，是内容盒的宽高，不包含边框与内间距。
设置盒模型，默认是内容盒content-box。Border-box是边框盒。

2，块元素，行元素，行内块元素分别有哪些？他们有什么不同？

• 块元素：独占一行，可以设置宽高。标签：div，p，h1—h6。
  如果不设置宽高，宽度就继承父元素的宽度，高度是0。如果有内容，高度就是内容的高度。
• 行元素：不能设置宽高，宽高取决于元素本身的内容。
  多个元素占用一行，到最后会自动换行。标签：a，b。
• 行内块元素：既有行元素的特性，也有块元素的特性。标签：bottom，img，input。可以为元素设置宽高，不独占一行，多个行内块会左右排列。

3，css水平、垂直居中的写法，请至少写出3种？

3.1，水平居中

• 行内元素: text-align: center
• 块级元素: margin: 0 auto
• position:absolute +left:50%+ transform:translateX(-50%)
• display:flex + justify-content: center

3.2，垂直居中

• 设置line-height 等于height
• position：absolute +top:50%+ transform:translateY(-50%)
• display:flex + align-items: center
• display:table+display:table-cell + vertical-align: middle;

4，1rem、1em、1vh、1px各自代表的含义？

• rem：是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
• em：子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size。
• vw/vh：相当于屏幕宽度和高度的1%，
• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

5，说出几种元素定位的方式，最少3种

• 5.1，默认定位：position:static，采用流式布局，不能通过top等样式来设置位置。
• 5.2，相对定位：position:relative，元素还在流式文档中，通过top等属性进行样式的微调。
• 5.3，绝对定位：position:absolute，元素脱离文档流，不在参与父元素的流式布局，不在撑开父元素。
• 5.4，固定定位：position:fixed，脱离文档流。当对于根标签进行定位时，页面滚动时不随着页面的滚动而滚动。

6，清除浮动的方法（最少2种）

（1）在最后一个浮动标签后，新加一个标签，给其设置clear：both；
（2）父级添加overflow属性（父元素添加overflow:hidden）
（3）使用after伪元素清除浮动（推荐使用）；
（4）使用before和after双伪元素清除浮动。

7，Css选择符有哪些？

（1）Id选择器（ # myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（4）相邻选择器（h1 + p）
（5）子选择器（ul > li）
（6）后代选择器（li a）
（7）通配符选择器（ * ）
（8）属性选择器（a[rel = “external”]）
（9）伪类选择器（a:hover, li:nth-child）

8，HTML5新特性

（1）语义化标签：<header>，<footer>，<nav>，
（2）音频标签：<audio>，视屏标签：<video>
（3）Canvas绘图，
（4）地理定位：使用getCurrentPosition()方法来获取用户的位置。
（5）拖放api，
（6）Web Worker：创建一个独立工作的线程，在主线程之外运行。
（7）WebSocket协议：为web应用程序客户端和服务端之间提供了一种全双工通信机制。
（8）Web Storage：客户端存储数据。它有2个对象：localStorage ，sessionStorage，两者之间的区别？

• sessionStorage，针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除；
• localStorage：没有时间限制的数据存储。

9，Css新特性

（1）CSS3圆角 border-radius
（2）盒阴影 box-shadow
（3）边框图像 border-image
（4）CSS3渐变
（5）CSS3过渡

10，cookie，session，localStorage，sessionStorage的区别？

（1）cookie数据存放在客户的浏览器上，session数据放在服务器上，session中保存的是对象，cookie中保存的是字符串。
（2）存储大小限制不同，cookie数据不能超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

二，js部分

1．javascript有几种类型的值？你能画一下他们的内存图吗？

基本类型有六种： null，undefined，boolean，number，string，symbol。

基本类型：–> 栈内存（不包含闭包中的变量）
引用类型：–> 堆内存

引用类型有：Object、Array、Date、RegExp、Function

2，闭包的概念。请简单书写一个例子。

（1）闭包就是能读取其他函数内部变量的函数。

var cnt=(function(){
    var i=0;
    return function(){
        alert(i);
        i++;
    }
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3

3，Js原型，原型链？

• 每个函数都有一个 prototype 属性,函数的 prototype属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。
• 每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。
• 这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。
• 原型链：每个对象拥有一个原型对象，通过 proto 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.proto 指向的是null)。这种关系被称为原型链 (prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法。

4，谈谈this对象使用场景，call()和apply()的区别？

作为函数调用，this 绑定全局对象，浏览器环境全局对象为 window 。

• 内部函数的 this 也绑定全局对象（应该绑定到其外层函数对应的对象上，这是 JavaScript的缺陷，用that替换）
• 作为构造函数使用，this 绑定到新创建的对象。
• 作为对象方法使用，this 绑定到该对象。
• 使用apply或call调用 this 将会被显式设置为函数调用的第一个参数。

call和apply的区别在于传入参数的不同；
第一个参数都是，指定函数体内this的指向；
第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。

5．谈谈你对es6的理解

（1）新增了块级作用域(let,const)
（2）提供了定义类的语法糖(class)
（3）新增了一种基本数据类型(Symbol)
（4）新增了变量的解构赋值
（5）函数参数允许设置默认值，引入了rest参数，新增了箭头函数
（6）数组新增了一些API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
（7）对象和数组新增了扩展运算符
（8）ES6 新增了模块化(import/export)
（9）ES6 新增了 Set 和 Map 数据结构
（10）ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
（11）ES6 新增了生成器(Generator)和遍历器(Iterator)

6，手写一个原生ajax

var request = new XMLHttpRequest();
request.open('GET', '/xxx');
request.onload = () => {console.log('请求成功'};
request.send();

7，性能优化（最少5条）

（1）减少http请求，使用缓存，接口尽可能做到重复使用
（2）优化网络连接，静态资源使用CDN
（3）尽量压缩css和js文件大小
（4）采用less或者sass
（5）图片懒加载，精灵图和雪碧图
（6）数据请求异步操作，防止页面卡顿

8，跨域

• 为什么跨域？

出于浏览器的同源策略限制，浏览器会拒绝跨域请求。

• 什么是跨域？

非同源请求，均为跨域。

• 什么是同源？

协议名，域名，端口号3者都一样，就是同源。

• 解决跨域的方式

jsonp跨域
CORS跨域
代理跨域

10，什么叫优雅降级和渐进增强？

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

三，vue部分

1，Vue的核心思想,

数据驱动(数据双向绑定)
组件化开发

2，谈谈你对mvvm模式的认识

MVVM是Model-View-ViewModel的简写，它是一种基于前端开发的架构模式。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；对应到前端就是javascript对象。
• View：代表UI视图，负责数据的展示；对应前端就是dom。
• ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

ViewModel是View与Model的连接器，Model和ViewModel之间有着双向数据绑定的联系，View与Model通过ViewModel实现双向绑定。

3，数据绑定的原理

Vue组件data中的数据在创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染（仅仅是重新渲染页面中使用这个数据的部分，不是全部重新渲染）的代码。

4，watch 和 computed 区别是什么？

• computed常用于值的计算，是具有缓存的，页面重新渲染值不变化,computed会立即返回之前的计算结果，而不必再次执行函数。
• watch用于监听组件的数据，需要在数据变化时执行异步或开销较大的操作时使用.,页面重新渲染时值不变化也会执行。
• data中没有声明的数据可以在computed中使用，但是不能在watch中使用。

5，v-if和v-show的区别,

v-if的原理是根据判断条件来动态的进行增删DOM元素，
v-show是根据判断条件来动态的进行显示和隐藏元素。

6，v-model指令工作原理

v-model指令的本质就是一个v-bind + 一个v-on，它会将绑定的数据通过value属性向下传递，并监听子组件发射的input事件，并当事件触发时，把事件附带的数据赋值给绑定的数据。

7，Vue生命周期？

8，Vue路由模式

• 8.1，路由的定义：在网站开发中，指的是根据一个url地址找到与之对应的资源。
• 8.2，URI有几部分：协议名，域名(IP)，端口号，路径，参数，哈希值。
• 8.3，Vue路由有几种模式，有什么不同？

vue路由支持两种路由模式，hash和history，默认是hash。
hash模式依赖的是hashchange事件，在事件函数中根据hash值找到对应的组件显示。
history模式是在请求事件中，获取url地址的路径，如果是路由规则中存在的路径就显示与之匹配的组件。

• Route，routes，router的区别？

route：路由，单个路由或者某一个路由；
routes：多个路由的集合；
router：译为路由器，包含上述两个或者说它是一个管理者，负责管理上述两个。

• 路由跳转的方法
  标签导航：router-link标签转义为a标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性。
  编程式导航：通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转。

9，Vuex的模块，各自的功能？

10，路由全局前置守卫有哪些参数？应用场景有哪些？,

router.beforeEach(to,from,next)。作用是跳转前进行判断拦截。
应用场景：在项目中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录。

11，请说出vue.cli项目的src目录中每个文件夹和文件的用法

（1）assets文件夹存放静态资源；
（2）components存放组件；
（3）router定义路由相关的配置；
（4）view是视图（组件）；
（5）app. vue是一个应用主组件；
（6）main.js是入口文件。

12，Vue.$set的作用？

（1）用于手动让vue实现动态绑定数据。

13，vue组件通信的几种方式？

（1）父传子，props
（2）子传父，或更新父组件值，this.$emit,发射事件。
（3）任意组件，总线事件，bus。
（4）任意组件，Vuex，状态管理工具，
（5）多级组件，$attrs/$listeners。

14，如何让CSS只在当前组件中起作用

（1）将当前组件的