前端面试题综合

---

1.HTML5的页面结构同HTML4或者更前的HTML有什么区别？

 答：一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
以下是形成页面结构的HTML5元素的更多细节：（注意主要考的是标签语意化）
    <header>：代表HTML的头部数据
    <footer>：页面的脚部区域
    <nav>：页面导航元素
    <article>：自包含的内容
    <section>：使用内部article去定义区域或者把分组内容放到区域里
    <aside>：代表页面的侧边栏内容

2.HTML静态页面出现中文乱码如何解决？

 答：<meta charset="UTF-8" />

---

3块属性标签与行属性标签的区别？哪些标签是块属性的，哪些是行的?

 答：在标准文档流里面，块级元素具有以下特点：
      ①总是在新行上开始，占据一整行；  
      ②高度，行高以及外边距和内边距都可控制；
      ③宽如果不设置,默认是父级的宽度，与内容无关；
      ④它可以容纳内联元素和其他块元素。

      行内元素的特点：
      ①和其他元素都在一行上； 
      ②高，行高及外边距和内边距部分可改变；
      ③宽度只与内容有关；
      ④行内元素只能容纳文本或者其他行内元素。
      不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，
      也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

---

4清除浮动的方法

 答： 1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
      2. 使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
      3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。使用中需注意以下几点。
      一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
      二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。
      4.给浮动元素的父元素设置固定的高度
      5.使用befor和after双伪元素清除浮动（扩展内容）

5前端页面有哪三层构成，分别是什么？作用是什么？

 答：分成：结构层、表示层、行为层。
      结构层由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，
      但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
      表示层由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
      行为层负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

---

6浅谈一下闭包

 答：闭包：有权访问函数的局部变量的函数

一个函数有权访问另外一个函数作用域的变量

      闭包优点：避免全局污染
      闭包缺点：造成内存泄漏 (内存泄漏：本应该释放内存，而不能释放)
      创建闭包：外层函数创建一个受保护的局部变量
                      内层函数操作外层函数的局部变量
	      外层函数将内层函数返回到外部
	      内层函数在外部反复调用

      闭包的外层函数调用几次，就创建几个受保护的局部变量副本
      闭包的形成：由于内层函数在外部被调用，而内层函数内部引用外层函数的局部变量，导致外层函数的局部变量无法释放，从而形成了闭包

7一个CSS文件如果过大的话，加载会很慢，占用过大带宽，如果解决？

 答：1、将CSS文件拆分多个CSS文件
       2、压缩css
       3、去取冗余(多余)的样式
       4、减少css选择器层级

---

8事件委托是什么

 答：符合 W3C 标准的事件绑定 addEventLisntener /attachEvent 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
事件委托的优点:
a.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
b.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

9列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位原点是？

 答：block 块类型元素一样显示。 
      none 缺省值。向行内元素类型一样显示。 
      inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
      list-item 象块类型元素一样显示，并添加样式列表标记。
      position 的值 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
      fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 
      relative 生成相对定位的元素，相对于其正常位置进行定位。 
      static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）。
      inherit 规定从父元素继承 position 属性的值。

---

10面向对象以及原型

 答：面向对象：将需求抽象成一个对象，然后对其成员进行分析
      面向对象三大特征：封装、继承、多态
      面向对象的第一步是创建构造函数，第二步通过构造函数创建对象实例
      原型：对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象，由于原型本身也是对象，又有自己的原型，所以形成了一条原型链。
                函数的原型是 prototype
                对象的原型是 __proto__
                对象的顶级原型为null， 即Object.prototype.__proto__ == null

11浏览器的渲染页面机制

 答：浏览器解析HTML文档和CSS样式表构建DOM树和和CSSOM树(没有设置节点外观样式)
      浏览器结合DOM树和CSSOM树构建渲染树(重绘元素)
      浏览器在渲染树内对每个渲染元素进行布局处理，计算出每一个元素的大小和位置(回流元素)
      遍历渲染树将实际的像素显示到屏幕(确认最终的回流元素样式)

---

12$(function() {}) 和 window.onload区别

 答：$(function() {})：页面html,css,js等资源加载完成后触发
      window.onload：页面html,css,js,图片等资源加载完成后触发

13重绘和回流

 答：重绘
	当页面的元素需要更新属性，新的属性对元素的外观，风格的产生影响，这个更新的过程称为重绘
	比如设置元素的background，color等等，都会重绘元素
      回流
	当页面的元素因为尺寸，位置、布局，隐藏等改变而需要浏览器重新构建的过程，这个重构的过程称为回流
	比如设置元素的width，height，float，position等等，都会回流元素

---

14typeof与instanceof的区别？

 答：typeof 返回值是一个字符串，用来说明变量的数据类型
      typeof 一般只能返回 number,boolean,string,function,object,undefined,symbol
      typeof 不能用于判断 null, {}, []

      instanceof 用于判断一个变量是否属于某个对象的实例

15js继承常用有哪些继承方式？

 答：类式继承：子构造函数的原型对象继承父构造函数以及父构造函数的原型
      构造函数式继承：子构造函数继承父构造函数，不能继承父构造函数的原型
      组合式继承：类式继承 + 构造函数式继承
      多继承：子构造函数继承多个父构造函数

---

16创建ajax的四个步骤、ajax的状态码、ajax的优点

 答：创建ajax的四个步骤
		创建ajax对象
		监听ajax对象请求的状态变化
		建立服务连接
		发起请求
      ajax的状态码
	               0: 请求未初始化
                               1: 已发送请求
                               2: 已接收请求
                               3: 请求处理中
                               4: 请求完成并且已响应
      ajax的优点：在不刷新整个页面情况下，可以局部更新数据

17函数节流和函数防抖

 答：函数节流：限制一个函数在一定时间内只能执行一次
      函数防抖：触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行的等待时间
      函数防抖使用场景: 
		实时搜索 比如 oninput事件
		改变窗口大小: 比如 onresize事件
		滚动：比如 onscroll

---

18内部插入节点和外部插入节点

 答：内部插入节点，节点关系为父子关系
		在父节点尾部添加一个子节点
		父节点.append(子节点)
		子节点.appendTo(父节点)

		在父节点顶部添加一个子节点
		父节点.prepend(子节点)
		子节点.prependTo(父节点)
      外部插入节点，节点关系为同胞节点
		在节点前面添加节点
		节点## before(节点2);
		节点## insertBefore(节点1);

		在节点后面添加节点
		节点## after(节点2);
		节点## insertAfter(节点1);

19$(this)和this关键字在jQuery中有何不同？

 答：$(this)返回一个jQuery对象，可以调用jQuery方法，比如用text()获取文本
      而this代表当前元素，是JavaScript关键词中的一个，表示上下文中的当前DOM元素，不能调用jQuery 方法，直到被$()函数包裹，例如$(this)

---

20Flash、Ajax各自的优缺点，在使用中如何取舍？

 答：Flash ajax对比
      (1)Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
      (2)ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
      共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

21解释jsonp的原理，以及为什么不是真正的ajax？

 答：①. jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
      ②.为什么不是真正的 ajax?    
          ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
          jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。
      ③ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，
      因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
      还是有不同点的：
      ④. 实质不同
　        ajax的核心是通过xmlHttpRequest获取非本页内容
　        jsonp的核心是动态添加script标签调用服务器提供的js脚本
      ⑤. ajax通过服务端代理一样跨域
        　jsonp也并不排斥同域的数据的获取
      ⑥ .jsonp是一种方式或者说非强制性的协议
　       ajax也不一定非要用json格式来传递数据　
      ⑦ .jsonp只支持get请求，ajax支持get和post请求

---

22get与post两种方式的优缺点。

 答：get:
            get是从服务器上获取数据，post是向服务器传送数据；
            get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB；
            get安全性非常低，post安全性较高。但是执行效率却比Post方法好；
            get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；
在做数据查询时，建议用Get方式；

      post:
            post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程；
           所以：包含机密信息的话，建议用Post数据提交方式；而在做数据添加、修改或删除时，建议用Post方式。

23.同源策略

 答：同源：协议相同，域名相同，端口相同
      不同源：只要协议、域名、端口其中之一不同，不同源就会产生跨域
      同源策略主要作用：限制不同源的服务器相互访问，提高浏览器访问网页的安全性

---

24.Http与Https的区别

（关于http和https的概念大家可以自己查一下了解一下，这个问题非常常见，几乎十家公司会有七家问到）

 答：①https协议需要到CA  （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(原来网易官网是http，
 而网易邮箱是https。)
      ②http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
      ③http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
      ④http的连接很简单，是无状态的。Https协议是由SSL+Http协议构建的可进行加密传输、身份认证的网络协议
      ，比http协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双
      方都不长久的维持对方的任何信息。)

25.jsonp跨域实现原理

 答：创建一个script
      将请求地址赋值给script的src属性
      将后台约定回调函数名称以参数的形式挂在请求地址中
      将一个全局函数作为后台约定回调函数的值
      后台响应的数据在全部函数中处理

---

26.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

 答：①localstorage和sessionstorage都是H5提供的新的存储类型，以前只有cookies来完成存储的工作。
         这两种新方式存储限制比使用cookie要大得多（至少5MB，cookie小于4k），而且速度更快。
         数据永远不会传输到服务器，只有在客户端特别要求时才能使用。
      ③通过localStorage存储的数据是永久性的：它不会过期并保留在用户的计算机上，直到Web应用程序删除它或用户要求浏览器删除它。
      ④sessionStorage与存储数据的顶级窗口或浏览器选项卡具有相同的生命周期。当选项卡永久关闭时，将删除通过sessionStorage存储的所有数据。
      ⑤localStorage和sessionStorage之间关于存储范围的差异：两种存储形式都限定在文档原点，以便具有不同来源的文档永远不会共享存储的对象。
      ⑥ sessionStorage也是基于每个窗口的范围。包含来自同一来源的文档的两个浏览器选项卡具有单独的sessionStorage数据。
          与localStorage不同，来自同一源的相同脚本在不同选项卡中打开时无法访问彼此的sessionStorage。

27.重绘和回流

 答：重绘：
      当页面的元素需要更新属性，新的属性对元素的外观，风格的产生影响，这个更新的过程称为重绘
      比如设置元素的background，color等等，都会重绘元素
      回流：
      当页面的元素因为尺寸，位置、布局，隐藏等改变而需要浏览器重新构建的过程，这个重构的过程称为回流
      比如设置元素的width，height，float，position等等，都会回流元素

---

28.讲解一下this （作用域）

 答：this的指向：普通函数内的this指向全局变量
      构造函数内部this指向新创建出来的对象
      对象方法内的this指向的是调用该方法的对象
      call,apply,bind可以改变this的指向

29.px、em、rem

 答：	px: 固定值
	em的值不是固定值
	em会继承父级元素的字体大小
	rem的值不是固定值
	rem会继承html元素的字体大小
	rem多数用于手机端布局

---

30.移动端触碰屏幕事件

 答：有四个触碰屏幕事件
                touchstart: 开始触碰屏幕事件
	touchmove: 触碰且在屏幕移动事件
	touchend: 离开屏幕触发事件
	touchcancel: 取消触碰事件，(发生场景：当前手机来电时)
      事件对象.targetTouches: 获取触点列表

31.bootstrap4响应式断点范围

		超大PC xl: x >= 1200px
		pc lg: x >= 992px
		平板 md: x >= 768px
		手机或者手机横屏 sm:  x >= 576px
		超小屏幕手机: x < 576

---

32.有关css属性position的属性值的描述

 答：static：没有定位，元素出现在正常的流中，占据文档流空间
      fixed：生成固定定位的元素，相对于浏览器可视窗口进行定位，不占据文档流空间
      relative：生成相对定位的元素，相对于元素本身正常位置进行定位，占据文档流空间
      absolute：生成绝对定位的元素，相对于static定位以外的第一个含有(relative, absolute, fixed, sticky)的祖先元素定位，不占据文档流空间
      sticky: 黏贴定位，相对于浏览器可视窗口进行定位，占据文档流空间

33.$.extend 和$.fn.extend的区别

 答：$.extend
	   如果只传递一个对象，表示在jQuery构造函数扩展属性和方法，jquery实例不能使用，只能jQuery构造函数本身使用
                   如果传递两个对象以上的，表示合并对象，并返回合并之后的对象
	   如果第一个参数为true，其他参数为对象时，则表示深度合并对象，并返回合并之后的对象
      $.fn.extend
	   表示在jQuery构造函数的原型prototype扩展属性和方法, jquery实例能使用, jQuery构造函数本身不能使用

---

34.jQuery的ajaxSend, ajaxSuccess, ajaxComplete的区别？

 答：相同点
	ajaxSend, ajaxSuccess, ajaxComplete
	三者都是监听ajax请求状态的事件，
	需要绑定在document上，
	比如 $(document).ajaxSend(function () {})
      不同点
	ajaxSend: ajax调用send方法时执行
	ajaxSuccess：请求成功执行，回填函数的第四个参数为服务器响应的数据
	ajaxComplete：请求成功之后执行

35.渐进增强和优雅降级

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

---

36.js数组方法 根据索引值 存取值的数据集合

 答：concat()：合并数组，并返回合并之后的数据	
      join()：使用分隔符，将数组转为字符串并返回	
      pop()：删除最后一位，并返回删除的数据	
      shift()：删除第一位，并返回删除的数据	
      unshift()：在第一位新增一或多个数据，返回长度	
      push()：在最后一位新增一或多个数据，返回长度	 
      reverse()：反转数组，返回结果	 
      slice()：截取指定位置的数组，并返回	
      sort()：排序（字符规则），返回结果	 
      splice()：删除指定位置，并替换，返回删除的数据	
      toString()：直接转为字符串，并返回	
      valueOf()：返回数组对象的原始值	
      indexOf()：查询并返回数据的索引		
      lastIndexOf()：反向查询并返回数据的索引

---

37.js的几种遍历循环方式

 答：forEach()：参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值	
      map()：同forEach，同时回调函数返回数据，组成新数组由map返回	
      every()：同forEach，同时回调函数返回布尔值，全部为true，由every返回true	
      some()：同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true

38.http部分状态码的含义

 答：2开头：（请求成功）表示成功处理了请求的状态代码
      3开头：（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向
      4开头：（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理
      5开头：（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

---

39.几种常见的http状态码的含义（以下是比较常见的，更全面的大家可以自己查一下）

 答：.200：   服务器已成功处理了请求。
       203：  服务器已成功处理了请求，但返回的信息可能来自另一来源
       301：  永久移动请求的网页已永久移动到新位置，即永久重定向。
      .304：此次请求返回的网页未修改，继续使用上次的资源。
     . 400：错误请求   服务器无法解析该请求。
      401：未授权请求  没有进行身份验证或验证未通过。
      403：禁止访问   服务器拒绝此请求。
      .404：未找到     服务器找不到请求的网页。
      405：   方法禁用   服务器禁用了请求中指定的方法。
      408：   请求超时   服务器请求超时。
      409：   冲突    服务器在完成请求时发生冲突
      500：   服务器内部错误    服务器遇到错误，无法完成请求。
      .503：  服务不可用    服务器目前无法使用。
      505：   HTTP 版本不支持   服务器不支持请求中所用的 HTTP 协议版本。

---

40.HTML5的新特性

		新增元素: 1 语义化结构标签 2多媒体标签 3 画布标签 4 svg标签
		新增API : ## web储存 localStorage 和 sessionStorage 代替 cookie
			## 触摸事件     3.拖放事件    4.地理定位    5.监听网络状态 ...

		新增input标签的type属性
		新增标签的自定义属性 data-index 
		新增元素的DOM的API [video和audio元素] [canvas]


 答：(1) 绘画canvas
      (2) 用于媒介回放的video和audio元素
      (3) 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
      (4) sessionStorage的数据在浏览器关闭后自动删除
      (5) 语义化更好的内容元素，比如article,footer,header,nav,section

41.对WEB标准以及W3C的理解与认识？

	WEB :  网页
	W3C :  万维网联盟组织


（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率；
（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容；
（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低
        维护成本、改版更方便；
（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；
        遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

---

42.闭包是什么，有什么特性，对页面有什么影响

 答：闭包简单理解就是：函数内部有嵌套定义里一个函数，内部函数调用外部函数的局部变量的时候就构成闭包。
      能保存局部变量，函数执行完不销毁。消耗内存资源

43.同步和异步的区别?

 答：同步的概念应该是来自于操作系统中关于同步的概念:
      不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
      同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
      异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

---

44.var和const的区别?

 答：块级作用域：比如if else语句体，for语句体，switch语句体，while语句体，do while语句体
		if () {
			此处就是块级作用域
			var a = 1;
			const b = 2;
		}（上面这段打开是给大家用于理解，背的时候不用背出来，但是块级作用域是什么也要背哦）
                          var
			用于变量声明，
			可重新声明，
			可重新赋值，
			可同时声明多个变量，
			可只声明没有赋值，
			没有块级作用域，
			具有函数作用域，
			具有声明提前

	           const
			用于常量声明，
			不可重新声明，
			不可重新赋值，
			可同时声明多个常量，
			声明必须赋值，
			具有块级作用域，
			具有函数作用域，
			没有声明提前

---

45.call，apply，bind区别

 答：call(this指向的对象, 参数1, 参数2, 参数3, ...)
      apply(this指向的对象, [参数1, 参数2, 参数3, ...])
      bind(this指向的对象, 参数1, 参数2, 参数3, ...)
      相同点：
                call，apply，bind都是函数原型的方法，都是改变函数调用时内部this的指向，第一个参数都是函数内部this指向的对象
      不同点：
	call从第二个参数开始为函数的参数，而且参数是单一传递，不能以参数数组传递;
	apply从第二个参数开始为函数的参数，而且第二个参数为数组，该数组包含函数的所有参数
	bind从第二个参数开始为函数的参数，而且参数是单一传递，不能以参数数组传递，并且返回一个绑定函数内部this指向的函数

46.使用箭头函数应注意什么？

 答：（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）
      （2）不能够使用arguments对象
      （3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
      （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

---

47.介绍下 Set、Map的区别？

 答：应用场景Set用于数据重组，Map用于数据储存
       Set：（1）成员不能重复
　　        （2）只有键值没有键名，类似数组
　　        （3）可以遍历，方法有add, delete,has
       Map:（1）本质上是健值对的集合，类似集合
　　        （2）可以遍历，可以跟各种数据格式转换

48.setTimeout、Promise、Async/Await 的区别

 答：事件循环中分为宏任务队列和微任务队列
      其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行
      promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行
      async函数表示函数里面可能会有异步方法，await后面跟一个表达式
      async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

---

49.Promise 中reject 和 catch 处理上有什么区别

 答：reject 是用来抛出异常，catch 是用来处理异常
      reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
      reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
      网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

50.import和export

 答：ES6标准中，JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，
    各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。

      export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。

      import用于在一个模块中加载另一个含有export接口的模块。

      import和export命令只能在模块的顶部，不能在代码块之中。

---

51.less和sass的区别

 答：Less和Sass的主要不同就是他们的实现方式。
      Less是基于JavaScript，是在客户端处理的。
      Sass是基于Ruby的，是在服务器端处理的。
      关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

52.js中的offset、scroll和client的区别

 答：offsetTop,offsetLeft：获取离最近父容器的位置，如果没有父容器，那么获取离body最近的位置
      offsetWidth,offsetHeight：获取元素的大小，包括padding，border，内容。
      clientTop,clientLeft: 获取边框的高度和宽度
      clientWidth,clientHeight:获取元素的大小，只包括padding和内容
      scrollTop,scrollLeft:内容滚出去的距离
      screllWidth,screllHeight:不包括滚动条元素的“大小”（隐藏也算）

---

53.new操作符具体干了什么呢?

 答：1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
      2、属性和方法被加入到 this 引用的对象中。
      3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

54.dom事件委托什么原理，有什么优缺点

 答：事件委托原理:事件冒泡机制
      优点
      ## 可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
      ## 可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
      缺点
      事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

55.说说什么是 MVVM?

1 这 MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也
可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转
化成 UI 展现出来，View 是一个同步 View 和 Model 的对象
2 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，
Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而
Model 数据的变化也会立即反应到 View 上。
3 对 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的
同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作
DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

56.说 mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么?

1.这 mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成
mvvm 中的 ViewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速
度变慢，影响用户体验。
2. 区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。
3. 场景：数据操作比较多的场景，更加便捷

57.vue 的优点是什么?

1. 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"
View "上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
2.  可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻
辑。
3.  独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注
于页面设计。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写

58用于构建 vue 的 vue-cli 工程都到了哪些技术，其作用分别是什么?

 vue.js: vue-cli 工程的核心，主要特点是 双向数据绑定 和 组件系统
 vue-router: vue 官方推荐使用的路由框架
 vuex: 专为 vue.js 应用项目开发的状态管理器，主要用于维护 vue 组件间共用的一些变量和
方法
 axios（fetch、ajax）:用于发起 GET、 POST 等 http 请求，基于 Promise 设计
 webpack: 模块加载和 vue-cli 工程打包器
 eslint 代码规范工具。

59.请问 v-if 和 v-show 有什么区别?

 共同点：都是动态显示 DOM 元素
 区别点：
     手段
     v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
     v-show 是通过设置 DOM 元素的 display 样式属性控制显隐
 编译过程
     v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听
    和子组件
     v-show 只是简单的基于 css 切换
 编译条件 
     v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开
    始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载)态的
     v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留
 性能消耗
     v-if 有更高的切换消耗
     v-show 有更高的初始渲染消耗
 使用场景
     v-if 适合运营条件不大可能改变
     v-show 适合频繁切换

60.vue 常用的修饰符?

 v-model 修饰符：
    .lazy：输入框改变，这个数据就会改变，这个修饰符会在光标离开 input 框才会更新数据
    .number：营先输入数字就会限制输入只能是数字，先字符串就相当于没有加 number，注
    意，不是输入框不能输入字符串，是这个数据是数字
    .trim：输入框过滤首尾的空格
 事件修饰符：
    .stop：阻止事件冒泡，相当于调用了 event.stopPropagation()方法
    .prevent：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a 标签的跳转就是默认事件
    .self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个 div里面有个按钮，div 和按钮都有事件，我们点击按钮，div 绑定的方法也会触发，如果div 的 click 加上 self，只有点击到 div 的时候才会触发，变相的算是阻止冒泡
    .once：事件只能用一次，无论点击几次，执行一次之后都不会再执行
    .capture：事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
    .sync：对 prop 进行双向绑定
    .keyCode：监听按键的指令，具体可以查看 vue 的键码对应表

61.v-on 可以监听多个方法吗?

关于 v-on 监听多个方法的简写：

<input type="text" v-on="{ input:onInput, focus:onFocus, blur:onBlur,}"/>
<!-- v-on 在 vue2.x 中测试,以下两种均可-->
<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来 1</button>
<button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来 2</button>
<!-- 一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号-->
<button @click="a(),b()">点我 ab</button>
<button @click="one()">点我 onetwothree</button>
<!-- v-on 修饰符 .stop .prevent .capture .self 以及指定按键.{keyCode|keyAlias} -->
<!-- 这里的.stop 和 .prevent 也可以通过传入&event 进行操作 -->
<!-- 全部按键别名有：enter tab delete esc space up down left right -->
<form @keyup.delete="onKeyup" @submit.prevent="onSubmit">
<input type="text" placeholder="在这里按 delete">
<button type="submit">点我提交</button>

62.vue 中 key 值的作用?

 key 值：用于 管理可复用的元素。因为 Vue 会尽可能高效地渲染元素，通常会复用已有元
素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求

63.vue 事件中如何使用 event 对象?

1. 获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号
2.默认情况下，没有给事件函数传参默认参数event是原生事件对象.

64.$nextTick 的使用?

 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，
然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到
调用它的实例上
 this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成 DOM 对象之后的操作有很
大的优势

65.vue 组件中 data 为什么必须是函数?

 Object 是引用数据类型,如果不用 function 返回,每个组件的 data 都是内存的同一个地址,一个数据改变了其他也改变了
 javascipt 只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响
 在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data 必
须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用
同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组
件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己
的作用域，互不干扰

66.v-for 与 v-if 的优先级?

 v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在
v-for 每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中
同时使用。

67.vue 中子组件调用父组件的方法?

 直接在子组件中通过 this.$parent.event 来调用父组件的方法。
 在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了。
 父组件把方法传入子组件中，在子组件里直接调用这个方法。

68.vue 中组件 keep-alive 的作用?

 keep-alive：主要用于保留组件状态或避免重新渲染。
 属性：
 include 字符串或正则表达式。只有匹配的组件会被缓存。
 exclude 字符串或正则表达式。任何匹配的组件都不会被缓存。
 用法：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相
似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件
链中。

69.什么是 vue 生命周期和生命周期钩子函数?

 Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂
载 Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

 创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为
undefined，还未初始化。在 created 阶段，vue 实例的数据对象 data 有了，el 还没有

 载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为
虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，
data.message 成功渲染

 更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法

 属销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue
实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

70.vue 更新数组时触发视图更新的方法?

 Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
 push()
 pop()
 shift()
 unshift()
 splice()
 sort()
 reverse()
 filter(), concat()和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用
这些非变异方法时，可以用新数组替换旧数组
 JavaScript 的限制，Vue 不能检测以下变动的数组：
 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
 当你修改数组的长度时，例如：vm.items.length = newLength

71.如何解决非工程化项目，网速慢时初始化页面闪动问题?

72.v-model 语法糖的组件中的使用?

 v-model 主要是用于表单上数据的双向绑定。
 主要用于 input，select，textarea，component
 修饰符：
 .lazy 取代 input 监听 change 事件
 .number 输入字符串转为数字
 .trim 输入首尾空格过滤
 vue 里面 v-model 的语法糖

73. 什么是 vue 的计算属性?

模板内的写js表达式非常便利，但是设计它们的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护,所以，对于复杂逻辑，
你都应当使用计算属性。
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个
结果就可以。除了简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其
中任一数据变化，计算属性就会重新执行，视图也会更新。

* 计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据
* 当需要数据实时发生变化时，适合用 methods
* 计算属性可以依赖其他计算属性
* getter 和 setter 方法: 每一个计算属性都包含一个 getter 方法和一个 setter 方法如果计算属性后面直接跟一个 function，使用的就是计算属性的默认方法 getter 来读取

74. vue 父组件如何向子组件中传递数据?

 父组件与子组件传值
 父组件传给子组件：子组件通过 props 方法接受数据
 子组件传给父组件： $emit 方法传递参数
 计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据
 eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项
目比较小时，用这个比较合适（虽然也有不少人推荐直接用 VUEX，具体来说看需求）

75.计算属性的缓存和方法调用的区别?

 我们可以将同一函数定义为一个方法或是一个计算属性。两种方式的最终结果确实是完全相
同的。不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会
重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
 使用计算属性还是 methods 取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用
计算属性，除非你不希望得到缓存。
 计算属性是根据依赖自动执行的，methods 需要事件调用

76.vuex 是什么？怎么使用？哪种功能场景使用它?

 只用来读取的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事
物；异步逻辑应该封装在 action 中。
 在 main.js 引入 store，注入。新建了一个目录 store，… export
 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

77.. vuex 有哪几种属性?

 分别是 State、 Getter、Mutation 、Action、 Module
 state：Vuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模
块化并不冲突。存放的数据状态，不可以直接修改里面的数据

 mutations：mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据

 getters：类似 vue 的计算属性，主要用来过滤一些数据

 action：actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据
的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action

 Module：项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、
getters，使得结构非常清晰，方便管理

78.vue 的路由实现 Hash 模式和 History 模式?

 hash 模式：在浏览器中符号“#”，#以及#后面的字符称之为 hash，用
window.location.hash 读取。特点：hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用
来指导浏览器动作，对服务端安全无用，hash 不会重加载页面
 history 式：history 采用 HTML5 的新特性；且提供了两个新方法：pushState()，
replaceState()可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更

79.vue-router 如何响应路由参数的变化?

 当使用路由参数时，例如从 /user/123 导航到 /user/321，原来的组件实例会被复用。因为
两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件
的生命周期钩子不会再被调用。
 监测路由参数变化的方法：如下

1.watch 监听：

2.导航守卫

80.vue-router 实现路由懒加载（动态加载路由）?

 也叫延迟加载，即在需要的时候进行加载，随用随载。

81.在 vue 中使用插件的步骤?

 提采用 ES6 的 import ... from ...语法或 CommonJS 的 require()方法引入插件使用全局方
法 Vue.use( plugin )使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption:
true })

82.vue 中父组件触发子组件的函数，子组件触发父组件的函数?

 父组件中获取子组件函数：$children、$refs
 子组件中获取父组件函数：$parent

83.第一次页面加载会触发哪几个钩子?

 beforeCreate， created， beforeMount， mounted

84.$route 和$router 的区别?

 $router 是 VueRouter 的实例，在 script 标签中想要导航到不同的 URL,使用$router.push
方法。返回上一个历史 history 用$router.to(-1)
 $route 当前 route 跳转对象。里面可以获取当前路由的 name,path,query,parmas 等。

85.vue传递数据

vue父组件通过props属性向子组件传递数据
子组件通过$emit方法触发自定义事件像父组件传递事件

对于全局状态数据可以通过Vuex管理

86.Vue如何获取dom?

通过ref属性，获取原生DOM元素 或 组件实例.
ref="domName" 用法：this.$refs.domName

87.vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

88.v-for中为什么建议添加Key?

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

89.分别简述computed和watch的使用场景

答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　例子：搜索数据

90.vue的两个核心点

答：数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

91.vue和jQuery的区别

答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以
更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖
DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，
他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

92.简述每个周期具体适合哪些场景

答：
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。
不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

93.怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。

94.本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除
；主要用在浏览器客户端和服务器之间来回传递数据. 浏览器每次请求服务器会自动带上cookie数据，服务器可以获取。不能跨域访问.

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过 POST 或
者 GET 的通道发送到服务器；每个域 5MB；没有过期时间，它将保留知道用户从浏览器手动清除
或者使用 Javascript 代码移除

95.Cookie、Session和Token的工作原理是什么?有什么区别

blog.csdn.net/itwangyang5…
www.jianshu.com/p/1e212fa38…

96.如何解决跨域问题?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以
基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js
脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为
了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的
数据，这就是解决跨域问题的主流解决方案.【jsonp】

97.解释 jsonp 的原理，以及为什么不是真正的 ajax

 Jsonp 并不是一种数据格式，而 json 是一种数据格式，jsonp 是用来解决跨域获取数据
的一种解决方案，具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件
中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些
返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术

98.我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说

下会执行几次事件，然后会先执行冒泡还是捕获
对两种事件模型的理解

99. 事件、IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会
产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE 是事件冒泡、火狐是 事件捕获；谷歌默认是冒泡
3. ev.stopPropagation();

100.http协议相关

https://zhuanlan.zhihu.com/p/83624993

https://www.cnblogs.com/theblogs/p/10438012.html