本次主要搬运大华和汉得面试的常问问题
bind和call、apply有什么作用？它们的区别是什么？
全局路由守卫：只要路由发生了路由变化，守卫就能够监听到。
路由独享守卫：只负责一条路的守卫，beforeEnter；
组件路由守卫：只负责单个组件的守卫。
应用场景：在在线商城项目中，每一步路由跳转都要判断用户是否登录，只有当用户登录后，才能够跳转到其他页面，如果用户没有跳转，就只能去login页面，这时候就要使用全局路由守卫。如果用户想去查看支付成功的页面，那么必须先去支付页面进行支付，而不能直接从首页跳转到支付成功的页面，这时就要用路由独享守卫。
WebSocket是一种在单个TCP连接上进行全双工通信的协议。使得客户端和服务器之间的数据交换变得更加简单，并允许服务端主动向客户端推送数据。要知道在websocket之前服务器只能接收浏览器的请求。注：信息只能单向传送为单工；信息能双向传送但不能同时双向传送称为半双工；信息能够同时双向传送则称为全双工。
D3代表Data-Driven Documents 。 D3.js是一个用于根据数据操作文档的JavaScript库。 D3.js是一个动态的，交互式的在线数据可视化框架，用于大量网站。 D3.js由Mike Bostock编写，作为早期可视化工具包Protovis的继承者而创建。
CSS3新增了哪些新特性？
简单来说就是css2有的属性css3都有，但是css3有的属性css2不一定有。 CSS3是最新的版本，效果上CSS2是比不了的，css3可以说是css2的进阶，因为css3是在css2的基础上增加了一些新的属性。css2推荐的是内容和表现效果分离的方式，css3是朝着模块化发展的。
html5新增的特性：1、语义化标签（header、footer、nav等）；2、webStorage储存机制；3、history对象；4、表单类型（email、tell、date等）；5、媒体元素video和audio；6、canvas。html5新增了哪些特性
ECMAScript5，即 ES5，是 ECMAScript 的第五次修订，于 2009 年完成标准化
作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。
严格模式，限制一些用法，‘use strict’;
增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法
PS： 还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now
ECMAScript6，即 ES6，是 ECMAScript 的第六次修订，于 2015 年完成，也称 ES2015
ES6 是继 ES5 之后的一次改进，相对于 ES5 更加简洁，提高了开发效率.
你知道ES5 和 ES6 的区别吗?，能说出说几个 ES6 的新增方法吗?
浏览器缓存的全过程：
浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；
下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持HTTP1.1，则使用 expires 头判断是否过期；
如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match和 If-Modified-Since 的请求；
服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200；
如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200；
获取dom节点的五种方式:
document.getElementById(“标签的id名”) 返回获取到的标签节点对象
document.getElementsByTagName(“标签名”) 根据标签的名字获取多个 节点对象返回伪数组(伪数组 不能直接进行dom操作 必须取出其中元素才可以操作) 如如获取小li标签
document.getElementsByClassName(“标签的class名字”);返回伪数组对象
Html5 推出的document.querySelector(“选择器”) var firstBox = document.querySelector(‘.app’);
Html5推出的document.querySelectorAll(“选择器”);
createElement()方法能够根据参数指定的标签名称创建一个新元素，并返回新建元素的引用，用法如下
var element=document.createElement("tagName");
appendChild()方法可向当前节点的子节点列表的末尾添加新的子节点，用法如下
appendChild(newChild)；
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。
CSS优先级与继承
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
超文本传输安全协议（英语：HyperText Transfer Protocol Secure,缩写：HTTPS:常称为HTTP over TLS.HTTP over SSL或HTTP Secure)是一种通过计算机网络进行安全通信的传输协议，HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换资料的隐私与完整性，这个协议由网景公司(Netscape)在1994年首次提出，随后扩展到5联
传输层安全性协议(英语：Transport Layer Security,缩写：TLS)及其前身安全套接层(英语：Secure Sockets Layer,缩写：SSL)是一种安全协议，目的是为互联网通信提供安全及数据完整性保障。网景公司(Netscape)在1994年推出首版网页览器·网景导航者时，推出HTTPS协议，以5SL进行加密，这是SSL的起源，IETF将SSL进行标准化。许多网站，如Google、Facebook、Wikipedia等也以这个协议来创健安全连线，发送资料。目前已成为互联网上保密通信的工业标准，SSL包含记录层(Record Layer)和传输层，记录层助议确定传输层数据的封装格式。传输层安全协议使用X.509认证，之后利用非对称加密演算来对通信方做身份认证，之后交换对称密匙作为会谈密匙(Session key)。这个会谈密匙是用来将通信两方交换的资料做边加密，保证两个应用间通信的保密性和可靠性，使客户与服务器应用之间的通信不被攻击者窃听.
SSL协议原理详解
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2.构建渲染树（Render Tree）。
3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。
JSON是一种纯字符串形式的数据，它本身不提供任何方法（函数），非常适合在网络中进行传输。JavaScript、PHP、Java、Python、C++等编程语言中都内置了处理JSON数据的方法。
JSON是基于JavaScript(Standard ECMA-2623 rd Edition-December1999)的一个子集，是一种开放的、轻量级的数据交换格式，采用独立于编程语言的文本格式来存储和表示数据，易于程序员阅读与编写，同时也易于计算机解析和生成，通常用于在Wb客户端（浏览器）与Web服务器端之间传递数据。
Json作为一种通用的数据格式，大家都可以使用json格式来进行数据的传输。
对象转化为Json
var jsonStr = JSON.stringify(对象);
json转对象
var jsonObj = JSON.parse(json字符串);
什么是JSONP？
首先提一下JSON这个既念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Wb应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分斋Q的架构都以JSON格式进行数据的传输。
那么JSONP是什么呢？
首先抛出浏览器同源策路Q这个概念，为了保证用户访问的安全，现代这刘览器使用了同源策路，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的，
USONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？
JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的s脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕
什么是响应式布局？响应式布局有几种方法？
【秋招面经】之神策数据第一个问题
localStorage、sessionStorage同一网站下共享问题
伪类: 用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
比如，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。
虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类
常见伪类::link,:visited,:hover,:active,:focus,:not(),:first-child,:last-child,:nth-child,:nth-last-child,:only-child,:target,:checked,:empty,:valid
伪元素:
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中
伪元素前面是两个冒号，E::first-line 伪元素。会创造出不存在的新元素，由于 css 对单冒号的伪元素也支持，单双冒号都支持,但实际上现在css3 已经明确规定了伪类单冒号，伪元素双冒号的规则,用于区分它们
::before/:before在被选元素前插入内容::after/:after 在被元素后插入内容，其用法和特性与:before相似::placeholder 匹配占位符的文本，只有元素设置了placeholder 属性时，该伪元素才能生效
对于伪元素 :before和 :after 而言，属性 content 是必须设置的，它的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL
Proxy可以对整个对象进行代理，不需要像Object.defineProperty()那样递归遍历对象的每一个属性来为它们添加get、set达到监听效果。Vue3使用Proxy代替了Object.defineProperty()实现数据的劫持，优化了代码，减少了大部分性能。
栈和队列(Stack & Queue)
一文读懂堆与栈的区别
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制
电梯第一个人进来后，15秒后准时运送一次，这是节流
电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。
相同点：
都可以通过使用 setTimeout 实现
目的都是，降低回调执行频率。节省计算资源
不同点：
函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
应用场景：
防抖在连续的事件，只需触发一次回调的场景有：
• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有：
• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能
网络状态响应码用来表示网页服务器HTTP响应状态的3位数字代码。请求状态码如果1开头就是临时相应，2开头一般表示成功，3开头是重定向，4开头是客户端错误，5开头是服务器错误。平时常见的响应状态码包括：200（成功）、301（永久重定向）、302（临时重定向）、400（错误请求）、401（未授权）、403（禁止）、404（未找到）、500（服务器内部错误）、503（服务不可用）
css放上面js放下面的原因：1、在加载html生成DOM tree的时候，可以同时对DOM tree进行渲染，这样可以防止闪跳，白屏或者布局混乱；2、javascript加载后会立即执行，同时会阻塞后面的资源加载。
JS中数据对于存储可以分为两种数据类型：基本类型和引用类型
基本类型：Number，String，Boolean，Null，Undefined
这些类型的值存放在栈区，函数调用时传递的是变量的值(值)。
引用类型：Object，Array，Function
这些类型的对象存放在堆区，对象的地址存放在栈区，函数调用时传递的是对象的地址(址)。
【JavaScript面试】如何判断变量为对象或数组？
CSS之Display、Visibility和Opactity的区别
Vue中methods和computed的区别
Vue生命周期中mounted和created的区别
vue中的data为什么是一个函数？起到什么作用？
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。
父给子：props；
子给父：自定义事件；
任意组件通信：全局事件总线；
另外，vuex、插槽、路由传参、本地存储都是可以进行组件之间传值的。
https和http的区别
http1.0,http1.1和http2.0的区别
HTTPS建立连接详细过程
HTTP请求的完全过程
1、浏览器的地址栏输入URL并按下回车
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3、DNS解析URL对应的IP
4、根据P建TC连接（三次握手）
5、HTTP发起请求
6、服务器处理请求，浏览器接HTTP响应
7、渲染页面，构建DOM树
8、关闭TCP连接（四次挥手）
javascript中symbol类型的应用场景（意义）和使用方法
JS高级–（原型和原型链，函数四种调用模式，this的指向，箭头函数）
HashRouter的原理：
通过window.onhashchange方法获取新URL中hash值，再做进一步处理
HistoryRouter的原理：
通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理
JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容
【浏览器的回流与重绘 (Reflow & Repaint)】
从重绘重排角度讲解transform的动画性能
原理:
作用:
javaScript之常用设计模式（工厂模式、单例模式、观察者模式、装饰者模式）
webpack从启动到结束会依次执行以下流程：
优化方式：
压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩css
利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码