前后端分离的好处
1、对于后端java工程师：
把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项目管理等等。
后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。
2、对于前端工程师：
把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。
前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。
术业有专攻，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。并且两端的发展都越来越高深，你想什么都会，那你毕竟什么都不精。
url加载到页面渲染的过程
- 输入URL，浏览器根据域名寻找IP地址
- 浏览器发送一个HTTP请求给服务器，如果服务器返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
- 服务器接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
- 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理
- 浏览器开始显示HTML
- 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件——包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…
浏览器渲染引擎在获取到内容后的基本流程：
- 解析HTML
- 构建DOM树
- DOM树与CSS样式进行附着构造呈现树
- 布局
- 绘制
页面渲染css和dom的过程
1、浏览器解析html源码，然后创建一个DOM树。
在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。
2、浏览器解析CSS代码，计算出最终的样式数据。
对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。
3、创建完DOM树并得到最终的样式数据之后，构建一个渲染树。
渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。
4、当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
前端页面处理缓存的方法
对于 HTML页面 缓存分为 三部分：页面内容缓存问题、css缓存问题、js文件缓存问题
1、页面内容
在<head>标签中配置<meta>标签的http-equiv属性
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
2、CSS和JS文件
每次修改通过版本号来避免缓存
<link rel="stylesheet" href="styles/admin.css"/>
<script src="js/admin.js"></script>
改成
<link rel="stylesheet" href=".styles/admin.css?v=180911"/>
<script src="js/admin.js?v=180911"></script>
就是只要在每次修改后改一下版本号即可
什么情况下能够使页面渲染加载变快
所有放在head标签里面的CSS和JS都会阻塞渲染，如果这些CSS和JS需要加载很久，页面就会空白，两种解决方法：第一种是把script放到body里面，第二种是给script加defer属性（defer属性是HTML5新增的属性，一旦script是defer延迟的，那么script将会异步加载，但是不会马上执行，会在所有元素解析完之后执行）正常script执行——>内联script 执行。并行加载，串行执行
减少head标签里的css资源，css使用内联样式
解决并发问题
1、负载均衡
负载均衡将是大型网站解决高负荷访问和大量并发请求采用的终极解决办法。
（1）单个重负载的运算分担到多台节点设备上做并行处理，每个节点设备处理结束后，将结果汇总，返回给用户，系统处理能力得到大幅度提高.
（2）大量的并发访问或数据流量分担到多台节点设备上分别处理，减少用户等待响应的时间，这主要针对Web服务器、FTP服务器、企业关键应用服务器等网络应用
2、数据库集群
就是利用至少两台或者多台数据库服务器，构成一个虚拟单一数据库逻辑映像，像单数据库系统那样，向客户端提供透明的数据服务。
3、缓存
Apache提供了自己的缓存模块，也可以使用外加的Squid模块进行缓存，这两种方式均可以有效的提高Apache的访问响应能力。在使用web语言开发的时候，各种语言基本都有自己的缓存模块和方法。
4、HTML静态化
静态化的html页面效率最高、消耗最小，所以我们可以尽可能使我们的网站上的页面采用静态页面。但是对于大量内容并且频繁更新的网站，我们无法全部手动去挨个实现，于是出现了我们常见的信息发布系统CMS，像我们常访问的各个门户站点的新闻频道，甚至他们的其他频道，都是通过信息发布系统来管理和实现的，信息发布系统可以实现最简单的信息录入自动生成静态页面，还能具备频道管理、权限管理、自动抓取等功能。
除了门户和信息发布类型的网站，对于交互性要求很高的社区类型网站来说，尽可能的静态化也是提高性能的必要手段，将社区内的帖子、文章进行实时的静态化，有更新的时候再重新静态化也是大量使用的策略，像Mop的大杂烩就是使用了这样的策略，网易社区等也是如此。
同时，html静态化也是某些缓存策略使用的手段，对于系统中频繁使用数据库查询但是内容更新很小的应用，可以考虑使用html静态化来实现，比如论坛中论坛的公用设置信息，这些信息目前的主流论坛都可以进行后台管理并且存储再数据库中，这些信息其实大量被前台程序调用，但是更新频率很小，可以考虑将这部分内容进行后台更新的时候进行静态化，这样避免了大量的数据库访问请求。
5、CDN加速技术
CDN的全称是内容分发网络。其是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。
CDN网络是在用户和服务器之间增加Cache层，主要是通过接管DNS实现，将用户的请求引导到Cache上获得源服务器的数据。缓存服务器从实际IP地址得得到内容以后，一方面在本地进行保存，以备以后使用，另一方面把获取的数据返回给客户端，完成数据服务过程。
有什么方法可以延迟js文件的挂载
- defer 属性
HTML 4.01 为 script标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
在script 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。
- async 属性
HTML5 为 script标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。
3.动态创建DOM方式
4.使用jQuery的getScript()方法
5.使用setTimeout延迟方法
6.让JS最后加载
把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度
HTML
HTML5 新元素
行级元素 块级元素
块级（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等）
行级（span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））
Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
详解
alt 和title
alt是html标签的属性，而title既是html标签，又是html属性。
title标签这个不用多说，网页的标题就是写在
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
CSS
css属性position的属性值
在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示
CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。
◆position:static 无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
◆position:absolute 绝对定位
使用position:absolute，能够很准确的将元素移动到你想要的位置，生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
◆position:fixed 相对于窗口的固定定位
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。
◆position:relative 相对定位
生成相对定位的元素，相对于元素本身正常位置进行定位。
所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
CSS3新特性
CSS sprites
CSS Sprites
1.简介
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
2.优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
一个盒子垂直水平居中有哪些方法？
（2~3种方法）
1.方法1:宽度和高度已知的。
思路：
给父元素相对定位
给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 自身 height 的一半 */
margin-left: -25px; /* 自身 width 的一半 */
}
2.方法2：宽度和高度自己未知
意思就是说子盒子本身还是有宽度和高度的，只是自己未知。
思路：
给父盒子相对定位
给子盒子绝对定位
top、right、bottom、left全为0
margin: auto;
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3.平移 定位+transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
- flex布局
1）父级对子元素进行垂直居中，居中属性只需要定义在父元素中
.allCenter{
display: flex;
justify-content: center;//实现水平居中
align-items: center;//实现垂直居中
}
.allCenterChild{//父元素不受影响
}
2）让子元素用外边距自动顶开
.allCenter{//子元素不受影响
display:flex;//设置弹性布局，display属性选为flex
}
.allCenterChild{//父元素不受影响
margin:auto;//等价于margin:auto auto auto auto;
}
5.grid布局
水平居中和垂直居中的属性定义在子元素中，不在父元素中
.allCenter{//子元素不受影响
display:grid;//设置grid布局，display属性选为grid，定义在父级上面的属性
}
.allCenterChild{//父元素不受影响，
justify-self：center;//水平居中，横向
align-self：center;//垂直居中
}
6.方法6：table-cell布局
父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
flex怎么使用，flex:1代表了什么
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis项目的长度。
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
默认值： 0 1 auto
flex:1代表让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容.
详细取值flex:1
使用自适应布局的时候用rem,为什么可以实现自适应布局，在不同的手机端表现得是什么
rem是基于html的字体大小来进行布局的
（问：不同的移动端是有不同的html字体大小吗，在拿到设计图是怎么计算的）除以16px
(问：16px是基于什么来的) 浏览器默认字体大小是16px
rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。
浏览器默认字体大小是16px
rem 与 px 的换算为 px = rem * 设置的根节点字号。
1.设置了根节点 html 字体大小
html{font-size:12px}
div{width:4rem;}
//div 的宽度换算为 px 为 4rem*12px = 48px
2.没有设置根节点 html 字体大小
div{width:4rem;}
//div 的宽度换算为 px 为 4rem*16px = 64px
如何实现两栏布局？（要求左右定宽，中间自适应）
阐述清除浮动的几种方式
1）添加额外标签
这是在学校老师就告诉我们的 一种方法，通过在浮动元素末尾添加一个空的标签例如
，其他标签br等亦可。优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。
2）使用 br标签和其自身的 html属性
这个方法有些小众，br 有 clear=“all | left | right | none” 属性
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
3)父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了
4)父元素设置 overflow：auto 属性
同样IE6需要触发hasLayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用
5）父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
6）父元素设置display:table
优雅的 Demo
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
7）使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动
Vue
Vue简介与特点
Vue 的特点
- MVVM 框架
- 单页面应用程序
- 轻量化与易学习
- 渐进式与兼容性
- 视图组件化
- 虚拟 DOM（Virtual DOM）
- 社区支持 未来的
- Vue 走向
生命周期
创建一个Vue实例；数据初始化（前后分别触发beforeCreate()、created()方法）；进行模板编译；将编译好的模板挂载到页面中（前后分别触发beforeMount(),mounted());实时监听数据准备更新渲染DOM(更新前后分别触发beforeUpdate(),updated()方法）；
最后进行实例销毁，前后分别进行beforeDestroy(),destroyed()方法。
vue父组件和子组件生命周期的执行顺序
1.加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2.子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
3.销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
vue钩子函数的用法
1 一点小小的感悟，vue生命周期钩子函数的使用并非一成不变的，要根据不同的应用场景而有所改变，稍微总结一下：
2 **beforeCreate：在实例初始化，数据观测(data observer) ** 和 event/watcher事件配置之前被调用，注意是 之前，此时data、watcher、methods统统滴没有。
这个时候的vue实例还什么都没有，但是$route对象是存在的，可以根据路由信息进行重定向之类的操作。
3 created：在实例已经创建完成之后被调用。在这一步，实例已完成以下配置：数据观测(data observer) ，属性和方法的运算，
4 watch/event 事件回调。然而，挂载阶段还没开始，e l 属 性 目 前 不 可 见 。 此 时 t h i s . el属性目前不可见。 此时 this.el属性目前不可见。此时this.data 可以访问，watcher、events、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用。
5 beforeMount：在挂载开始之前被调用，相关的 render 函数
首次被调用。但是render正在执行中，此时DOM还是无法操作的。我打印了此时的vue实例对象，相比于created生命周期，此时只是多了一个$el的属性，然而其值为undefined。
使用场景我上文已经提到了，页面渲染时所需要的数据，应尽量在这之前完成赋值。 **mounted：在挂载之后被调用。**在这一步 创建vm.e l 并 替 换 e l ， 并 挂 载 到 实 例 上 。 （ 官 方 文 档 中 的 , “ 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 ， 当 m o u n t e d 被 调 用 时 v m . el并替换el，并挂载到实例上。（官方文档中的, “如果root实例挂载了一个文档内元素，当mounted被调用时vm.el并替换el，并挂载到实例上。（官方文档中的,“如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内” 这句话存疑）此时元素已经渲染完成了，依赖于DOM的代码就放在这里吧~比如监听DOM事件。
6 beforeUpdate：v m . d a t a 更 新 之 后 ， 虚 拟 D O M 重 新 渲 染 和 打 补 丁 之 前 被 调 用 . 你 可 以 在 这 个 钩 子 中 进 一 步 地 修 改 vm.data更新之后，虚拟DOM重新渲染 和打补丁之前被调用。 你可以在这个钩子中进一步地修改vm.data更新之后，虚拟DOM重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改vm.data，这不会触发附加的重渲染过程。 updated：虚拟DOM重新渲染 和打补丁之后被调用。
当这个钩子被调用时，组件DOM的data已经更新，所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data，否则会继续触发beforeUpdate、updated这两个生命周期，进入死循环！
7 .**beforeDestroy：实例被销毁之前调用。**在这一步，实例仍然完全可用。 实例要被销毁了，赶在被销毁之前搞点事情吧哈哈~
8.**destroyed：Vue实例销毁后调用。**此时，Vue实例指示的所有东西已经解绑定，所有的事件监听器都已经被移除，所有的子实例也已经被销毁。
这时候能做的事情已经不多了，只能加点儿提示toast之类的东西吧。
注：beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数，在服务器端渲染期间不被调用。
什么时候触发vue的updated(答watch和compute)
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
axios的底层是怎么实现的，用什么实现的（配套AJAX问题）
vue的生命周期 mounted和created的区别：
created的时候，他的html的节点都没有渲染出来
mounted的时候，可以进行数据请求，进行数据绑定（此时HTML的结构已经出来了，可以将数据绑定到DOM结构上）
组件传值分为
父传子、子传父、兄弟组件之间传值
keep-alive是怎么使用的
缓存、会多出来几个生命周期
Vue组件keep-alive
VUE双向绑定的原理与实现
数据双向绑定原理简单概括的话就是:
View层影响Model层是通过对 ‘keyup’ 等事件的监听。
Model层影响View层是通过 Object.defineProperty( ) 方法劫持数据并结合发布订阅者模式的方式来实现数据的双向绑定。
JS
事件冒泡与事件委托
ECMAScript6 新特性
1.增加块作用域
2.增加let const
3.解构赋值
4.函数参数扩展 （函数参数可以使用默认值、不定参数以及拓展参数）
5.增加class类的支持
6.增加箭头函数
7.增加模块和模块加载（ES6中开始支持原生模块化啦）
模块化
8.math, number, string, array, object增加新的API
原型链，如何判断一个对象的某个属性是它本身的还是原型链上的
hasOwnProperty()
typeof和instanceof的区别
闭包及其作用
定义：
1.函数嵌套函数
2.内层函数访问调用外层函数变量或参数(将参数或者变量长期保存在内存中)
当两个函数发生嵌套，内部函数使用外部函数的变量或者参数就会形成闭包。形成闭包之后，内部函数的变量将会被保存在对应的函数内存中，不会发生内部函数变量被及时清除。
作用：
1.实现公有变量（函数累加器）
function add(){
var num = 0;
function a(){
console.log( ++ num);
}
return a;
}
var myadd = add();
myadd();//结果为1
myadd();//结果为2
myadd();//结果为3
2.可以做缓存（存储结构）
3.可以实现封装，属性私有化（私有化变量）
function Deng(name,wife){
var prepareWife = "xiaozhang";
this.name = name;
this.wife = wife;
this.divorce = function(){
this.wife = prepareWife;
}
this.changePrepareWife = function(target){
prepareWife = target;
}
this.sayPrepareWife = function(){
console.log(prepareWife);
}
}
var deng = new Deng('deng','xiaoliu');
一道题目：
输出结果是 0 1 0
function Foo() {
var i = 0;
return function() {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
解析：
这道题考察闭包和引用类型对象的知识点：
1.一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁，但是此题foo函数返回了一个匿名函数的引用（即一个闭包），它可以访问到foo()被调用产生的环境，而局部变量i一直处在这个环境中，只要一个环境有可能被访问到，它就不会被销毁，所以说闭包有延续变量作用域的功能。这就好理解为什么：
f1();//0
f1();//1
2.我一开始认为f1和f2都=foo()是都指向了同一个function引用类型，所以顺理成章就会答错认为：
f2();//2
但其实foo()返回的是一个匿名函数，所以f1,f2相当于指向了两个不同的函数对象，所以结果也就顺理成章的变为：
f2();//0
要点：
（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；
（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内，
但是一旦离开了这个函数，局部变量就无法访问，所有通过返回子函数到一个变量f1的方法，让
f1指向堆中的函数作用域，这样可以使用局部变量i.
(3) 过程：
第一次f1() :f1=Foo()中，先执行Foo(): i = 0,return值返回给f1
(f1指向子函数 f1()=function(){…},因为子函数没有 定义i，所以向上找到父函数定义的 i: )并执行子函数 输出i=0,再自加 i =1(覆盖了父函数Foo 的 i值);
第二次f1() : 执行的是子函数 Function(){ …},输出的是父函数 的 i=1,再自加 i =2;
第一次f2():同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){ …},所有此i非彼i,输出i=0;如果
如果再次f2(),那么和第二次f1(),一样输出i=1;
call（）方法和apply（）方法
- 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。
- 相同点：这两个方法的作用是一样的。
都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。
一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。
- 不同点：接收参数的方式不同。
apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
语法：apply([thisObj [,argArray] ]);，调用一个对象的一个方法，2另一个对象替换当前对象。
说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个
TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。
call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。
语法：call([thisObject[,arg1 [,arg2 [,…,argn]]]]);，应用某一对象的一个方法，用另一个对象替换当前对象。
说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。
事件捕获，事件冒泡
事件传递定义了元素事件触发的顺序。 如果你将 p 元素插入到 div 元素中，用户点击 p 元素, 哪个元素的 “click” 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： p 元素的点击事件先触发，然后会触发 div 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div>元素的点击事件先触发 ，然后再触发 p>元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型
cookie，session stroage，localstroage区别
详解
cookie始终在同源的http请求中携带，即使不需要，cookie在浏览器和服务器中来回传递。而localStorage和sessionStora仅仅在本地存储，不会好服务器通信，也不会自动把数据发送给服务器。
存储大小不同，cookie为4kb左右；localStorage， sessionStorage可以达到5M
数据有效期不同，sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
localStorage， sessionStorage有现成的API， cookie需要程序员手动封装
ES6的新特性有哪些
箭头函数、解构赋值、let、const。
promise async await class继承（原型链）、解构赋值。
跨域是有哪几种方式实现的（什么是跨域，限制了什么，不同源的话会进行什么策略）
跨域的方式有：jsonP、nigix的反向代理、websocket
Nigix反向代理设置了location的哪一项？
proxy_pass 详细原理
websocket是怎么进行跨域的？
利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:3000})实例，利用message接收数据，利用send向客户端发送数据。
只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同 的域。
this指向
答案
普通函数和箭头函数的this，以及怎么改变普通函数里的this指向
apply、call、bind,区别 在->Here
promise和async await有什么区别
详解
首先说说两者的概念
Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
async await
async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档
两者的区别
Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
async await与Promise一样，是非阻塞的。
async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。
let、var、const的区别
let声明变量有以下几个特点：
1.没有预解析过程（即没有变量提升，var有变量提升）
2.不可以重复声明。
3.{}代表块级作用域，let有块级作用域，var只有函数作用域。
const声明常量，只可以声明一次，并且必须赋值，可以防止命名冲突，防止之后发生错误的修改。
const定义的对象是可以改变的（定义的是指向对象的地址。因为const只是修饰栈空间的地址不可更改，并没有修饰堆空间的值不可修改。
js防抖与节流了解吗，怎么实现？
如何处理表单提交过程中因为网络问题多次点击的事件：(防抖和节流思想）
防抖是将几次操作合并为一次进行；节流是在一定时间内只执行一次函数。
总而言之，防抖只是在最后一次事件后才触发函数；节流是保证在规定时间内执行一次事件处理函数
详解
Flash 与JS交互
Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：
ExternalInterface.addCallback(“在js里可调用的flash方法名”,flash内方法) //在flash中通过这个方法公开 在js中可调用的flash内的方法;
ExternalInterface.call(“js方法”,传给js的参数) //在flash里调用js里的方法
计算机网络
cdn原理
CDN的全称是Content Delivery Network，即内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响
HTTP HTTPS
- https了解吗，和http有什么区别
http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，HTTP1.1版本中给出一种持续连接的机制，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。
HTTPS（Hypertext Transfer Protocol over Secure Socket Layer，基于SSL的HTTP协议）使用了HTTP协议，但HTTPS使用不同于HTTP协议的默认端口及一个加密、身份验证层（HTTP与TCP之间）。
- https的加密方式，公钥和私钥的管理，证书————详解
客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。
（1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。
（2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。
（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。
（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。
（5）Web服务器利用自己的私钥解密出会话密钥。
（6）Web服务器利用会话密钥加密与客户端之间的通信。
http注入有什么（答有sql的注入），怎么处理（后端减少插值处理）
http常见状态码
状态码分类表
200 OK：表示从客户端发送给服务器的请求被正常处理并返回；
204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。
3xx （5种）
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
302与303的区别：后者明确表示客户端应当采用GET方式获取资源
304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；
4xx （4种）
400 Bad Request：表示请求报文中存在语法错误；
401 Unauthorized：未经许可，需要通过HTTP认证；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
5xx （2种）
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；
Http2.0
18. Tcp和udp，什么时候用udp
TCP提供面向连接的、可靠的数据流传输，而UDP提供的是非面向连接的、不可靠的数据流传输。
TCP传输单位称为TCP报文段，UDP传输单位称为用户数据报。
TCP注重数据安全性，UDP数据传输快，因为不需要连接等待，少了许多操作，但是其安全性却一般。
UDP应用场景：
1.面向数据报方式
2.网络数据大多为短消息
3.拥有大量Client
4.对数据安全性无特殊要求
5.网络负担非常重，但对响应速度要求高
三次握手四次挥手
三次握手：
第一次握手：客户端发送syn包(syn=x)到服务器，并进入SYN_SEND状态，等待服务器确认；
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（syn=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。
四次挥手:
与建立连接的“三次握手”类似，断开一个TCP连接则需要“四次挥手”。
第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
