一，前端解決跨域問題（常用）
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閉包！
内部函數可以調用外部函數的參數。
用得非常多，包括異步請求，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);
一般用于對頁面添加文本清單項啥的。
3，删除節點
removeChild()
var ul = document.getElementById("myList"); //獲得ul
var lis = ul.getElementsByTagName("li") //擷取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一個li，與上面不同，要考慮浏覽器之間的差異
4，查找節點（常用）
document.getElementById('box1');//查詢Id為box1的元素
document.getElementByClass('box2');//查詢class（類名）為box2的元素
5，複制節點 cloneNode()
1 var ul = document.getElementById("myList"); //獲得ul
2 var deepList = ul.cloneNode(true); //深複制
3 var shallowList = ul.cloneNode(false); //淺複制
十一，事件模型的三個階段
一個事件的處理過程主要有三個階段：捕獲，目标，冒泡；
（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 （同類型的事件）
} );
方法二：
event.target
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target==this){//判斷是否是目前綁定事件的元素元素觸發的該事件
$('#switcher .button').toggleClass('hidden');
}
})
})
還得提到js的事件綁定
這個就是非常基礎的東西
1，原生函數
2，自定義函數
<input onclick="myAlert()" type="button" value="點選我，彈出警告框" />
<script type="text/javascript">
function myAlert(){
alert("謝謝支援");
}
</script>
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>
4，事件監聽（用的不多）
綁定事件的另一種方法是用
addEventListener()
或
attachEvent()
來綁定事件監聽函數。
十二，css盒子模型
标準的盒子模型
元素寬度 = width（内容寬）+ padding（内邊距）+border（邊框）+margin（外邊距）
低版本ie 元素寬度 = width（内容+内邊距+邊框）+margin（外邊距）
![前端面試題：Promise[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)