面试完50小我私家后我写下这篇总结

2019年的春节来的似乎格外的早，过完年相信许多童鞋都开始摩拳擦掌了；笔者总结了多篇教程，联合平时自己的面试履历，整理了这份文档，希望资助大家来突击一下前端知识的盲区。文章很长很长很长。（建议先收藏，技术大佬请Ctrl+F4，面向基础）整理不易，希望大家关注头条号【JAVA后端架构】，更多前后端原创好文等着你。

一、CSS盒模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包罗：边距margin，边框border，填充padding，和实际内容content。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。box-sizing: content-box（W3C盒模型，又名尺度盒模型）：元素的宽高峻小体现为内容的巨细。

box-sizing: border-box（IE盒模型，又名怪异盒模型）：元素的宽高体现为内容 + 内边距 + 边框的巨细。配景会延伸到边框的外沿。

CSS3的新特性word-wrap 文字换行text-overflow 凌驾指定容器的界限时如何显示text-decoration 文字渲染text-shadow文字阴影gradient渐变效果transition过渡效果 transition-duration：过渡的连续时间transform拉伸，压缩，旋转，偏移等变换animation动画transition和animation的区别：Animation和transition大部门属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才气改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，而且transition为2帧，从from .... to，而animation可以一帧一帧的。CSS选择器及其优先级!important内联样式style=""ID选择器#id类选择器/属性选择器/伪类选择器.class.active[href=""]元素选择器/关系选择器/伪元素选择器html+div>span::after通配符选择器*BFCBFC（Block Formatting Context）花样化上下文，是Web页面中盒模型结构的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 BFC应用防止margin重叠清除内部浮动自适应两（多）栏结构防止字体围绕触发BFC条件根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute、fixedBFC的特性内部的Box会在垂直偏向上一个接一个的放置。

垂直偏向上的距离由margin决议bfc的区域不会与float的元素区域重叠。盘算bfc的高度时，浮动元素也到场盘算bfc就是页面上的一个独立容器，容器内里的子元素不会影响外面元素。div水平居中行内元素.parent { text-align: center;}块级元素.son { margin: 0 auto;}flex结构.parent { display: flex; justify-content: center;}绝对定位定宽.son { position: absolute; width: 宽度; left: 50%; margin-left: -0.5*宽度}绝对定位不定宽.son { position: absolute; left: 50%; transform: translate(-50%, 0);}left/right: 0.son { position: absolute; width: 宽度; left: 0; right: 0; margin: 0 auto;}div垂直居中行内元素.parent { height: 高度;}.son { line-height: 高度;}table.parent { display: table;}.son { display: table-cell; vertical-align: middle;}flex.parent { display: flex; align-items: center;}绝对定位定高.son { position: absolute; top: 50%; height: 高度; margin-top: -0.5高度;}绝对定位不定高.son { position: absolute; top: 50%; transform: translate( 0, -50%);}top/bottom: 0;.son { position: absolute; height: 高度; top: 0; bottom: 0; margin: auto 0;}绝对定位和相对定位absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考尺度。

如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了尺度文档流。fixed 牢固定位的元素会相对于视窗来定位,这意味着即便页面转动，它还是会停留在相同的位置。一个牢固定位元素不会保留它原本在页面应有的清闲。

配合点：改变行内元素的出现方式，都脱离了文档流；差别点：absolute的”根元素“是可以设置的，fixed的“根元素”牢固为浏览器窗口flex结构接纳 Flex 结构的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。

父元素属性子元素属性让元素消失visibility:hidden、display:none、z-index=-1、opacity：0opacity：0,该元素隐藏起来了，但不会改变页面结构，而且，如果该元素已经绑定了一些事件，如click事件也能触发visibility:hidden,该元素隐藏起来了，但不会改变页面结构，可是不会触发该元素已经绑定的事件display:none, 把元素隐藏起来，而且会改变页面结构，可以明白成在页面中把该元素删掉z-index=-1置于其他元素下面清除浮动在浮动元素后面添加 clear:both 的空 div 元素，<div class="container"> <div class="left"></div> <div class="right"></div> <div style="clear:both"></div></div>给父元素添加 overflow:hidden 或者 auto 样式，触发BFC。<div class="container"> <div class="left"></div> <div class="right"></div></div>.container{ width: 300px; background-color: #aaa; overflow:hidden; zoom:1; /*IE6*/}使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。<div class="container clearfix"> <div class="left"></div> <div class="right"></div></div>.clearfix{ zoom: 1; /*IE6*/}.clearfix:after{ content: "."; height: 0; clear: both; display: block; visibility: hidden;}推荐使用第三种方法，不会在页面新增div，文档结构越发清晰。calc函数calc函数是css3新增的功效，可以使用calc()盘算border、margin、pading、font-size和width等属性设置动态值。

#div1 { position: absolute; left: 50px; width: calc( 100% / (100px * 2) ); //兼容写法 width: -moz-calc( 100% / (100px * 2) ); width: -webkit-calc( 100% / (100px * 2) ); border: 1px solid black;}复制代码注意点：需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);calc()函数支持 "+", "-", "*", "/" 运算;对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。不外我们可以对那些不支持 calc()的浏览器，使用一个牢固值作为回退。移动端remrem官方界说『The font size of the root element』，即根元素的字体巨细。

rem是一个相对的CSS单元，1rem即是html元素上font-size的巨细。所以，我们只要设置html上font-size的巨细，就可以改变1rem所代表的巨细。(function () { var html = document.documentElement; function onWindowResize() { html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px'; } window.addEventListener('resize', onWindowResize); onWindowResize();})();复制代码移动端1px一般来说，在PC端浏览器中，设备像素比（dpr）即是1，1个css像素就代表1个物理像素；可是在retina屏幕中，dpr普遍是2或3，1个css像素不再即是1个物理像素，因此比实际设计稿看起来粗不少。伪元素+scale<style> .box{ width: 100%; height: 1px; margin: 20px 0; position: relative; } .box::after{ content: ''; position: absolute; bottom: 0; width: 100%; height: 1px; transform: scaleY(0.5); transform-origin: 0 0; background: red; }</style><div class="box"></div>border-imagediv{ border-width: 1px 0px; -webkit-border-image: url(border.png) 2 0 stretch; border-image: url(border.png) 2 0 stretch;}双方宽度牢固中间自适应的三栏结构圣杯结构和双飞翼结构是前端工程师需要日常掌握的重要结构方式。

两者的功效相同，都是为了实现一个两侧宽度牢固，中间宽度自适应的三栏结构。圣杯结构<style>body{ min-width: 550px;}#container{ padding-left: 200px; padding-right: 150px;}#container .column{ float: left;}#center{ width: 100%;}#left{ width: 200px; margin-left: -100%; position: relative; right: 200px;}#right{ width: 150px; margin-right: -150px;}</style><div id="container"> <div id="center" class="column">center</div> <div id="left" class="column">left</div> <div id="right" class="column">right</div></div>双飞翼结构<style>body { min-width: 500px;}#container { width: 100%;}.column { float: left;}#center { margin-left: 200px; margin-right: 150px;}#left { width: 200px; margin-left: -100%;}#right { width: 150px; margin-left: -150px;}</style><div id="container" class="column"> <div id="center">center</div></div><div id="left" class="column">left</div><div id="right" class="column">right</div>伪类和伪元素css引入伪类和伪元素观点是为了花样化文档树以外的信息。

也就是说，伪类和伪元素都是用来修饰不在文档树中的部门。伪类伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被通例CSS选择器获取到的信息。获取不存在与DOM树中的信息。

好比a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；获取不能被通例CSS选择器获取的信息。好比：要获取第一个子元素，我们无法用通例的CSS选择器获取，但可以通过 :first-child 来获取到。伪元素伪元素用于建立一些不在文档树中的元素，并为其添加样式。

好比说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，可是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等因此，伪类与伪元素的区别在于：有没有建立一个文档树之外的元素。

::after和:after的区别在实际的开发事情中，我们会看到有人把伪元素写成:after，这实际是 CSS2 与 CSS3新旧尺度的划定差别而导致的。CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，划定伪元素使用2个冒号。所以，对于 CSS2 尺度的老伪元素，好比:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 尺度的新伪元素，好比::selection，就必须写2个冒号了。CSS画圆半圆扇形三角梯形div{ margin: 50px; width: 100px; height: 100px; background: red;}/* 半圆 */.half-circle{ height: 50px; border-radius: 50px 50px 0 0;}/* 扇形 */.sector{ border-radius: 100px 0 0;}/* 三角 */.triangle{ width: 0px; height: 0px; background: none; border: 50px solid red; border-color: red transparent transparent transparent;}/* 梯形 */.ladder{ width: 50px; height: 0px; background: none; border: 50px solid red; border-color: red transparent transparent transparent;}二、JSJS数据类型JS基本有5种简朴数据类型：String，Number，Boolean，Null，Undefined。

引用数据类型：Object，Array，Function。判断数据类型的方法在写业务逻辑的时候，经常要用到JS数据类型的判断，面试常见的案例深浅拷贝也要用到数据类型的判断。

typeofconsole.log(typeof 2); // numberconsole.log(typeof true); // booleanconsole.log(typeof 'str'); // stringconsole.log(typeof undefined); // undefinedconsole.log(typeof []); // object console.log(typeof {}); // objectconsole.log(typeof function(){}); // functionconsole.log(typeof null); // object优点：能够快速区分基本数据类型 缺点：不能将Object、Array和Null区分，都返回objectinstanceofconsole.log(2 instanceof Number); // falseconsole.log(true instanceof Boolean); // false console.log('str' instanceof String); // false console.log([] instanceof Array); // trueconsole.log(function(){} instanceof Function); // trueconsole.log({} instanceof Object); // true优点：能够区分Array、Object和Function，适适用于判断自界说的类实例工具 缺点：Number，Boolean，String基本数据类型不能判断Object.prototype.toString.call()var toString = Object.prototype.toString; console.log(toString.call(2)); //[object Number]console.log(toString.call(true)); //[object Boolean]console.log(toString.call('str')); //[object String]console.log(toString.call([])); //[object Array]console.log(toString.call(function(){})); //[object Function]console.log(toString.call({})); //[object Object]console.log(toString.call(undefined)); //[object Undefined]console.log(toString.call(null)); //[object Null]优点：精准判断数据类型 缺点：写法繁琐不容易记，推荐举行封装后使用var,let,const的区别let 为 ES6 新添加申明变量的下令，它类似于 var，可是有以下差别：var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升const声明的变量不允许修改null和undefined区别Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。用法：变量被声明晰，但没有赋值时，就即是undefined。挪用函数时，应该提供的参数没有提供，该参数即是undefined。

工具没有赋值的属性，该属性的值为undefined。函数没有返回值时，默认返回undefined。Null类型也只有一个值，即null。

null用来表现尚未存在的工具，常用来表现函数企图返回一个不存在的工具。用法作为函数的参数，表现该函数的参数不是工具。作为工具原型链的终点。

界说函数的方法函数声明//ES5function getSum(){}function (){}//匿名函数//ES6()=>{}函数表达式//ES5var getSum=function(){}//ES6let getSum=()=>{}结构函数const getSum = new Function('a', 'b' , 'return a + b')JS作用域的明白JS中的作用域分为两种：全局作用域和函数作用域。函数作用域中界说的变量，只能在函数中挪用，外界无法会见。

没有块级作用域导致了if或for这样的逻辑语句中界说的变量可以被外界会见，因此ES6中新增了let和const下令来举行块级作用域的声明。更多作用域的相识可以看JS作用域闭包的明白简朴来说闭包就是在函数内里声明函数，本质上说就是在函数内部和函数外部搭建起一座桥梁，使得子函数可以会见父函数中所有的局部变量，可是反之不行以，这只是闭包的作用之一，另一个作用，则是掩护变量不受外界污染，使其一直存在内存中，在事情中我们还是少使用闭包的好，因为闭包太消耗内存，不到万不得已的时候只管不使用。

更多闭包的内容可以看JS闭包数组去重let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];function unique1(arr){let result = [arr[0]];for (let i = 1; i < arr.length; i++) {let item = arr[i];if(result.indexOf(item) == -1){result.push(item);}}return result;}console.log(unique1(arr));更多JS去重的方法JS数组去重call,apply和bind区别三个函数的作用都是将函数绑定到上下文中，用来改变函数中this的指向；三者的差别点在于语法的差别。fun.call(thisArg[, arg1[, arg2[, ...]]])fun.apply(thisArg, [argsArray])所以apply和call的区别是call方法接受的是若干个参数列表，而apply吸收的是一个包罗多个参数的数组。而bind()方法建立一个新的函数, 当被挪用时，将其this关键字设置为提供的值，在挪用新函数时，在任何提供之前提供一个给定的参数序列。

var bindFn = fun.bind(thisArg[, arg1[, arg2[, ...]]])bindFn()Demos：var name = 'window';var sayName = function (param) { console.log('my name is:' + this.name + ',my param is ' + param)};//my name is:window,my param is window paramsayName('window param')var callObj = { name: 'call'};//my name is:call,my param is call paramsayName.call(callObj, 'call param');var applyObj = { name: 'apply'};//my name is:apply,my param is apply paramsayName.apply(applyObj, ['apply param']);var bindObj = { name: 'bind'}var bindFn = sayName.bind(bindObj, 'bind param')//my name is:bind,my param is bind parambindFn();==和===区别==， 双方值类型差别的时候，要先举行类型转换，再比力===，不做类型转换，类型差别的一定不等。==类型转换历程：如果类型差别，举行类型转换判断比力的是否是 null 或者是 undefined, 如果是, 返回 true .判断两者类型是否为 string 和 number, 如果是, 将字符串转换成 number判断其中一方是否为 boolean, 如果是, 将 boolean 转为 number 再举行判断判断其中一方是否为 object 且另一方为 string、number 或者 symbol , 如果是, 将 object 转为原始类型再举行判断经典面试题：[] == ![] 为什么是true转化步骤：!运算符优先级最高，![]会被转为为false，因此表达式酿成了：[] == false凭据上面第(4)条规则，如果有一方是boolean，就把boolean转为number，因此表达式酿成了：[] == 0凭据上面第(5)条规则，把数组转为原始类型，挪用数组的toString()方法，[]转为空字符串，因此表达式酿成了：'' == 0凭据上面第(3)条规则，双方数据类型为string和number，把空字符串转为0，因此表达式酿成了：0 == 0双方数据类型相同，0==0为true深拷贝和浅拷贝浅拷贝function simpleClone(obj) { var result = {}; for (var i in obj) { result[i] = obj[i]; } return result;}深拷贝，遍历工具中的每一个属性function deepClone(obj) { let result; if (typeof obj == 'object') { result = isArray(obj) ? [] : {} for (let i in obj) { //isObject(obj[i]) ? deepClone(obj[i]) : obj[i] //多谢"朝歌在掘金"指出，多维数组会有问题 result[i] = isObject(obj[i])||isArray(obj[i])?deepClone(obj[i]):obj[i] } } else { result = obj } return result}function isObject(obj) { return Object.prototype.toString.call(obj) == "[object Object]"}function isArray(obj) { return Object.prototype.toString.call(obj) == "[object Array]"}防抖和节省防抖function debounce(fn, delay) { let timer = null; return function () { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); }}节省function throttle(fn, cycle) { let start = Date.now(); let now; let timer; return function () { now = Date.now(); clearTimeout(timer); if (now - start >= cycle) { fn.apply(this, arguments); start = now; } else { timer = setTimeout(() => { fn.apply(this, arguments); }, cycle); } }}cookie,sessionStorage和localStoragecookie用来生存登录信息，巨细限制为4KB左右localStorage是Html5新增的，用于当地数据存储，生存的数据没有逾期时间，一般浏览器巨细限制在5MBsessionStorage接口方法和localStorage类似，但生存的数据的只会在当前会话中生存下来，页面关闭后会被清空。

0.1+0.2!=0.3怎么处置惩罚把需要盘算的数字升级（乘以10的n次幂）成盘算性能够准确识此外整数，等盘算完成后再举行降级（除以10的n次幂），即：(0.1*10 + 0.2*10)/10 == 0.3 //true更多关于浮点数精度处置惩罚请看JS中浮点数精度问题JS实现继续首先建立一个父类// 界说一个动物类function Animal(name, color) { // 属性 this.name = name || 'Animal'; this.color = color || ['black']; // 实例方法 this.sleep = function () { console.log(this.name + '正在睡觉！'); }}// 原型方法Animal.prototype.eat = function (food) { console.log(this.name + '正在吃：' + food);};原型链继续new了一个空工具，这个空工具指向Animal而且Cat.prototype指向了这个空工具，这种就是基于原型链的继续。function Cat(name) { this.name = name || 'tom'}Cat.prototype = new Animal()var cat = new Cat()cat.color.push('red')cat.sleep() //tom正在睡觉！cat.eat('fish') //tom正在吃：fishconsole.log(cat.color) //["black", "red"]console.log(cat instanceof Animal) //trueconsole.log(cat instanceof Cat) //truevar new_cat = new Cat()console.log(new_cat.color) //["black", "red"]特点：基于原型链，既是父类的实例，也是子类的实例。缺点：1.无法实现多继续；2.所有新实例都市共享父类实例的属性。

结构继续function Dog(name) { Animal.call(this) this.name = name || 'mica'}var dog = new Dog()dog.color.push('blue')dog.sleep() // mica正在睡觉！dog.eat('bone') //Uncaught TypeError: dog.eat is not a functionconsole.log(dog.color) //["black", "blue"]console.log(dog instanceof Animal) //falseconsole.log(dog instanceof Dog) //truevar new_dog = new Dog()console.log(new_dog.color) //["black"]特点：可以实现多继续（call多个），解决了所有实例共享父类实例属性的问题。缺点：1.只能继续父类实例的属性和方法；2.不能继续原型上的属性和方法。组合继续function Mouse(name){ Animal.call(this) this.name = name || 'jerry'}Mouse.prototype = new Animal()Mouse.prototype.constructor = Mousevar mouse = new Mouse()mouse.color.push('yellow)mouse.sleep() //jerry正在睡觉！mouse.eat('carrot') //jerry正在吃：carrotconsole.log(mouse instanceof Animal)//trueconsole.log(mouse instanceof Mouse)//truevar new_mouse = new Mouse()console.log(new_mouse.color) //["black"]特点：可以继续实例属性/方法，也可以继续原型属性/方法缺点：挪用了两次父类结构函数，生成了两份实例三、vuemvc和mvvm明白MVCMVC即Model View Controller，简朴来说就是通过controller的控制去操作model层的数据，而且返回给view层展示。View 接受用户交互请求View 将请求转交给Controller处置惩罚Controller 操作Model举行数据更新生存数据更新生存之后，Model会通知View更新View 更新变化数据使用户获得反馈MVVMMVVM即Model-View-ViewModel，将其中的 View 的状态和行为抽象化，让我们可以将UI和业务逻辑离开。

MVVM的优点是低耦合、可重用性、独立开发。View 吸收用户交互请求View 将请求转交给ViewModelViewModel 操作Model数据更新Model 更新完数据，通知ViewModel数据发生变化ViewModel 更新View数据MVVM模式和MVC有些类似，但有以下差别ViewModel 替换了 Controller，在UI层之下ViewModel 向 View 袒露它所需要的数据和指令工具ViewModel 吸收来自 Model 的数据归纳综合起来，MVVM是由MVC生长而来，通过在Model之上而在View之下增加一个非视觉的组件未来自Model的数据映射到View中。

响应原理vue接纳数据挟制联合公布者-订阅者模式的方式，通过Object.defineProperty挟制data属性的setter，getter，在数据变更时公布消息给订阅者，触发相应的监听回调。生命周期函数beforeCreate(建立前) vue实例的挂载元素$el和数据工具 data都是undefined, 还未初始化created(建立后) 完成了 data数据初始化, el还未初始化beforeMount(载入前) vue实例的$el和data都初始化了, 相关的render函数首次被挪用mounted(载入后) 此历程中举行ajax交互beforeUpdate(更新前)updated(更新后)beforeDestroy(销毁前)destroyed(销毁后)组件data为什么返回函数组件中的data写成一个函数，数据以函数返回值形式界说，这样每复用一次组件，就会返回一份新的data。如果单纯的写成工具形式，就使得所有组件实例共用了一份data，造成了数据污染。

vue给工具新增属性页面没有响应由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data工具上存在才气让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新。export default { data(){ return { obj: { name: 'fei' } } }, mounted(){ this.$set(this.obj, 'sex', 'man') }}v-if和v-show区别v-if 是真正的条件渲染，因为它会确保在切换历程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简朴得多——不管初始条件是什么，元素总是会被渲染，而且只是简朴地基于 CSS 的 “display” 属性举行切换。所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要很是频繁切换条件的场景。

v-model双向绑定原理v-model本质上是语法糖，v-model 在内部为差别的输入元素使用差别的属性并抛出差别的事件。text 和 textarea 元素使用 value 属性和 input 事件checkbox 和 radio 使用 checked 属性和 change 事件select 字段将 value 作为 prop 并将 change 作为事件所以我们可以v-model举行如下改写：<input v-model="sth" />// 等同于<input :value="sth" @input="sth = $event.target.value" />这个语法糖必须是牢固的，也就是说属性必须为value，方法名必须为：input。知道了v-model的原理，我们可以在自界说组件上实现v-model。//Parent<template> {{num}} <Child v-model="num"></template>export default { data(){ return { num: 0 } }}//Child<template> <div @click="add">Add</div></template>export default { props: ['value'], methods:{ add(){ this.$emit('input', this.value + 1) } }}key的作用让vue精准的追踪到每一个元素，高效的更新虚拟DOM。

触发过渡<transition> <span :key="text">{{ text }}</span></transition>当text改变时，这个元素的key属性就发生了改变，在渲染更新时，Vue会认为这里新发生了一个元素，而老的元素由于key不存在了，所以会被删除，从而触发了过渡。scoped属性作用在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

scoped属性的实现原理是给每一个dom元素添加了一个唯一无二的动态属性，给css选择器分外添加一个对应的属性选择器，来选择组件中的dom。<template> <div class="box">dom</div></template><style lang="scss" scoped>.box{ background:red;}</style>vue将代码转译成如下：.box[data-v-11c6864c]{ background:red;}<template> <div class="box" data-v-11c6864c>dom</div></template>scoped样式穿透scoped虽然制止了组件间样式污染，可是许多时候我们需要修改组件中的某个样式，可是又不想去除scoped属性。

使用/deep///Parent<template><div class="wrap"> <Child /></div></template><style lang="scss" scoped>.wrap /deep/ .box{ background: red;}</style>//Child<template> <div class="box"></div></template>使用两个style标签//Parent<template><div class="wrap"> <Child /></div></template><style lang="scss" scoped>//其他样式</style><style lang="scss">.wrap .box{ background: red;}</style>//Child<template> <div class="box"></div></template>ref的作用获取dom元素this.$refs.box获取子组件中的datathis.$refs.box.msg挪用子组件中的方法this.$refs.box.open()computed和watch区别1.当页面中有某些数据依赖其他数据举行变更的时候，可以使用盘算属性computed。<template>{{fullName}}</template>export default { data(){ return { firstName: 'xie', lastName: 'yu fei', } }, computed:{ fullName: function(){ return this.firstName + ' ' + this.lastName } }}2.watch用于视察和监听页面上的vue实例，如果要在数据变化的同时举行异步操作或者是比力大的开销，那么watch为最佳选择。<template>{{fullName}}</template>export default { data(){ return { firstName: 'xie', lastName: 'xiao fei', fullName: 'xie xiao fei' } }, watch:{ firstName(val) { this.fullName = val + ' ' + this.lastName }, lastName(val) { this.fullName = this.firstName + ' ' + val } }}vue路由有几种模式hash模式即地址栏URL中的#符号，它的特点在于：hash 虽然泛起URL中，但不会被包罗在HTTP请求中，对后端完全没有影响，不需要后台举行设置，因此改变hash不会重新加载页面。history模式使用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法（需要特定浏览器支持）。

history模式改变了路由地址，因为需要后台设置地址。组件之间的传值通信父组件给子组件传值通过props子组件给父组件传值通过$emit触发回调兄弟组件通信，通过实例一个vue实例eventBus作为前言，要相互通信的兄弟组件之中，都引入eventBus//main.jsimport Vue from 'vue'export const eventBus = new Vue()//brother1.vueimport eventBus from '@/main.js'export default{methods: { toBus () { eventBus.$emit('greet', 'hi brother') }}}//brother2import eventBus from '@/main.js'export default{ mounted(){ eventBus.$on('greet', (msg)=>{ this.msg = msg }) }}axios拦截器怎么配// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config;}, function (error) { // 对请求错误做些什么 return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });四、浏览器浏览器渲染机制构建DOM树（parse）：渲染引擎剖析HTML文档，首先将标签转换成DOM树中的DOM node构建渲染树（construct）：剖析对应的CSS样式文件信息结构渲染树（reflow/layout）：从根节点递归挪用，盘算每一个元素的巨细、位置等，给出每个节点所应该在屏幕上泛起的准确坐标；绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。重绘和重排的区别重绘（repaint或redraw）：当盒子的位置、巨细以及其他属性，例如颜色、字体巨细等都确定下来之后，浏览器便把这些原色都根据各自的特性绘制一遍，将内容出现在页面上。

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会凭据元素的新属性重新绘制，使元素出现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到结构的时候。

好比，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整结构）重排（重构/回流/reflow）：当渲染树中的一部门(或全部)因为元素的规模尺寸，结构，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。触发重排的条件：任何页面结构和几何属性的改变都市触发重排：页面渲染初始化(无法制止)添加或删除可见的DOM元素元素位置的改变，或者使用动画元素尺寸的改变——巨细，外边距，边框浏览器窗口尺寸的变化填充内容的改变，好比文本的改变或图片巨细改变而引起的盘算值宽度和高度的改变重排肯定会引发重绘，但重绘纷歧定会引发重排。

几种请求方法GET、POST、HEAD、PUT、DELETE、CONNECT、OPTIONS、TRACEget和post区别如何解决跨域CORSjsonp服务器署理更多CORS请看彻底读懂前端跨域CORSJSONP原理由于浏览器的同源计谋限制，不允许跨域请求；可是页面中的 script、img、iframe标签是破例，不受同源计谋限制。Jsonp 就是使用script标签跨域特性举行请求。JSONP 的原理就是，先在全局注册一个回调函数，界说回调数据的处置惩罚；与服务端约定好一个同名回调函数名，服务端吸收到请求后，将返回一段 Javascript，在这段 Javascript 代码中挪用了约定好的回调函数，而且将数据作为参数举行通报。

当网页吸收到这段 Javascript 代码后，就会执行这个回调函数。JSONP缺点：它只支持GET请求，而不支持POST请求等其他类型的HTTP请求。缓存的明白缓存分为强缓存和协商缓存。

强缓存不外服务器，协商缓存需要过服务器，协商缓存返回的状态码是304。两类缓存机制可以同时存在，强缓存的优先级高于协商缓存。当执行强缓存时，如若缓存掷中，则直接使用缓存数据库中的数据，不再举行缓存协商。强缓存Expirescache-control协商缓存Last-Modified 和 If-Modified-SinceEtag 和 If-None-Match更多缓存内容请看前端也要懂Http缓存机制XSS和CSRF区别跨站剧本攻击（Cross Site Scripting)，为了反面层叠样式表 CSS 混淆，故将跨站剧本攻击缩写为 XSS。

恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 内里的 Script 代码会被执行，从而到达恶意攻击用户的目的。跨站请求伪造（Cross-site request forgery），是伪造请求，冒充用户在站内的正常操作。

我们知道，绝大多数网站是通过 cookie 等方式辨识用户身份，再予以授权的。所以要伪造用户的正常操作，最好的方法是通过 XSS 或链接欺骗等途径，让用户在本机（即拥有身份 cookie 的浏览器端）提倡用户所不知道的请求。

区别：原理差别，CSRF是使用网站A自己的毛病，去请求网站A的api；XSS是向目的网站注入JS代码，然后执行JS里的代码。CSRF需要用户先登录目的网站获取cookie，而XSS不需要登录CSRF的目的是用户，XSS的目的是服务器XSS是使用正当用户获取其信息，而CSRF是伪造成正当用户提倡请求HTTP与HTTPS的区别HTTP的URL由http://起始且默认使用端口80，而HTTPS的URL由https://起始且默认使用端口443HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有宁静性的 SSL 加密传输协议HTTP的毗连很简朴，是无状态的，HTTPS 协议是由 SSL+HTTP 协议构建的可举行加密传输、身份认证的网络协议，比 http 协议宁静HTTP状态码1xx表现客户端应该继续发送请求2xx表现乐成的请求200表现OK，正常返回信息201表现请求乐成且服务器建立了新的资源202表现服务器已经接受了请求，但还未处置惩罚3xx表现重定向301表现永久重定向，请求的网页已经永久移动到新位置302表现暂时重定向304表现自从上一次请求以来，页面的内容没有改变过4xx表现客户端错误401表现服务器无法明白请求的花样402表现请求未授权403表现克制会见404表现请求的资源不存在，一般是路径写错了5xx表现服务器错误500表现最常见的服务器错误503表现服务器暂时无法处置惩罚请求五、性能优化使用CDNgzip压缩文本压缩合并请求雪碧图图片懒加载缓存资源淘汰DOM操作更多前后端资料请关注头条号【JAVA后端架构】。

整理不易，且看且珍惜。关注头条号《 JAVA 后端架构 》 ，话痨技术，职场，招聘，在线面试，进阶提升。天天一篇技术分享没有做不到的，只有想不到的。如果以为写得还不错，请关注我的头条号主页。

更多文章请会见【Java后端架构】。

本文来源：必威betway中文版-www.hzxuqing.com