一.烽火面试
1.http与https的区别
http是超文本传输协议，是从服务器传输超文本到本地浏览器的传输协议。
https为浏览器和服务器之间的通信进行加密
安全，端口，性能，费用
1）https是http协议的安全版本，http协议的数据传输是明文的，不安全;
https使用了SSL/TLS协议进行了加密处理，相对更安全
2）http 和 https 使用连接方式不同，默认端口也不一样，http是80，https是443
3）https由于需要设计加密以及多次握手，性能方面不如 http
4）https需要SSL，费用高
2. vue的生命周期(ajax请求放在那个周期，周期有什么区别)
先创建Vue实例对象，再创建虚拟dom节点，最后把实例中的数据与虚拟dom节点中的数据绑定在一起
beforeCreate 创建实例前
created 创建实例后
beforeMount 组件挂载到实例前
mounted 组件挂载到实例后
beforeUpdate 数据更新前
updated 数据更新后
beforeDestroy 实例销毁前
destroyed 实例销毁后
一般情况下，都放在mounted中，保证逻辑的统一性。(因为生命周期是同步执行的，ajax是异步执行的。)
在created的时候，视图中的dom并没有被渲染出来，无法操作dom节点。
在mounted中，dom节点已经渲染出来了，所以可以直接使用dom节点。
3. 两栏布局(多种)
1）浮动布局：1.左侧float:left;右侧margin-left;
左侧设置左浮动，给一个固定宽度;
右侧设一个margin-left大于左侧的宽度
2.左侧float:left; 右侧overflow:hidden；
2）定位布局：父元素里面包裹两个子元素,
父元素设置position:relative相对定位
两个子元素设置position:absolute绝对定位，左边子元素设置一个宽度
右边的子元素设置position:absolute绝对定位,再设置left大于左边子元素的宽度
3）伸缩盒布局：父元素设置display:flex
左边子元素设置一个宽度，右边子元素设置flex为1
注意的是，flex容器的一个默认属性值:align-items: stretch;
这个属性导致了列等高的效果。为了让两个盒子高度自动，需要设置: align-items: flex-start
4）grid网格布局：容器设置为display: grid;
grid-template-columns: 200px auto;
5）容器display: table设置为表格; table-layout: fixed; width: 100%;
左右通过 display: table-cell设置为表格单元
左边设置固定宽度，右边设置 width: 100% 填充剩下的宽度
4.清除浮动(伪元素内部要详细描述)
父子级：
1.在子集元素后添加一个无意义的空元素，设置clear:both;
2.给父级元素设置overflow:hidden;或者给父元素设置一个高度
3.伪元素清除浮动
父元素::after{
content:"";
display:block;
clear:both;
}
兄弟级：clear:left;清除左浮动元素带来的影响
clear:right;清除右浮动元素带来的影响
clear:both;清除左右两侧浮动元素带来的影响
5. cookie和session的功能
cookie存在客户端。浏览网站时,网站把数据存在客户端 , 来跟踪用户,实现用户自定义功能。
session存在服务器。实现网页之间数据传递，是一个存储在服务器的对象集合。
区别：安全性，存储，失效，使用
1）安全性要求低用cookie，要求高的用session
2）cookie只能存储字符串，session可以存储任何信息
3）cookie如果不设置时间，当关闭浏览器时，cookie就失效，不会在本地保存；
session的生命周期是一个会话（启动浏览器到关闭浏览器）
4）在存储相对持久的信息时，应考虑使用 cookie
在进行一些登录的验证及信息拦截的时候，可以使用session。
6. token与cookie的区别
1）token:token是服务器生成的一串字符串，作为客户端进行请求的一个令牌，
当第一次登录后，服务器生成一个token返回给客户端，
以后客户端只需带上这个token来请求数据即可，无需再次带上用户名和密码。
token的目的：为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
2）token存在哪儿都行，localstorage或者cookie。cookie存在客户端。
3）对于token而言，服务器不需要去查看你是谁，不需要保存你的会话
token和cookie一样都是首次登陆时，由服务器下发，都是当交互时进行验证的功能，作用都是为无状态的HTTP提供持久机制。
7. cookie,sessionStorage和localStorage的区别
1.cookie:保存在客户端，包含了用户信息。当客户端向服务器发起请求，服务器会向客户端浏览器发送一个cookie。客户端会把cookie存起来，当下次客户端再次请求服务端，会携带上这个cookie,服务器会通过这个cookie来确认身份。
2.sessionStorage：会话存储。只存在一个会话中。生命周期是在浏览器关闭前。
3.localStorage：本地存储。使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据
区别：
1）cookie在浏览器来回传递，而sessionStorage和localStorage不会自动把数据发送到服务器，仅在本地保存
2）存储大小限制不同。cookie只适合存储很小的数据。sessionStorage和localStorage可以存储大的数据
3）数据有效期限不同，cookie只在设置的cookie过期时间之前有效，
sessionStorage仅在当前浏览器窗口关闭之前有效；
localStorage始终有效，窗口或者浏览器关闭也一直保存；
4）作用域不同：sessionStorage不能在不同的浏览器窗口中共享，即使不在同一个页面；
localStorage和cookie在所有同源窗口共享。
8.es6的新特性对比于es5。在使用上有什么优化。
1）变量声明：let和const。不能重复声明，没有变量声明提升，有块级作用域
2）箭头函数就是函数的一种简写形式
3）对象，数组解构：使用模式匹配方式从一个对象，数组中快速获取值的方式
4）扩展运算符和rest参数：右拆分; 左聚集
扩展运算符⽤于将数组中的元素拆分出来;
rest参数是拓展运算符的逆运算
5）for...of 和 for...in
for...of 用于遍历一个迭代器
for...in 用来遍历对象中的属性
9. 项目中的功能，具体的功能实现(要多熟悉一下)
1.登录功能：在登录页面,设置全局前置守卫forEach，
设置白名单，login/register
判断有没有token,如果token不存在就留在login页面，token存在就next()跳转到home页面
2.app订单确认页面：点击下单支付后，跳转的页面没有底部标签栏（首页，订单，我的）怎么处理？
第一种方法：
第一级路由
第二级路由
第二种方法：
写一个FullPage页面（固定定位）,并且z-index: 1000;盖住下面底部标签栏(首页，订单，我的)
再在FullPage页面写一个插槽，插入订单确认页面
3.失活的组件将会被缓存！缓存组件
<keep-alive>
<component :is="current"></component>
</keep-alive>
10.数组api，方法返回值(splice与slice的区别 !)
栈
1）push 尾部插入 要插入的元素 返回新数组长度newarr.length
2）pop 尾部删除 无参数 返回删除的项arr[length-1]
队列
3）unshift 头部插入 要插入的元素 返回新数组长度newarr.length
4）shift 头部删除 无参数 返回删除的项arr[0]
5）sort
6）reverse
1.slice() 不改变原数组
功能：截取数据项
arr.slice(index_start,index_end); 左闭右开
2.splice() 改变原数组
1.arr.splice(index_start,count);删除
2.arr.splice(index_start,count,新增的数据项s);替换或者插入
arr3.splice(1,2,'a','b','c');//替换
arr3.splice(1,0,'a','b','c');//插入
11.get和post的区别。
1）请求方式：GET提交，请求的数据会拼接在URL后面（把数据放在HTTP协议请求头），以?分割URL和传输数据，多个参数用&连接。
POST提交：把提交的数据放置在是HTTP的请求体中。
2）数据大小：GET提交的数据大小有限制（因为浏览器对URL的长度有限制）；
POST方法提交的数据没有限制。
3）安全性：GET方式提交数据，会带来安全问题。请求的url会被保留在历史记录中。
4）缓存：get有缓存，post没有缓存
5）应用场景： 一般get请求对服务器资源不会产生影响，比如说请求一个网页的资源。
post一般对服务器资源产生影响，比如注册用户这一类的操作。
12.浏览器的兼容性问题
1.浏览器默认样式
问题：有些浏览器有默认样式，不同浏览器样式不同，
导致我们布局的页面在不同浏览器发生错乱
解决：清除默认样式，保证在每个浏览器样式统一
body{/*清除body自带的间隔和填充*/
margin:0px;
padding:0px;
}
* {/*清除所有标签的间隔和填充*/
margin: 0px;
padding: 0px;
}
ul{
list-style:none;
}
2. 图片问题
1）img标签底部间隙问题
问题：div中包含一张图片，底部有间隙
解决：1.将图片的垂直对齐方式vertical-align,设为top或者bottom
2.将图片转换为块元素display:block
3.将包含图片的父容器的字体大小设置为0，font-size:0
4.标签中无空格等
2）img标签IE下图片有边框
问题：图片加了超链接之后产生蓝色边框（IE6~10）
解决：
img{
border:none;
}
3.margin上下边框合并问题
问题：1.当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值
2.双倍边距：设置浮动，同时又设置margin-left
解决：1.只给一个容器调整外边框的间隔即可，不要同时给两个
2.给浮动的元素指定display:inline;
4.列表前设置图片，图片与后面文字对齐问题
解决：采用背景定位和字符缩进
background:url() no-repeat left center;
text-indent:16px;
5. 除去滚动条的问题
问题：隐藏滚动条
解决：1.只有ie6-7支持
2.除ie6-7不支持 body{}
3.所有浏览器 html{overflow:hidden}
6.高度问题
问题：如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
解决： 设置overflow:hidden;
13.vue.use()的底层原理
安装 Vue.js 插件。将这个插件直接当成 install 函数来处理。
install 方法调用时，会将 Vue 作为参数传入。
14. 数组遍历(又是希望说出reduce函数。)
1.for...in...
for...of...
2.迭代方法：
1）every
2）some
3）filter过滤
4）map映射：默认返回一个数组，这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。
map方法不改变原数组。
5）forEach：提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值。
3.reduce函数
reduce方法，会让数组的每一个元素都执行一次回调函数，并将上一次循环时回调函数的返回值作为下一次循环的初始值，最后将这个结果返回。
一.烽火前端
1.怎么学习前端？
首先，学校开过前端方向的课程，学习了H5,C3,JS等基础语法；
自己买过前端的书籍来学习《JavaScript高级程序设计》
此外，通过在B站看黑马前端的课程来提升自己
学习Vue时，也是通过观看视频，以及查看Vue官方文档来学习
同时，跟着实验室老师小组合作项目来巩固所学的知识，丰富自己的项目经验
2.小组合作中遇到的问题？
项目中遇到了哪些问题？怎么解决？
1）一级路由和二级路由的问题：公众号点餐的项目。
登录，注册在一级路由。首页在二级路由，首页下面有一排标签栏(首页，订单，我的)
首页点餐去结算后，跳转到订单确认页面。订单确认页面没有下面那排标签栏。
第一种方法：写一个fullpage页面覆盖住下面的标签栏；
第二种方法：订单确认页面写在一级路由就解决了问题
2）附件上传处理：附件服务器(老师提供的，七牛云付费)
数据改变引起视图的变化
form引用数据类型，地址没有改变
需要深克隆，用到lodash的_cloneDeep
1.方法1
this.form.icon = icon_url;
浅拷贝，地址值的复制
this.form = this.form;
用lodash中的深克隆，强制改变地址
this.form = _.cloneDeep(this.form);
2.方法2
vue无法检测对象的添加或者移除
vue的一个实例方法：$set
this.$set(this.form, "photo", icon_url);
3.localStorage和sessionStorage的区别
1）localStorage：本地存储。使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据
2）sessionStorage：会话存储。只存在一个会话中。生命周期是在浏览器关闭前。
相同点：
1）localStorage和sessionStorage都不会自动把数据发送到服务器，仅在本地保存
2）sessionStorage和localStorage都可以存储大的数据
区别：1）数据有效期限不同：localStorage始终有效，窗口或者浏览器关闭也一直保存;
sessionStorage仅在当前浏览器窗口关闭之前有效；
2）作用域不同：localStorage在所有同源窗口共享;
sessionStorage不能在不同的浏览器窗口中共享，即使不在同一个页面；
4.左右定宽，中间自适应
1）浮动布局：两边使用 float，中间使用 margin
2）定位布局：两边使用 absolute，中间使用 margin
3）伸缩盒布局：容器设置为display:flex;，
两边设置固定宽度，中间设置为flex:1
4）grid网格布局：容器设置为display: grid;
grid-template-columns: 300px auto 300px;
5）容器display: table设置为表格,table-layout: fixed; width: 100%;
左中右通过 display: table-cell设置为表格单元
左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度
5.水平垂直居中的方法？不知宽高的元素水平垂直居中？
1）宽高已知：
1.定位+margin:负值：父相子绝，子元素移动自身50%(top:50%; left:50%)
margin-left:-子元素的宽度; margin-top:-子元素的高度;
2）宽高未知：1.定位+transform：父相子绝，子元素移动自身50%(top:50%; left:50%)
transform: translate(-50%,-50%);元素移动自己宽度和高度的-50%
2.flex弹性布局：父元素设置display: flex; justify-content: center; align-items: center;
在主轴上的对齐方式 在交叉轴的对齐方式
3.父元素设置display:table-cell，子元素设置display: inline-block
父元素vertical-align: middle;text-align: center;
4.grid网格布局：display: grid; justify-content: center; align-items: center;
3）宽高已知，宽高未知都可以实现：1.定位+margin:auto：父相子绝，子元素四个定位属性的值都设置为0，再设置margin：auto
子级的虚拟占位已经撑满了整个父级
6.文本在盒子中垂直居中的方法
1）单行文本：1.固定高度：line-height等于盒子height
（如果要水平居中text-align:center;）
2）多行文本：1.未知高度：设置上下padding值一样
2.flex布局：display:flex align-items:center
3.定位布局：父相子绝，绝对定位top为50%，margin-top=-子元素的高度/2；
4.父元素设置display:table
子元素设置display:table-cell; vertical-align:middle;
7.图片垂直居中的方法
1）利用display:table-cell
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
2）背景法：background: url(1.jpg) no-repeat center center;
8.get和post的区别
1）请求方式：GET提交，请求的数据会拼接在URL后面（把数据放在HTTP协议请求头），以?分割URL和传输数据，多个参数用&连接。
POST提交：把提交的数据放置在是HTTP的请求体中。
2）数据大小：GET提交的数据大小有限制（因为浏览器对URL的长度有限制）；
POST方法提交的数据没有限制。
3）安全性：GET方式提交数据，会带来安全问题。请求的url会被保留在历史记录中。
4）缓存：get有缓存，post没有缓存
5）应用场景： 一般get请求对服务器资源不会产生影响，比如说请求一个网页的资源。
post一般对服务器资源产生影响，比如注册用户这一类的操作。
9.js数据类型
1）基本数据类型（6种）
number
string
boolean
null
undefined
Symbol(es6)：创建一个独一无二的标识
bigInt(谷歌67版本)
2）引用数据类型（4种)
1.Object(function、Array、Date)
1）Array
数组类型的检测
1）instanceof
arr instanceof Array
2）Array
Array.isArray(arr)
3）isPrototypeOf
Array.prototype.isPrototypeOf(arr)
4）obj.__proto__ === Array.prototype;
通过原型链做判断
5）Object.prototype.toString.call([])
10.怎么判断数据类型？typeOf返回什么？
1）在不知道数据类型的情况下：typeof
typeof能够返回的类型有： number、string、boolean、undefined、object、function
typeof不能返回null类型,null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用
Array和null返回的都是object
2）已知对象类型的情况下：instanceof
返回一个布尔值，这个对象是否是这个特定类或者是它的子类的一个实例。
instanceof只能正确判断引用数据类型，而不能判断基本数据类型
3）Object.prototype.toString.call() ;
使用 Object 对象的原型方法 toString 来判断数据类型：
同样是检测对象obj调用toString方法，obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样，这是为什么？
这是因为toString是Object的原型方法，而Array、function等类型作为Object的实例，都重写了toString方法。
4）constructor
('str').constructor === String
返回一个布尔值
11.typeof与instanceof的区别：
1）typeof返回数据类型（null除外），instanceof返回布尔值
2）typeof 可以判断基础数据类型（null除外）; 引用数据类型中，除了function 类型以外，其他的也无法判断
3）instanceof 可以准确判断引用数据类型，不能判断基本数据类型
12.let和const
1）不能重复声明
2）没有变量声明提升
3）有块级作用域
4）修改声明的变量
let可以修改声明的变量
const声明一个只读的常量。一旦声明，常量的值就不能改变
13.跨域
A网站想要获取B网站服务器上的资源，网站通过AJAX发送请求的时候，本地服务器地址与请求地址、协议类型（http）、IP地址（域名）、端口，三者有其一不同都称之为跨域请求资源
解决跨域问题：
1.CORS：cors是一个W3C制定的跨域标准，全称是：Cross-origin resource sharing，这句话的含义就是跨域资源共享，这种方式主要应用在服务端。
他是通过设置服务端设置一个HTTP头：setHeader("Access-Control-Allow-Origin", "*")
如果Access-Control-Allow-Origin中有A，或者是通配符*，浏览器就会允许A跨域，通配符代表任何地址都能跨域。
客户端不需要作任何设置，还是按照AJAX请求一样，这样就能获取跨域资源。
2.JSONP：jsonp是通过script标签的src属性，我们都知道src属性能获取同一个ip服务器上，不同文件夹的文件，它其实就是一个HTTP请求，而且它支持跨域，不需要服务端设置直接就能跨域获取资源。
14.v-if和v-show的区别
1）相同点：1.作用效果相同，都能控制dom元素在页面的显示
2.用法上相同，当表达式为true时，会占据页面的位置
2）不同点：1.控制手段：v-show隐藏是为该元素添加css样式display:none，dom元素依旧还在。v-if显示隐藏是直接操作dom节点增加与删除
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
3.编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时不做操作，直到为真才渲染
1）v-show 由false变为true的时候不会触发组件的生命周期,如果需要非常频繁地切换，则使用v-show较好
2）v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，
由true变为false的时候触发组件的beforeDestory、destoryed方法
如果运行条件很少改变，则使用v-if较好
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
15.v-if和v-for能不能同时使用？优先级？
1）能同时使用，但是不建议。每次渲染都会先循环再进行条件判断，带来性能方面的浪费
2）避免出现这种情况：1.在外层嵌套template模板（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
2.如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项
v-for优先级比v-if高
16.性能优化
1.懒加载
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。
在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，
这样就浪费了性能。
如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。
这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
2.CDN
3.回流与重绘
4.节流与防抖
1）防抖debounce：在事件被触发 n 秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
2）节流throttle：指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。
1）防抖的应用场景：
按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次
服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce
2）节流的应⽤场景：
拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题
5.图片优化
6.webpack优化
二.递航
1.二叉树的宽度优先遍历和深度优先遍历
1.宽度优先遍历：
即从根节点开始依次遍历左子节点和右子节点，直到所有子节点都变遍历完为止。
2.深度优先遍历
即从根节点开始一直遍历左子节点，直到左子节点为空，则访问其右子节点，然后以该节点为根节点，一直访问其左子节点，直到左子节点为空；如果此节点左右节点都不为空，则回退到上一左子节点，访问其右子节点，如果不为空，则以该节点为新的根节点开始新的遍历。如此往复直到所有节点都被访问完毕。
2.webpack打包工具？怎么将vue代码编译成html代码？
webpack：应用程序的静态模块打包器。
webpack处理应用程序时，在内部构建一个依赖图，这个依赖图对应映射到项目需要的每个模块（不再局限js文件），并将这些模块打包成一个或多个bundle。
1）入口(entry)：指示 webpack 使用哪个模块。进入入口起点后，webpack 会找出有哪些模块和库是入口起点依赖的。
每个依赖项随即被处理，最后输出到 bundles 文件中
在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。
2）输出(output)：告诉 webpack 在哪里输出创建的 bundles，以及如何命名这些文件，默认值为 ./dist
3）loader：将所有类型的文件转换为 webpack 能够处理的有效模块。(webpack 只能处理 JavaScript)
在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules
4）插件(plugins)：插件的范围包括，从打包优化和压缩，重新定义环境中的变量
想要使用一个插件，需要 require() ，然后把它添加到 plugins 数组中
webpack的能力： 开发阶段 生产阶段
1.编译代码能力，提高效率，解决浏览器兼容问题 ES6 编译--> ES5
2.模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题 ES6 编译--> Bundles.js
3.万物皆可模块能力，项目维护性增强，支持不同种类的前端模块类型， .js .css 编译--> Bundles.js .css .png
统一的模块化方案，所有资源文件的加载都可以通过代码控制 .scss .png
.ts .hbs
最初的目标是实现项目的模块化
模块化：最早的时候，我们会通过文件划分的形式实现模块化(JS文件)
模块弊端：在全局中，大量模块污染了环境，模块与模块之间没有依赖关系、维护困难、没有私有空间等
解决办法：1.命名空间，每个模块只暴露一个全局对象，模块的内容都挂载到这个对象上(没有解决依赖等问题)
2.立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明
3.理想的解决方式：在页面中引入一个JS入口文件，按需加载进来
还需要规定模块化的规范，CommonJS和ES Modules
webpack解决的问题：1.模块化
2.通过ES6+、TS开发脚本逻辑，通过sass、less编写css样式来加快开发效率或者安全性
3.监听文件的变化并且反映到浏览器上，提高开发的效率
4.JS需要模块化，HTML和CSS也需要模块化
5.开发完成后需要将代码进行压缩、合并以及其他优化
3.打包编译区分正式环境，测试环境
本地和服务器ip不一样
打包怎么识别是在本地还是服务器
本地运行测试环境：npm run dev
测试环境打包：npm run build
本地运行正式环境：npm run prod
正式环境打包：npm run build prod
4.项目部署在两台机器上怎么处理？一台机器上访问的人太多，一台机器承载不了。
5.服务器看日志，命令行
tail -f mywork.log
1.tailf mywork.log | grep --line-buffered findUserList 实时跟踪日志，这里是只要findUserList 这个方法被运行，就会将它的日志打印出来，用于跟踪特定的日志运行。 --line-buffered 是一行的缓冲区，只要这一行的缓冲区满了就会打印出来，所以可以用于实时监控日志。
2. tailf -n 500 mywork.log 打印最后500行日志，并且持续跟踪日志。
tail -n 2000 mywork.log | more 分页查看最后2000行日志。
3. grep '调用远程服务运行结果是' mywork.log | more 将有关 '调用远程服务运行结果是' 字符串的结果都打印出来，并且是分页打印，用于日志太多的情况。用空格翻页。
4. cat mywork.log | grep '查看前后100行' -C 100
5. cat mywork.log | grep '查看前100行' -B 100
6. cat mywork.log | grep '查看后100行' -A 100
7.按照行号查看日志
wc -l mainCms.log 显示文件一共有多少行。
cat -n mywork.log | tail -n +92|head -n 20 表示先查看92行之后的日志，然后在看这92行之后的日志的前20行。也就是查看92到112行之间的日志。
sed -n '5,10p' mywork.log 查看5行到10行的日志。
8.按日期查看日志
sed -n '/2018-05-26 17:07:00/,/2018-05-26 17:06:59/p' mywork.log
sed -n '/2018-08-16 18:/p' mainCms.log | less -mN
9.grep -E '123|abc' mywok.log 找出包含123或者abc的行。
6.git merge和git rebase有什么区别？
merge和rebase都是合并历史记录，但是各自特性不同：
1）merge
通过merge合并分支会新增一个merge commit，然后将两个分支的历史联系起来
其实是一种非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂
2）rebase
rebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交
主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交
7.http请求的状态码？
1xx informational(信息性状态码) 请求正在处理
2xx success(成功状态码) 请求处理完毕
3xx redirection(重定向状态码) 需要进行附加操作才能完成请求
4xx client error (客户端错误状态码) 服务器无法处理请求
5xx server error(服务器错误状态码) 服务器处理请求出错
1）2XX 成功
200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容
206 Partial Content，进行范围请求
2）3XX 重定向
301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求
3）4XX 客户端错误
400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源
4）5XX 服务器错误
500 internal sever error，表示服务器端在执行请求时发生了错误
501 Not Implemented，表示服务器不支持当前请求所需要的某个功能
502 bade gateway 一般都是upstream出错，对于PHP，造成502的原因常见的就是脚本执行超过timeout设置时间，或者timeout设置过大，导致PHP进程长时间不能释放。
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求
同样是重定向，307，303，302的区别？
302是http1.0的协议状态码，在http1.1版本的时候为了细化302状态码⼜出来了两个303和307。
303明确表示客户端应当采⽤get⽅法获取资源，他会把POST请求变为GET请求进⾏重定向。
307会遵照浏览器标准，不会从post变为get。
8.浏览器输入url，html渲染到浏览器上的过程
把url解析成什么？最后为什么要断开TCP连接？
url解析成ip地址
1.DNS解析URL：寻找哪个服务器上有请求的资源。
因为ip地址不容易记忆，一般会使用URL域名作为网址。
DNS解析就是将URL解析成IP地址的过程。
2.浏览器发送请求与服务器交互：
1）首先浏览器利用tcp协议通过三次握手与服务器建立连接
http请求包括header和body。header中包括请求的方式（get和post）、请求的协议 （http、https、ftp）、请求的地址ip、缓存cookie。body中有请求的内容。
2）浏览器根据解析到的IP地址和端口号发起http的get请求.
3）服务器接收到http请求之后，开始搜索html页面，并使用http返回响应报文
4）若状态码为200显示响应成功，浏览器接收到返回的html页面之后，开始进行页面的渲染
3.浏览器对接收到的html页面渲染：
1）浏览器根据深度遍历的方式把html节点遍历成dom树
2）将css解析成CSS DOM树
3）将dom树和CSS DOM树构造成render树
4）JS根据得到的render树 计算所有节点在屏幕中的位置，进行布局（回流）
5）遍历render树并调用硬件API绘制所有节点（重绘）
构造render渲染树的过程：
1）从DOM树的根节点开始遍历每个可见的节点。
2）对于每个可见的节点，找到CSS树中的对应的规则，并且应用他们。
3）根据每个可见的节点及其对应的样式，组合生成渲染树。
9.socket通信？
10.computed和watch的区别？
1）computed 计算属性 : 1.依赖其它属性值，
2.有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
2）watch 侦听器 : 1.观察的作用，
2.无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。
11.全局导航钩子，router.beforeEach() router.afterEach()
全局拦截写在哪？
Vue-router 导航守卫有哪些
1）全局前置/钩子：beforeEach、beforeResolve、afterEach
2）路由独享的守卫：beforeEnter
3）组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
12.tooken怎么来的？
tooken身份验证
13.v-if和v-show的区别
1.控制手段：v-show隐藏是为该元素添加css样式display:none，dom元素依旧还在。v-if显示隐藏是直接操作dom节点增加与删除
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
3.编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时不做操作，直到为真才渲染
1）v-show 由false变为true的时候不会触发组件的生命周期,如果需要非常频繁地切换，则使用v-show较好
2）v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，
由true变为false的时候触发组件的beforeDestory、destoryed方法
如果运行条件很少改变，则使用v-if较好
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗
14.子组件怎么访问父组件实例？
15.组件什么时候会被销毁掉？
路由跳转时组件会被销毁掉吗？
16.get和post的区别
get,post请求会被浏览器缓存吗？
1.GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接。
POST提交：把提交的数据放置在是HTTP包的请求体中。
2.GET提交的数据大小有限制（因为浏览器对URL的长度有限制）；
而POST方法提交的数据没有限制。
3.GET方式需要使用Request.QueryString来取得变量的值；
而POST方式通过Request.Form来获取变量的值。
4.GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机 器，就可以从历史记录获得该用户的账号和密码。
get有缓存，post没有缓存
1.几种HTTP请求方式：
请求方式 应用场景 成功状态码 备注
post 增加数据 201 需提交body，URL中不需指明id
delete 删除数据 200 需指明要删除的记录id
put 修改数据 200 需提交body，并指明要修改的记录id
get 查询数据 200 查询特定的一条记录需指明记录id
HTTP1.0定义了三种请求方法： get, post 和 head方法。
HTTP1.1新增了五种请求方法：options, put, delete, trace 和 connect 方法。
get 请求指定的页面信息，并返回实体主体。
head 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
post 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
put 从客户端向服务器传送的数据取代指定的文档的内容。
delete 请求服务器删除指定的页面。
connect HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
options 允许客户端查看服务器的性能。
trace 回显服务器收到的请求，主要用于测试或诊断。
2.提交请求，返回的数据并不是想要的
项目已经上线，网络断开，怎么处理？怎么给用户一个友好的交互？
3.怎么监听错误？
4.HTML常用标签div,span区别？div怎么inline？
1）块级独占一行，行内与其他元素共享一行
2）块级元素可以直接设置宽高，行内不能直接设置宽高，需要结合display来设置
3）块级元素可以嵌套块级与行内元素，而行内只能包含行内元素
4）块级元素设置margin和padding都有效; 行内元素可以设置水平方向的padding和margin，不能设置垂直方向的padding和margin
5.display的block、inline和inline-block的区别：
1）block：会独占一行，可以设置width、height、padding和margin；
2）inline：元素不会独占一行，设置width、height无效。
但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
3）inline-block：设置为行内元素，但内容作为块级元素显示，后面的对象会排列在同一行内。
6.一张图片作为背景，文本在背景图片居中显示
3964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
