1.说说你对盒子模子的明白
当对一个文档举行布局（layout）的时间，欣赏器的渲染引擎会根据尺度之一的 CSS 底子框盒模子（CSS basic box model），将全部元素体现为一个个矩形的盒子（box）
一个盒子由四个部门构成：content、padding、border、margin
content，即现实内容，体现文本和图像
boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部门构成
padding，即内边距，打扫内容附近的地区，内边距是透明的，取值不能为负，受盒子的background属性影响
margin，即外边距，在元素外创建额外的空缺，空缺通常指不能放其他元素的地区
在CSS中，盒子模子可以分成：
W3C 尺度盒子模子
IE 怪异盒子模子
默认情况下，盒子模子为W3C 尺度盒子模子
尺度盒子模子
尺度盒子模子，是欣赏器默认的盒子模子
也就是，width/height 只是内容高度，不包罗 padding 和 border值
IE 怪异盒子模子
也就是，width/height 包罗了 padding和 border值
可以通过box-sizing: border-box;来设置为IE怪异盒子模子
2.css选择器有哪些？优先级？
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的全部元素
标签选择器（div），选择标签为div的全部元素
后代选择器（#box div），选择id为box元素内部全部的div元素
子选择器（.one>one_1），选择父元素为.one的全部.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的全部.two元素
群组选择器（div,p），选择div、p的全部元素
优先级
!important >内联 > ID选择器 > 类选择器 > 标签选择器
继续属性
在css中，继续是指的是给父元素设置一些属性，后代元素会主动拥有这些属性.
font-size, font-family, color
3.元素水平垂直居中的方法有哪些？假如元素不定宽高呢？
实现元素水平垂直居中的方式：
利用定位+margin:auto (开启定位后,离开文档流)
利用定位+margin:负值 (比方盒子100*100,定位top,left偏移后,偏右下方向,须要回-50)
利用定位+transform (定位top,left偏移后,偏右下方向,通过transform: translate(-50%,-50%))
table布局
flex布局
grid布局
4.怎么明白回流跟重绘？什么场景下会触发？
回流：布局引擎会根据各种样式盘算每个盒子在页面上的巨细与位置
重绘：当盘算好盒模子的位置、巨细及其他属性后，欣赏器根据每个盒子特性举行绘制
具体的欣赏器剖析渲染机制如下所示：
剖析HTML，天生DOM树，剖析CSS，天生CSSOM树
将DOM树和CSSOM树联合，天生渲染树(Render Tree)
Layout(回流):根据天生的渲染树，举行回流(Layout)，得到节点的多少信息（位置，巨细）
Painting(重绘):根据渲染树以及回流得到的多少信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上
当我们对 DOM 的修改引发了 DOM多少尺寸的厘革（比如修改元素的宽、高或隐藏元素等）时，欣赏器须要重新盘算元素的多少属性，然后再将盘算的结果绘制出来
当我们对 DOM的修改导致了样式的厘革（color或background-color），却并未影响其多少属性时，欣赏器不需重新盘算元素的多少属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘
回流这一阶段告急是盘算节点的位置和多少信息，那么当页面布局和多少信息发生厘革的时间，就须要回流
触发回流肯定会触发重绘
除此之外另有一些其他引起重绘运动：
颜色的修改
文本方向的修改
阴影的修改
下面给出制止回流的履历：
假如想设定元素的样式，通过改变元素的 class 类名 (尽大概在 DOM 树的最里层)
制止设置多项内联样式
应用元素的动画，利用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
制止利用 table 布局，table 中每个元素的巨细以及内容的改动，都会导致整个 table 的重新盘算
对于那些复杂的动画，对其设置 position: fixed/absolute，尽大概地使元素离开文档流，从而镌汰对其他元素的影响
利用css3硬件加快，可以让transform、opacity、filters这些动画不会引起回流重绘
制止利用 CSS 的 JavaScript 表达式
5.什么是响应式计划？响应式计划的根本原理是什么？如何做？
响应式网站计划（Responsive Web design）是一种网络页面计划布局，页面的计划与开辟应当根据用户运动以及装备情况(体系平台、屏幕尺寸、屏幕定向等)举行相应的响应和调解
响应式网站常见特点：
同时适配PC + 平板 + 手机等
标签导航在靠近手持终端装备时改变为经典的抽屉式导航
网站的布局会根据视口来调解模块的巨细和位置
实现方式:
媒体查询:
@mediascreen(min-width:375px)and(max-width:600px){
body{font-size:18px;}
}
百分比:
通过百分比单位 " % " 来实现响应式的结果
比如当欣赏器的宽度大概高度发生厘革时，通过百分比单位，可以使得欣赏器中的组件的宽和高随着欣赏器的厘革而厘革，从而实现响应式的结果
vw/vh:
vw体现相对于视图窗口的宽度，vh体现相对于视图窗口高度。 恣意层级元素，在利用vw单位的情况下，1vw都等于视图宽度的百分之一
rem:
在从前也讲到，rem是相对于根元素html的font-size属性，默认情况下欣赏器字体巨细为16px，此时1rem = 16px
响应式布局长处可以看到：
面对差异分辨率装备机动性强
可以或许快捷办理多装备体现顺应标题
缺点：
仅实用布局、信息、框架并不复杂的部门范例网站
兼容各种装备工作量大，服从低下
代码累赘，会出现隐藏无用的元素，加载时间加长
着实这是一种折中性子的计划办理方案，多方面因素影响而达不到最佳结果
肯定水平上改变了网站原有的布局布局，会出现用户肴杂的情况
6.假如要做优化，CSS进步性能的方法有哪些？
内联首屏关键CSS:
在打开一个页面，页面主要内容出如今屏幕的时间影响着用户的体验，而通过内联css关键代码可以或许使欣赏器在下载完html后就能立即渲染
异步加载CSS
资源压缩
公道利用选择器:
不要嵌套利用过多复杂选择器，最好不要三层以上
利用id选择器就没须要再举行嵌套
通配符和属性选择器服从最低，制止利用
创建公共样式类，把相同样式提取出来作为公共类利用，比如我们常用的打扫浮动等
镌汰利用昂贵的属性:
在页面发生重绘的时间，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低欣赏器的渲染性能
不要利用@import
不消css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费大概是超乎你的想象的
7.对前端工程师这个职位是怎么样明白的？它的远景会怎么样?
我以为前端工程师是最贴近用户的，是以用户需求为中心，通过差异的改进和切身段验来完成用户的需求，让用户的交互结果更加惬意，
从前前端的大概就写一些页面，很简单的工作，如今可以通过vue，react等框架来让交互结果更加抱负，也把后端的一些任务放到前端处理处罚，以是，前端不但仅要面对用户，还要面对，后端，产物司理，等所从前端并不范围于前端技能还要会一点后端，会一点产物， 每个前端职员每每都会往全栈的方向去发展，固然这也是我的一个目的，这就我对前端开辟职员的明白+
8.说说JavaScript中的数据范例？存储上的差异？
js的数据范例分为两类，一个是根本数据范例，一个是引用数据范例
根本数据范例有undefined、null、boolean、number、string、symbol
引用数据范例有 object
在js的实验过程中，告急有三种数据范例内存空间，分别是代码空间，栈空间，堆空间，此中的代码空间告急是存储可实验代码的，原始范例的数据值都是直接生存在栈中的，引用数据范例的值是存放在堆空间中的， 原始数据范例存储的是变量的值，而引用数据范例存储的是其在堆空间中的所在。
9.typeof 与 instanceof 区别
typeof 操纵符返回一个字符串，体现未经盘算的操纵数的范例
typeof 对于原始数据范例来说，除了null都可以准确的体现范例
对于引用数据范例来说，除了function函数，都会体现object
如许看来typeof它并不能准确的体现数据范例
instanceof 运算符用于检测构造函数的 prototype 属性是否出如今某个实例对象的原型链上,能判定这个对象是否是之前谁人构造函数天生的对象
typeof与instanceof都是判定命据范例的方法，区别如下：
typeof会返回一个变量的根本范例，instanceof返回的是一个布尔值
instanceof 可以准确地判定复杂引用数据范例，但是不能准确判定底子数据范例
而typeof 也存在毛病，它固然可以判定底子数据范例（null 除外），但是引用数据范例中，除了function 范例以外，其他的也无法判定
10.说说你对闭包的明白？闭包利用场景
闭包就是可以访问其他函数内部变量的函数，我们通常用它来界说私有化的变量和方法，创建一个闭包最简单的方法就是在一个函数内创建一个函数，它有三个特性是 函数内可以再嵌套函数，内部函数可以访问外部的方法和变量，方法和变量不会被垃圾接纳机制接纳
任何闭包的利用场景都离不开这两点：
创建私有变量
延伸变量的生命周期
11.bind、call、apply 区别？如何实现一个bind?
从上面可以看到，apply、call、bind三者的区别在于：
三者都可以改变函数的this对象指向
三者第一个参数都是this要指向的对象，假如假如没有这个参数或参数为undefined或null，则默认指向全局window
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
bind是返回绑定this之后的函数，apply、call 则是立即实验
实现bind的步调，我们可以分解成为三部门：
修改this指向
动态转达参数
兼容new关键字
12.说说你对事故循环的明白
起首，JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事故循环
在JavaScript中，全部的任务都可以分为
同步任务：立即实验的任务，同步任务一样平常会直接进入到主线程中实验
异步任务：异步实验的任务，比如ajax网络哀求，setTimeout定时函数等
从上面我们可以看到，同步任务进入主线程，即主实验栈，异步任务进入任务队列，主线程内的任务实验完毕为空，会去任务队列读取对应的任务，推入主线程实验。上述过程的不绝重复就事故循环
异步任务还可以细分为微任务与宏任务
微任务
当前（此次事故循环中）宏任务实验完，在下一个宏任务开始之前须要实验的任务,可以明白为回调事故。
常见的微任务有：
Promise.then
MutaionObserver
Object.observe（已废弃；Proxy 对象替换）
process.nextTick（Node.js）
宏任务
当前调用栈中实验的代码成为宏任务。
常见的宏任务有：
script (可以明白为外层同步代码)
setTimeout/setInterval
UI rendering/UI事故
postMessage、MessageChannel
setImmediate、I/O（Node.js）
13.DOM常见的操纵有哪些
1.查找节点. 2.创建节点. 3.添加新节点. 4.删除节点. 5.更新节点.
添加节点: parentNode.appendChild(existingChild)
innerHtml
创建节点：document.createElement(“元素名”)
删除节点：parentNode.removeChild(existingChild)删除已有的子节点，返回值为删除节点
更新节点：parentNode.replaceChild(newChild,existingChild)用新节点更换父节点中已有的子节点
innerHtml不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片断修改DOM节点内部的子树
ele.style.styleName = styleValue 修改样式
查找节点：document.getElementByid(“id属性值”) 返回拥有指定id的第一个对象的引用document.getElementsByClassName('class属性值');返回拥有指定class的对象聚集document.getElementsByTagName('标署名');返回拥有指定标署名的对象聚集document.getElementsByName('name属性值');返回拥有指定名称的对象联合document/element.querySelector('CSS选择器');仅返回第一个匹配的元素document/element.querySelectorAll('CSS选择器');返回全部匹配的元素
14.说说你对BOM的明白，常见的BOM对象你相识哪些？
一、是什么
BOM (Browser Object Model)，欣赏器对象模子，提供了独立于内容与欣赏器窗口举行交互的对象
其作用就是跟欣赏器做一些交互结果,比如如何举行页面的退却，进步，革新，欣赏器的窗口发生厘革，滚动条的滚动，以及获取客户的一些信息如：欣赏器品牌版本，屏幕分辨率
二、window
Bom的焦点对象是window，它体现欣赏器的一个实例
在欣赏器中，window对象有双重脚色，便是欣赏器窗口的一个接口，又是全局对象
因此全部在全局作用域中声明的变量、函数都会变成window对象的属性和方法
三、location
除了 hash之外，只要修改location的一个属性，就会导致页面重新加载新URL
location.reload()，此方法可以重新革新当前页面。这个方法会根据最有效的方式革新页面，假如页面自上一次哀求以来没有改变过，页面就会从欣赏器缓存中重新加载
四、navigator
navigator 对象告急用来获取欣赏器的属性，区分欣赏器范例。属性较多，且兼容性比力复杂
五、screen
生存的纯粹是客户端本事信息，也就是欣赏器窗口外貌的客户端体现器的信息，比如像素宽度和像素高度
六、history
history对象告急用来操纵欣赏器URL的汗青记载，可以通过参数向前，向后，大概向指定URL跳转
history.go() 汲取一个整数数字大概字符串参数：向迩来的一个记载中包罗指定字符串的页面跳转
history.forward()：向前跳转一个页面
history.back()：向后跳转一个页面
history.length：获取汗青记载数
15.Javascript本地存储的方式有哪些？区别及应用场景？
一、方式
javaScript本地缓存的方法我们告急陈诉以下四种：
cookie
Cookie，范例为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为相识决 HTTP无状态导致的标题
作为一段一样平常不高出 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和别的几个用于控制 cookie有效期、安全性、利用范围的可选属性构成
但是cookie在每次哀求中都会被发送，假如不利用 HTTPS并对其加密，其生存的信息很轻易被盗取，导致安全风险。
sessionStorage
sessionStorage和 localStorage利用方法根本划一，唯一差异的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据
localStorage
生命周期：长期化的本地存储，除非主动删除数据，否则数据是永久不会过期的
indexedDB
二、区别
关于cookie、sessionStorage、localStorage三者的区别告急如下：
存储巨细：cookie数据巨细不能高出4k，sessionStorage和localStorage固然也有存储巨细的限制，但比cookie大得多，可以到达5M或更大
有效时间：localStorage存储长期数据，欣赏器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前欣赏器窗口关闭后主动删除；cookie设置的cookie过期时间之前不绝有效，纵然窗口或欣赏器关闭
数据与服务器之间的交互方式，cookie的数据会主动的转达到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会主动把数据发给服务器，仅在本地生存
三、应用场景
在相识了上述的前端的缓存方式后，我们可以看看针对不对场景的利用选择：
标志用户与跟踪用户运动的情况，保举利用cookie
恰当长期生存在本地的数据（令牌），保举利用localStorage
敏感账号一次性登录，保举利用sessionStorage
存储大量数据的情况、在线文档（富文本编辑器）生存编辑汗青的情况，保举利用indexedDB
16.什么是防抖和节流？有什么区别？如何实现？
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次收效
防抖: n 秒后在实验该事故，若在 n 秒内被重复触发，则重新计时
本质上是优化高频率实验代码的一种手段,须要对这类事故举行调用次数的限制
二、区别
相同点：
都可以通过利用 setTimeout 实现
目的都是，降低回调实验频率。节流盘算资源
差异点：
函数防抖，在一段一连操纵竣事后，处理处罚回调，利用clearTimeout和 setTimeout实现。函数节流，在一段一连操纵中，每一段时间只实验一次，频率较高的事故中利用来进步性能
函数防抖关注肯定时间一连触发的事故，只在末了实验一次，而函数节流一段时间内只实验一次
17.如何通过JS判定一个数组
1.通过instanceof判定
let a = [];
a instanceofArray;//true
2.通过constructor判定
我们知道，实例的构造函数属性constructor指向构造函数，那么通过constructor属性也可以判定是否为一个数组。
let a = [1,3,4];
a.constructor === Array;//true
3.通过Object.prototype.toString.call()判定
Object.prototype.toString().call()可以获取到对象的差异范例，比方
let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true
4.通过Array.isArray()判定
Array.isArray() 用于确定转达的值是否是一个数组，返回一个布尔值。
let a = [1,2,3]
Array.isArray(a);//true
18.说说你对作用域链的明白
一、作用域
作用域，即变量（变量作用域又称上下文）和函数收效（能被访问）的地区或聚集
我们一样平常将作用域分成：
全局作用域
函数作用域
块级作用域
二、词法作用域
词法作用域，又叫静态作用域，变量被创建时就确定好了，而非实验阶段确定的。也就是说我们写好代码时它的作用域就确定了，JavaScript 依照的就是词法作用域
三、作用域链
当在Javascript中利用一个变量的时间，起首Javascript引擎会实验在当前作用域下去探求该变量，假如没找到，再到它的上层作用域探求，以此类推直到找到该变量或是已经到了全局作用域
19.JavaScript原型，原型链 ? 有什么特点？
一、原型
JavaScript 常被形貌为一种基于原型的语言——每个对象拥有一个原型对象
当试图访问一个对象的属性时，它不但仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末了
准确地说，这些属性和方法界说在Object的构造器函数（constructor functions）之上的prototype属性上，而非实例对象本身
二、原型链
原型对象也大概拥有原型，并从中继续方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它表明白为何一个对象会拥有界说在其他对象中的属性和方法
在对象实例和它的构造器之间创建一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法
下面作出总结：
一切对象都是继续自Object对象，Object 对象直接继续根源对象null
一切的函数对象（包罗 Object 对象），都是继续自 Function 对象
Object 对象直接继续自 Function 对象
Function对象的__proto__会指向本身的原型对象，终极还是继续自Object对象
20. 请表明什么是事故署理
一、是什么
事故署理，俗地来讲，就是把一个元素响应事故（click、keydown......）的函数委托到另一个元素
前面讲到，事故流的都会颠末三个阶段： 捕获阶段 -> 目的阶段 -> 冒泡阶段，而事故委托就是在冒泡阶段完成
事故委托，会把一个大概一组元素的事故委托到它的父层大概更外层元素上，真正绑定事故的是外层元素，而不是目的元素
当事故响应到目的元素上时，会通过事故冒泡机制从而触发它的外层元素的绑定事故上，然后在外层元素上去实验函数
从上面应用场景中，我们就可以看到利用事故委托存在两大长处：
镌汰整个页面所需的内存，提升团体性能
动态绑定，镌汰重复工作
21. 谈谈This对象的明白
一、界说
在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）
this 关键字是函数运行时主动天生的一个内部对象，只能在函数内部利用，总指向调用它的对象
二、绑定规则
根据差异的利用场所，this有差异的值，告急分为下面几种情况：
默认绑定:
严酷模式下，不能将全局对象用于默认绑定，this会绑定到undefined，只有函数运行在非严酷模式下，默认绑定才气绑定到全局对象
隐式绑定:
函数还可以作为某个对象的方法调用，这时this就指这个上级对象
new绑定:
通过构建函数new关键字天生一个实例对象，此时this指向这个实例对象
体现绑定:
apply()、call()、bind()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就体现改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数
三、箭头函数
在 ES6 的语法中还提供了箭头函语法，让我们在代码誊写时就能确定 this 的指向（编译时绑定）
箭头函数没有本身的this指向，它的this指向上一级作用域的this
不能改变this指向
四、优先级
综上，new绑定优先级 > 体现绑定优先级 > 隐式绑定优先级 > 默认绑定优先级
22. new操纵符具体干了什么
一、是什么
在JavaScript中，new操纵符用于创建一个给定构造函数的实例对象
从上面可以看到：
new 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性
new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链毗连了起来）
二、流程
从上面先容中，我们可以看到new关键字告急做了以下的工作：
创建一个新的对象obj
将对象与构建函数通过原型链毗连起来
将构建函数中的this绑定到新建的对象obj上
根据构建函数返回范例作判定，假如是原始值则被忽略，假如是返回对象，须要正常处理处罚
23.null，undefined 的区别
1 null：体现"没有对象"，即该处不应该有值
作为函数的参数，体现该函数的参数不是对象。
作为对象原型链的终点。
2 undefined：体现"缺少值"，就是此处应该有一个值，但是还没有界说
变量被声明白，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。
24.javascript 代码中的"use strict";是什么意思
利用 "use strict" 指令
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严酷条件下实验。
严酷模式下你不能利用未声明的变量。
25.同步和异步的区别
所谓单线程，就是指在JS引擎中负责表明和实验JavaScript代码的线程只有一个，一次只能完成一件任务。假如有多个任务，就必须列队，前面一个任务完成，再实验背面一个任务。假如一个任务耗时过长，那么背面的任务就必须不绝等候下去，会延误整个步伐。我们不妨叫它主线程
在JavaScript中，全部的任务都可以分为
同步任务：立即实验的任务，同步任务一样平常会直接进入到主线程中实验,就是后一个任务等候前一个任务竣事，然后再实验，步伐的实验次序与任务的分列次序是划一的、同步的。
异步任务：异步实验的任务，比如ajax网络哀求，setTimeout定时函数等,每一个任务有一个或多个回调函数（callback），前一个任务竣事后，不是实验后一个任务，而是实验回调函数，后一个任务则是不等前一个任务竣事就实验，以是步伐的实验次序与任务的分列次序是不划一的、异步的。
26.谈一谈箭头函数与平常函数的区别
一.箭头函数都是匿名函数
平常函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。
二.箭头函数不能用于构造函数，不能利用new
平常函数可以用于构造函数，以此创建对象实例。
三.箭头函数中this的指向差异
在平常函数中，this总是指向调用它的对象，假如用作构造函数，this指向创建的对象实例。
1.箭头函数本身不创建this
也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供本身利用。
2.联合call()，apply()方法利用
箭头函数联合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。
27.JS 数组和对象的遍历方式，以及几种方式的比力
一、遍历对象方法:
1.for...in
遍历输出的是对象自身的属性以及原型链上可罗列的属性
2.Object.keys()
遍历对象返回的是一个包罗对象自身可罗列属性的数组(不含Symbol属性).
3.Objcet.getOwnPropertyNames()
输出对象自身的可罗列和不可罗列属性的数组,不输出原型链上的属性
二.遍历数组方法
1.forEach
2.map
可以对遍历的每一项做相应的处理处罚,返回每次函数调用的结果构成的数组
3.for循环遍历
4.for...in
5.for...of(es6)
只遍历出value,不能遍历出下标,可遍历出Symbol数据范例的属性,此方法作为遍历全部数据布局的同一的方法
28.如何办理跨域标题
1.什么是跨域？
跨域：指的是欣赏器不能实验其他网站的脚本。它是由欣赏器的同源计谋造成的，是欣赏器对javascript施加的安全限制。
同源计谋：是指协议，域名，端口都要相同，此中有一个差异都会产生跨域；
1.CORS
跨域资源共享(CORS) 是一种机制，它利用额外的HTTP头来告诉欣赏器 让运行在一个 origin (domain) 上的 Web 应用被允许访问来自差异源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器差异的域、协议或端口哀求一个资源时，资源会发起一个跨域 HTTP 哀求。
2.Node 正向署理
署理的思绪为，利用服务端哀求不会跨域的特性，让接口和当前站点同域。
3.Nginx 反向署理
4.JSONP
JSONP告急就是利用了script标签没有跨域限制的这个特性来完成的。
5.Websocket
WebSocket规范界说了一种 API，可在网络欣赏器和服务器之间创建“套接字”毗连
6.window.postMessage
window.postMessage()方法可以安全地实现跨源通讯。通常，对于两个差异页面的脚本，只有当实验它们的页面位于具有相同的协议（通常为 https），端标语（443 为 https 的默认值），以及主机 (两个页面的模数Document.domain设置为相同的值) 时，这两个脚本才气相互通讯。
29.XML和JSON的区别
以下是JSON和XML之间的一些区别：
1、JSON是JavaScript Object Notation；XML是可扩展标志语言。
2、JSON是基于JavaScript语言；XML源自SGML。
3、JSON是一种体现对象的方式；XML是一种标志语言，利用标志布局来体现数据项。
4、JSON不提供对定名空间的任何支持；XML支持名称空间。
5、JSON支持数组；XML不支持数组。
6、XML的文件相对难以阅读和表明；与XML相比，JSON的文件非常易于阅读。
7、JSON不利用竣事标志；XML有开始和竣事标签。
8、JSON的安全性较低；XML比JSON更安全。
9、JSON不支持表明；XML支持表明。
10、JSON仅支持UTF-8编码；XML支持各种编码。
30.谈谈你对webpack的看法
webpack 是一个用于今世JavaScript应用步伐的静态模块打包工具
静态模块
这里的静态模块指的是开辟阶段，可以被 webpack 直接引用的资源（可以直接被获取打包进bundle.js的资源）
webpack的本事：
编译代码本事，进步服从，办理欣赏器兼容标题
模块整合本事，进步性能，可维护性，办理欣赏器频仍哀求文件的标题
万物皆可模块本事，项目维护性加强，支持差异种类的前端模块范例，同一的模块化方案，全部资源文件的加载都可以通过代码控制
31.webpack的打包原理
将根据文件间的依赖关系对其举行静态分析，然后将这些模块按指定规则天生静态资源，当 webpack 处理处罚步伐时，会递归地构建一个依赖关系图(dependency graph)，此中包罗应用步伐须要的每个模块，然后将全部这些模块打包成一个或多个 bundle。
从启动到竣事会依次实验以下三大步调：
初始化流程：从设置文件和 Shell 语句中读取与归并参数，并初始化须要利用的插件和设置插件等实验情况所须要的参数
编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地举行编译处理处罚
输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件体系
32.如何优化webpack打包速度
代码分割
高达 6M 的入口文件显然优劣常影响体验的，因此优化的第一步就是从代码分割开始。代码分割通过把项目中的资源模块按照我们计划的规则打包到差异的 bundle 中，从而降低应用的启动资本，进步响应速度。
速度优化
在前面的速度分析中我们已经知道了打包速度告急泯灭在 loader 的处理处罚上
很显然在开辟过程中举行 webpack 缓存是极其有须要的，我们在处理处罚样式文件和 js 文件的 loader 之前添加 cache-loader 将结果缓存到磁盘中，可以显着提升二次构建速度
33.说说webpack中常见的Loader？办理了什么标题？
loader 用于对模块的"源代码"举行转换，在 import 或"加载"模块时预处理处罚文件
webpack做的事变，仅仅是分析出各种模块的依赖关系，然后形成资源列表，终极打包天生到指定的文件中。
在webpack内部中，任何文件都是模块，不但仅只是js文件
默认情况下，在碰到import大概require加载模块的时间，webpack只支持对js 和 json 文件打包
像css、sass、png等这些范例的文件的时间，webpack则无能为力，这时间就须要设置对应的loader举行文件内容的剖析
关于设置loader的方式有三种：
设置方式（保举）：在 webpack.config.js文件中指定 loader
内联方式：在每个 import 语句中显式指定 loader
CLI 方式：在 shell 下令中指定它们
二、特性
这里继续拿上述代码，来讲讲loader的特性
从上述代码可以看到，在处理处罚css模块的时间，use属性中设置了三个loader分别处理处罚css文件
由于loader支持链式调用，链中的每个loader会处理处罚之前已处理处罚过的资源，终极变为js代码。次序为相反的次序实验，即上述实验方式为sass-loader、css-loader、style-loader
可以通过 loader 的预处理处罚函数，为 JavaScript 生态体系提供更多本事。用户如今可以更加机动地引入细粒度逻辑，比方：压缩、打包、语言翻译和更多其他特性
34.说说webpack中常见的Plugin？办理了什么标题？
Plugin（Plug-in）是一种盘算机应用步伐，它和主应用步伐相互交互，以提供特定的功能
是一种依照肯定规范的应用步伐接口编写出来的步伐，只能运行在步伐规定的体系下，由于其须要调用原纯净体系提供的函数库大概数据
webpack中的plugin也是云云，plugin赋予其各种机动的功能，比方打包优化、资源管理、情况变量注入等，它们会运行在 webpack 的差异阶段（钩子 / 生命周期），贯穿了webpack整个编译周期
35.说说你对promise的相识
Promise，译为允许，是异步编程的一种办理方案，比传统的办理方案（回调函数）更加公道和更加强大,办理了回调地狱的标题
刹时感受到promise办理异步操纵的长处：
链式操纵减低了编码难度
代码可读性显着加强
状态
promise对象仅有三种状态
pending（举行中）
fulfilled（已成功）
rejected（已失败）
特点
对象的状态不受外界影响，只有异步操纵的结果，可以决定当前是哪一种状态
一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时间都可以得到这个结果
Promise构造函数担当一个函数作为参数，该函数的两个参数分别是resolve和reject
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败
Promise构建出来的实例存在以下方法：
then()
then是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数
catch()
catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数
finally()
finally()方法用于指定不管 Promise 对象末了状态如何，都会实验的操纵
36.async函数是什么,有什么作用
async/await是什么？
async/await从字面意思上很好明白，async是异步的意思，await有等候的意思，而两者的用法上也是云云。async用于说明一个function是异步的，而await 用于等候一个异步方法实验完成。
也就是如许一个过程：
async 体现这是一个 async 函数，而 await 只能在这个函数内里利用。
await 体现在这里等候 await 背面的操纵实验完毕，再实验下一句代码。
await 背面紧跟着的最好是一个耗时的操纵大概是一个异步操纵（方法）。
async和await被称作是异步的终极办理方案
将异步操纵变成同步操纵
await可以阻塞当火线程，将异步操纵变成同步，被阻塞的线程并没有被空闲，而是去实验其他的操纵
开释非常(抛出非常)
await可以举行求值操纵，当await背面跟的是Promise时，假如Promise中的操纵是resolve(成功)，那么await获取的就是操纵成功时的返回值；假如Promise中的操纵是reject(失败)，await获取的就是操纵失败时的返回值，而且假如在await上加了try catch，是可以捕获到非常的
async的作用是将方法的返回值封装成Promise
37.有利用过vue吗，谈谈对vue的明白？
vue是什么
Vue.js是一个用于创建用户界面的渐进式开源JavaScript框架，也是一个创建单页应用的Web应用框架
Vue焦点特性
#数据驱动（MVVM)
MVVM体现的是 Model-View-ViewModel
Model：模子层，负责处理处罚业务逻辑以及和服务器端举行交互
View：视图层：负责将数据模子转化为UI展示出来，可以简单的明白为HTML页面
ViewModel：视图模子层，用来毗连Model和View，是Model和View之间的通讯桥梁
组件化
1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个同一的概念（组件）来实现开辟的模式，在Vue中每一个.vue文件都可以视为一个组件2.组件化的上风
降低整个体系的耦合度，在保持接口稳定的情况下，我们可以更换差异的组件快速完成需求，比方输入框，可以更换为日历、时间、范围等组件作具体的实现
调试方便，由于整个体系是通过组件组合起来的，在出现标题的时间，可以用清除法直接移除组件，大概根据报错的组件快速定位标题，之以是可以或许快速定位，是由于每个组件之间低耦合，职责单一，以是逻辑会比分析整个体系要简单
进步可维护性，由于每个组件的职责单一，而且组件在体系中是被复用的，以是对代码举行优化可得到体系的团体升级
#指令体系
表明：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
常用的指令
条件渲问鼎令 v-if
列表渲问鼎令v-for
属性绑定指令v-bind
事故绑定指令v-on
双向数据绑定指令v-model
38.你对SPA单页面的明白，它的优缺点分别是什么？如何实现SPA应用呢
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用步伐或网站的模子，它通过动态重写当前页面来与用户交互，这种方法制止了页面之间切换打断用户体验在单页应用中，全部须要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，大概根据须要（通常是为响应用户操纵）动态装载恰当的资源并添加到页面,页面在任何时间点都不会重新加载
单页应用优缺点
长处：
具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快，内容的改变不须要重新加载整个页面
良好的前后端分离，分工更明白
缺点：
倒霉于搜索引擎的抓取
首次渲染速度相对较慢
实现一个SPA
#原理
监听所在栏中hash厘革驱动界面厘革
用pushsate记载欣赏器的汗青，驱动界面发送厘革
hash 模式
焦点通过监听url中的hash来举行路由跳转(监听url中#后的路径/hash值,来切换差异的组件,放到router-view上，完成页面的一个局部更新 )
history模式
history 模式焦点借用 HTML5 history api，api 提供了丰富的 router 相干属性先相识一个几个相干的api
history.pushState 欣赏器汗青记录添加记载
history.replaceState修改欣赏器汗青记录中当前记录
history.popState 当 history 发生厘革时触发
39.SPA首屏加载速度慢的怎么办理？
一、什么是首屏加载
首屏时间（First Contentful Paint），指的是欣赏器从响应用户输入网址所在，到首屏内容渲染完成的时间，此时整个网页不愿定要全部渲染完成，但须要展示当前视窗须要的内容
首屏加载可以说是用户体验中最告急的环节
二 、加载慢的缘故原由
在页面渲染的过程，导致加载速度慢的因素大概如下：
网络延时标题
资源文件体积是否过大
资源是否重复发送哀求去加载了
加载脚本的时间，渲染内容堵塞了
三、办理方案
常见的几种SPA首屏优化方式
减小入口文件体积(利用路由懒加载)
静态资源本地缓存(前端利用localstorage)
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
利用SSR
40.Vue路由的实现原理
应用最显着特点之一就是接纳的前端路由体系，通过改变URL，在不重新哀求页面的情况下，更新页面视图。
更新视图但不重新哀求页面，是前端路由原理的焦点之一，现在在欣赏器情况中这一功能的实现告急有2种方式：
利用URL中的hash("#");
利用History interface在HTML5中新增的方法;
41.Vue中组件和插件有什么区别？
一、组件是什么
回顾从前对组件的界说：
组件就是把图形、非图形的各种逻辑均抽象为一个同一的概念（组件）来实现开辟的模式，组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件大概页面,在Vue中每一个.vue文件都可以视为一个组件
组件的上风
降低整个体系的耦合度，在保持接口稳定的情况下，我们可以更换差异的组件快速完成需求，比方输入框，可以更换为日历、时间、范围等组件作具体的实现
调试方便，由于整个体系是通过组件组合起来的，在出现标题的时间，可以用清除法直接移除组件，大概根据报错的组件快速定位标题，之以是可以或许快速定位，是由于每个组件之间低耦合，职责单一，以是逻辑会比分析整个体系要简单
进步可维护性，由于每个组件的职责单一，而且组件在体系中是被复用的，以是对代码举行优化可得到体系的团体升级
#二、插件是什么
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严酷的限制——一样平常有下面几种：
添加全局方法大概属性。如: vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供本身的 API，同时提供上面提到的一个或多个功能。如vue-router
三、两者的区别
两者的区别告急表如今以下几个方面：
编写情势
注册情势
利用场景:
组件 (Component) 是用来构成你的 App 的业务模块，它的目的是 App.vue
插件 (Plugin) 是用来加强你的技能栈的功能模块，它的目的是 Vue 本身
简单来说，插件就是指对Vue的功能的加强或增补
42.Vue组件之间的通讯方式都有哪些？
组件间通讯的分类
组件间通讯的分类可以分成以下
父子组件之间的通讯
兄弟组件之间的通讯
祖孙与后代组件之间的通讯
非关系组件间之间的通讯
组件间通讯的方案
整理vue中8种通例的通讯方案
通过 props 转达
通过 $emit 触发自界说事故
利用 ref
EventBus
$parent 或$root
attrs 与 listeners
Provide 与 Inject
Vuex
小结
父子关系的组件数据转达选择 props 与 $emit举行转达，也可选择ref
兄弟关系的组件数据转达可选择$bus，其次可以选择$parent举行转达
祖先与后代组件数据转达可选择attrs与listeners大概 Provide与 Inject
复杂关系的组件数据转达可以通过vuex存放共享的变量
43.你相识vue的diff算法吗？说说看
diff 算法是一种通过同层的树节点举行比力的高效算法
vue2中:
其有两个特点：
比力只会在同层级举行, 不会跨层级比力
在diff比力的过程中，循环从双方向中心比力
diff 算法在很多场景下都有应用，在 vue 中，作用于假造 dom 渲染成真实 dom 的新旧 VNode 节点比力
vue3中:
事故缓存：将事故缓存，可以明白为变成静态的了
添加静态标志：Vue2 是全量 Diff，Vue3 是静态标志 + 非全量 Diff
静态提升：创建静态节点时生存，后续直接复用
利用最长递增子序列优化了对比流程：Vue2 里在 updateChildren() 函数里对比变更，在 Vue3 里这一块的逻辑告急在 patchKeyedChildren() 函数里，具体看下面
44.为什么须要Virtual Dom
一、是什么
Real DOM，真实 DOM，意思为文档对象模子，是一个布局化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 布局，如下：
Virtual Dom，本质上是以 JavaScript 对象情势存在的对 DOM 的形貌
创建假造 DOM 目的就是为了更好将假造的节点渲染到页面视图中，假造 DOM 对象的节点与真实 DOM 的属性逐一照应
利用假造 DOM 的上风如下：
简单方便：假如利用手动操纵真实 DOM 来完成页面，繁琐又轻易堕落，在大规模应用下维护起来也很困难
性能方面：利用 Virtual DOM，可以或许有效制止真实 DOM 数频仍更新，镌汰多次引起重绘与回流，进步性能
跨平台：React 借助假造 DOM，带来了跨平台的本事，一套代码多端运行
两者的区别如下：
假造 DOM 不会举行排版与重绘操纵，而真实 DOM 会频仍重排与重绘
假造 DOM 的总斲丧是“假造 DOM 增编削+真实 DOM 差异增编削+排版与重绘”，真实 DOM 的总斲丧是“真实 DOM 完全增编削+排版与重绘”
45.Vue3.0的计划目的是什么？做了哪些优化
更小:
Vue3移除一些不常用的 API
引入tree-shaking，可以将无用模块“剪辑”，仅打包须要的，使打包的团体体积变小了
更快:
告急体如今编译方面：
diff算法优化
静态提升
事故监听缓存
SSR优化
更友好
vue3在分身vue2的options API的同时还推出了composition API，大大增长了代码的逻辑构造和代码复用本事
TypeScript支持:
Vue3是基于typeScript编写的，提供了更好的范例查抄，能支持复杂的范例推导
API计划划一性:
语法 API
这里固然说的就是composition API，其两大显着的优化：
优化逻辑构造
优化逻辑复用
进步自身可维护性
开放更多底层功能
46.Vue3.0 所接纳的 Composition Api 与 Vue2.x 利用的 Options Api 有什么差异？
通常利用Vue2开辟的项目，广泛会存在以下标题：
代码的可读性随着组件变大而变差
每一种代码复用的方式，都存在缺点
TypeScript支持有限
然而，当组件变得复杂，导致对应属性的列表也会增长，这大概会导致组件难以阅读和明白
Composition Api
在 Vue3 Composition API 中，组件根据逻辑功能来构造的，一个功能所界说的全部 API 会放在一起（更加的高内聚，低耦合）
纵然项目很大，功能很多，我们都能快速的定位到这个功能所用到的全部 API
三、对比
下面对Composition Api与Options Api举行两大方面的比力 逻辑构造 逻辑复用
逻辑构造:
Options API
可以看到，这种碎片化使得明白和维护复杂组件变得困难
选项的分离粉饰了潜在的逻辑标题。别的，在处理处罚单个逻辑关注点时，我们必须不绝地“跳转”相干代码的选项块
#Compostion API
而Compositon API正是办理上述标题，将某个逻辑关注点相干的代码全都放在一个函数里，如许当须要修改一个功能时，就不再须要在文件中跳来跳去
下面举个简单例子，将处理处罚count属性相干的代码放在同一个函数了
逻辑复用
利用单个mixin好像标题不大，但是当我们一个组件混入大量差异的 mixins 的时间
会存在两个非常显着的标题：
定名冲突
数据泉源不清楚
小结
在逻辑构造和逻辑复用方面，Composition API是优于Options API
由于Composition API险些是函数，会有更好的范例推断。
Composition API对 tree-shaking 友好，代码也更轻易压缩
Composition API中见不到this的利用，镌汰了this指向不明的情况
假如是小型组件，可以继续利用Options API，也优劣常友好的
47.说一下Vue数据响应式的原理
意思就是在改变数据的时间，视图会跟着更新。这意味着你只须要举行数据的管理，给我们搬砖提供了很大的便利。React也有这种特性，但是React的响应式方式跟VUE完全差异。
“vue的数据响应式就是当数据发生厘革，关照改变的代码。数据响应式原理的焦点就是接纳了数据挟制联合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据举行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变更时会对数据举行比力，假如数据发生了厘革，会发布消息关照订阅者，触发监听回调，更新视图。”
React是通过this.setState去改变数据，然后根据新的数据重新渲染出假造DOM，末了通过对比假造DOM找到须要更新的节点举行更新。
也就是说React是依赖着假造DOM以及DOM的diff算法做到这一点的。而关于React这方面的文章，我已经写了很多了，还不相识的同砚可以自行复习一下。
而VUE则是利用了Object.defineProperty的方法内里的setter 与getter方法的观察者模式来实现。
以是在学习VUE的响应式原理之前，先学习两个预备知识：
Object.defineProperty 与 观察者模式。
假如你已经把握了，可以直接跳到第三part。
二、预备知识
2.1 Object.defineProperty
这个方法就是在一个对象上界说一个新的属性，大概改变一个对象现有的属性，而且返回这个对象。内里有两个字段 set,get。顾名思义，set都是取设置属性的值，而get就是获取属性的值。
举个栗子：
varbValue;
varo={};
Object.defineProperty(o,"b",
{get:function(){console.log('监听正在获取b')returnbValue;},
set:function(newValue){console.log('监听正在设置b')bValue=newValue;},
enumerable:true,configurable:true});
o.b=38;console.log(o.b)
终极打印
监听正在设置b监听正在获取b38
从在上述栗子中，可以看到当我们对 o.b 赋值38的时间，就会调用set函数，这时间会关照订阅者触发指令update函数给bValue修改值，之后我们就可以通过o.b来获取这个值，这时间，get函数被调用。
把握到这一步，我们已经可以实现一个极简的VUE双向绑定了。
48.说说对 React 的明白？有哪些特性？
一、是什么
React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的办理方案
依照组件计划模式、声明式编程范式和函数式编程概念，以使前端应用步伐更高效
利用假造 DOM 来有效地操纵 DOM，依照从高阶组件到低阶组件的单向数据流
资助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成团体页面
react 类组件利用一个名为 render() 的方法大概函数组件return，汲取输入的数据并返回须要展示的内容
二、特性
React 特性有很多，如：
JSX 语法
单向数据绑定
假造 DOM:
当组件（是Virtual DOM上的组件）的状态（state）发生改变时，一个神奇的diff算法会盘算出最少的步调更新到欣赏器页面上，diff算法探求到须要变更的DOM节点，然后把这个修改更新到欣赏器的DOM节点上。
声明式编程:
而用 React 实现上述功能则如下：
<Mapzoom={4}center={(lat,lng)}> <Markerposition={(lat,lng)}title={"Hello Marker"}/></Map>
声明式编程方式使得 React 组件很轻易利用，终极的代码简单易于维护
Component
49.说说 Real DOM 和 Virtual DOM 的区别？优缺点？
一、是什么
Real DOM，真实 DOM，意思为文档对象模子，是一个布局化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 布局，如下：
Virtual Dom，本质上是以 JavaScript 对象情势存在的对 DOM 的形貌
创建假造 DOM 目的就是为了更好将假造的节点渲染到页面视图中，假造 DOM 对象的节点与真实 DOM 的属性逐一照应
二、区别
两者的区别如下：
假造 DOM 不会举行排版与重绘操纵，而真实 DOM 会频仍重排与重绘
假造 DOM 的总斲丧是“假造 DOM 增编削+真实 DOM 差异增编削+排版与重绘”，真实 DOM 的总斲丧是“真实 DOM 完全增编削+排版与重绘”
三、优缺点
真实 DOM 的上风：易用
缺点：
服从低，剖析速度慢，内存占用量过高
性能差：频仍操纵真实 DOM，易于导致重绘与回流
利用假造 DOM 的上风如下：
简单方便：假如利用手动操纵真实 DOM 来完成页面，繁琐又轻易堕落，在大规模应用下维护起来也很困难
性能方面：利用 Virtual DOM，可以或许有效制止真实 DOM 数频仍更新，镌汰多次引起重绘与回流，进步性能
跨平台：React 借助假造 DOM，带来了跨平台的本事，一套代码多端运行
缺点：
在一些性能要求极高的应用中假造 DOM 无法举行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层假造 DOM 的盘算，速度比正常稍慢
50.说说React 生命周期有哪些差异阶段？每个阶段对应的方法是？
一、是什么
React整个组件生命周期包罗从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
二、流程
这里告急陈诉react16.4之后的生命周期，可以分成三个阶段：
创建阶段:
创建阶段告急分成了以下几个生命周期方法：
constructor:在 React 组件挂载之前，会调用它的构造函数。
getDerivedStateFromProps:组件创建和更新阶段，岂论是props厘革还是state厘革，也会调用
在每次render方法前调用，第一个参数为即将更新的props，第二个参数为上一个状态的state，可以比力
props 和 state来加一些限制条件，防止无用的state更新,该方法须要返回一个新的对象作为新的state大概返回null
体现state状态不须要更新
render:类组件必须实现的方法，用于渲染DOM布局，可以访问组件state与prop属性
componentDidMount:组件挂载到真实DOM节点后实验，其在render方法之后实验
更新阶段:
该阶段的函数告急为如下方法：
getDerivedStateFromProps:同上
shouldComponentUpdate:用于控制组件重新渲染的生命周期，state发生厘革，组件会进入重新渲染的流程，在这里return false可以制止组件的更新
render:render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate:触发时间为update发生的时间，在render之后dom渲染之前返回一个值， 读取到的 DOM 元素状态是可以包管与 componentDidUpdate 中划一的
componentDidUpdate: 每次state改变并重新渲染页面后都会进入这个生命周期卸载或烧毁阶段
卸载阶段:
componentWillUnmount:在此处完成组件的卸载和数据的烧毁。
51.说说 React中的setState实验机制
一个组件的体现形态可以由数据状态和外部参数所决定，而数据状态就是state, 当须要修改内里的值的状态须要通过调用setState来改变，从而到达更新组件内部数据的作用
setState第一个参数可以是一个对象，大概是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据
在利用setState更新数据的时间，setState的更新范例分成：同步更新，异步更新
在组件生命周期或React合成事故中，setState是异步
在setTimeout大概原生dom事故中，setState是同步
对同一个值举行多次 setState， setState 的批量更新计谋会对其举行覆盖，取末了一次的实验结果
52.说说对React中类组件和函数组件的明白？有什么区别？
语法上：
函数式组件是一个纯函数，它是须要担当props参数而且返回一个React元素就可以了。类组件是须要继续React.Component的，而且class组件须要创建render而且返回React元素，语法上来讲更复杂。
状态管理：
函数式组件没有状态管理，类组件有状态管理。
调用方式：
函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是须要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。
53.说说对React Hooks的明白？办理了什么标题？
一、是什么
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下利用 state 以及其他的 React 特性
至于为什么引入hook，官方给出的动机是办理长时间利用和维护react过程中常碰到的标题，比方：
难以重用和共享组件中的与状态相干的逻辑
逻辑复杂的组件难以开辟与维护，当我们的组件须要处理处罚多个互不相干的 local state 时，每个生命周期函数中大概会包罗着各种互不相干的逻辑在内里
类组件中的this增长学习资本，类组件在基于现有工具的优化上存在些许标题
由于业务变更，函数组件不得不改为类组件等等
二、有哪些
上面讲到，Hooks让我们的函数组件拥有了类组件的特性，比方组件内的状态、生命周期
最常见的hooks有如下：
useState
useEffect
useReducer
useCallback
useMemo
useRef
三、办理什么
通过对上面的开端熟悉，可以看到hooks可以或许更轻易办理状态相干的重用的标题：
每调用useHook一次都会天生一份独立的状态
通过自界说hook可以或许更好的封装我们的功能
54.说说你对Redux的明白？其工作原理
一、是什么
在react中每个组件的state是由自身举行管理，包罗组件界说自身的state、组件之间的通讯通过props转达、利用Context实现数据共享等，假如让每个组件都存储自身相干的状态，理论上来讲不会影响应用的运行，但在开辟及后期我们将比力难以维护，以是我们可以把数据举行会合式的管理，redux就是一个实现上述会合管理的容器的工具，redux并不是只应用在react中，还与其他界面库一起利用，如Vue
二、工作原理
创建一个store文件夹，新建一个index.js文件
文件中导入redux的createStore方法，用于创建公共数据地区
创建一个reducer纯函数，担当两个参数state，actions分别体现分别体现数据和操纵state的方法，返回state数据给组件页面
把reducer作为createStore的参数抛出
在须要利用的页面导入store文件，通过store.getState获取数据，通过store.dispatch触发action修改state数据
store.subscrible 方法监听 store 的改变，制止数据不更新
55.说说React 性能优化的手段有哪些
一、是什么
React依附virtual DOM和diff算法拥有高效的性能，但是某些情况下，性能显着可以进一步进步
在前面文章中，我们相识到类组件通过调用setState方法， 就会导致render，父组件一旦发生render渲染，子组件肯定也会实验render渲染
二、如何做
在React中如何制止不须要的render (opens new window)中，我们相识到如何制止不须要的render来应付上面的标题，告急手段是通过shouldComponentUpdate、PureComponent、React.memo，这三种情势这里就不再复述
除此之外， 常见性能优化常见的手段有如下：
制止利用内联函数
利用 React Fragments 制止额外标志
利用 Immutable:
在明白Immutable中 (opens new window)，我们相识到利用 Immutable可以给 React 应用带来性能的优化，告急体如今镌汰渲染的次数
在做react性能优化的时间，为了制止重复渲染，我们会在shouldComponentUpdate()中做对比，当返回true实验render方法
Immutable通过is方法则可以完成对比，而无需像一样通过深度比力的方式比力
懒加载组件:
从工程方面思量，webpack存在代码拆分本事，可以为应用创建多个包，并在运行时动态加载，镌汰初始包的巨细
而在react中利用到了Suspense和 lazy组件实今世码拆分功能
事故绑定方式:
从性能方面思量，在render方法中利用bind和render方法中利用箭头函数这两种情势在每次组件render的时间都会天生新的方法实例，性能短缺
而constructor中bind事故与界说阶段利用箭头函数绑定这两种情势只会天生一个方法实例，性能方面会有所改善
服务端渲染:
接纳服务端渲染端方式，可以利用户更快的看到渲染完成的页面
服务端渲染，须要起一个node服务，可以利用express、koa等，调用react的renderToString方法，将根组件渲染成字符串，再输出到响应中
56.vue、react、angular区别
1. 根本概念
Angular 是一个应用计划框架与开辟平台，用于创建高效、复杂、风雅的单页面应用。
React 是一个用于构建用户界面的 JavaScript 库
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与别的大型框架差异的是，Vue 被计划为可以自底向上逐层应用。Vue 的焦点库只关注视图层，不但易于上手，还便于与第三方库或既有项目整合。另一方面，当与今世化的工具链以及各种支持类库联合利用时，Vue 也完万可以或许为复杂的单页应用提供驱动。
2. 三者比力
2.1 相同点
1. 都是基于javascript/typescript的前端开辟库，为前端开辟提供高效、复用性高的开辟方式
2. 都有组件和模板的开辟思想
3. 各自的组件都有生命周期，不消的组件可以卸载，不占用资源
4. 都支持指令，如样式、事故等的指令
2.2 差异点
1. 首创和发行差异：
Angular是由googl提供支持的，初始发行于 2016年9月；React由Facebook维护，初始发行于 2013年3月；Vue是由前google职员创建，初始发行于2014年2月
2. 应用范例差异：
Angular支持开辟native应用步伐、SPA单页应用步伐、混淆应用步伐和web应用步伐；React支持开辟SPA和移动应用步伐；Vue支持开辟高级SPA，开始支持native应用步伐
3. 模子差异
angular基于MVC（模子-视图-控制器）架构；react和vue是基于Virtual DOM（假造的文档对象模子）
4. 数据流流向差异
Angular利用的是双向数据绑定，React用的是单数据流的，而Vue则支持两者。
5. 对微应用和微服务的支持差异
Angular利用的是TypeScript，因此它更恰当于单页Web应用（single page web application，SPA），而非微服务。相反，React和Vue的机动性更恰当微应用和微服务的开辟。
6. 对原生应用的支持差异
React Native为iOS和Android开辟原生应用；Angular的NativeScript已被原生应用所接纳，特殊是Ionic框架已经被广泛地运用在制作混淆应用等方面；Vue的Weex平台正在开辟之中，尚无下一步使之成为全面跨平台的操持。
7. 框架和库
Angular 是一个框架而不是一个库，由于它提供了关于如何构建应用步伐的强有力的束缚，而且还提供了更多开箱即用的功能。React 和 Vue 是是一种库，可以和各种包搭配。
8. 组件之间传值方式差异
Angular 中直接的父子组件，父组件可以直接访问子组件的 public 属性和方法，也可以借助于@Input 和 @Output 举行通讯。没有直接关系的，借助于 Service 单例举行通讯；React 组件之间通过通过prop大概state来通讯，差异组件之间另有Rex状态管理功能；Vue组件之间通讯通过props ，以及Vuex状态管理来传值
57.说说你对 TypeScript 的明白？与 JavaScript 的区别？
一、是什么
TypeScript 是 JavaScript 的范例的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继续、泛型等
其是一种静态范例查抄的语言，提供了范例注解，在代码编译阶段就可以查抄出数据范例的错误
同时扩展了JavaScript 的语法，以是任何现有的JavaScript 步伐可以不加改变的在 TypeScript 下工作
为了包管兼容性，TypeScript 在编译阶段须要编译器编译成纯 JavaScript 来运行，是为大型应用之开辟而计划的语言
二、特性
TypeScript 的特性告急有如下：
范例讲明和编译时范例查抄 ：在编译时讲明变量范例
范例推断：ts 中没有讲明变量范例会主动推断变量的范例
范例擦除：在编译过程中讲明的内容和接口会在运行时利用工具擦除
接口：ts 中用接口来界说对象范例
罗列：用于取值被限定在肯定范围内的场景
Mixin：可以担当恣意范例的值
泛型编程：写代码时利用一些以后才指定的范例
名字空间：名字只在该地区内有效，其他地区可重复利用该名字而不冲突
元组：元组归并了差异范例的对象，相称于一个可以装差异范例数据的数组
三、区别
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法
TypeScript 可处理处罚已有的 JavaScript 代码，并只对此中的 TypeScript 代码举行编译
TypeScript 文件的后缀名 .ts （.ts，.tsx，.dts），JavaScript 文件是 .js
在编写 TypeScript 的文件的时间就会主动编译成 js 文件
58.说说你对 TypeScript 中泛型的明白？应用场景？
一、是什么
泛型步伐计划（generic programming）是步伐计划语言的一种风格或范式
泛型允许我们在强范例步伐计划语言中编写代码时利用一些以后才指定的范例，在实例化时作为参数指明这些范例 在typescript中，界说函数，接口大概类的时间，不预先界说好具体的范例，而在利用的时间在指定范例的一种特性
二、应用场景
通过上面开端的相识，后述在编写 typescript 的时间，界说函数，接口大概类的时间，不预先界说好具体的范例，而在利用的时间在指定范例的一种特性的时间，这种情况下就可以利用泛型
机动的利用泛型界说范例，是把握typescript 必经之路
59.说说你对微信小步伐的明白？优缺点？
一、是什么
小步伐是一种不须要下载安装即可利用的应用，它实现了应用“触手可及”的空想，用户扫一扫大概搜一下即可打开应用
也体现了“用完即走”的理念，用户不消关心是否安装太多应用的标题。应用将无处不在，随时可用，但又无需安装卸载
二、优缺点
长处：
随搜随用，用完即走：使得小步伐可以代替许多APP，或是做APP的团体嫁接，或是作为阉割版功能的承载体
流量大，易担当：小步伐借助自身平台更加轻易引入更多的流量
安全
开辟门槛低
降低兼容性限制
缺点：
用户留存：及相干数据体现，小步伐的均匀越日留存在13%左右，但是双周留存骤降到仅有1%
体积限制：微信小步伐只有2M的巨细，如许导致无法开辟大型一些的小步伐
受控微信：比起APP，尤其是安卓版的高自由度，小步伐要面对很多来自微信的限制，从功能接口，甚至到种别内容，都要担当微信的管控
60.说说你对发布订阅、观察者模式的明白？区别？
一、观察者模式
观察者模式界说了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，全部依赖于它的对象都将得到关照，并主动更新
观察者模式属于运动型模式，运动型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯
二、发布订阅模式
发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的汲取者（称为订阅者）。而是将发布的消息分为差异的种别，无需相识哪些订阅者（假如有的话）大概存在
同样的，订阅者可以表达对一个或多个种别的爱好，只汲取感爱好的消息，无需相识哪些发布者存在
三、区别
在观察者模式中，观察者是知道Subject的，Subject不绝保持对观察者举行记载。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息署理举行通讯。
在发布订阅模式中，组件是疏松耦合的，恰恰和观察者模式相反。
观察者模式大多数时间是同步的，比如当事故触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时间是异步的（利用消息队列）
61.项目做过哪些性能优化
一、体验优化
从用户角度而言，优化可以或许让页面加载得更快、对用户的操纵响应得更实时，可以或许给用户提供更为友好的体验。
1，首屏渲染优化，哀求少、加载体积小、善用缓存
2，动画优化，制止某些动画造成页面的卡顿
3，优化用户的操纵感官，提升视觉反馈，比如 hover 小手，让用户一眼就知道是否可操纵
4，长列表复用 dom，优化滚动结果及页面卡顿征象，镌汰页面一次性渲染的数目
5，骨架屏的利用
6，组件的预加载，懒加载
二、提升页面性能
镌汰 http 哀求 和 冗余数据
组件，路由懒加载
设置 nginx 优化
优化 webpack 打包机制
利用 CDN
预渲染
SSR
图片转 base64
背景分布式摆设，负载均衡
62.形貌欣赏器的渲染过程，DOM树和渲染树的区别
欣赏器的渲染过程：
剖析 HTML 构建 DOM(DOM 树)，并行哀求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)
CSSOM 构建竣事后，和 DOM 一起天生 Render Tree(渲染树)
布局(Layout)：盘算出每个节点在屏幕中的位置
体现(Painting)：通过显卡把页面画到屏幕上
DOM 树 和 渲染树 的区别：
DOM 树与 HTML 标签逐一对应，包罗 head 和隐藏元素
渲染树不包罗 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性
63.你以为什么样的前端代码是好的
1.如何评价代码质量的高低？
代码质量的评价有很强的主观性，形貌代码质量的词汇也有很多，比如可读性、可维护性、机动、优雅、轻便等，这些词汇是从差异的维度去评价代码质量的。它们之间有相互作用，并不是独立的，比如，代码的可读性好、可扩展性好就意味着代码的可维护性好。代码质量高低是一个综合各种因素得到的结论。我们并不能通过单一的维度去评价一段代码的优劣。
2.最常用的评价尺度有哪几个？
最常用到几个评判代码质量的尺度是：可维护性、可读性、可扩展性、机动性、轻便性、可复用性、可测试性。此中，可维护性、可读性、可扩展性又是提到最多的、最告急的三个评价尺度。
64.从欣赏器所在栏输入url到体现页面的步调
欣赏器根据哀求的 URL 交给 DNS 域名剖析，找到真实 IP，向服务器发起哀求；
服务器交给背景处理处罚完成后返回数据，欣赏器汲取文件（HTML、JS、CSS、图像等）；
欣赏器对加载到的资源（HTML、JS、CSS 等）举行语法剖析，创建相对应的内部数据布局（如 HTML 的 DOM）；
载入剖析到的资源文件，渲染页面，完成。
65.http哀求报文响应报文的格式
HTTP哀求报文格式
客户端连上服务器后，向服务器发出获取某个Web资源的消息，称之为客户端向服务器发送了一个HTTP哀求。
HTTP哀求报文告急由
哀求行(阐明哀求范例，要访问的资源以及利用http版本)
哀求头部(用来阐明服务器要利用的附加信息)
空行、哀求正文构成。
比方，GET /index.html HTTP/1.1
HTTP响应报文格式
所谓响应着实就是服务器对哀求处理处罚的结果，大概假如欣赏器哀求的直接就是一个静态资源的话，响应的就是这个资源本身。HTTP响应报文告急由:
状态行(http协议版本号，状态码，状态信息)
消息头部(用来阐明客户端要利用的一些附加信息)
空行、响应正文构成。
66.Token cookie session 区别
1.Session会话：客户端A访问服务器，服务器存储A的数据value，把key返回给客户端A，客户端A下次带着key（session ID）来访问服务器，服务器就能给出客户端A的数据。假如负载均衡，客户端A访问了另一个服务器，谁人服务器没有客户端A的数据。
2.Cookie：客户端A访问服务器，服务器返回cookie给客户端A，客户端A存储cookie，下次须要带着cookie访问服务器，服务器返回相应的数据。
3.Token令牌：客户端A访问服务器，服务器给了客户端token，客户端A拿着token访问服务器，服务器验证token，返回数据。
二、下面具体先容一下session、cookie、token的区别，具体如下：
1.session和cookie区别：
· 数据存放位置差异：Session数据是存在服务器中的，cookie数据存放在欣赏器当中。
· 安全水平差异：cookie放在服务器中不是很安全，session放在服务器中，相对安全。
· 性能利用水平差异：session放在服务器上，访问增多会占用服务器的性能；思量到减轻服务器性能方面，应利用cookie。
· 数据存储巨细差异：单个cookie生存的数据不能高出4K，session存储在服务端，根据服务器巨细来定。
2.token和session区别：
· token是开辟界说的，session是http协议规定的；
· token不愿定存储，session存在服务器中；
· token可以跨域，session不可以跨域，它是与域名绑定的。
67.CORS跨域的原理
什么是 CORS？
CORS 全称 Cross-Origin Resource Sharing，即跨域资源共享。
CORS 是一种基于 HTTP Header 的机制，该机制通过允许服务器标示除了它本身以外的别的域。服务器端共同欣赏器实现 CORS 机制，可以突破欣赏器对跨域资源访问的限制，实现跨域资源哀求。
CORS 验证机制
CORS 的验证机制分两种模式：简单哀求和预检哀求。
简单哀求
简单哀求模式下欣赏器直接发送哀求，并在哀求头中携带 Origin。 服务器端接到哀求后，会根据本身的跨域规则，通过响应头 Access-Control-Allow-Origin 来返回验证结果。
预检哀求
须要预检的哀求必须起首利用 OPTIONS 方法发起一个预检哀求到服务器，服务器基于预检哀求的信息来判定是否担当接下来的现实哀求。
68.什么是MVVM
1、什么是MVVM
MVVM，是Model-View-ViewModel的简写，是M-V-VM三部门构成。
Model：模子层，负责处理处罚业务逻辑以及和服务器端举行交互
View：视图层：负责将数据模子转化为UI展示出来，可以简单的明白为HTML页面
ViewModel：视图模子层，用来毗连Model和View，是Model和View之间的通讯桥梁
MVVM接纳双向数据绑定，view中数据厘革将主动反映到viewmodel上，反之，model中数据厘革也将会主动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View体现出来，还负责把View的修改同步回Model。
MVVM焦点思想，是关注model的厘革，让MVVM框架利用本身的机制主动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。
69.说说你对版本管理的明白？常用的版本管理工具有哪些？
一、是什么
版本控制（Version control），是维护工程蓝图的尺度作法，能追踪工程蓝图从诞生不绝到定案的过程。别的，版本控制也是一种软件工程本事，借此能在软件开辟的过程中，确保由差异人所编辑的同一步伐文件都得到同步
透过文档控制，能记载任何工程项目内各个模块的改动进程，并为每次改动编上序号
版本控制体系在当今的软件开辟中，被以为是理所固然的配备工具之一，根据种别可以分成：
本地版本控制体系
会合式版本控制体系:
SVN
TortoiseSVN是一款非常易于利用的跨平台的 版本控制/版本控制/源代码控制软件
CVS
CVS是版本控制体系，是源设置管理（SCM）的告急构成部门。利用它，您可以记载源文件和文档的汗青记载
老牌的版本控制体系，它是基于客户端/服务器的运动使得其可容纳多用户，构成网络也很方便
这一特性使得CVS成为位于差异所在的人同时处理处罚数据文件（特殊是步伐的源代码）时的首选
分布式版本控制体系
Git
Git是现在天下上开始进的分布式版本控制体系，旨在快速高效地处理处罚从小型到大型项目的全部事件
特性：易于学习，占用内存小，具有闪电般快速的性能
利用Git和Gitlab搭建版本控制情况是如今互联网公司最盛行的版本控制方式
HG
Mercurial是一个免费的分布式源代码管理工具。它可以有效地处理处罚任何规模的项目，并提供简单直观的界面
Mercurial是一种轻量级分布式版本控制体系，接纳 Python语言实现，易于学习和利用，扩展性强
三、总结
版本控制体系的长处如下：
记载文件全部汗青厘革，这是版本控制体系的根本本事
随时规复到恣意时间点，汗青记载功能使我们不怕改错代码了
支持多功能并行开辟，通常版本控制体系都支持分支，包管了并行开辟的可行
多人协作并行开辟，对于多人协作项目，支持多人协作开辟的版本管理将事半功倍
70.说说你对Git的明白？
一、是什么
git，是一个分布式版本控制软件，最初目的是为更好地管理Linux内核开辟而计划分布式版本控制体系的客户端并不只提取最新版本的文件快照，而是把代码仓库完备地镜像下来。这么一来，任何一处协同工作用的服务器发生故障，过后都可以用任何一个镜像出来的本地仓库规复(GIT就是一个共享代码库，代码放在网上同一管理，各人谁修改了代码都可以在网上改，如允许以实现多人并发开辟一个大项目)
项目开始，只有一个原始版仓库，别的呆板可以clone这个原始版本库，那么全部clone的呆板，它们的版本库着实都是一样的，并没有主次之分
以是在实现团队协作的时间，只要有一台电脑充当服务器的脚色，其他每个人都从这个“服务器”仓库clone一份到本身的电脑上，而且各自把各自的提交推送到服务器仓库里，也从服务器仓库中拉取别人的提交
github现实就可以充当这个服务器脚色，其是一个开源协作社区，提供Git仓库托管服务，既可以让别人参与你的开源项目，也可以参与别人的开源项目
二、工作原理
当我们通过git init创建大概git clone一个项目的时间，项目目次会隐藏一个.git子目次，其作用是用来跟踪管理版本库的
Git 中全部数据在存储前都盘算校验和，然后以校验和来引用，以是在我们修改大概删除文件的时间，git可以或许知道
Git用以盘算校验和的机制叫做 SHA-1 散列（hash，哈希）， 这是一个由 40 个十六进制字符（0-9 和 a-f）构成字符串，基于 Git 中文件的内容或目次布局盘算出来，如下：
当我们修改文件的时间，git就会修改文件的状态，可以通过git status举行查询，状态情况如下：
已修改（modified）：体现修改了文件，但还没生存到数据库中。
已暂存（staged）：体现对一个已修改文件的当前版本做了标志，使之包罗在下次提交的快照中。
已提交（committed）：体现数据已经安全的生存在本地数据库中。
文件状态对应的，差异状态的文件在Git中处于差异的工作地区，告急分成了四部门：
工作区：相称于本地写代码的地区，如 git clone 一个项目到本地，相称于本地克隆了远程仓库项目的一个副本
暂存区：暂存区是一个文件，生存了下次将提交的文件列表信息，一样平常在 Git 仓库目次中
本地仓库：提交更新，找到暂存地区的文件，将快照永世性存储到 Git 本地仓库
远程仓库：远程的仓库，如 github
71.说说Git常用的下令有哪些
从上图可以看到，git一样平常简单的利用就只有上图6个下令：
add
commit
push
pull
clone
checkout
72.说说 git 发生冲突的场景？如何办理？
一、是什么
一样平常情况下，出现冲突的场景有如下：
多个分支代码归并到一个分支时
多个分支向同一个远端分支推送
具体情况就是，多个分支修改了同一个文件（任何地方）大概多个分支修改了同一个文件的名称
假如两个分支中分别修改了差异文件中的部门，是不会产生冲突，直接归并即可
应用在下令中，就是push、pull、stash、rebase等下令下都有大概产生冲突情况，从本质上来讲，都是merge和patch（应用补丁）时产生冲突
二、总结
当Git无法主动归并分支时，就必须起首办理冲突，办理冲突后，再提交，归并完成
办理冲突就是把Git归并失败的文件手动编辑为我们盼望的内容，再提交 |
