一，前端解决跨域问题（常用）
1，后端设置cors允许跨域，一般指定ip，也可以允许全部
2，jsonp，利用浏览器对script加载完自动执行的特新来实现的，需要客户端和服务器端两端的同时配合，因此需要特别处理的接口可以使用，一般传统的后台接口不会采用这种方式进行跨域。
3，Nginx反向代理，一般利用vue-cli全家桶，开发时在vue.config.js中设置接口在同一个后端域名和端口，正式服务则使用Nginx确保在统一域名下。
二，常见web安全及防护
防护：
1，对用户输入内容进行限制和校验
2，对所有关键数据进行加密
3，接口提交方式严格规范，数据提交不使用get
攻击方式：
sql注入，xss（恶意注入js和网页元素），csrf（代替用户完成交互并访问危险网站）
三，js垃圾回收机制
js的垃圾回收机制是自动执行的，且不可发现的。垃圾回收的对象分为：全局变量和局部变量（函数内变量）。全局变量只有在页面被关闭时才被回收，局部变量在所属函数调用结束后回收。回收方式分为两类一种是标记清除，一种是引用计数。
四，前端性能优化
1，尽量压缩css和js文件大小
2，采用less或者sass
3，图片懒加载
4，精灵图和雪碧图
5，接口尽可能做到重复使用
6，数据请求异步操作，防止页面卡顿
五，闭包理解
闭包就是一个函数，两个函数嵌套在一起，内部函数就是闭包。形成闭包的条件：内部函数需要通过return返回出来。
function f1(){
function f2(){
alert("我是js闭包！");
}
return f2;
}
var f=f1();
f(); //弹出：我是js闭包！
12345678
内部函数可以调用外部函数的参数。
用得非常多，包括异步请求，vue的函数嵌套，非常常见，有时候写起来，根本想不起来闭包啥的。
六，cookie和session的区别
1，存储位置有区分，cookie存在浏览器缓存中，session存储在服务器上
2，存储大小和数量 cookie小于session
3，保密性 cookie对游览器和用户可见 session存在服务器上，保密性更佳
4，服务器压力 session对服务器压力更大
重点！！！
在实际开发过程中，cookie和session都很少使用，更为常用的是token，它比上两个优势更大，更好用，安全性高，可扩展性强，多平台跨域，无状态。可实现，单点登录和多点登录等功能。
重点！！！
请不要混淆session和sessionStorage，前者是身份验证（类似于令牌），后者是一种存储方式，数据保存在浏览器缓存中（localStorage存储在本地需要手动删除才会消失），关闭浏览器和标签页就会消失。
重点！！！
有种说法是cookies和localStorage和sessionStorage是同一类，都是储存方式，只是大小，保存位置，保存时间不一样
大小 cookies<sessionStorage=localStorage
保存位置 本地
时间 cookies有指定时间 sessionStorage关闭页面 localStorage不主动清除一直存在
七，那些操作会造成内存泄漏
1，什么是内存泄漏
看上面的垃圾回收机制，当有变量和对象，应该被回收，而没有被回收时，一直占用和停留在堆内存中，这就产生内存泄漏。
2，内存泄漏影响
内存泄漏会导致内存被占用过多无法释放，从而导致系统内存分配不足，造成了内存溢出从而导致应用Crash（浏览器崩溃）。
3，前端造成内存泄漏的操作
- 1，闭包
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，过多的使用闭包，不及时释放，会导致内存泄漏。 - 2，意外全局
函数中定义参数，var 定义，会成为全局变量，建议使用es6的let - 3，定时器
- 4，生命周期中使用全局函数，未释放
- 5，echarts
- 6，keep-alive组件
其实在vue中一般这些是不会造成内存泄漏，只有程序猿自己写的bug才会导致，还有对于现在电脑来说，一些内存泄漏并不影响。
八，重构的理解
重构不是重写项目！！！重构不是重写项目！！！重构不是重写项目！！！
重构是一种对软件内部结构的改善，包括去除重复、简化复杂逻辑和澄清模糊的代码，甚至可能是变更一个参数名。
重构和重写之间的差异在于: 重构是在标准化流程和方法的指导下，给正在跑的车换轮子，乘客（业务方）不受影响。重写是推倒重来，比较理想的结果是你把新车造好了让乘客跳过来，但真能做到的团队不多，需要很高的工程管理能力。
九，常见浏览器内核
1，edge的edgeHTML
2，火狐的Gecko
3，Safari的webKit
4，Chrome的Blink
十，DOM创建，添加，移动，复制，查找，删除节点,
1，创建 document.creatElement(‘a’) //创建a元素节点 多用于下载操作 页面显示 <a> </a>
2，添加节点 appendChild()
let ul = document.getElementById('ul');
let li = document.creatElement('li');
ul.appdenChild(li);
123
一般用于对页面添加文本列表项啥的。
3，删除节点removeChild()
var ul = document.getElementById("myList"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异
123
4，查找节点（常用）
document.getElementById('box1');//查询Id为box1的元素
document.getElementByClass('box2');//查询class（类名）为box2的元素
12
5，复制节点 cloneNode()
1 var ul = document.getElementById("myList"); //获得ul
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制
123
十一，事件模型的三个阶段
一个事件的处理过程主要有三个阶段：捕获，目标，冒泡；
（1）捕获： 当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（ 所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。 ）
（2）目标阶段：当事件不断的传递直到目标节点的时候 ，最终在目标节点上触发这个事件，就是目标阶段。
（3） 冒泡阶段： 事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点（我们平时用的事件绑定就是利用的事件冒泡的原理）
这里得提到阻止事件冒泡
方法一：event.stopPropagation( )
//为所有button元素绑定click事件
$(":button").click( function(event){
alert("button-click");
// 阻止事件冒泡到DOM树上
event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click （同类型的事件）
} );
123456
方法二：event.target
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
$('#switcher .button').toggleClass('hidden');
}
})
})
1234567
还得提到js的事件绑定
这个就是非常基础的东西
1，原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
1
2，自定义函数
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
123456
3，js代码绑定
<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>
123456
4，事件监听（用的不多）
绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。
十二，css盒子模型
标准的盒子模型 元素宽度 = width（内容宽）+ padding（内边距）+border（边框）+margin（外边距）
低版本ie 元素宽度 = width（内容+内边距+边框）+margin（外边距）
