高级前端面试题

1.v-show和v-if有什么区别 什么时候使用最好
区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
什么时候使用：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.带宽增加，什么方式去考虑问题
1.病毒 在服务器上安装杀毒软件，进行杀毒。
2.网络攻击 登陆阿里云管理控制台，查看云盾中的防护 DDOS 攻击是否调整好阈值， 并核实是否开启CC防护。
3.存在耗资源进程 任务管理器>性能>资源监控器>网络>查看
4.爬虫 站点是否存有 MP3，flv，swf 等大文件被频繁访问下载 建议减少这些文件
5.网站规模大 建议升级带宽

3.网站性能优化
1.尽可能减少HTTP请求
2.使用雪碧图
3.css放在文件最上面防止白屏,闪动,js放在最下面
4.压缩js和css 去除不必要的注释 空格
5.合理使用缓存
6.使用CDN(内容分发网络)

4.如何查看linux服务器的资源
查看磁盘信息
fdisk –l
df –h

查看cpu的信息
cat /proc/cpuinfo

5.闭包优缺点
作用:读取函数内部的函数,始终保持在内存中
优点:变量长期保持在内存中,不会清除,避免全局污染
缺点:增大内存使用,导致内存泄漏
网页性能问题

6.你知道内存泄露吗
导致网站/软件反应迟缓,崩溃,高延迟
原因：变量使用没有被回收,造成了内存泄漏,一般由定时器,闭包导致
vue如何处理 生命周期 beforeDestroy 销毁前做处理
react如何处理 生命周期 componentWillUnmount 销毁做处理

7.link标签和@import的区别
1.link标签属于html标签,@import是css提供的方式
2.link除了加载css，还可以做rss(简易联合)，rel属性,@import只能加载css
3.link引用的css同时被加载，@import引用的css等到页面加载完成后再加载,
4.link的权重的大于@import
5.兼容性的差别 @import不兼容IE5以下的,link完全兼容

8.es5和es6的区别
1.引用
es5:require
es6:import
2.声明变量
es5:var
es6:let count
3.函数定义
es6：使用箭头函数 =>
4.set集合和map集合
set 无重复列表
map 键对值列表
5.es6新增一个数据类型 symbol:唯一ID,独一无二
6.promise

9.git常用命令
git clone 下载项目
git add 添加文件
git rm 删除
git commit 提交到仓库
git init 新建一个git代码库

10.nginx的好处
1.高并发连接
2.内存消耗
3.成本低
4.负载均衡
5.反向代理

11.axios的请求方式
get：获取数据
post：提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch：更新数据（只将更改的数据推送到后端）
delete：删除数据

12.React Native的本地存储
Asyncstorage 对应app是全局的

13.vue为什么要有计算属性
把数据缓存起来了,提高性能

14.React的初始化写在哪里
consructor()

15.js的原型和原型链
原型：任何对象都有原型对象,主要用来继承,只存在函数变量中
原型链:两个类型的继承,js查找对象属性,如不存在，在原型链上查找

16.linux常用命令
man ls 查看ls用法
cp 拷贝文件
rm 删除
mr 移走目录
cd 改变目录
bt 宝塔面板
tar 解压

17.ajax的运行原理
AJAX是异步交互，在客户端与服务器只加引入一个媒介，从改变了同步交互过程 中“处理–等待–处理–等待”的模式

18.js的宏任务和微任务
在 js 中，任务分为宏任务(macrotask)和微任务(microtask)，这两个任务分别维护一个队列，均采用先进先出的策略进行执行！同步执行的任务都在宏任务上执行。

宏任务主要有：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

微任务主要有：Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)。

具体的操作步骤如下：
从宏任务的头部取出一个任务执行； 执行过程中若遇到微任务则将其添加到微任务的队列中； 宏任务执行完毕后，微任务的队列中是否存在任务，若存在，则挨个儿出去执行，直到执行完毕； GUI 渲染； 回到步骤 1，直到宏任务执行完毕；
这 4 步构成了一个事件的循环检测机制，即我们所称的eventloop。

19.迭代器
ES6提供一个全新的迭代器的概念，它允许我们在语言层面上定义一个（有限或无限的）序列
for-of是ES6中的新语法，用来配合迭代器。
for (var key of table) {
console.log(key + ’ = ’ + table[key]);
}

20.webpack的配置优化
webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。
1.大小优化
使用CommonsChunk 来单独打包第三方库：
webpack 提供Externals的方法，可以通过外部引用的方法，引入第三方库
2.速度优化
优化loader配置
resolve优化
HappyPack是让webpack对loader的执行过程，从单一进程形式扩展为多进程模式，
ParallelUglifyPlugin这个插件可以帮助有很多入口点的项目加快构建速度。把对JS文件的串行压缩变为开启多个子进程并行进行uglify。
剔除JavaScript中用不上的代码

21.js的数据类型有8种
ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、 undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的 值，可以解决属性名冲突的问题，做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。

22.set集合和普通集合的区别
set集合中的数据没有顺序，且如果add两个一样的对象或基本类型的数据，set集合里 也是只有一个，即set集合中的数据都是独一无二的；不能使用加强的for循环；
list中的数据是有顺序的，可以加入多个一样的对象和基本类型的数据，可使用加强的for循环；

23.说一下async和await
async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现，这也和我们之前提到的一样，它是为优化then链而开发出来的。
async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成。当然语法上强制规定await只能出现在asnyc函数中，

24.flex布局的垂直居中和水平居中
水平居中
display:flex;
justify-content:center;
垂直居中
display:flex;
align-items:center;

25.css3的伪类
p:last-of-type         选择其父元素的最后的一个P元素
p:last-child            选择其父元素的最后子元素(一定是P才行)
 
p:first-of-type        选择其父元素的首个P元素
p:first-child           选择其父元素的首个p元素(一定是p才行)
 
p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)

p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素
p:nth-last-child(n)    …从最后一个子元素开始计数
p:nth-of-type(n)　  选择其父元素的n个元素
p:nth-last-of-type(n)   …从最后一个子元素开始计数

26.vue的computed和watch都可以我用来计算，差别在哪，什么时候使用哪个
computed
computed适用于动态计算data里的属性值，必须加return，不能对data里的属性进行赋值，当无变化时会先从缓存里读取。使用场景：当一个值受多个属性影响的时候
watch
watch是监听data里的值的变化，当data中的属性发生改变的时候，watch中的函数就会执行）

computed适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化
watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化

27.vue的优缺点和特性
特性：.1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点：组件化
方便重复使用
轻量高效
MVVM
缺点：可扩展性稍差
SEO不好做

28：react如何渲染循环li列表 map方法
{this.state.goods.map(item=>
return

• {item.text}
• 
  )}

  29:react的foreach和map的异同
  共同点：
       1.都是循环遍历数组中的每一项。
      2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。
     3.匿名函数中的this都是指Window。
     4.只能遍历数组。
  1.forEach()
     没有返回值。
  2.map()
  有返回值，可以return 出来。

  30：react的虚拟dom
  React会在内存中维护一个虚拟DOM树，对这个树进行读或写，实际上是对虚拟DOM进行。当数据变化时，React会自动更新虚拟DOM，然后将新的虚拟DOM和旧的虚拟DOM进行对比，找到变更的部分，得出一个diff，然后将diff放到一个队列里，最终批量更新这些diff到DOM中。

  虚拟DOM的优点：
  最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染。

  虚拟DOM的缺点：
  首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

  31：react的生命周期
  组件的生命周期可分成三个状态：
  Mounting：已插入真实 DOM
  Updating：正在被重新渲染
  Unmounting：已移出真实 DOM
  生命周期的方法有：
  componentWillMount 在渲染前调用,在客户端也在服务端。
  componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
  componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
  可以在你确认不需要更新组件时使用。
  componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
  componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

  32：react的性能优化写在哪里
  性能优化之生命周期函数shouldComponentUpdate

  react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是，有的时候子组件的接受父组件的数据没有变动。子组件render的执行会影响性能，这时就可以使用shouldComponentUpdate来解决这个问题。
  shouldComponentUpdate   这是一个需要返回布尔值的生命周期，可以理解为疑问句 “组件本身需要被重新渲染吗?”
  例如： 
                  shouldComponentUpdate (){
                          if(子组件原数据 == 子组件现在接收的数据){
                                   return  false; 
                          }else{
                                   retuen true;
                          }   
                  }  
  从而达到没必要重新渲染的子组件，阻塞掉父子render变化引起的子组件render的变动，提升性能！

  33：react有几种组件？函数组件和类组件
  函数组件
  function Welcome (props) {
  return

  Welcome {props.name}

  
  }
  ReactDOM.render(, document.getElementById(‘root’));

  函数组件接收一个单一的 props 对象并返回了一个React元素

  类组件
  class Welcome extends React.Component {
  render() {
  return (
  

  Welcome { this.props.name }

  
  );
  }
  }
  ReactDOM.render(, document.getElementById(‘root’));

  无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
  所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
  React是单项数据流，父组件改变了属性，那么子组件视图会更新。
  属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
  组件的属性和状态改变都会更新视图。
  区别

  函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

  34.react的setState的核心原理
  React库控制时，异步；否则同步
  setState之后，会经对state进行diff，判断是否有改变，然后去diff dom决定是否要更新UI。如果这一系列过程立刻发生在每一个setState之后，就可能会有性能问题。

  35:react的核心
  虚拟DOM（Virtual Document Object Model）
  DOM的本质是什么：就是用JS表示的UI元素
  DOM和虚拟DOM的区别：DOM是由浏览器中的JS提供功能，所以我们只能人为的使用 浏览器提供的固定的API来操作DOM对象；虚拟DOM并不是由浏览器提供的，而是我们程序员手动模拟实现的，类似于浏览器中的DOM，但是有着本质的区别
  虚拟DOM：优化频繁操作DOM引发性能问题的产物，将页面的状态抽象为JS对象的形式，本质上是JS和真实DOM的中间层。当我们想用JS脚本大批量进行DOM操作时，会优先作用于虚拟DOM这个JS对象，最后通过对比将要改动的部分通知并更新到真实的DOM上。

  Diff算法
  tree diff:新旧DOM树，逐层对比的方式，就叫做 tree diff,每当我们从前到后，把所有层的节点对比完后，必然能够找到那些 需要被更新的元素；

  component diff：在对比每一层的时候，组件之间的对比，叫做 component diff;当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置；

  element diff:在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff；

  key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系；

  36：js的作用域和作用域链
  作用域：
  全局作用域： 
  最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：
  局部作用域： 
  和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部
  函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

  作用域链:
  根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。

  37:什么是盒子模型
  网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.

  38:内容垂直居中的几种方法
  1.把父级 div 的显示方式display设置为table，子级设置display:table-well;vertical-align:middle
  优点：
  content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断
  缺点：
  Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)
  2.使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
  优点：
  适用于所有浏览器
  不需要嵌套标签
  缺点：
  没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
  3.flex布局父元素display:flex,子元素align-self:center

  4.通过伪元素:before实现css垂直居中
  父元素添加伪元素:before

  5.通过line-height实现css垂直居中

  39：css的预处理器 sass/less
  优点：变量，复用，嵌套，运算，继承
  缺点：提高了门槛

  40:DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  （1）创建新节点
  createDocumentFragment() //创建一个DOM片段
  createElement() //创建一个具体的元素
  createTextNode() //创建一个文本节点
  （2）添加、移除、替换、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore()
  （3）查找
  getElementsByTagName() //通过标签名称
  getElementsByName() //通过元素的Name属性的值
  getElementById() //通过元素Id，唯一性

  41:常见的http状态码
  200 - 请求成功
  301 - 资源（网页等）被永久转移到其它URL
  403 - 服务器理解请求客户端的请求,但是拒绝执行此请求
  404 - 请求的资源（网页等）不存在
  500 - 内部服务器错误

  开头为1，2的没有问题
  3为重定向
  4为客户端错误
  5为服务器错误

  42：display和visibility的属性差别
  visibility属性：
  确定元素显示还是隐藏；
  visibility=“visible|hidden”，visible显示，hidden隐藏。
  当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

  display:none
  display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

  43:css选择符有哪些?哪些属性可以继承?优先级算法如何计算?
  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)
  可继承的样式：
  1.font-size
  2.font-family
  3.color
  4.text-indent
  不可继承的样式：
  1.border
  2.padding
  3.margin
  4.width
  5.height
  优先级算法：
  1.优先级就近原则，同权重情况下样式定义最近者为准;
  2.载入样式以最后载入的定位为准;
  3.!important >  id > class > tag
  4.important 比 内联优先级高，但内联比 id 要高

  44:传输数据格式有哪些,说说各自的优缺点？
  相同点：
  都是从客户端向服务端发送请求。从服务端请求数据的方式

  Jsonp和Ajax的区别

  Ajax属于同源策略，Jsonp属于非同源策略
  原理不一样：
  1.Ajax:new XMLHttpRequest
  2.jsonp:通过动态创建script标签，添加src属性，前端通过传一个callback给后台，后台返回函数调用，前台将返回的函数调用再进行解析
  返回值不一样：
  1.Ajax返回的是一个对象
  2.jsonp返回的是字符串
  请求方式不一样：
  Ajax有多种请求方式—(get,post,delete,put,patch)
  jsonp：只有get
  JSONP的缺陷

  没有关于JSONP调用的错误处理，一旦调用失败，浏览器会以静默的方式处理。
  他只支持get请求，只能获取数据
  管理系统不能JSONP
  所以==对于一些需要对安全性有要求的跨域请求，JSONP的使用需要谨慎一点了。
  JSONP的优势
  JSONP对于老浏览器兼容性方面比较良好，因此，对于那些对IE8以下仍然需要支持的网站来说，仍然被广泛应用

  45:什么是同源策略
  所谓同源是指，域名，协议，端口相同。
  当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
  如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

  46：如何解决跨域的几种方法
  本地开发时使用webpack代理
  线上使用nginx代理
  后台设置允许跨域
  JSONP

  47：公众号的微信登录授权前端怎么写
  一、通过接口获取appId（微信调用授权需要的jdk）
  二、微信授权登录
  三、获取Code
  四、获取token
  五、判断token是否存在

  48:什么是jwt
  JSON Web Token

  49:什么是token

  50:如何防止xss攻击
  XSS防御的总体思路是：对输入(和URL参数)进行过滤，对输出进行编码。

  51:JWT和session的同异
  相同点是，它们都是存储用户信息；然而，Session是在服务器端的，而JWT是在客户端的。
  Session方式存储用户信息的最大问题在于要占用大量服务器内存，增加服务器的开销。
  而JWT方式将用户状态分散到了客户端中，可以明显减轻服务端的内存压力。
  Session的状态是存储在服务器端，客户端只有session id；而Token的状态是存储在客户端。

  52：vue中key值的作用
  key 的特殊属性主要用在 Vue的虚拟DOM算法，有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
  最常见的用例是结合 v-for

  53：事件委托 js的事件冒泡和事件捕获
  事件冒泡是一个从后代节点向祖先节点冒泡的过程，这个可以理解吧。

  事件捕获就正好相反，是一个从祖先节点到后点节点的过程。

  IE只支持冒泡，不支持捕获。

  54：一次性定时器和永久定时器的区别
  一次性定时器setTimeout，定义的时间延时到达后，执行指定的函数,定时器就结束了。可以在时间延时之前，就取消这个定时器-clearTimeout；

  周期性定时器setInterval，定义的时间间隔到达后，执行指定的函数后，定时器并未结束，会在下一个时间间隔再次触发执行函数，一直这样运行下去，除非你人为的执行clearInterval

  55：vuex如何修改状态
  vuex状态机中的数据是必须提交mutation来修改

  56:404报错一般是什么原因
  1、tomcat是否启动
  2、tomcat启动是否报错
  3、项目是否部署在了tomcat中
  4、看访问路径是否正确
  5、看是否是http,而不是https
  6、看你的项目的虚拟路径是否和你的项目名称是一致的

  57：vue路由守卫(导航守卫)
  全局守卫 路由独享守卫 组件内守卫
  导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现
  路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？

  58：请描述一下cookies sessionStorage和localstorage区别
  相同点：都存储在客户端
  不同点：1.存储大小

  · cookie数据大小不能超过4k。

  · sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

  2.有效时间

  · localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

  · sessionStorage  数据在当前浏览器窗口关闭后自动删除。

  · cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

  3. 数据与服务器之间的交互方式

  · cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

  · sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

  59：xml和json的区别
  ·  JSON相对于XML来讲，数据的体积小，传递的速度更快些
  ·  JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
  ·  XML对数据描述性比较好；
  ·  JSON的速度要远远快于XML

  60:http和https的区别?如何灵活使用

  http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

  https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

  61：浏览器缓存有哪些,通常缓存有哪几种
  一、http缓存
  二、websql
  cookie
  localstorage
  sessionstorage
  flash缓存

  62:谈谈垃圾回收机制方式及内存管理
  回收机制方式
  1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。
  2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。
  3、实例如下：
  function fn1() {
      var obj = {name: ‘hanzichi’, age: 10};
  }
  function fn2() {
      var obj = {name:‘hanzichi’, age: 10};
      return obj;
  }var a = fn1();var b = fn2();

  fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。
   4、垃圾回收策略：标记清除(较为常用)和引用计数。

  63：什么叫优雅降级和渐进增强
  渐进增强 progressive enhancement：
  针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  优雅降级 graceful degradation：
  一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

  64：浏览器是如何渲染页面的
  渲染的流程如下：
  1.解析HTML文件，创建DOM树。
     自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
  2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
  3.将CSS与DOM合并，构建渲染树（Render Tree）
  4.布局和绘制，重绘（repaint）和重排（reflow）

  65：事件委托
  事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。比如li列表的事情交给ul做

  66：你觉得前端工程化的价值体现在哪里
  为简化用户使用提供技术支持（交互部分）
  为多个浏览器兼容性提供支持
  为提高用户浏览速度（浏览器性能）提供支持
  为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  为展示数据提供支持（数据接口）

  67:栈和队列的区别
  栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。
  队列先进先出，栈先进后出。
  栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除

  68：栈和堆的区别
  堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
  栈（数据结构）：一种先进后出的数据结构。

  69：快速排序的思想，如何实现
  快速排序”的思想很简单，整个排序过程只需要三步：
  　　（1）在数据集之中，找一个基准点
  　　（2）建立两个数组，分别存储左边和右边的数组
  　　（3）利用递归进行下次比较

  70：对BFC规范的理解
    BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

  71：null和undefined的区别
  null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

  72：讲讲304缓存
  服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。
  304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件

  73：vue的双向数据绑定原理是什么
  vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
  核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

  在数据渲染时使用prop渲染数据
  将prop绑定到子组件自身的数据上，修改数据时修改自身数据来替代prop
  watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据
  这样做的好处是：父组件数据改变时，不会修改存储prop的子V组件数据，只是以子组件数据为媒介，完成对prop的双向修改。

  74：vue的beforeDestroy里面一般进行什么操作
  beforedestoryed是组件销毁之前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清除，不用的dom元素的清除等

  75:vue中的事件修饰符主要有哪些？分别是什么作用
  .stop: 阻止事件冒泡
  .native: 绑定原生事件
  .once: 事件只执行一次
  .self:将事件绑定在自身身上，相当于阻止事件冒泡
  .prevent: 阻止默认事件
  .caption: 用于事件捕获

  76：vue的dom渲染在哪个周期就已经完成
  Dom渲染在mounted中就已经完成了

  77：vue每个生命周期具体适合哪些场景
  beforecreate : 可以在这加个 loading 事件，在加载实例时触发
  created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异 步请求也适宜在这里调用
   
  mounted : 挂载元素，获取到 DOM 节点
  updated : 如果对数据统一处理，在这里写上相应函数
  beforeDestroy : 可以做一个确认停止事件的确认框

  78：vue-loader是什么？使用它的用途有哪些？
  vue-loader 是解析.vue 文件的一个加载器。用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade等。

  79:vue中利用索引修改数组的时，页面会跟着同步吗
  页面不会同步，此时应用vue.set方法进行设置数据

  80:vue首屏加载过慢应该如何解决?
  路由懒加载，会将原来打包一个 app.js 的文件打包成多个文件，异步组件，按需加载，webpack 开启 gzip 压缩，如果图片过多，开启图片懒加载，使用 cdn 资源

  81:vue的单项数据流和双向数据流绑定是什么意思?
  单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项 绑定，不可以在子组件修改父组件的数据
  双向数据绑定：是指数据和页面进行双向绑定，相互影响

  82:为什么 vue 组件中的 data 必须是函数？
  因为如果默认为 data 是对象的话，对象为引用类型，这样的话，所有
  复用的组件都是引用的同一个数据，但是如果是函数的话，每次函数都会先
  创建一个新的数据，从而使每个组件的数据独立

  83:你知道 webpack 中 babel、plugin、loader 都有什么作用吗？
  babel 用来出来 es6 转 es5 ， plugin 配置 webpack 的一些插件 ， loader 用来配置解析处理第三方文件的

  84:keep-alive 的作用？
  包裹动态组件时，会缓存不活动的组件
  实例，主要用于保留组件状态或避免重新渲染。

  85:vue-router有哪几种导航钩子
  全局导航钩子：router.beforeEach，afterEach；
  组件内的钩子:beforeRouteEnter,beforeRoutrupdate,beforeRouteLeave,
  路由独享钩子：beforeEnter

  86：怎么定义 vue-router 的动态路由以及如何获取传过来的动态参数？
  在 router 目录下的 index.js 文件中，对 path 属性加上/:id。使用 router 对象的 params.id可获取传来的参数。

  87：怎么实现权限管理的
  后台根据不同的用户返回不同的左侧导航菜单数据，我们进行动态展示（但是A用户通过地址栏还是能够进入B用户能够有权限访问的页面） 2.后台根据不同的用户返回不同的左侧导航菜单数据，我们进行动态展示，通过全局的路由拦截，每次进入页面之前，像后端发送请求，后端返回是否有权限访问，我们前端根据数据控制能否进入该页面 3.动态生成路由表，首先路由规则里之定义一些公共的路由规则，其他的路由规则根据后台返回的用户权限动态添加路由规则，这样的话每个用户的路由规则都是不同的

  88：vue怎么实现登录功能的
  客户端点击登录，向后台发送请求，服务器通过后生成该用户的token进行返回，每个用户的token值是不一样的，客户端拿到token后要存储该token，后面请求都要携带toekn，设置请求拦截器获取本地的token传到请求头里即可，服务器校验token是否通过

  89：vue内置的组件
  component组件：有两个属性—is    inline-template

  渲染一个‘元组件’为动态组件，按照’is’特性的值来渲染成那个组件

  2）transition组件：为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件

  3）transition-group：作为多个元素/组件的过渡效果

  4）keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

  5）slot：作为组件模板之中的内容分发插槽，slot元素自身将被替换

  90：vue封装组件的过程
  组件创建
  注册组件----有2中方法，全局注册，局部注册
  调用组件

  91：vue如何兼容ie浏览器
  用vue-cli脚手架搭建的项目打包后在chrome下正常显示，IE浏览器下显示空白，这是因为缺少babel-polyfill处理器的缘故。
  1、安装babel-polyfill包；
  npm install babel-polyfill --save-dev
  安装完之后，在package.json文件中显示：

  92：vuex中的getters是干什么的
  可以认为是 store 的计算属性。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

  93:vue的计算属性computed中的getter和setter
  computed: { fullName: { // getter get: function () { return this.firstName + ’ ’ + this.lastName }, // setter 
  set: function (newValue) { var names = newValue.split(’ ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}

  94：vue如何watch监听一个对象内部的变化。
  如果只是监听obj内的某一个属性变化，可以直接obj.key进行监听。
  watch: { ‘obj.question’: function (newQuestion, oldQuestion) { this.answer = ‘Waiting for you to stop typing…’ this.debouncedGetAnswer() } }

  如果对整个obj深层监听
  watch: { obj: { handler: function (newQuestion, oldQuestion) { this.answer = ‘Waiting for you to stop typing…’ this.debouncedGetAnswer() }, deep: true, immediate: true } }
  immediate的作用：当值第一次进行绑定的时候并不会触发watch监听，使用immediate则可以在最初绑定的时候执行。

  95：vue的$nextTick用过吗可以处理异步，在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。(官网解释)解决的问题：有些时候在改变数据后立即要对dom进行操作，此时获取到的dom仍是获取到的是数据刷新前的dom，无法满足需要，这个时候就用到了$nextTick。
  // 修改数据vm.msg = ‘Hello’// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})
  // 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)Vue.nextTick() .then(function () { // DOM 更新了 })

  96：Vue中的$set用过吗，为什么要用它，解决了什么问题向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为Vue无法探测普通的新增属性(比如this.myObject.newProperty{=}^{\prime }h{i}^{\prime })（官方示例）我自己的理解就是，在vue中对一个对象内部进行一些修改时，vue没有监听到变化无法触发视图的更新，此时来使用$set来触发更新，使视图更新为最新的数据。

  97:vue说一下组件间的传值方式，你知道的所有方式都说一下
  父传子：props；子传父：$emit；兄弟：eventbus；vuex；
  期望答案
  provide / inject
  这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
  Vue.observable
  让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
  返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：
  const state = Vue.observable({ count: 0 })
  const Demo = { render(h) { return h(‘button’, { on: { click: () => { state.count++ }} }, count is: ${state.count}) }}
  $attrs包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind{=}^{\prime }$attrs’ 传入内部组件——在创建高级别的组件时非常有用。
  $listeners包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on{=}^{\prime }$listeners’ 传入内部组件——在创建更高层次的组件时非常有用。
  props
  $emit
  eventbus
  vuex
  $parent / $children / ref

  98:深入浅出之vue-cli混入(mixins)的理解和使用
  省好多代码，而且方便维护。----------个人理解的混入就是在一个公共的实例中写入公共的数据或者方法，这样的话vue会自动注入到（全局混入会注入到每一个组件的实例中）

  99:js处理异步的方式有哪些
  一、回调函数（callback）
  二、事件监听
  采用事件驱动模式。
  任务的执行不取决代码的顺序，而取决于某一个事件是否发生。
  三、发布/订阅
  我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。
  四、promise对象（promise 模式）
  （1）promise对象是commonJS工作组提出的一种规范，一种模式，目的是为了异步编程提供统一接口。
  （2）promise是一种模式，promise可以帮忙管理异步方式返回的代码。他讲代码进行封装并添加一个类似于事件处理的管理层。我们可以使用promise来注册代码，这些代码会在在promise成功或者失败后运行。
  （3）promise完成之后，对应的代码也会执行。我们可以注册任意数量的函数再成功或者失败后运行，也可以在任何时候注册事件处理程序。
  （4）promise有两种状态：1、等待（pending）；2、完成（settled）。
  promise会一直处于等待状态，直到它所包装的异步调用返回/超时/结束。
  （5）这时候promise状态变成完成。完成状态分成两类：1、解决（resolved）；2、拒绝（rejected）。
  （6）promise解决（resolved）：意味着顺利结束。promise拒绝（rejected）意味着没有顺利结束。
  五、优雅的async/await

  100:箭头函数和普通函数的区别
  箭头函数：
  let fun = () => {
  console.log(‘lalalala’);
  }
  普通函数：
  function fun() {
  console.log(‘lalla’);
  }
  箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return。
  箭头函数是匿名函数，不能作为构造函数，不能使用new
  箭头函数的 this 永远指向其上下文的  this ，任何方法都改变不了其指向，如 call() ,  bind() ,  apply() 
  普通函数的this指向调用它的那个对象

  101：怎么实现文件上传功能,同时实时监测上传进度
  主要是用HTML5的file api实现
  File.lastModified 只读
  返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。
  File.lastModifiedDate 只读 
  返回当前 File 对象所引用文件最后修改时间的 Date 对象。
  File.name 只读
  返回当前 File 对象所引用文件的名字。
  File.size 只读
  返回文件的大小。
  File.webkitRelativePath 只读 
  返回 File 相关的 path 或 URL。
  File.type 只读
  返回文件的 多用途互联网邮件扩展类型（MIME Type）

  102.优化长列表渲染
  面对这个问题，虚拟列表是一个有效的设计思路。即永远只渲染当前用户可见，以及其前后的几个元素。监听滑动事件 (scroll event)，在滑动的时候调整当前窗口的可见元素，并渲染出来。这样可以大大节约插入和移除大量 DOM 元素的时间，可以大大加快初次渲染时间，而且渲染时间不随着数据量增加而增加。
  react-window 是一个非常好用的 React 虚拟列表组件库。使用方法在文档和 demo 里面已经很详细地描述了。

  103：webpack和webpack配置
  webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能

  webpack 的优势

  其优势主要可以归类为如下几个：

  webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
  支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；
  开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
  可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

  webpack.config.js
  entry 是指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。
  output是指输出文件的配置项
  path － 表示输出文件的路径
  filename - 表示输出文件的文件名
  plugins 顾名思义，使用插件可以给webpack添加更多的功能，使webpack更加的灵活和强大,webpack有两种类型的插件:
  webpack内置的插件
  module 配置处理文件的选项
  loaders 一个含有wepback中能处理不同文件的加载器的数组
  test 用来匹配相对应文件的正则表达式
  loaders 告诉webpack要利用哪种加载器来处理test所匹配的文件
  loaders 的安装方法
  　　　　　　　　$ npm install xxx-loader --save-dev

  resolve：其它解决方案配置；
  resolve.root,绝对路径, 查找module的话从这里开始查找(可选)
  resolve.modulesDirectories,取相对路径，所以比起 root ，所以会多 parse 很多路径。查找module(可选)
  resolve.extensions,自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  resolve.alias,模块别名定义，方便后续直接引用别名，无须多写长长的地址

  104：localstorage在vuex如何做持久化缓存
  vuex数据持久化的使用场景
  1.购物车
  比如你把商品加入购物车后,没有保存到后台情况下,前端来存
  2.会话状态
  授权登录后,token就可以用vuex+sessionStorage来存储
  3.一些不会经常改变的数据
  比如版本号 城市列表等
    state: {
      logindata:JSON.parse(localStorage.getItem(‘logindata’)),   // 初始化vuex，刷新时获 取localstorage

  105：什么是SSR通用”或“同构”模式
  对于有些网站而言，SEO显得至关重要，那如何才能正常使用SPA而又不影响SEO呢？鲁迅曰：
  技术上的问题总有技术去解决，此时，SSR便闪亮登场了

  SSR常用框架
  React 的 Next
  Vue.js 的 Nuxt
  。
  Vue.js 可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序，也可以叫做“同构”。

  SSR的优点
  更快的响应时间
  更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML
  SSR的缺点
  SSR中使用的渲染程序自然会占用更多的CPU和内存资源
  一些常用的浏览器API可能无法正常使用
  开发调试会有一些麻烦
  可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

  106：定时器是异步执行的

  107：js为什么有同步异步
  因为js是单进程的，没有异步就会发生阻塞

  108：作用域链何时开始发生
  JavaScript中，JavaScript里一切都是对象，包括函数。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是作用域，包含了函数被创建的作用域中对象的集合，称为函数的作用域链，它决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。

  执行上下文
  每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文.
  执行上下文是个抽象概念,标准中没有从技术实现上定义执行上下文的具体结构和类型.
  就是一系列活动的执行上下文从逻辑上形成一个栈(比较抽象).
  栈底总是全局上下文,栈顶是当前(活动的)执行上下文.
  当在不同的执行上下文间切换(退出而进入新的执行上下文)的时候,栈会被修改(通过压栈或者出栈的形式).

  109：介绍下BFC,IFC,GFC和FFC
  BFC
        BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？
  float的值不为none。
  overflow的值不为visible。
  position的值不为relative和static。
  display的值为table-cell, table-caption, inline-block中的任何一个。
  那BFC一般有什么用呢？
        比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
  IFC
         IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
  IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
  那么IFC一般有什么用呢？
         水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
         垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
  GFC
          GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
  那么GFC有什么用呢，和table又有什么区别呢？
          首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
  FFC
          FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。
          Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
         伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

  110：promise的api
  Promise.all()；
  Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
  在我们的异步调用时经常有这样一种场景：我们需要同时调用多个异步操作，但希望只有等所有的操作都完成后，我们才去执行响应操作——这就是 Promise.all 的作用。 Promise.all 方法可以接收多个 promise 作为参数，以数组的形式，当这些 promise 都成功执行完成后才调用回调函数。
  Promise.race();
  Promise.race()方法是将多个Promise实例包装为一个实例
  Promise.race 是一个有趣的函数——它不是等待所有的 promise 被resolve 或 reject，而是在所有的 promise 中只要有一个执行结束，它就会触发：

  111：em和rem的区别
  em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  特点：
  1.em的值并不是固定的；
  2.em会继承父级元素的字体大小。
  注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
  所以我们在写CSS的时候，需要注意两点：

  1. body选择器中声明Font-size=62.5%；
  2. 将你的原来的px数值除以10，然后换上em作为单位；
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
     也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

  rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

  rem与em的区别：
  区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

  112:watch可以监听computed吗
  可以监听
  computed: {
  // 根据单价和数量计算出总价
  total: function () {
  var totalPrice = this.goodsNum * this.price;
  // 计算总价的时候向父组件传递数据
  // this.KaTeX parse error: Expected 'EOF', got '}' at position 76: …Price; }̲ }, wat…emit(‘totalNumChange’, newValue)
  },
  }

  113：ajax的底层原理
  Ajax的最大特点是：异步访问、局部刷新。核心是：XML。

  Ajax的关键技术：

  1.使用css搭建界面样式，负责页面的排版和美工

  2.使用DOM进行动态显示和交互，对页面进行局部修改

  3.使用XMLHttpRequest异步获取数据

  4.使用JavaScript将所有的元素绑在一起
  第一步：创建XMLHttpRequest对象
  第二步：建立到服务器的连接
  第三步：指定回调函数

  114:css的vw和vh
     1.vw：1vw等于视口宽度的1%。
      2.vh：1vh等于视口高度的1%。

  115：h5的新特性
  (1)语义标签
  　　语义化标签使得页面的内容结构化，见名知义
  2)增强型表单
  　　HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
  (3)视频和音频
  HTML5 提供了播放音频文件的标准，即使用 元素
  (4)Canvas绘图
  　　标签只是图形容器，必须使用脚本来绘制图形。

  116：svg和canvas区别
  　SVG 是一种使用 XML 描述 2D 图形的语言。
  　　Canvas 通过 JavaScript 来绘制 2D 图形。
  　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
  　　Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

  117：什么是暂时性死区
  暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

  变量提升
  var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
  为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
  // var 的情况
  console.log(foo); // 输出undefined
  var foo = 2;

  // let 的情况
  console.log(bar); // 报错ReferenceError
  let bar = 2;

  118：websocket与ajax的区别浅析
  1.本质不同
   Ajax,即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术；
   WebSocket是HTML5一种新的协议，实现了浏览器与服务器全双工通信。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务端与客户端通过此TCP连接进行实时通信。
  2.生命周期不同。
  websocket建立的是长连接，在一个会话中一直保持连接；而ajax是短连接，数据发送和接受完成后就会断开连接。
  3.适用范围不同
  websocket一般用于前后端实时数据交互，而ajax前后端非实时数据交互。
  4.发起人不同
  Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。
  5.用法不同
  ajax：
  $.ajax({
  type:“post”,
  url:“http://localhost:8080/target”,
  data:“state = yes”,
  dataType:“json”,
  success:funciont(data){
  }
  });
   
  websocket:
  var monitor = new WebSocket(“ws://”+ip+path)
  onOpen()、onMessage()、onClose()

  119：es6合并对象的方法
  assign()

  1.作用：将多个对象{}  合并成一个独立对象。

  2.使用方式: Object.assign(合并的对象，传入合并中的对象…)

  let user = {name:‘无敌人’,age:19};
  let page = {pageSize:10,currentPage:1};
  let newObj = {};

  Object.assign(newObj,user,page);

  120：promise的原理

  121：如何解决地狱回调
  promise

  122:微信的api是同步还是异步
  异步

  123：什么是事件循环
  因为js是单线程 js通过事件循环来实现异步 这也是js的运行机制
  遇到同步任务直接执行，遇到异步任务分为宏任务和微任务
  宏任务:整体的Script setTimeout setInterval
  微任务:Promise process.nextTick(事件轮询,定义一个动作.并且在下一个事件轮询的时间点上执行。)
  有微则微,无微则宏
  这就是事件循环

  124：process.nextTick()是什么
  Node.js里process.nextTick()
  Node.js是单线程的，除了系统IO之外，在它的事件轮询过程中，同一时间只会处理一个事件。你可以把事件轮询想象成一个大的队列，在每个时间点上，系统只会处理一个事件。即使你的电脑有多个CPU核心，你也无法同时并行的处理多个事件。但也就是这种特性使得node.js适合处理I／O型的应用，不适合那种CPU运算型的应用。在每个I／O型的应用中，你只需要给每一个输入输出定义一个回调函数即可，他们会自动加入到事件轮询的处理队列里。当I／O操作完成后，这个回调函数会被触发。然后系统会继续处理其他的请求。
  在这种处理模式下，process.nextTick()的意思就是定义出一个动作，并且让这个动作在下一个事件轮询的时间点上执行。我们来看一个例子。例子中有一个foo()，你想在下一个时间点上调用他，可以这么做：
  function foo() {
      console.error(‘foo’);
  }
   
  process.nextTick(foo);
  console.error(‘bar’);
  运行结果为
  bar
  foo

  125:网页刷新后vuex的状态如何持久化
  通过 vuex-persistedstate这个插件，来实现将数据存储到本地
  1.npm install vuex-persistedstate
  2.import createPersistedState from ‘vuex-persistedstate’
  const store = new Vuex.Store({
  modules: {
  app,
  user
  },
  getters,
  plugins: [createPersistedState()] //加上这个就可以了
  })

  126：v-if和v-for的优先级问题？应该如何正确使用避免性能问题
  1，v-for的优先级高于v-if
  2，如果两者同时存在，可在v-for的外层包裹template这里来进行v-if判断，如果放在一起，每v-for循环一次都需要进行v-if判断（先判断了条件再看是否执行_），影响性能
  3，如果v-if判断出现在v-for的内部，可以通过计算属性过滤掉那么不需要的选项
  
  

  { {child.title}}

  
  

  127:后端给你一千条数据 前端如何处理
  可以前端做分页，使用slice函数
  例子:
  const demo = “fant.com"
  alert.slice(0.2)
  每条分页显示两条数据,用户点击第二条以后
  再次请求更改第一个参数alert.slice(1.2)

  128:vue指令v-model底层Object.defineProperty的缺陷
  无法检测到对象属性的新增或者删除
  无法监听数组变化
  所以vue3的v-model更换成es6的proxy

  129：Proxy与Object.defineProperty的优劣势对比
  Proxy的优势：
  可以直接监听对象而非属性
  可以直接监听数组的变化
  拦截方式较多
  Proxy返回一个新对象，可以只操作新对象达到目的，而Object.defineProperty只能遍历对象属性直接修改
  Proxy作为新标准将受到浏览器厂商重点持续的性能优化

  Object.defineProperty的优势如下:
  兼容性好,支持IE9

  130：样式穿透是什么,如何解决
  组件之间的样式冲突了就叫样式穿透,如何解决？在每个页面就好了

  131：vue项目部署到线上后 点击刷新成为404页面
  在nginx 配置文件添加一句try_files $uri $uri/ /index.html last;就好了(一般后端来弄，前端了解就好)

  132：你知道axios的拦截器吗
  axios分为请求拦截和响应拦截,
  常见业务中，统一封装过请求以后，如果有的请求不需要token,有的请求需要token,那我们就可以在请求拦截这里做处理,响应拦截可以判断后端传过来的状态码进行操作，比如token过期就让用户去重新登录等等

  133：elementui的表格卡顿?不是后端数据的问题 那是为什么呢
  原因1:elementUI2.7.2版本的时候,每次鼠标发生移动都会重新渲染表格,
  解决办法:引入2.8.2版本进行了优化,表格就不会多次渲染
  原因2:show-overflow-tooltip导致的(如果每列显示的内容过长则可以使用该属性，即 :show-overflow-tooltip=“true”，该属性可以让内容在一行显示，如果显示不下时，显示…)
  解决办法:掉了所有的show-overflow-tooltip
  需要用到的可以选择自己每一列把tooltip加到template中。
  或者绑定.cell,显示title

  134：vue定义一个方法,如何调用
  this.方法名

  135：es6的…是什么
  合并数组

  136：const是常量,那么能不能改变他的值呢
  const定义的基本类型(number,string…)等不能被改变,但是如果定义的是引用类型中的数组与对象是可以通过修改对象属性改变的
  const使用建议:不要使用const定义数组或对象作为常量

  137：promise怎么样才能一直.then下去

  138：HTTP和WebSocket协议的区别与联系
  HTTP:
  1，无状态协议。
  2，短连接。（Ajax轮询方式或Long  poll方式实现“持久连接”状态）
  2，被动型。  客户端请求->服务器端响应。服务端不能主动联系客户端，只能有客户端发起。
  WebSocket是一种双向通信协议。在建立连接后，WebSocket服务器端和客户端都能主动向对方发送或接收数据，就像Socket一样；
  WebSocket需要像TCP一样，先建立连接，连接成功后才能相互通信。

  139：消息推送前端需要做什么
  使用WebSocket来实现系统的推送
  可以用到HTML5 Web Notification 这个API
  Notification.requestPermission(function (permission) {
  if (permission == “granted”) {
  var notification = new Notification(“您有一条新的消息”,{
  dir: “auto”,
  lang: “zh-CN”,
  tag: “testNotice”,
  icon:‘ant.png’,
  body: ‘你好啊！我是蚂蚁，我在测试桌面推送’
  });
  }
  }

  140：什么叫事件句柄
  事件句柄（又称事件处理函数），是指事件发生时要进行的操作。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

  141：nginx如何转发前端请求
  在nginx.conf文件的
  配置如下：
  server {
  listen 80;
  server_name source.server.com;

     # 匹配callback
      location /callback/ {
          proxy_pass http://10.1.9.1:8088;
      }
  
  	# 默认其他
      location / {
         proxy_pass http://10.2.2.1:8088;
         # root   html;
         # index  index.html index.htm;
      }
  	
  	}
  

  注意：在配置中http://10.1.9.1:8088，后面不用加任何目录，/callback/test/test，这一串都不需要加，/ 符号也不需要，
  这是因为proxy_pass参数中如果不包含url的路径，则会将location的pattern识别的路径作为绝对路径。

  142：你知道es6的class类吗
  class关键字，class关键字也是原型对象的一个语法糖，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已,本质上面还是一个function

  143：前端实现微信分享
  1.申请微信公众平台中的JS接口安全域名
  2.配置开发环境
  3.调用js-sdk开放的微信分享接口
  4.实现分享

  144：前端怎么生成海报
  使用html2canvas就可以了

  145：

转载：https://blog.csdn.net/ljhhappy666/article/details/115604262