以下為常備面試題集錦，面好多家公司大都問的如此（后續更新補）；還有一些算法和手寫代碼后面整理；
js陳述類型
1、Es6的class和構造函數的區別：
class xx {
}
（1）不存在變量提升
（2）方法默認是不可枚舉的，class所有方法沒有原型對象prototype也沒有構造器不能用new來調用；
2、普通函數和箭頭函數的區別？
（1）this指向不同 普通函數this指向為方法調用的對象，可以通過call、apply、bind改變this指向，箭頭函數不會創建自己的this，只會從自己的作用域的上一層繼承this，
call、apply、bind只能調用傳遞參數，不可修改this指向；
（2）箭頭函數不可以當做構造函數，不能用new 命令
（3）箭頭函數不可以使用yield 命令，不能作為Generator 函數；
（4）箭頭函數不可以使用arguments對象，可用rest參數【也叫剩余參數】代替
3、 localStorage、sessionStorage和 cookie 的區別：
（1）存儲大小：cookie一般不超過4k，sessionStorage、localStorage 5M或者更大
（2）數據有效期：cookie若沒設置時間關閉瀏覽器cookie失效，若設置了時間cookie就會存放在硬盤里過期才失效，
sessionStorage 關閉頁面或者瀏覽器就被清除，localStorage 永久有效除非手動清除；
（3）作用域：cookie、localStorage 同源窗口共享 ，sessionStorage在同一瀏覽器窗口是共享的；
（4）通信：cookie傳遞於服務器和瀏覽器之間，localStorage、sessionStorage僅在瀏覽器保存
4、this指向
（1）全局函數 全局環境中this指向window
（2）方法調用：this指向調用該方法的對象
（3）構造函數調用：this指向新創建的實例對象
（4）call和apply調用：允許改變this指向，通常指向函數中指定的參數對象；
（5）箭頭函數的調用：由於沒有this對象，所以指向外層的this
（6）在函數中，在嚴格模式下，this 是未定義的(undefined)
（7）在事件中，this 表示接收事件的元素；
5、new 的過程做了什么
（1）創建一個空對象，將它的引用賦給 this，繼承函數的原型。
（2）通過 this 將屬性和方法添加至這個對象
（3）最后返回 this 指向的新對象，也就是實例（如果沒有手動返回其他的對象）
手動實現一個new方法
// 構造器函數
let Parent = function (name, age) {
this.name = name;
this.age = age;
};
Parent.prototype.sayName = function () {
console.log(this.name);
};
//自己定義的new方法
let newMethod = function (Parent, ...rest) {
// 1.以構造器的prototype屬性為原型，創建新對象；
let child = Object.create(Parent.prototype);
// 2.將this和調用參數傳給構造器執行
let result = Parent.apply(child, rest);
// 3.如果構造器沒有手動返回對象，則返回第一步的對象
return typeof result === 'object' ? result : child;
};
//創建實例，將構造函數Parent與形參作為參數傳入
const child = newMethod(Parent, 'echo', 26);
child.sayName() //'echo';
//最后檢驗，與使用new的效果相同
child instanceof Parent//true
child.hasOwnProperty('name')//true
child.hasOwnProperty('age')//true
child.hasOwnProperty('sayName')//false
html、css陳述類型
1、html5新特性
語義化標簽：header、main、footer等
新表單標簽：calendar、date、time、url等
音頻、視頻： audio 和 video
本地存儲： localStorage、sessionStorage
canvas
拖拽
地理定位
querySelect() 返回匹配指定的第一個元素 和 querySelectAll() 返回匹配指定的所有元素
WebSocket：單個 TCP 連接上進行全雙工通訊的協議
2、css3新特性
倒圓角
文本、元素陰影
漸變背景
新增選擇器：nth-of-type(n)、nth-child(n)、
父元素前后插入元素
ele::before{}、ele:after:{}
盒子模型：box-sizing: border-box | content-box
W3C盒子模型(標准盒模型)：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）【不包含padding和border】
IE盒子模型(怪異盒模型)：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）【包含了padding和border】
變形【transform、translate】
過度【transition】
媒體查詢【@media】
字體引入【@font-face】
Animation：@keyframes 規則
3、margin重疊的現象解決： （IFC和BFC）
外層元素overflow:hidden;
外層元素: padding代替
內層元素絕對定位
內層元素加 float:left 或者 display:inline-block;
內層元素透明邊框
4、移動端的適配以及單位方案
vw和vh：視窗單位，1vw = 1%的視口寬度 1vh = 1%的視口高度；
百分比寬度
rem自適應
css3的媒體查詢
5、2個div都是50%寬度，inline-block,沒有排到同一排?
外層元素字體大小font-size=0，子元素div中設置具體的字體大小；原因：2個子元素div中間空白節點繼承父元素的font-size（瀏覽器默認的font-size）
6、css動畫和js動畫有什么區別
（1）代碼復雜度方面，簡單動畫，css 代碼實現會簡單一些，js 復雜一些。復雜動畫的話，css 代碼就會變得冗長，js實現起來更優。
（2）動畫運行時，對動畫的控制程度上，js 比較靈活，能控制動畫暫停，取消，終止等，css動畫不能添加事件，只能設置固定節點進行什么樣的過渡動畫。
（3）兼容方面，css 有瀏覽器兼容問題，js 大多情況下是沒有的。
（4）性能方面，css動畫相對於優一些，css 動畫通過GUI解析，js 動畫需要經過j s 引擎代碼解析，然后再進行 GUI 解析渲染。
性能優化陳述類型
1、前端性能優化有哪些方面：
（1）網絡層面：減少HTTP請求，合並css、js文件，雪碧圖（css sprite）的使用、使用base64表示簡單的圖片（空白圖）
減小資源體積：gzip壓縮、js、css、圖片壓縮， 緩存應用：DNS緩存，CDN部署與緩存、http緩存
（2）渲染和操作DOM方面：css文件放在頭部、js文件放在尾部或者異步，盡量避免內聯樣式，盡量避免在document上直接頻繁操作dom，盡量使用css動畫
使用calssName代替大量的內聯樣式的修改、使用事件代理；減少標簽選擇器的使用；
（3）數據交互層面：圖片預加載、懶加載；異步請求的優化：使用json數據格式進行交互，部分常用數據緩存；大量數據運算時候使用webWorker；
前端安全和瀏覽器相關類型
1、前端安全防范措施 【主要了解xss和csrf】
（1）xss攻擊【跨站腳本攻擊】
轉義字符
使用js-xss,使用白名單指定的配置清理不收信任的HTML
開啟CSP（建立白名單）通過設置HTTP Header 中的 Content-Security-Policy 和 <meta http-equiv="Content-Security-Policy">
（2）CSRF ('跨站偽造請求）
對cookie設置SameSite屬性，表示cookie不隨着跨域請求發送
通過驗證Referer 來判斷該請求是否為第三方網站發起的
請求時附帶驗證信息，比如驗證碼或者token；
（3）SQL注入
檢出變量數據類型和格式
使用預編譯綁定的變量的sql語句
轉義特殊字符
（4）點擊劫持
CSP,XSS和CSRF的防御，也可以防御點擊劫持對后端服務器的攻擊
設置http響應頭，x-Frame-Options 防止ifame內嵌；
使用Frame Busting代碼阻止頁面被非法載入；
2.http2特點和優點
（1）二進制傳輸 、http1.0是文本格式
（2）多路復用、可以在共享TCP鏈接的基礎上同時發送請求和響應，消除不必要的延時而減少頁面加載的時間；
（3）首部壓縮、服務器推送
3、輸入url到頁面完成發生了什么
（1）DNS解析：將域名解析為ip地址
（2）建立TCP連接： 客戶端瀏覽器與WEB服務器建立TCP(傳輸控制協議)連接，三次握手【瀏覽器-->服務器，服務器-->瀏覽器，瀏覽器-->服務器】
（3）發送請求：請求報文 http協議的通信內容
（4）響應請求：響應報文
（5）渲染頁面：dom樹、css樹、合並渲染樹計算布局 繪制；
（6）斷開連接【非持久性】： TCP四次揮手。【瀏覽器-->服務器，服務器-->瀏覽器，服務器-->瀏覽器，瀏覽器-->服務器】
http對應於應用層，Tcp協議對應於傳輸層，http協議是在Tcp協議之上建立的；
4、HTTP 常見狀態碼
HTTP響應狀態碼有1到5開頭的：
1** 消息，服務器收到請求，需要請求者繼續執行操作
2** 請求成功，操作被成功接收並處理
3** 重定向問題，需要進一步的操作以完成請求
4** 客戶端錯誤，請求包含語法錯誤或無法完成請求
5** 服務器錯誤，服務器在處理請求的過程中發生了錯誤
項目中常見的狀態碼
200 請求成功。
301 永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新 URI。今后任何新的請求都應使用新的URI代替
302 臨時移動。與301類似。但資源只是臨時被移動。客戶端應繼續使用原有URI
304 未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端通常會緩存訪問 過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源
400 客戶端請求的語法錯誤，服務器無法理解
401 未授權（請求中未包含身份驗證信息），請求要求用戶的身份認證。
403 服務器理解請求客戶端的請求，但是拒絕執行此請求
404 請求資源不存在
500 服務器內部錯誤，無法完成請求
5、前端鑒權方式
Http basic Authorization 基於瀏覽器的一種鑒權方式
（1）未授權請求，攔截，返回 401 Unauthorised
（2）支持的瀏覽器彈出用戶名密碼框，輸入用戶名密碼，連同上次請求數據，一起發送到服務端，使用授權頭，Authorization: Basic [base64]編碼的用戶名密碼
（3）服務端驗證通過，返回資源
（4）客戶端會一種攜帶授權頭，不安全，適用於內網
session-cookie
用戶未登錄，無sessionId，客戶端登錄后，在cookie中種下sessionId，發送到服務端，服務端驗證通過，釋放資源。
sessionId過期，重新登錄，http請求，后端會redirect到登錄頁，ajax請求或前端route，需要前端全局攔截
Token
用戶未登錄，無token，登錄后，返回token，客戶端可以存儲在cookie，storage，或內存中，每次請求攜帶token，
其靈活的特點是，不必須依賴cookie，可以在任何終端使用，多用於app鑒權。
Token過期，重新登錄，請求攔截通session-cookie
OAuth
OAuth2.0流程:
（1）第三方應用在資源方注冊，獲取身份，無身份后面請求無效
（2）第三方應用征得用戶授權，同意獲取資源
（3）第三方應用向資源方請求授權碼，資源方返回授權碼
（4）第三方應用以授權碼，向資源方申請訪問令牌，資源方返回令牌
（5）第三方應用以令牌，訪問受限資源
6、http協議中常用的請求方法
（1）GET：向特定的資源發起請求
（2）POST：向指定的資源提交數據進行處理請求，數據被包含在請求體中
（3）PUT：向指定資源位置上傳其最新內容
（4）DELETE：請求服務器刪除Request-URL所標識的資源
（5）HEAD：向服務器索與get請求一致的響應，只不過響應體不會被返回
（6）OPTIONS：返回服務器針對特點資源所支持的http請求方法
（7）TRACE：回顯服務器收到的請求，主要用於測試或者診斷
（8）CONNECT：http/1.1協議中預留能夠將連接改為管道方式的代理服務器
GET /url/list 查看
POST /url/create 創建
PUT /url/update 更新
DELETE /url/delete 刪除
HEAD /url/is_exists 檢查資源
PATCH /url/update_by_id 更新某些字段
OPTIONS /url/get_methods 檢查請求方式
vue框架類型
1、vue-router的2種模式以及原理 mode參數決定類型；可選值: "hash" | "history" | "abstract"（Node.js 環境）
（1）hash模式：hash模式背后的原理是onhashchange事件,可以在window對象上監聽這個事件，改變 hash 不會重新加載頁面
（2）history模式: history.pushState API 來完成 URL 跳轉而無須重新加載頁面; 【pushState()、replaceState()】
要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面
2、vue從data改變到頁面渲染的過程
（1）把模板編譯為render函數
（2）實例進行掛載，根據節點render函數的調用，遞歸的生成虛擬dom；
（3）對比虛擬dom，渲染真實dom；
（4）組件內部data發生變化，組件和子組件引用data作為props重新調用render函數生成虛擬dom返回 對比虛擬dom，渲染真實dom的操作；
3、vue全家桶成員
vue-cli + vue-router + vuex + axios
4、MVVM概念
MVVM分別為Model、View、ViewModel;是一種軟件架構模式；
Model：數據模型，【后端傳遞的數據】
View：代表UI視圖 【看到的頁面，負責數據展示】
ViewModel：鏈接model和view的橋梁，負責監聽model中數據的改變並且控制視圖的更新完成數據與視圖的雙向綁定
5、SPA（單頁應用）的優缺點
優點
（1）良好的交互體驗，前端進行的局部渲染避免了不必要的跳轉和重復渲染
（2）前后端分離【前端：view 后端：model】架構清晰
（3）減輕服務器壓力，服務器只需要提供數據不需要管前端的展示邏輯和頁面合成提高了性能
缺點
（1）SEO難度高
（2）首次加載時間過長
6、axios的底層原理
axios 原理還是屬於 XMLHttpRequest， 加一個promise對象來對結果進行處理
如get
7、v-if 和 v-show 有什么區別
相同點： 兩者都是在判斷DOM節點是否要顯示。
不同點：
（1）v-if是根據后面數據的真假值判斷直接從Dom樹上刪除或重建元素節點。 v-show只是在修改元素的css樣式，也就是display的屬性值，簡單的基於css切換，元素始終在Dom樹上。
（2）v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯； v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素始終被保留；
（3）v-if有更高的切換消耗，不適合做頻繁的切換； v-show有更高的初始渲染消耗，適合做頻繁的額切換；
8、v-for 與 v-if 的優先級
v-for的優先級比v-if高
9、Vue 組件中 data 為什么必須是函數
每個實例可以維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不會相互影響，是獨立的
10、vue中 key 值的作用
vue是通過比對組件自身新舊vdom進行更新的
使用key來給每個節點做一個唯一標識
key的作用主要是為了高效的更新虛擬DOM【高效diff；給key值Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點】
另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果
11、vue響應式數據的原理
采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter, getter
默認Vue 在初始化數據時，會給data 中的屬性使用Object.defineProperty 重新定義所有屬性，
當頁面到對應屬性時，會進行依賴收集（收集當前組件中的watcher ），如果屬性發生變化會通知相關依賴進行更新操作；
12、為什么Vue 采用異步渲染
因為如果不采用異步更新，那么每次更新數據都會對當前組件進行重新渲染，所以為了性能考慮，Vue 會在本輪數據更新后，再去異步更新數據
13、Proxy 與 Object.defineProperty() 對比 【vue2 vue3響應式對比】
Proxy 的優點：
可以直接監聽對象而非屬性，並返回一個新對象；
可以直接監聽數值的變化；
可以劫持整個對象，並返回一個新對象；
Proxy 的缺點：Proxy 是es6 提供的新特性，兼容性不好
Object.defineProperty() 的優點：兼容性好，支持IE9，IE9 以下的版本不兼容
Object.defineProperty() 的缺點：
無法監控到數組下標的變化，導致直接通過數組的下標給數組設置值，不能實時響應；
只能劫持對象的屬性，我們需要對每個對象的每個屬性進行遍歷；
14、ES6 - async+await 同步/異步方案；
Promise 主要解決的是異步回調問題，
return new Promise + await （異步中的同步的寫法await）
如果你在一個函數中有多個await,這個樣子線程阻塞,很耗費時間【影響性能】,Promise.all方法,可以將多個await變成並行的去awaitPromise.all()
async + await 主要解決的就是將異步問題同步化，降低異步編程的認知負擔
async 函數執行后，總是返回一個 promise 對象
await 所在的那一行語句是同步的
websocket 、webworker2個概念的了解；
個人整理，轉載請注明出處！！！