H5 的新特性有哪些？C3 的新特性有哪些？

H5 新特性

1. 拖拽释放(Drap and drop) API ondrop
2. 自定义属性 data-id
3. 语义化更好的内容标签(header,nav,footer ,aside, article, section)
4. 音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay
5. 画布 Canvas

CSS3 新特性

1. 颜色: 新增 RGBA , HSLA 模式
2. 文字阴影(text-shadow)
3. 边框: 圆角(border-radius) 边框阴影 : box-shadow
4. 盒子模型: box-sizing
5. 背景:background-size background-origin background-clip
6. 渐变: linear-gradient , radial-gradient
7. 过渡 : transition 可实现动画
8. 自定义动画 animate @keyfrom
9. 媒体查询 多栏布局 @media screen and (width:800px) {…}
10. border-image
11. 字体图标 font-face
12. 弹性布局 flex

CSS关于/deep/的用法解释

vue 中组件的样式是有 作用域 的，默认是全局样式。

如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style 添加 scoped,使它的css只作用于当前组件的元素

如何使一个盒子水平垂直居中

1. 定位，left，top各为50%，margin-left和margin-top各为宽高的负二分之一

利用定位 + margin

2. 定位，left，top各为50%，transform为负50%

利用 transform

3. flex布局，给父元素justify-content: center;align-items: center;

利用 display：flex 

4. 定位，上下左右都为0，margin:auto

如何垂直居中一个 img

哪些是块级元素那些是行内元素，各有什么特点

DOCTYPE(⽂档类型) 的作⽤?

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

说说你对语义化的理解？列举 5 个语义化的标签

 src和href的区别?

src：是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

href：是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

1. 当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
2. 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)
 

 列举 5 个以上的 H5 事件？

CSS 中 link 和@import 的区别？

隐藏元素的方法有哪些?

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

link和@import的区别?

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

margin 和 padding 的使用场景?

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
• 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。

display:inline-block 什么时候会显示间隙？

• 有空格时会有间隙，可以删除空格解决；
• margin正值时，可以让margin使用负值解决；
• 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

z-index属性在什么情况下会失效?

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

CSS预处理器为什么使用?

css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

var、let 与 const区别

• 1.1 var 具有变量提升性质，let 与 const 没有。
• 1.2 var 不具块级作用域，let 与 const 具有块级作用域性质。
• 1.3 var 能重复声明，let 与 const 重复声明会报错。
• 1.4 var 全局声明变量会挂载在 window，let 与 const 不会。

场景:能用const的情况下尽量使用const，大多数情况使用let，避免使用var。 const > let > var const声明的好处，一让阅读代码的人知道该变量不可修改，二是防止在修改代码的过程中无意中修改了该变量导致报错，减少bug的产生

less和sass/scss

sass  3.0 后改为 scss

Less、Sass/Scss是什么?

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Sass和Less有什么区别？

1.编译环境不一样。Sass的安装需要Ruby环境，是在服务器端处理的。而Less需要引入 less.js来处理，然后Less代码输岀CSS到浏览器中；也可以在开发环境中使用Less，然后编译成CSS文件，直接放到项目中运行。

2.变量名不一样。Less中使用@，而Sass中使用$。

JavaScript 的基本类型有哪些？引用类型有哪些？

null 和 undefined 的区别？

null:空值，使用typeof运算得到 “object”
undefined：当一个声明了一个变量未初始化时，得到的就是undefined。

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，null值则是表示空对象指针

src 和 href 的区别是？

href和src都是用来引用外部资源的属性。例如：网址、图片、视频、css文件、js文件等。

区别

1.请求资源类型不同

href，超文本引用，用于建立文档与资源的联系，常用的有：link、a。

src，将其所指向的资源下载并应用到当前页面，常见的有script、img。

2.作用结果不同

href，用于文档与资源之间确立联系。

src，请求到的资源替换当前内容。

3.浏览器的解析不同

href，将资源解析成css文件，并行加载请求资源，不会阻塞对当前文档的处理。

src，会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。

Localstorage、sessionStorage、cookie 的区别

cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了 时间，cookie就会存放在硬盘里，过期才失效，每次http请求，header都携带cookie

localStorage(本地存储)：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，因此用作持久数据，不参与和服务器的通信

sessionStorage(会话存储): 关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
 

作用域

1、作用域

作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域

全局作用域就是Js中最外层的作用域

函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套

Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）

2、变量提升

每个var声明的变量，function声明的函数存在变量提升。let const不存在变量提升

在js中声明之前未定义，会在js的最上方会形成一个预解析池，用来存储声明了但没有先定义的变量名

3、作用域链：

函数内部访问变量时,优先使用自己内部的声明的变量 如果没有 尝试访问外部函数作用域的变量 如果外部函数的作用域也没有这个变量 继续往外找 直到找到这个全局  如果全局也没有 就报错
 

event 对象的常见应用？

1. event.preventDefault(); // 阻止默认行为，阻止 a 链接默认的跳转行为
2. event.stopPropagation(); // 阻止冒泡

简单说一下页面重绘和回流？

如何避免重排或重绘？

• 集中修改样式

• 使用文档碎片（DocumentFragment）

• 将元素提升为合成层

什么是内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在

哪些操作会造成内存泄漏？

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

2. 闭包

什么是闭包?

闭包就是一个作用域有权访问另外一个作用域的局部变量

闭包的优点: 延长外部函数局部变量的生命周期

闭包的缺点: 优点也是缺点,本应该销毁的变量 因为闭包的原因没有被销毁 长期存在 会出现内存泄露

使用场景 : 防抖、节流、函数套函数避免全局污染

display：none 与 visibility：hidden 的区别？

最常用的为 display:none 和 visibility:hidden

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

1.visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元 素会显示

2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可 以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验

4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

逻辑运算符以及他们的运算规则?

1.       && 逻辑与   两边都是true，才返回true，否则返回false

2.       || 逻辑或   两边只要有一个是true，就返回true，否则返回false

3.       ！ 逻辑非   用来取一个布尔值相反的值

typeof null 的结果是什么，为什么？

typeof null 的结果是Object。

在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中，共有五种数据类型：

什么是事件？

事件是文档和浏览器窗口中发生的特定的交互瞬间，事件就发生了。

一是直接在标签内直接添加执行语句，

二是定义执行函数。

事件类型分两种：事件捕获、事件冒泡。

事件捕获就是：网景公司提出的事件流叫事件捕获流，由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。

事件冒泡：IE提出的事件流叫做事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点。

什么是事件流?

事件流就是，页面接受事件的先后顺序就形成了事件流。

自定义事件

自定义事件，就是自己定义事件类型，自己定义事件处理函数。
 

JS执行机制

1.首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。

2.在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务

3.当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。

4.任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。

5.当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。
 

setTimeout与setInterval区别与机制

setTimeout()和setInterval()经常被用来处理延时和定时任务。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。

async/await是什么？

ES7 标准中新增的 async 函数，从目前的内部实现来说其实就是 Generator 函数的语法糖。

它基于 Promise，并与所有现存的基于Promise 的 API 兼容。

async 关键字

1. async 关键字用于声明⼀个异步函数（如 async function asyncTask1() {...}）

2. async 会⾃动将常规函数转换成 Promise，返回值也是⼀个 Promise 对象

3. async 函数内部可以使⽤ await

await 关键字

1. await 用于等待异步的功能执⾏完毕 var result = await someAsyncCall()

2. await 放置在 Promise 调⽤之前，会强制async函数中其他代码等待，直到 Promise 完成并返回结果

3. await 只能与 Promise ⼀起使⽤

4. await 只能在 async 函数内部使⽤

               

相较于 Promise，async/await有何优势？

async/await优点一：它做到了真正的串行的同步写法，代码阅读相对容易

async/await优点二：对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面

async/await优点三：同样的，处理复杂流程时，在代码清晰度方面有优势

async/await无所谓优缺点的特点一：无法处理promise返回的reject对象，要借助try...catch...

介绍 this 各种情况

typeof使用

for in 和 for of 的区别?

js 如何处理防抖和节流?

利用延时器

防抖和节流的区别?

防抖：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流：所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现，分别是时间戳版和定时器版。

get和post的区别?

get和post 区别

• GET 请求有长度限制;POST 请求对数据长度没有要求

• GET 请求是一个幂等的请求，一般 GET 请求用于对服务器资源不会产生影响的场景，比如说请求一个网页的资源。而 POST 不是一个幂等的请求，一般用于对服务器资源会产生影响的情景，比如注册用户这一类的操作。

• GET 请求可被缓存;POST 请求不会被缓存

• GET 是不安全的，因为URL是可见的; POST 较GET 安全性较高；

• GET从指定的资源请求数据；POST向指定的资源提交要被处理的数据

什么是 幂等性

幂等性：就是用户对于同一操作发起的一次请求或者多次请求的结果是一致的，不会因为多次点击而产生了副作用。举个最简单的例子，那就是支付，用户购买商品后支付，支付扣款成功，但是返回结果的时候网络异常，此时钱已经扣了，用户再次点击按钮，此时会进行第二次扣款，返回结果成功，用户查询余额发现多扣钱了，流水记录也变成了两条。在以前的单应用系统中，我们只需要把数据操作放入事务中即可，发生错误立即回滚，但是再响应客户端的时候也有可能出现网络中断或者异常等等。

GET 请求过程：

1. 浏览器发起请求 TCP 连接（第一次握手）

2. 服务器响应进行 TCP 连接（第二次握手）

3. 浏览器确认，并发送 GET 请求头和数据（第三次握手）

4. 服务器返回 200 OK响应

POST 请求过程：

1. 浏览器发起请求 TCP 连接（第一次握手）

2. 服务器响应进行 TCP 连接（第二次握手）

3. 浏览器确认，并发送 POST 请求头（第三次握手）

4. 服务器返回100 Continue响应

5. 浏览器发送数据

6. 服务器返回 200 OK响应

vue2和vue3的区别

1.双向绑定

Vue2使⽤的是Object.defineProperty()进⾏数据劫持，结合发布订阅的⽅式实现。

Vue3使⽤的是Proxy代理，使⽤ref或者reactive将数据转化为响应式数据

2.数据和方法的定义

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）

Vue2：

data() { return {}; }, methods:{ }
复制代码

Vue3：

数据和⽅法都定义在setup中，并统⼀进⾏return{}

3.获取props

vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){ console.log(‘props’,props) }

4.父组件传值

vue2：this.$emit()
vue3：setup(props,context){context.emit()}

URI和URL的区别是什么? 

常见HTTP状态码大全?

宏任务和微任务?

事件循环 event loop?

因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码时，如果遇到异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当异步事件执行完毕后，再将异步事件对应的回调加入到一个任务队列中等待执行。任务队列可以分为宏任务队列和微任务队列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去执行宏任务队列中的任务。

介绍下原型链?

JavaScript 原型： 每个对象都会在其内部初始化一个属性，就是 prototype(原型)

原型链：

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype 里找这个属性，这个 prototype 又会有自己的 prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

async和await的使用

• async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

什么是DNS 解析

DNS解析（域名解析服务器）

假定请求的是 www.baidu.com

a）首先会搜索浏览器自身的DNS缓存（缓存时间比较短，大概只有1分钟，且只能容纳1000条缓存）

b）如果浏览器自身的缓存里面没有找到，那么浏览器会搜索系统自身的DNS缓存

c）如果还没有找到，那么尝试从 hosts 文件里面去找

d）在前面三个过程都没获取到的情况下，就递归地去域名服务器去查找(就近查找)，

DNS优化两个方面：DNS缓存、DNS负载均衡 (准备多台dns服务器, 进行dns解析)

Tcp 与 Udp 的区别?

Tcp 是面向连接的,需要客户端与服务器端建立连接之后才可以进行通信(三次握手)  Udp 不是面向连接的.

传输数据的可靠性: UDP 传输数据,可能会丢包,尽可能交付原则.TCP 传输数据安全. UDP 可以一对一连接,也可以一对多连接,也可以对多对连接,也可以多对一连接,TCP 只能一对 45 一连接. UDP 消耗的资源比较少,TCP 由于要频繁三次握手,所以消耗的资源相对于 UDP 来说大一 些

从输入url 到浏览器显示页面发生了什么?

从浏览器输入网址 ，点击回车，到页面渲染完毕，经过了一下几个步骤：
1.DNS 解析域名 （找到要去哪里）
2. TCP 三次握手 （找到服务器之后要交流下，征求下服务器意见）
3. 浏览器发出请求 （服务器同意之后，发送请求）
4. 服务器处理请求并返回页面信息 （服务器收到请求之后，把请求内容返回）
5. 浏览器解析渲染 （拿到返回内容，开始渲染页面）

详细:

用户输入url并回车
浏览器进程检查url，组装协议，构成完整的url
浏览器进程通过进程间通信（IPC）把url请求发送给网络进程
网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程
如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：
5.1.进行DNS解析，获取服务器ip地址，端口
5.2.利用ip地址和服务器建立tcp连接
5.3.构建请求头信息
5.4.发送请求头信息
5.5.服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
网络进程解析响应流程；
6.1.检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步，如果是200，则继续处理请求。
6.2.200响应处理，检查响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行；如果是html则通知浏览器进程准备渲染进程准备进行渲染
准备渲染进程；浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程
传输数据、更新状态
8.1.渲染进程准备好后，浏览器向渲染进程发起“提交文档”的消息，渲染进程接收到消息和网络进程建立传输数据的“管道”
8.2.渲染进程接收完数据后，向浏览器发送“确认提交”
8.3. 浏览器进程接收到确认消息后更新浏览器界面状态：安全、地址栏url、前进后退的历史状态、更新web页面。
 

谈谈你对媒体查询的理解?

响应式适配: 根据不同的屏幕尺寸, 显示不同的效果

媒体查询是css3 开始加入的一个功能 它可以进行响应式适配展示

你对盒子模型的理解是什么样的？

浏览器的渲染引擎在对网页文档进行布局时，会按照 “CSS 基础盒模型” （CSS Basic Box Model）标准，将文档中的 所有元素都表示为一个个矩形的盒子，再用 CSS 去决定这些盒子的大小尺寸、显示位置、以及其他属性（如颜色、 背景、边框等）。

下图就是盒模型示意图，它由几部分组成： 内容（content） 内边距（padding） 边框（border） 外边距（margin）

解释下什么是变量声明提升？

变量提升（hoisting），是负责解析执行代码的 JavaScript 引擎的工作方式产生的一个特性。

JS引擎在运行一份代码的时候，会按照下面的步骤进行工作：

        1. 首先，对代码进行预解析，并获取声明的所有变量

        2. 然后，将这些变量的声明语句统一放到代码的最前面

        3. 最后，开始一行一行运行代码

谈谈你对 BFC 的理解？

什么是 BFC：

BFC 的全称是 Block Formatting Context，块级格式化上下文。这是一个用于在盒模型下布局块级盒子的独立渲染区 域，

将处于BFC区域内和区域外的元素进行互相隔离。

何时会形成 BFC：

满足下列条件之一就可触发BFC：

        HTML根元素

        position 值为 absolute 或 fixed

        float 值不为 none

        overflow 值不为 visible

        display 值为 inline-block 、 table-cell 或 table-caption

webpack打包过程

初始化参数: 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。

开始编译: 根据我们的webpack配置注册好对应的插件调用 compile.run 进入编译阶段,在编译的第一阶段是 compilation，他会注册好不同类型的module对应的 factory

编译模块: 进入 make 阶段，会从 entry 开始进行两步操作：

        第一步是调用 loaders 对模块的原始代码进行编译，转换成标准的JS代码,
        第二步是调用 acorn 对JS代码进行语法分析，然后收集其中的依赖关系。每个模块都会记录          自己的依赖关系，从而形成一颗关系树。
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
 

箭头函数与普通函数的区别?

1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数
3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。
4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。
5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个
arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
6、其他区别：箭头函数不具有 prototype 原型对象。箭头函数不具有 super。
箭头函数不具有 new.target
 

从用户请求到浏览器渲染的过程大致如下

1.用户输入域名，然后DNS解析成IP地址

2.浏览器根据IP地址请求服务器

3.服务器响应http请求，并返回给浏览器

4.浏览开始渲染：

　　。根据html，生成DOM TREE

　　。根据css，生成CSS TREE

　　。将DOM TREE和CSS TREE结合生成Render Tree

　　。根据Render Tree渲染页面

　　。遇到<script>则暂停渲染，优先执行js，然后再继续渲染（因为js执行和渲染引擎公用一个进程，原因是js可能做了一些dom操作，一般会把js放到页面的底部）

　　 直至把Render Tree渲染页面

什么是BFC

1、BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。
2、BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

哪些元素会产生BFC

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、 display为inline-block, table-cell, table-caption, flex, inline-flex
5、 overflow不为visible

判断数据类型的几种方式

typeof

typeof 返回的值都是字符串类型

 instanceof

instanceof 是用来 判断数据是否是某个对象的实例，返回一个布尔值

 constructor

使用 constructor 可以查看目标构造函数，也可以进行数据类型判断。但是不能判断 null 和 undefined，因为这两个特殊类型没有其对应的包装对象。constructor和instanceof 类似，constructor 返回结果的是自己的构造函数，而 instructor 则是自己与构造函数比较返回布尔值

状态码 304

状态码 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有修改过，则不需要返回全量的数据。

 

hash模式

优缺点：

优点：hash模式兼容性很强，刷新浏览器，页面还会存在

缺点：地址栏不优雅，有#存在，不利于seo，记忆困难

history路由模式

优缺点：

缺点：history模式，兼容性较差，刷新页面，页面会404，需要服务器端配置支持

优点：地址栏更优雅，方便记忆，有利于有seo

理解 async/await?

async await 是用来解决异步的

使用关键字 async 来表示，在函数内部使用 await 来表示异步

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数

当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内

v-if与v-show

都是用来控制元素的显示、隐藏，区别就在于它们各是通过什么去控制元素的显示、隐藏

v-show

通过css样式中的dispaly：none；控制元素显示、隐藏

v-if

通过控制vue的虚拟dom树上的节点，来联动控制真实dom上的节点，从而控制元素的显示、隐藏

vue中的v-show和v-if是做什么用的，两者区别是什么 ?

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。 

为什么避免v-if和v-for一起使用

我们都知道v-if和v-for是vue开发工程中十分常用的方法，
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于 每个 v-for 循环中，即先运行 v-for 的循环，然后在每一个 v-for 的循环中，再进行 v-if 的条件对比，会造成性能问题，影响速度

为了避免这个问题，在此场景下你可以用计算属性代替： 

this.$nextTick()的理解及使用

将回调延迟到下次 DOM 更新循环之后执行。

他就是等你
页面dom中的数据渲染完之后，再执行回调函数中的方法。

编写一个方法去掉数组里面重复的内容？

 1. indexOf方法去重

数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在res中，则将其push进res中，最后将res返回即可获得去重的数组

2.Set与解构赋值去重

ES6中新增了数据类型Set，Set的一个最大的特点就是数据不重复。Set函数可以接受一个数组（或类数组对象）作为参数来初始化，利用该特性也能做到给数组去重

3. Array.from与set去重

Array.from方法可以将Set结构转换为数组结果，而我们知道set结果是不重复的数据集，因此能够达到去重的目的

CSS中的 position属性sticky详解

在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性

position:sticky 使用条件

1.父元素不能overflow:hidden或者overflow:auto属性。 2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

Vue的基本原理?

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

双向数据绑定的原理?

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

Computed 和 Watch 的区别

对于Computed：

• 它支持缓存，只有依赖的数据发生了变化，才会重新计算
• 不支持异步，当Computed中有异步操作时，无法监听数据的变化
• computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
• 如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。

对于Watch：

• 它不支持缓存，数据变化时，它就会触发相应的操作
• 支持异步监听
• 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
• 当一个属性发生变化时，就需要执行相应的操作
• 监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
  • immediate：组件加载立即触发回调函数
  • deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。

Computed 和 Methods 的区别

可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

• computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
• method 调用总会执行该函数。

Vue的优点

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

对SSR的理解

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端

SSR的优势：

• 更好的SEO
• 首屏加载速度更快

SSR的缺点：

• 开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子；
• 当需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境；
• 更多的服务端负载。

对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点，SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

常见的HTTP请求头和响应头

HTTP Request Header 常见的请求头：

• Accept:浏览器能够处理的内容类型
• Accept-Charset:浏览器能够显示的字符集
• Accept-Encoding：浏览器能够处理的压缩编码
• Accept-Language：浏览器当前设置的语言
• Connection：浏览器与服务器之间连接的类型
• Cookie：当前页面设置的任何Cookie
• Host：发出请求的页面所在的域
• Referer：发出请求的页面的URL
• User-Agent：浏览器的用户代理字符串

HTTP Responses Header 常见的响应头：

• Date：表示消息发送的时间，时间的描述格式由rfc822定义
• server:服务器名称
• Connection：浏览器与服务器之间连接的类型
• Cache-Control：控制HTTP缓存
• content-type:表示后面的文档属于什么MIME类型

常见的HTTP请求方法?

• GET: 向服务器获取数据；
• POST：将实体提交到指定的资源，通常会造成服务器资源的修改；
• PUT：上传文件，更新数据；
• DELETE：删除服务器上的对象；
• HEAD：获取报文首部，与GET相比，不返回报文主体部分；
• OPTIONS：询问支持的请求方法，用来跨域请求；
• CONNECT：要求在与代理服务器通信时建立隧道，使用隧道进行TCP通信；
• TRACE: 回显服务器收到的请求，主要⽤于测试或诊断。

 HTTP和HTTPS协议的区别?

HTTP和HTTPS协议的主要区别如下：

• HTTPS协议需要CA证书，费用较高；而HTTP协议不需要；
• HTTP协议是超文本传输协议，信息是明文传输的，HTTPS则是具有安全性的SSL加密传输协议；
• 使用不同的连接方式，端口也不同，HTTP协议端口是80，HTTPS协议端口是443；
• HTTP协议连接很简单，是无状态的；HTTPS协议是有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP更加安全。

HTTP请求报文的是什么样的？

请求报⽂有4部分组成:

• 请求⾏
• 请求头部
• 空⾏
• 请求体

(1) 请求⾏包括：请求⽅法字段、URL字段、HTTP协议版本字段。它们⽤空格分隔。例如，GET /index.html HTTP/1.1。

(2) 请求头部:请求头部由关键字/值对组成，每⾏⼀对，关键字和值⽤英⽂冒号“:”分隔

 HTTP响应报文的是什么样的？

请求报⽂有4部分组成:

• 响应⾏
• 响应头
• 空⾏
• 响应体

如何防御 CSRF 攻击？

进行同源检测

线程和进程的区别？

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。 一个进程可以有多个线程。线程又叫做轻量级进程。

同步和异步的区别?

• 同步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。
• 异步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。

什么是vuex？

vuex是一个专门为vue.js应用程序开发得状态管理模式，vuex存放得状态是响应式的，更改状态只有唯一的途径显示的提交（commit）触发mutation更改state

由哪几部分组成

State vue的状态管理，驱动应用的数据源

Mutations 同步操作 它是唯一可以直接更改state状态，通过提交commit触发mutation更改state

Actions 异步操作 它不能直接改变state而是需要触发mutation来更改state，它可以任意包含异步操作

Getters 计算属性 类似于vue组件中的computed，可以过滤，处理state，结果也会缓存，只有当依赖值发生改变才会从新计算

Modules 模块 支持模块化 让每个模块都有自己的state，mutation，action，getter，甚至可以嵌套子模块

map辅助函数

mapActions：

• 在组件内导入

import { mapActions } from ‘vuex’

mapGetters import { mapGetters} from ‘vuex’

其他的mapState，mapMutations也是一样的操作

数据持久化

vuex里面存放的数据，页面一经刷新会丢失：
解决办法：存放在localStorage或则SessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取，在app.vue根组件的created里面判断是否丢失，在进行上面的操作；
vuex-persistedstate插件
 

为什么需要虚拟DOM，它有什么好处？

web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应某个节点发生了变化。
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作DOM中有十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地一个js中，最终将这个js对象一次性attach 到DOM树上，在进行后续操作。避免大量无谓的计算量。所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反应在js对象（虚拟DOM）上，操作内存中的js对象的速度显然要更快，等更新完成之后，再将最终的js对象映射成真实的DOM，交由浏览器去绘制。

单vue文件的好处?

独立的作用域 可以不用担心变量重名的问题 css类也可以不用担心

V-for的更新监测

能改变原数组的方法

push()   pop()  shift()   unshift()   splice()   sort()   reverse()

不能改变原数组的方法

map()  foreach()  filter()  concat()  slice()

filter()方法

let arr = [ 1, 3, 4, 7, 22, 42, 44]

let newArr = arr.filter(function(item)=>{

        return item >5  //过滤大于5的数组

})

console. log (7, 22, 42, 44)

filter返回的是一个新数组 不会改变原数组

JavaScript的concat方法

要注意,concat返回的是一个浅拷贝

every()方法

every 方法会对数组的每一项都进行一次callback 回调函数，如果所有的元素都通过callback函数的测试，就返回true 否则返回 false

Map方法

map() 方法 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 不会改变原始数组。

includes()方法

includes() 判断字符串是否包含参数字符串，返回boolean值。

startsWith() / endsWith()，判断字符串是否以参数字符串开头或结尾。返回boolean值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置。

slice()方法

slice() 方法返回一个新的数组对象, 原始数组不会被改变。

const arr = [' 1,2,3,4,5,6']

console.log(slice(2))   // 3,4,5,6

console.log(slice(2,3))   //3

splice()方法

array.splice(开始, 结束, 插入)

array方法

unshift:头部添加元素

shift:删除头部元素

push:尾部添加元素

pop:删除尾部元素

indexOf

都接受两个参数：查找的值、查找起始位置

不存在，返回 -1 ；存在，返回位置。

indexOf 是从前往后查找， lastIndexOf 是从后往前查找。

 lastIndexOf

forEach()方法

forEach() 方法对数组的每个元素执行一次给定的函数

Array.isArray()

用于确定传递的值是否是一个 Array

join()

方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

 reverse() 

方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

findIndex() 方法

返回 在数组中查找符合条件第一个元素的index索引。

=== 和 ==的区别？

区别

===：三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边 的值，值相同则返回 true，若等号两边的值类型不同时直接返回 false。也就是说三个等号 既要判断值也要判断类型是否相等

==：两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同 时会发生类型的自动转换，转换为相同的类型后再作比较。也就是说两个等号只要值相等 就可以

dom 事件模型？

DOM 事件模型。

DOM 事件模型分为两种：事件捕获和事件冒泡。

事件捕获以点击事件为例，同类型事件会由根元素开始触发，向内传播，一直到目标元素。 从外到内依次触发：根—目标的祖先素—目标的父元素—目标元素

事件冒泡和事件捕获截然相反。发生点击事件时，事件会从目标元素上开始触发，向外传 播，一直到根元素停止。从内到外依次触发：目标元素—目标元素的父元素—父元素的父元素— 根

事件传播

事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程。

优先级：先捕获，再冒泡。

两种传播方式的来源：W3C 推行 DOM2 级事件之前网景和 IE 在打架，网景用的事件传播方 式是捕获，IE 用的事件传播方式是冒泡

event 对象的常见应用？

1、event.preventDefault(); // 阻止默认行为，阻止 a 链接默认的跳转行为

2、event.stopPropagation(); // 阻止冒泡

事件执行过程

事件捕获过程：当我们点击 TEXT 时，首先是 window->document->body->div->text.这 个过程称为事件捕获，W3C 浏览器的标准执行流程。

事件冒泡过程：text->div->body->document->window.这个过程称为事件冒泡。IE 浏览 器只支持冒泡，不支持捕获。W3C 浏览器先执行捕获，后执行冒泡 

事件

事件是HTML⽂档或浏览器窗⼝中发⽣的⼀些特定的交互瞬间。

事件流

⼜称为事件传播，是⻚⾯中接收事件的顺序。DOM2级事件规定的事件流包括了3个阶段：

• 事件捕获阶段（capture phase）

• 处于⽬标阶段（target phase）

• 事件冒泡阶段（bubbling phase）

浏览器是如何进行界面渲染的？

1. 获取 HTML ⽂件并进⾏解析，生成一棵 DOM 树（DOM Tree）

2. 解析 HTML 的同时也会解析 CSS，⽣成样式规则（Style Rules）

3. 根据 DOM 树和样式规则，生成一棵渲染树（Render Tree）

4. 进行布局（Layout），即为每个节点分配⼀个在屏幕上应显示的确切坐标位置

5. 进⾏绘制（Paint），遍历渲染树节点，调⽤ GPU 将元素呈现出来

说几个 ES6 的新增方法

1、新增声明命令 let 和 const

2、模板字符串（Template String）

3.   import 和 export

4.   Promise 对象

5.   解构赋值

6.   async、await

7.   Symbol

symbol 是es6 加入的，是一个基本数据类型，它代表的是一个独一无二的值，SYMBOL 值是由 SYMBOL函数生成，也就是说现在我们定义对象的属性名字可以是原有的字符串 也可以是 symbol 类型的，symbol 可以保证不与其他属性名冲突，减少了bug的产生，

谈谈你对模块化开发的理解？

我对模块的理解是，一个模块是实现一个特定功能的一组方法。在最开始的时候，js 只实现一些简单的功能，所以并没有模块的概念 ，但随着程序越来越复杂，代码的模块化开发变得越来越重要。

由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，几个函数作为一个模块，但是这种方式容易造成全局变量的污 染，并且模块间没有联系。

后面提出了对象写法，通过将函数作为一个对象的方法来实现，这样解决了直接使用函数作为模块的一些缺点，但是这种办法会暴露所 有的所有的模块成员，外部代码可以修改内部属性的值。

现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。

js 的几种模块规范？

第一种是 CommonJS 方案

第二种是 AMD 方案

第三种是 CMD 方案

第四种方案是 ES6 提出的方案，使用 import 和 export 的形式来导入导出模块。

Split（）和 join（）的区别

Split()是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里 即切割成数组的形式； join() 是把数组中的字符串连成一个长串，可以大体上认为是 Split()的逆操

使用箭头函数应注意什么/箭头函数和普通函数的区别 

区别

用了箭头函数，this 就不是指向 window，而是父级（指向是可变的）

不能够使用 arguments 对象

不能用作构造函数，这就是说不能够使用 new 命令，否则会抛出一个错误

箭头函数没有自己的this

箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

谈谈你对MVVM的认识？

先说mvc：所有通信都是单向的：提交一次反馈一次，通信一次相互制约。

视图（View）：用户界面。（传送指令到 Controller）
控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Model 改变状态）
模型（Model）：数据保存（将新的数据发送到 View，用户得到反）

优点

1. 实现了视图（View）和模型（Model）的分离，降低代码耦合、提⾼视图或逻辑的复⽤性

2. 提⾼了可测试性：ViewModel 的存在可以帮助开发者更好地编写测试代码

3. 能⾃动更新 DOM：利⽤双向绑定，数据更新后视图⾃动更新，让开发者从繁琐的⼿动操作 DOM 中解放出来

缺点

1. Bug 很难被调试：因为使⽤了双向绑定的模式，当我们看到界⾯发生异常了，有可能是 View 的代码产生的 Bug，也有可能是Model 代码的问题。数据绑定使得⼀个位置的 Bug 被快速传递到别的位置，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写在 View 模版中的，它们没办法打断点进行 Debug

2. 在⼀个⼤的模块中 Model 也会很⼤，虽然使⽤上来说⽅便了，也能很容易的保证了数据的⼀致性，但如果⻓期持有不释放内存，就会造成更多的内存消耗

3. 对于⼤型的图形应⽤程序，视图状态较多，ViewModel 的构建和维护的成本都会⽐较⾼

 

对Promise的理解?

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

（1）Promise的实例有三个状态:

• Pending（进行中）
• Resolved（已完成）
• Rejected（已拒绝）

当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。

（2）Promise的实例有两个过程：

• pending -> fulfilled : Resolved（已完成）
• pending -> rejected：Rejected（已拒绝）

注意：一旦从进行状态变成为其他状态就永远不能更改状态了。

Promise的特点：

• 对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来——“承诺”；
• 一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。

Promise的缺点：

• 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
• 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

总结： Promise 对象是异步编程的一种解决方案，最早由社区提出。Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。

状态的改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

注意： 在构造 Promise 的时候，构造函数内部的代码是立即执行的

为何在v-for中使用key

在v-for中必须使用key,key的取值不能是index和random.

使用key的原因：

在diff算法中通过tag和key来判断，是否为sameNode,减少渲染次数，提升渲染的性能

Vue组件如何通讯

父子组件：props与this.$emit

自定义事件event.$on event.$emit

vuex页面刷新数据丢失问题的四种解决方式

为什么说刷新页面vuex的数据会丢失

刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

1. vuex-persist

（1）安装 vuex-persist

（2）在store文件夹里的index.js中引入vuex-persist并配置相关代码

2. 用sessionStorage localStorage

将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。

双向数据绑定v-model的实现原理

input元素的value=this.msg

绑定input事件this.msg=$event.target.value

data更新触发render

Vuex中action和mutation有何区别

action中处理异步，mutation不可以

mutation做原子操作

action可以整合多个mutation

用index作为key可能会引发的问题?

  1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ===> 界面效果没问底，但效率低

  2、如果结构中还包含输入类的DOM：会产生错误DOM更新 ===> 界面有问题

Vue 组件中 data 为什么必须是函数？

   保证组件的独立性和可复用性，data是一个函数，组件实例化的时候将会调用这个函数，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

vue优点和缺点

优点：

1.组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文 件里编写 html\css（scoped 属性配置 css 隔离）\js 并且配合 Vue-loader 之后，支 持更强大的预处理器等功能

2.强大且丰富的 API 提供一系列的 api 能满足业务开发中各类

3.由于采用虚拟 dom，让 Vue SSR(服务器渲染) 先天就足

5.生态好，社区活跃 

缺点： 

1.不利于SEO
SEO是Search Engine Optimization的缩写，意思是“搜索引擎优化”，搜索引擎的基础爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。而vue里面的大部分数据是存在于js代码里面的，也就是说，如果一个单页应用，html在服务器端还没有渲染出所有数据，在浏览器才渲染出所有数据，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。
 

2.不支持IE8及以下的浏览器

vue的底层原理使用了Object.defineProperty，这是es5的特性，但是IE8及以下几乎不支持es5，并且Vue需要Promise的支持，IE8同样不支持Promsie。

vuex的State特性是？

    state属性是Vuex中用于存放组件之间共享的数据；也就是说，我们把一些组件之间共享的状态主要存放在state属性中；它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

computed与watch的区别?

1、computed擅长处理的场景：一个数据受多个数据影响；watch擅长处理的场景：一个数据影响多个数据。

2、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

3、是否调用缓存：computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作。

4、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

5、computed不支持异步 ，当computed内有异步操作时无效，无法监听数据的变化;而watch支持异步。

6、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

介绍一下Vue的生命周期?

  每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

将要创建 ===>调用beforeCreate函数
创建完毕 ===>调用created函数
将要挂载 ===>调用beforeMount函数
挂载完毕 ===>调用mounted函数
将要更新 ===>调用beforeUpdate函数
更新完毕 ===>调用updated函数
将要销毁 ===>调用beforeDestory函数
销毁完毕 ===>调用destroyed函数
 

vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

各个生命周期的作用

生命周期	执行时机
beforeCreate	在组件实例被创建之初、组件的属性⽣效之前被调用
created	在组件实例已创建完毕。此时属性也已绑定，但真实DOM还未⽣成，$el 还不可⽤
beforeMount	在组件挂载开始之前被调⽤。相关的 render 函数⾸次被调⽤
mounted	在 el 被新建的 vm.$el 替换并挂载到实例上之后被调用
beforeUpdate	在组件数据更新之前调⽤。发⽣在虚拟 DOM 打补丁之前
update	在组件数据更新之后被调用
activited	在组件被激活时调⽤（使用了 <keep-alive> 的情况下）
deactivated	在组件被销毁时调⽤（使用了 <keep-alive> 的情况下）
beforeDestory	在组件销毁前调⽤
destoryed	在组件销毁后调⽤

谈谈对Vue生命周期的理解？

每个 Vue 实例都有⼀个完整的⽣命周期：

1. 开始创建

2. 初始化数据

3. 编译模版

4. 挂载 DOM

5. 渲染、更新数据 => 重新渲染

6. 卸载

在Vue中网络请求应该放在哪个生命周期中发起？

可以在 mounted 或 created 这两个⽣命周期中调⽤发起网络请求。

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

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这⾥，如在这结束loading事件，异步请求也适宜在这⾥调⽤
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统⼀处理，在这⾥写上相应函数
beforeDestroy : 可以做⼀个确认停⽌事件的确认框
nextTick : 更新数据后⽴即操作dom
 

组件之间是怎么通信的

组件之间通信主要分为三种：父子传参，子父传参，兄弟传参。

1. 父子传参：父组件通过自定义属性的方式传参，通过props属性给子组件传参，子组件通过props属性去接收参数。
2. 子父传参：子组件通过自定义事件的方式传参，通过$emit去进行传参。

Vue.cli中怎样使用自定义的组件？

1. 在 components 目录新建组件文件
2. 在需要用到的页面import中导入
3. 使用component注册
4. 在 template 视图中使用组件标签

Vue 路由跳转的几种方式?

第一种方式：router-link （声明式路由）
第二种方式：router.push(编程式路由)
第三种方式：this.$router.push() (函数里面调用)
第四种方式：this.$router.replace() (用法同上,push)
第五种方式：this.$router.go(n)
 

Vue的路由实现：hash模式和history模式?

hash 模式 (默认)

工作原理: 监听网页的hash值变化 —> onhashchange事件, 获取location.hash
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转
主要用在单页面应用(SPA)

history 模式

工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面.
其实一共有五种模式可以实现改变URL, 而不刷新页面.
需要后台配置支持, 如果输入一个并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首页
 

vue-router中导航守卫有哪些？

 全局前置守卫、路由独享守卫、组件内守卫

$nextTick的使用

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

 为什么使用Vue？

• 优点：轻量级的框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟dom、渐进式框架、数据和结构的分离、运行速度快、插件化
• 缺点：不支持ie8以下、社区没有angular和react丰富、缺乏高阶教程和文档、单页面应用不利用seo优化、首次加载时耗时多

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

vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

diff算法

diff 算法是一种通过同层的树节点进行比较的高效算法,比较方式：diff整体策略为：深度优先，同层比较

diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方，总的来说就是减少DOM，重绘和回流。
 

为什么要用虚拟DOM来描述真实的DOM呢？

创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。

vue.js的两个核心是什么?

灵活的组件应用，高效的数据绑定

vue双向数据绑定原理？

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。

keep-alive

keep-alive实现缓存组件

什么时候会用到缓存组件呢？

需要进行频繁切换，不需要重复渲染的情况下，可以考虑使用keep-alive,例如 Tab页签组件

这也是常见的一种优化的手段。

vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

vuex的State特性?

Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

通过mapState和mapGetters把全局 state 和 getters 映射到当前组件的 computed 计算属性中。
 

vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

vuex的Getter特性

• getters 可以对State进行计算操作，它就是Store的计算属性。

• 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

• 如果一个状态只在一个组件内使用，可以不用getters。

vue-loader 是什么？用途有哪些？

解析.vue文件的一个加载器。

用途：js 可以写es6、style样式可以scss或less、template可以加jade等。

vue常⽤的修饰符

.stop:等统⼀JavaScript中的event.stopPropagation(),防⽌事件冒泡
.prevent:等同于JavaScript中的event。preventDefault(),防⽌执⾏预设的⾏为(如果事件可取消，则取消该事件，⽽不停⽌事件的进⼀步
传播)；
.capture:与事件冒泡的⽅向相反，事件捕获由外到内
.self:只会触发⾃⼰范围内的事件，不包含⼦元素；
.once:只会触发⼀次。
 

vue的两个核⼼点

• 数据驱动：ViewModel，保证数据和视图的⼀致性
• 组件系统：应⽤类UI可以看做全部是由组件树构成的

请说下封装 vue 组件的过程？

        ⾸先，组件可以提升整个项⽬的开发效率。能够把页⾯抽象成多个相对独⽴的模块，解决了我们传统项⽬开发：效率低、难维护、复⽤性等问题。
        然后，使⽤Vue.extend⽅法创建⼀个组件，然后使⽤Vue.component⽅法注册组件。⼦组件需要数据，可以在props中接受定义。⽽⼦组件修改好数据后，想把数据传递给⽗组件。可以采⽤emit⽅法。
 

params和query的区别

⽤法：query要⽤path来引⼊，params要⽤name来引⼊，接收参数都是类似的，分别是this. $router.query.name 和 this.$router.params.name。url地址显⽰：query更加类似于我们ajax中get传参，params则类似于post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰

        

Vue⾥⾯router-link在电脑上有⽤，在安卓上没反应怎么解决？(项目遇到的问题)
        Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决

Vue2中注册在router-link上事件⽆效解决⽅法?  (项目遇到的问题)
        使⽤@click.native。原因：router-link会阻⽌click事件，.native指直接监听⼀个原⽣事件。

单页面应用和多页面应用区别以及优缺点

单页面：只有一个html页面，跳转方式是组件之间的切换

优点：跳转流畅、组件化开发、组件可复用、开发便捷

缺点：首屏加载过慢

多页面：有多个页面，跳转方式是页面之间的跳转

优点：首屏加载块

缺点：跳转速度慢

vue中如何解决跨域问题？

git怎么解决多人冲突？

是当前修改是左箭头方向，传入的是右箭头的方向，

中间用等于号分割，等号上边是当前修改（本地），下边是传入的修改（线上的代码）。

两人同时提交可能会出现冲突，解决办法是手动修改冲突

XSS攻击原理：

XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。

XSS避免方式：

1.url参数使用encodeURIComponent方法转义

2.尽量不是有InnerHtml插入HTML内容

3.使用特殊符号、标签转义符。
 

CSRF攻击（跨站请求伪造）

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

CSRF避免方式：

1. 添加验证码

2. 使用token

   • 服务端给用户生成一个token，加密后传递给用户

   • 用户在提交请求时，需要携带这个token

   • 服务端验证token是否正确

使用基于token的登录流程

1. 客户端使用用户名跟密码请求登录

2. 服务端收到请求，去验证用户名与密码

3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里

5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
 

说一下前端登录的流程?

初次登录的时候，前端调后调的登录接口，发送用户名和密码，后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token，和一个用户信息的值，前端拿到token，将token储存到Vuex中，然后从Vuex中把token的值存入浏览器Cookies中。把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页，有就跳转到相应的页面，我们应该再每次发送post/get请求的时候应该加入token，常用方法再项目utils/service.js中添加全局拦截器，将token的值放入请求头中 后端判断请求头中有无token，有token，就拿到token并验证token是否过期，在这里过期会返回无效的token然后有个跳回登录页面重新登录并且清除本地用户的信息

Vue常见性能优化方式

合理使用v-show与v-if

合理用computed

v-for时加上key

自定义事件,dom事件要及时的销毁

合理使用异步组件

合理使用keep-alive

data层级不要太深（递归次数多）

webpack的优化

前端通用的性能优化，如图片懒加载

使用ssr

前端优化

加载优化：
1.合并css，js
2.缓存一切可以缓存的资源
3.使用外联式引用css、js
4.减少cookie
css优化：
1.css写在头部，js写在尾部或异步
网络方面：
减少http请求

请说出三种减低页面加载时间的方法：

• 压缩css、js文件
• 合并js、css文件，减少http请求
• 外部js、css文件放在最底下
• 减少dom操作，尽可能用变量替代不必要的dom操作

如何提高页面性能优化?

内容方面:
        1.减少 HTTP 请求
        2.减少 DOM 元素数量
        3.使得 Ajax 可缓存
针对CSS:
        1.把 CSS 放到代码页上端
        2.从页面中剥离 JavaScript 与 CSS
        3.精简 JavaScript 与 CSS
        4.避免 CSS 表达式
针对JavaScript :

1. 脚本放到 HTML 代码页底部
2. 从页面中剥离 JavaScript 与 CSS
3. 精简 JavaScript 与 CSS
4. 移除重复脚本

介绍js的基本数据类型

Undefined、Null、Boolean、Number、String、

ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )

• 介绍js有哪些内置对象？
  Object Boolean String Number Function Array RegExp Date Error Math
• js常用的数组操作内置函数
  （添加）push、unshift、（删除）pop、shift、（转换）join、（排序）reverse、sort、（连接）concat......
• javascript中几种为false的值：
  undefined、null、false、0、NaN、""或''（空字符串）

说说你对原型（prototype）理解（必会）

JavaScript 是一种通过原型实现继承的语言与别的高级语言是有区别的，像 java，C#是通 过类型决定继承关系的，JavaScript 是的动态的弱类型语言，总之可以认为 JavaScript 中所有 都是对象，在 JavaScript 中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript 的对象中都包含了一个” prototype”内部属性，这个属性所对应的就是该对象的原型 “prototype”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原 型，Firefox 和 Chrome 内核的 JavaScript 引擎中提供了”proto“这个非标准的访问器（ECMA 新 标准中引入了标准对象原型访问器”Object.getPrototype(object)”） 原型的主要作用就是为了实现继承与扩展对象

介绍下原型链（解决的是继承问题吗）

JavaScript 原型： 每个对象都会在其内部初始化一个属性，就是 prototype(原型) 原型链： 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会有自己的 prototype，于是就这样一直找下去， 也就是我们平时所说的原型链的概念 特点： JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己 的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变

介绍 this 各种情况

this 的情况：

1、以函数形式调用时，this 永远都是 window

2、以方法的形式调用时，this 是调用方法的对象

3、以构造函数的形式调用时，this 是新创建的那个对象

4、使用 call 和 apply 调用时，this 是指定的那个对象

5、箭头函数：箭头函数的 this 看外层是否有函数

如果有，外层函数的 this 就是内部箭头函数的 this

如果没有，就是 window

6、特殊情况：通常意义上 this 指针指向为最后调用它的对象。这里需要注意的一点就是 如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例

New 操作符具体干了什么呢？（必会)

1、创建一个空对象: 并且 this 变量引入该对象,同时还继承了函数的原型

2、设置原型链 空对象指向构造函数的原型对象

3、执行函数体 修改构造函数 this 指针指向空对象,并执行函数体

4、判断返回值 返回对象就用该对象,没有的话就创建一个对象

深拷贝和浅拷贝

一、数据类型存储

基本类型（保存在栈内存中）

引用类型（保存在堆内存中，引用数据类型的变量是一个指向堆内存中中实际对象的引用，存在栈中）

二、浅拷贝

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址下面简单实现一个浅拷贝

举例子:

Object.assign

Array.prototype.slice(), Array.prototype.concat()

使用拓展运算符实现的复制

Object.assign

三、深拷贝

深拷贝开辟一个新的栈，两个对象属性完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

常见的深拷贝方式有：

_.cloneDeep()

jQuery.extend()

JSON.stringify()

手写循环递归

_.cloneDeep()

jsonp的实现原理：

它是在文档中插入一个script标签，创建_callback方法，通过服务器配合执行_callback方法，并传入一些参数

document.write和innerHTML的区别

document.write会将页面上的所有内容清除包括标题。
innerHTML只会重写所属元素的内容，即<div>元素中的内容。

Http和Https区别（高频）

三次握手和四次挥手

什么是响应式

响应式就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？

• 定宽布局

• 一般移动端设计稿是640或者750的尺寸

移动端用过那些meta标签

<!--1:设置视口宽度 缩放比例--> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<!--2:忽略将数字变为电话号码--> <meta content="telephone=no" name="format-detection">

<!--3:忽略识别邮箱--> <meta name="format-detection" content="email=no" />

<!--4:IOS中Safari允许全屏浏览--> <meta content="yes" name="apple-mobile-web-app-capable">

移动端click 300毫秒延迟原因？

移动端浏览器会有一些默认的行为，比如双击缩放、双击滚动。这些行为，尤其是双击缩放，主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候，移动端浏览器会优先判断用户是否要触发默认的行为。

说一下常见的git操作

git branch 查看本地所有分支

git status 查看当前状态

git commit 提交

git branch -a 查看所有的分支

git branch -r 查看远程所有分支

git commit -am "init" 提交并且加注释

git remote add origin git@192.168.1.119:ndshow git push origin master 将文件给推到服务器上

git remote show origin 显示远程库origin里的资源

git push origin master:develop git push origin master:hb-dev 将本地库与服务器上的库进行关联

git checkout --track origin/dev 切换到远程dev分支

git branch -D master develop 删除本地库develop

git checkout -b dev 建立一个新的本地分支dev

git merge origin/dev 将分支dev与当前分支进行合并

git checkout dev 切换到本地dev分支

git remote show 查看远程库

git add . git rm 文件名(包括路径) 从git中删除指定文件

git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来

git config --list 看所有用户

git ls-files 看已经被提交的

git rm [file name] 删除一个文件 git commit -a 提交当前repos的所有的改变

git add [file name] 添加一个文件到git index git commit -v 当你用－v参数的时候可以看commit的差异

git commit -m "This is the message describing the commit" 添加commit信息

git commit -a -a是代表add，把所有的change加到git index里然后再commit git commit -a -v 一般提交命令

git log 看你commit的日志 git diff 查看尚未暂存的更新

git rm a.a 移除文件(从暂存区和工作区中删除)

git rm --cached a.a 移除文件(只从暂存区中删除)

git commit -m "remove" 移除文件(从Git中删除)

git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)

git diff --cached 或 $ git diff --staged 查看尚未提交的更新

git stash push 将文件给push到一个临时空间中

git stash pop 将文件从临时空间pop下来

webpack打包过程

1.从入口文件开始，分析整个应用的依赖树；
2.将每个依赖模块包装起来，放到一个数组中等待调用；
3.实现模块加载的方法，并把它放到模块执行的环境中，确保模块间可以相互调用；
4.把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数；

call 和 apply 的区别是什么？

call 和 apply 就是为了改变函数体内部 this 的指向。

区别是从第二个参数起，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

当参数明确时用call与apply都行, 当参数不明确时可用apply给合arguments