1.var，let，const區別javascript
(1)var存在變量提高，let和const不存在變量提高，因此只能在變量聲明以後使用，不然會報錯。css
(2)const不可修改，聲明時，直接初始化，var，let可修改，可是若是const指向的是一個引用值，只須要保證引用值的地址不改變便可。html
(3)let和const都是塊級做用域，var是函數級做用域。前端
(4)let，const都不容許在相同的做用域內聲明同一變量。vue
2.事件冒泡、事件委託以及事件捕獲？html5
事件冒泡就是子級元素的某個事件被觸發，它的上級元素的該事件也被遞歸執行。冒泡的終點是window。java
阻止事件冒泡在子級元素上面加上e.stopPropagation()阻止事件冒泡。webpack
事件委託實際上是使用了冒泡的原理，從點擊的元素開始，以遞歸方式的向父元素傳播事件，這樣作的好處是對於大量要處理的元素，沒必要爲每一個元素都綁定事件，只須要在他們的父元素上綁定一次便可，提升性能。 還有一個好處就是能夠處理動態插入dom中的元素，直接綁定的方式是不行的。web
事件捕獲是最外層的事件先被觸發，最後纔是咱們點擊的button事件被觸發，這即是事件捕獲。ajax
阻止事件捕獲的方式是e.stopPropagation()。
3.防抖：
理解：在車站上車，人員上滿了車才發走重點是人員上滿觸發一次。
場景：實時搜索，拖拽。
實現： //每一次都要清空定時器，從新設置上計時器值，使得計時器每一次都從新開始，直到最後知足條件而且等待delay時間後，纔開始執行handler函數。
function debunce（handler，delay）{
//handler是要傳入的進行防抖的函數，delay是等待時間。
var timer = null;
return function（）{
var _self = this，
args = arguments;
clearTimeout（timer）; //每次都要清除這個定時器
timer = setTimeout（function（）{ //從新開啓定時器
handler.apply（_self，args）;
}，delay）; }
4.節流：
理解：大於等於10分鐘發一次車，重點是必定間隔時間就會觸發一次。 （即預約一個函數只有在大於等於執行週期時纔會執行，週期內不執行）。
場景：窗口調整（調整大小），頁面滾動（滾動），搶購時瘋狂點擊（鼠標按下）
實現： //處理程序是要傳入的進行節流的函數，wait是上述的間隔時間。 //使用時間戳進行時間的計算。
function throttle（handler，wait）{
//handler是要進行節流的函數，wait是等待時間
var lastTime = 0;
return function(){
var nowTime = new Date（).getTime（）; //獲取當前時間
if（nowTime - lastTime> wait）{
handler.apply（this，arguments）;
lastTime = nowTime; //更新最後時間
}
}
}
5.常見的HTTP狀態碼你瞭解多少？描述一下如下狀態碼
（1）200 ,請求成功，一切正常，數據成功返回
（2）301,永久性重定向，是指所請求的文檔在別的地方;文檔新的URL會在定位響應頭信息中給出。瀏覽器會自動鏈接到新的URL。
（3）302,臨時重定向，該狀態碼錶示請求的資源已被分配了新的URI，但願用戶（本次）能使用新的URI訪問。
（4）303，該狀態碼錶示因爲請求對應的資源存在着另外一個URI，應使用GET方法定向獲取請求的資源
（5）403，Foribidden 服務器端理解本次請求，可是拒絕執行任務，沒有權限訪問
（6）404,NOT,found 請求的資源，網頁沒法找到，不存在
（7）503，服務器端沒法響應，服務器因爲在維護或已經超載而沒法響應
6.什麼狀況下會遇到跨域，描述一下前端常見處理跨域的幾種方式。並封裝一個jsonp原理
瀏覽器最核心，最基本的安全功能是同源策略。限制了一個源中加載文本或者腳本與其餘源中資源的交互方式，當瀏覽器執行一個腳本時會檢查是否同源，只有同源的腳本纔會執行，若是不一樣源即爲跨域。
(1)Jsonp：原理就是利用了script標籤不受同源策略的限制，在頁面中動態插入了script，script標籤的src屬性就是後端api接口的地址，而且以get的方式將前端回調處理函數名稱告訴後端，後端在響應請求時會將回調返還，而且將數據以參數的形式傳遞回去。
(2)CORS：(跨域資源共享)是一種容許當前域的資源被其餘域的腳本請求訪問的機制。
當使用XMLHttpRequest發送請求時，瀏覽器若是發現違反了同源策略就會自動加上一個請求頭:origin,後端在接受到請求後肯定響應後會在Response Headers中加入一個屬性:Access-Control-Allow-Origin,值就是發起請求的源地址，瀏覽器獲得響應會進行判斷Access-Control-Allow-Origin的值是否和當前的地址相同，只有匹配成功後才進行響應處理。
現代瀏覽器中和移動端都支持CORS，IE下須要8+
(3)服務器跨域，服務器中轉代理
前端向本地服務器發送請求，本地服務器代替前端再向服務器接口發送請求進行服務器間通訊，本地服務器是個中轉站的角色，再將響應的數據返回給前端。
(4)widow.postMessage(html5提供的新方法)
可使用它來向其它的window對象發送消息，不管這個window對象是屬於同源或不一樣源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。
調用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message爲要發送的消息，類型只能爲字符串；第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，若是不想限定域，可使用通配符 * 。
須要接收消息的window對象，但是經過監聽自身的message事件來獲取傳過來的消息，消息內容儲存在該事件對象的data屬性中。
7.瀏覽器端存儲有哪些，並描述他們的區別。
cookie, localStorage ,sessionStorage ,web SQL, indexedDB，他們都是保存在瀏覽器端，且同源的。
區別：
1.cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
2.存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，2.5M~10M(根據瀏覽器的不一樣)。web SQL與indexedDB無上限。
3.數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。web SQL與indexedDB永久有效
4.做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage ，cookie，web SQL，indexedDB在全部同源窗口中都是共享的。
5.web SQL是關係數據庫，引入了一組使用 SQL 操做客戶端數據庫的 API。indexedDB是非關係數據庫
8.一個頁面從輸入 URL 到頁面加載完的過程當中都發生了什麼事情？
加載過程：
瀏覽器根據 DNS 服務器解析獲得域名的 IP 地址
向這個 IP 的機器發送 HTTP 請求
服務器收到、處理並返回 HTTP 請求
瀏覽器獲得返回內容
渲染過程：
根據 HTML 結構生成 DOM 樹
根據 CSS 生成 CSSOM
將 DOM 和 CSSOM整合造成 RenderTree
根據 RenderTree 開始渲染和展現
遇到<script時，會執行並阻塞渲染
9.TCP與UDP的區別
一、TCP面向鏈接（如打電話要先撥號創建鏈接）;UDP是無鏈接的，即發送數據以前不須要創建鏈接
二、TCP提供可靠的服務。也就是說，經過TCP鏈接傳送的數據，無差錯，不丟失，不重複，且按序到達;UDP盡最大努力交付，即不保證可靠交付
三、TCP面向字節流，其實是TCP把數據當作一連串無結構的字節流;UDP是面向報文的，
四、UDP沒有擁塞控制，所以網絡出現擁塞不會使源主機的發送速率下降（對實時應用頗有用，如IP電話，實時視頻會議等）
五、每一條TCP鏈接只能是點到點的;UDP支持一對一，一對多，多對一和多對多的交互通訊
六、TCP首部開銷20字節;UDP的首部開銷小，只有8個字節
七、TCP的邏輯通訊信道是全雙工的可靠信道，UDP則是不可靠信道
10.實現元素的垂直水平居中方式
(1) 設置定位，margin爲自身的的一半，top：50%，left：50%；position：absolute；
(2) transform:translate(-50%,-50%)
(3)flex佈局 justify-center：center //垂直方向；
align-items：center // 水平方向
(4)margin:auto;position:absolute;left:0;top:0;right:0;bottom:0
11.http與https的區別
爲了數據傳輸的安全，HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證書來驗證服務器的身份，併爲瀏覽器和服務器之間的通訊加密。
http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。
12.重排（迴流）和重繪是什麼?什麼狀況下會觸發重排和重繪。
重繪：dom節點的css樣式顏色的變化過程叫作重繪 改變的是cssTree 一部分變化，對randerTree影響相對較小。因此相對與重排而言對瀏覽器性能影響較小
重排：js動態的修改dom 即更改了DOM樹了 更改dom樹以後 renderTree就變了，renderTree變了也就是要從新創建一個renderTree了 ，這個過程叫作重排。
迴流觸發的狀況：頁面首次渲染；瀏覽器窗口大小發生改變；元素尺寸或位置發生改變；元素內容變化（文字數量或圖片大小等等）；元素字體大小變化；添加或者刪除可見的DOM元素；觸發display
重繪觸發條件：當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並從新繪製它。
性能優化：避免頻繁的樣式操做，最好一次性重寫style,或者一次性更改class,避免頻繁操做dom,對具備複雜動畫的元素使用絕對定位，使它脫離文檔流，不然會引發父元素及後續元素頻繁迴流。
13.瀏覽器執行時間線：
根據js執行那一刻開始的執行順序 瀏覽器加載的時間線
1.建立document對象，開始解析web頁面 這時document.readyState 等於’loading’
2.遇到link標籤（外部引用css）建立線程加載，並繼續解析文檔， 即異步加載
3.遇到非異步的script標籤，瀏覽器加載並阻塞，等待js加載完成
4.遇到異步的script標籤，瀏覽器建立線程加載，並繼續解析文檔。對於async屬性的腳本，腳本加載完成後當即執行；對於defer屬性的腳本，腳本等到頁面加載完以後再執行（異步禁止使用document.write）
5.遇到img等，先正常解析dom結構，而後瀏覽器異步加載src，並繼續解析文檔
6.當文檔解析完成以後（即renderTree構建完成以後， 此時還未下載完對吧），document.readyState=‘interative’。活躍的 動態的
7.文檔解析完成後，全部設置有defer的腳本會按照順序執行。
8.文檔解析完成以後 頁面會觸發document上的一個DOMContentLoad事件
9.當頁面全部部分都執行完成以後 document.readyState =‘complete’ 以後就能夠執行window.onload事件了
14.異步加載js
javascript 異步加載 的 三種方案
1.defer 異步加載，但要等到dom文檔所有解析完纔會被執行。只有IE能用。
2.async 異步加載，加載完就執行，async只能加載外部腳本，不能把js寫在script 標籤裏。 （1.2 執行時也不阻塞頁面）
3.建立script，插入到DOM中，加載完畢後callBack
15.xxs介紹一下
xss表示跨站腳本攻擊，它與SQL注入攻擊相似，SQL注入攻擊中以SQL語句做爲用戶輸入，從而達到查詢/修改/刪除數據的目的，而在xss攻擊中，經過插入惡意腳本，實現對用戶瀏覽器的控制。
xss攻擊能夠分紅兩種類型：
1.非持久型xss攻擊，是一次性的，僅對當次的頁面訪問產生影響。
2.持久性攻擊，會把攻擊者的數據存儲在服務器端，攻擊行爲將伴隨着攻擊數據一直存在。
16.js爲何須要異步，以及Js異步實現方法
Javascript語言的執行環境是"單線程"，單線程的好處是實現起來比較簡單，執行環境相對單純；壞處是隻要有一個任務耗時很長，後面的任務都必須排隊等着，會拖延整個程序的執行。致使瀏覽器長時間無響應，交互性差。
於是產生了可使js異步的方式：
(1)回調函數：
缺點：會形成回調地獄，可維護性，閱讀性差，而且每一個任務只能指定一個回調函數。
優勢：簡單，容易理解和部署
(2)事件監聽
缺點：變成了事件驅動，運行流程不清晰
優勢：比較容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數，並且能夠下降耦合度，有利於實現模塊化。
(3)promise
優勢：解決了回調函數的回調地獄，實現了鏈式調用
缺點：沒法取消Promise，一旦新建它就會當即執行，沒法中途取消；若是不設置回調函數，Promise內部拋出的錯誤，不會反應到外部；當處於Pending狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。
(4)generator
function *myGenerator(a) {
var b = yield ajax();
yield ajax();
}
var it = myGenerator();
function ajax() {
if(xhr.status == 200) {
it.next(5);
}
} 此時b就是5.
優勢：解決了promise的鏈式調用，可讀性更強
缺點：執行完一條語句，須要調用next執行下一條語句
(5)async
async function myGenerator(a) {
var b = await ajax();
await ajax();
return response；
}
優勢：上一個ajax執行完，就會調用下一個ajax執行，不須要next。他還會生成一個promise。
myGenerator().then(function () {},function () {})
17.對於模塊化的理解以及怎麼在書寫代碼中體現
把一坨代碼劃分紅不少的模塊來編寫，減小了代碼多而複雜的現象，模塊化開發的一個實現就是組件化，組件化能夠把你的代碼有結構的分爲一個個小的組件，各個小的組件之間代碼是獨立的，這樣的代碼維護起來比較簡單方便，也方便了多人協做開發時出現變量複用，函數複用的現象，組件化還有一個優勢就是能夠代碼複用，在不一樣的網站中若是咱們想要這樣的效果就能夠把代碼直接複製過來使用就能夠啦，咱們所用的webpack打包工具就是一種能夠實現模塊化開發的工具，vuejs也是以組件化爲基礎的框架
18.閉包
當內部函數被保存到外部時，將會生成閉包。閉包會致使原有做用域鏈不釋放，形成內存泄露。
閉包的用途：1.實現公有變量 eg:函數累加器；2.能夠作緩存 eg:eater
3.能夠實現封裝，屬性私有化。 eg: new Person();
使用閉包的注意點：
（1）因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
（2）閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象使用，把閉包看成它的公用方法，把內部變量看成它的私有屬性，這時必定要當心，不要隨便改變父函數內部變量的值。
19.數據基本類型，以及引用類型？
null undefined string number bolean
引用類型有Object、Array、Date、RegExp、function
20..css經常使用的單位？
1.px(像素);2.%(百分數);3.em(相對於夫級的font-size);4.rem(相對於根節點html的font-size，16px);5.vh,vw(移動端);
21.字符串經常使用的方法
(1)substring
substring（start開始位置索引，end結束位置索引）截取的位置不包含結束位置的字符，只寫一個參數表示從開始位置截取最後，輸入負值將變爲零，哪一個較小做爲開始
(2)slice(start開始位置索引，end結束位置索引)基本和substring類似，區別在參數爲負數。當爲負值時，表示相對於最後的位置的第幾個，當第二個參數時大於第一個參數時返回空
(3)substr（start開始位置索引，end須要返回字符個數）,只傳start時，從開始位置到最後，start爲負值時，相對於最後位置的第幾個，end爲負值時，變爲0
(4)charAt（index）方法返回指定索引位置處的字符。若是超出有效範圍（0與字符串長度減一）的返回空字符串
(5)indexof（string）返回string對象內第一次出現字符串的位置。若是沒有找到字符串，則返回-1.
(6).lastindexof（string）倒序查找
返回string對象中第一次出現的位置相應的索引。若是沒有則返回-1；
(7)split(str)將字符串以參數分割爲數組
(8)toLowerCase方法返回一個字符串，該字符串中的字母被轉換成小寫。
(9)toUppercase
(10)match()-方法可在字符串內檢索指定值，或找到一個或多個正則表達式的匹配
(11)search()方法返回與正則表達式查找內容的第一個字符串的位置。
(12)replace()用來查找匹配一個正則表達式的字符串，而後使用新字符串代替匹配;
22.數組的方法：
(1)Push() 添加到最後 返回添加後的數組；
(2)Unshift() 添加到最前面 返回添加後的數組；
(3)Shift() 刪除（從前面刪除）返回處理後的數組；
(4)Pop() 刪除最後一項 返回處理後的數組
(5)reverse() 顛倒數組中的元素的順序
(6)Join(str) 數組轉化爲字符串
(7)slice(start,end) 截取數組中的從start（開始）到end（結束 不包含） 返回新數組，原數組不變
(8)concat() 方法用於鏈接兩個或多個數組。
(9)splice（開始下標，個數，ele1，ele2…）剪接數組
(10)forEach(function(ele,index,self){}) 循環遍歷
(11)sort（function() {}）排序
23.js循環機制？宏隊列？
事件循環的順序是從script開始第一次循環，隨後全局上下文進入函數調用棧，碰到macro-task就將其交給處理它的模塊，處理完以後將回調函數放進macro-task的隊列之中，碰到micro-task也是將其回調函數放進micro-task的隊列之中。直到函數調用棧清空只剩全局執行上下文，而後開始執行全部的micro-task。當全部可執行的micro-task執行完畢以後。循環再次執行macro-task中的一個任務隊列，執行完以後再執行全部的micro-task，就這樣一直循環。
macro-task(宏任務)包括：script(總體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。micro-task(微任務)包括：process.nextTick, Promises, Object.observe, MutationObserver
注意：Promise構造函數中的第一個參數是在當前任務直接執行
24.Doctype做用？嚴格模式與混雜模式若是區分？意義？
<!DOCTYPE>聲明位於文檔的最前面，處於標籤以前。告知瀏覽器以何種模式來渲染文檔 嚴格模式的排版和js運做模式是 以該瀏覽器支持的最高標準運行 在混雜模式中，頁面已寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現
25.Doctype多少種文檔類型？ 該標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文檔 HTML4.01規定了三種文檔類型：Strict, Transitional以及Frameset XHTML 1.0規定了三種XML文檔類型：Strict, Transitional以及Franmeset Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標籤的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁
26.webpack經常使用到哪些功能？
- 設置入口
- 設置輸出目錄
- 設置loader
- extract-text-webpack-plugin將css從js代碼中抽出併合並
- 處理圖片文字等功能
- 解析jsx解析bable
27.js垃圾回收方法
標記清除（mark and sweep）
- 這是JavaScript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。
- 垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量了
引用計數(reference counting)
- 在低版本IE中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。
- 在IE中雖然JavaScript對象經過標記清除的方式進行垃圾回收，但BOM與DOM對象倒是經過引用計數回收垃圾的， 也就是說只要涉及BOM及DOM就會出現循環引用問題。
28.flex佈局(阮一峯)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
29.http緩存機制
https://www.cnblogs.com/DiDiao-Liang/articles/8308995.html
30.BFC規範及用法
https://segmentfault.com/a/1190000015715400?utm_source=tag-newest
31.vue路由的兩種模式
對於Vue 這類漸進式前端開發框架，爲了構建SPA（單頁面應用），須要引入前端路由系統，這也就是Vue-router存在的意義。前端路由的核心，就在於——— 改變視圖的同時不會向後端發出請求。
1、爲了達到這個目的，瀏覽器提供瞭如下兩種支持：
一、hash ——即地址欄URL中的#符號（此hsah 不是密碼學裏的散列運算）。
好比這個URL：http://www.abc.com/#/hello, hash 的值爲#/hello。它的特色在於：hash 雖然出現URL中，但不會被包含在HTTP請求中，對後端徹底沒有影響，所以改變hash不會從新加載頁面。
二、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（須要特定瀏覽器支持）
這兩個方法應用於瀏覽器的歷史記錄站，在當前已有的back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改是，雖然改變了當前的URL，但你瀏覽器不會當即向後端發送請求。
history模式，會出現404 的狀況，須要後臺配置。
2、404 錯誤
一、hash模式下，僅hash符號以前的內容會被包含在請求中，如 http://www.abc.com, 所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回404錯誤；
二、history模式下，前端的url必須和實際向後端發起請求的url 一致，如http://www.abc.com/book/id 。若是後端缺乏對/book/id 的路由處理，將返回404錯誤。
32.vuex工做原理詳解
https://www.jianshu.com/p/d95a7b8afa06
————————————————本文爲CSDN博主「linaGao」的原創文章的部分借鑑。原文連接：https://blog.csdn.net/weixin_38292678/article/details/82858215