前端面试技巧和注意事项_前端面试百分之九十九过的技巧
2020最全的前端面試指南，一個多月 1.8w 字的面試經驗積累，憑借它最終成功入職大廠……
今年的金三銀四剛好趕上疫情，很多大公司都停止招聘甚至裁員，想跳槽的小伙伴被打的措手不及。
需求減少要求肯定隨之提高，謹以此面經獻給在如此艱難之時逆風而動、勇敢堅強的你~
前言
今年問的難度和深度應該比前幾年有所增加，下面從總體分析和重要點兩個維度來分析一下：
總體分析
- 前端問的最多的還是 js基礎、計算機網絡基礎等，建議在此處多下功夫。
- 而 css 相關的很少問到，最多也就問個三欄布局、兩欄布局、水平垂直居中，把前兩節看了面試基本沒啥問題。
- 框架 React/Vue 相關的在中小公司問的多一些，差不多占到面試時間的一半。而大廠不愛問框架，更注重基礎，因為入職之后讓你用哪個框架你就用哪個框架…即使問也是問比較底層的東西，比如 vue 的雙向綁定原理。
重要點
最后再列舉幾個重要的點，無論大中小公司基本都會問的：
- 性能優化，以及每個優化點具體怎么做，每個點都可能延伸了問。
- 比如你說異步加載，面試官會追問異步加載的方法，deffer 和 async 的區別。
- 你說充分利用緩存，面試官會問緩存都有哪些方式，什么是強緩存什么是協商緩存，它們的返回碼分別是什么，哪些資源存在 memory cache 哪些存在 disk cache…
- http/https/http2.0。三次握手四次揮手，https 為什么安全為什么慢，跟 http 的區別，http2.0 都有哪些優化，瀏覽器輸入url到看到頁面的整個流程…
- 安全類的常見的攻擊手段，記好 CSRF 和 XSS 攻擊的原理和防范措施就好了。
- ES6 新特性，還有針對 var 和 let 的各種變態題。
- 跨域的幾種方式。
除了以上這些，大公司還喜歡讓你介紹一個你覺得做的比較好的項目，有哪些亮點。這塊一定要好好準備，你講的項目用到的技術最好能夠了解的非常深入，避免給自己挖坑。
這篇文章內容比較多，后面會出一個精簡重點版便于復習，敬請期待~
一、頁面布局
三欄布局
題目：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為 300px，中間自適應。
解答：可以有很多種布局方式，這里列出五種：float布局，absolute布局，flex布局，table布局，grid布局，代碼如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>三欄布局</title><link rel="stylesheet" href=""><style type="text/css" media="screen">html *{margin: 0;padding: 0;}</style> </head> <body><section class="layout float"><style type="text/css" media="screen">.layout.float .wrapper>div{min-height: 100px;}.layout.float .left{float: left;width: 300px;background: red;}.layout.float .center{background: yellow;}.layout.float .right{float: right;width: 300px;background: blue;}</style><article class="wrapper"><div class="left"></div><div class="right"></div><div class="center"><h1>float布局</h1>1.我是float布局的中間部分2.我是float布局的中間部分</div></article></section><section class="layout absolute"><style type="text/css" media="screen">.layout.absolute .wrapper{width: 100%;margin-top: 20px;}.layout.absolute .wrapper>div{min-height: 100px;}.layout.absolute .left{position: absolute;left: 0;width: 300px;background: red;}.layout.absolute .center{position: absolute;left: 300px;right: 300px;background: yellow;}.layout.absolute .right{position: absolute;right: 0;width: 300px;background: blue;}</style><article class="wrapper"><div class="left"></div><div class="center"><h1>absolute布局</h1>1.我是absolute布局的中間部分2.我是absolute布局的中間部分</div><div class="right"></div></article></section><section class="layout flex"><style type="text/css" media="screen">.layout.flex .wrapper{width: 100%;min-height: 100px;display: flex;margin-top: 140px;}.layout.flex .left{width: 300px;background: red;}.layout.flex .center{flex: 1;background: yellow;}.layout.flex .right{width: 300px;background: blue;}</style><article class="wrapper"><div class="left"></div><div class="center"><h1>flex布局</h1>1.我是flex布局的中間部分2.我是flex布局的中間部分</div><div class="right"></div></article></section><section class="layout table"><style type="text/css" media="screen">.layout.table .wrapper{display: table;width: 100%;min-height: 100px;margin-top: 20px;}.layout.table .left{display: table-cell;width: 300px;background: red;}.layout.table .center{display: table-cell;background: yellow;}.layout.table .right{display: table-cell;width: 300px;background: blue;}</style><article class="wrapper"><div class="left"></div><div class="center"><h1>table布局</h1>1.我是table布局的中間部分2.我是table布局的中間部分</div><div class="right"></div></article></section><section class="layout grid"><style type="text/css" media="screen">.layout.grid .wrapper{display: grid;grid-template-columns: 300px auto 300px;grid-template-rows: 100px;width: 100%;margin-top: 20px;}.layout.grid .left{background: red;}.layout.grid .center{background: yellow;}.layout.grid .right{background: blue;}</style><article class="wrapper"><div class="left"></div><div class="center"><h1>grid布局</h1>1.我是grid布局的中間部分2.我是grid布局的中間部分</div><div class="right"></div></article></section> </body> </html> 復制代碼面試時至少寫出三種哦。
接下來問題可能會有三個延伸方向：
每種布局的優缺點
1. float 布局
優點： 比較簡單，兼容性也比較好。只要清除浮動做的好，是沒有什么問題的
缺點：浮動元素是脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如高度塌陷等。
2. 絕對布局
優點：很快捷，設置很方便，而且也不容易出問題
缺點：絕對定位是脫離文檔流的，意味著下面的所有子元素也會脫離文檔流，這就導致了這種方法的有效性和可使用性是比較差的。
3. flex 布局
優點：簡單快捷
缺點：不支持 IE8 及以下
4. table布局
優點：實現簡單，代碼少
缺點：當其中一個單元格高度超出的時候，兩側的單元格也是會跟著一起變高的，而有時候這種效果不是我們想要的。
5. grid布局
跟 flex 相似。
水平垂直居中
absolute + 負margin
這種方式比較好理解，兼容性也很好，缺點是需要知道子元素的寬高
<div class="out"><div class="inner">12345</div> </div><style type="text/css">.out{position: relative;width: 300px;height: 300px;background: red;}.inner{position: absolute;width: 100px;height: 100px;background: yellow;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;} </style> 復制代碼absolute + auto margin
這種方法兼容性也很好，缺點是需要知道子元素的寬高
<style type="text/css">.out{position: relative;width: 300px;height: 300px;background: red;}.inner{position: absolute;width: 100px;height: 100px;background: yellow;left: 0;top: 0;right: 0;bottom: 0;margin: auto;} </style> 復制代碼absolute + calc
這種方法的兼容性依賴于 calc，且也需要知道寬高
<style type="text/css">.out{position: relative;width: 300px;height: 300px;background: red;}.inner{position: absolute;width: 100px;height: 100px;background: yellow;left: calc(50% - 50px);top: calc(50% - 50px);} </style> 復制代碼absolute + transform
兼容性依賴 translate，不需要知道子元素寬高
<style type="text/css">.out{position: relative;width: 300px;height: 300px;background: red;}.inner{position: absolute;background: yellow;left: 50%;top: 50%;transform: translate(-50%, -50%);} </style> 復制代碼table
css新增的table屬性，可以讓我們把普通元素，變為table元素的顯示效果，通過這個特性也可以實現水平垂直居中。
這種方法兼容性也不錯。
<style type="text/css">.out{display: table-cell;width: 300px;height: 300px;text-align: center;vertical-align: middle;background: red;}.inner{display: inline-block;background: yellow;width: 100px;height: 100px;} </style> 復制代碼flex
flex 實現起來比較簡單，三行代碼即可搞定。可通過父元素指定子元素的對齊方式，也可通過 子元素自己指定自己的對齊方式來實現。第二種方式見 grid 布局。
<style type="text/css">.out{display: flex;justify-content: center;align-items: center;width: 300px;height: 300px;background: red;}.inner{background: yellow;width: 100px;height: 100px;} </style> 復制代碼grid
grid 布局也很強大，大體上屬性跟 flex 差不多。
//方法一：父元素指定子元素的對齊方式 <style type="text/css">.out{display: grid;align-content: center;justify-content: center;width: 300px;height: 300px;background: red;}.inner{background: yellow;width: 100px;height: 100px;} </style>//方法二：子元素自己指定自己的對齊方式 <style type="text/css">.out{display: grid;width: 300px;height: 300px;background: red;}.inner{background: yellow;width: 100px;height: 100px;align-self: center;justify-self: center;} </style> 復制代碼頁面布局小結：
- 語義化掌握到位
- 頁面布局理解深刻
- CSS基礎知識扎實
- 思維靈活且積極上進
- 代碼書寫規范
二、CSS盒模型
CSS盒模型是前端的基石，這個問題由淺入深，由易到難，可以依次問出下面幾個問題
- 基本概念：標準模型 + IE模型
- 標準模型 和 IE模型的區別
- CSS如何設置這兩種模型
- JS如何設置和獲取盒模型對應的寬和高
- 實例題（根據盒模型解釋邊距重疊）
- BFC（邊距重疊解決方案）
1、基本概念
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
2、標準模型與IE模型的區別
標準模型與 IE 模型的區別在于寬高的計算方式不同。
標準模型計算元素的寬高只算 content 的寬高，IE模型是 content + padding + border 的總尺寸。
假如 content 寬高是 100100px，padding 為 10px，border為 10px，margin為10px，那么在標準模型下，這個元素的寬為 100px，高為 100px。
IE模型下，寬為 100px + 2
10px(左右padding) + 210px(左右border) = 140px;
高為 100px + 2
10px(上下padding) + 2*10px(上下border) = 140px;
3、如何設置這兩種模型
//設置標準模型 box-sizing: content-box; //設置IE模型 box-sizing: border-box; 復制代碼box-sizing 的默認值是 content-box，即默認標準模型。
4、JS如何設置盒模型的寬和高
假設已經獲取的節點為 dom
//只能獲取內聯樣式設置的寬高 dom.style.width/height//獲取渲染后即時運行的寬高，值是準確的。但只支持 IE dom.currentStyle.width/height//獲取渲染后即時運行的寬高，值是準確的。兼容性更好 window.getComputedStyle(dom).width/height;//獲取渲染后即時運行的寬高，值是準確的。兼容性也很好，一般用來獲取元素的絕對位置，getBoundingClientRect()會得到4個值：left, top, width, height dom.getBoundingClientRect().width/height; 復制代碼5、BFC
什么是 BFC？Block Formatting Context（塊級格式化上下文）。
在解釋什么是BFC之前，我們需要先知道Box、Formatting Context的概念。
Box：css布局的基本單位
Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
- block-level box: display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
- inline-level box: display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
- run-in box: css3 中才有， 這兒先不講了。
Formatting Context
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC的布局規則
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
- 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算。
如何創建BFC
BFC的作用
三、DOM事件
3.1 事件級別
三個事件級別，注意沒有 DOM1，因為 DOM1 標準制定的時候沒有涉及 DOM事件。DOM3 比 DOM2 只是增加了一些事件類型。
- DOM0：element.onclick = function(){}
- DOM2：element.addEventListener('click', function(){}, false)
- DOM3：element.addEventListener('keyup', function(){}, false)
### 3.2 事件模型和事件流 DOM事件模型包括捕獲和冒泡。
事件流即用戶與界面交互的過程中，事件的流向過程。
3.3 DOM事件捕獲的具體流程
捕獲的流程為：window -> document -> html -> body -> ... -> 目標元素。
冒泡的流程為：目標元素 -> ... -> body -> html -> document -> window。
3.4 Event 對象常見應用
取消事件的默認動作。
阻止事件冒泡。
阻止剩下的事件處理程序被執行。如果一個元素上綁定了三個事件，在其中一個事件上調用了這個方法，那其他 的兩個事件將不會被執行。
3.5 事件捕獲流程和自定義事件示例
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>dom事件</title><link rel="stylesheet" href=""> </head> <body><style type="text/css" media="screen">#wrapper {width: 300px;height: 150px;background: yellow;}</style><div id="wrapper">點我啊點我啊</div><script type="text/javascript">var eve = document.getElementById('wrapper');//驗證事件捕獲過程window.addEventListener('click', function(){console.log('window capture')}, true)document.addEventListener('click', function(){console.log('document capture')}, true) //document.documentElement 獲取的是 html 標簽document.documentElement.addEventListener('click', function(){console.log('html capture')}, true)document.body.addEventListener('click', function(){console.log('body capture')}, true)eve.addEventListener('click', function(){console.log('eve capture')}, true)//自定義事件var customEvent = new Event('test')eve.addEventListener('test', function(){console.log('自定義事件 test 觸發')}, true)setTimeout(() => {eve.dispatchEvent(customEvent)}, 3000)</script> </body> </html> 復制代碼控制臺打印的結果為：
window capture document capture html capture body capture eve capture 復制代碼證明了事件捕獲的流程為：window -> document -> html -> body -> ... -> 目標元素。
自定義事件設定了 3秒后觸發，刷新頁面，3秒后控制臺打印出 自定義事件 test 觸發 。
四、HTTP協議
4.1 http協議的主要特點
簡單快速、靈活、無連接、無狀態
HTTP三點注意事項：
- HTTP是無連接：無連接的含義是限制每次連接只處理一個請求。服務器處理完客戶的請求，并收到客戶的應答后，即斷開連接。采用這種方式可以節省傳輸時間。
- HTTP是媒體獨立的：這意味著，只要客戶端和服務器知道如何處理的數據內容，任何類型的數據都可以通過HTTP發送。客戶端以及服務器指定使用適合的MIME-type內容類型。
- HTTP是無狀態：HTTP協議是無狀態協議。無狀態是指協議對于事務處理沒有記憶能力。缺少狀態意味著如果后續處理需要前面的信息，則它必須重傳，這樣可能導致每次連接傳送的數據量增大。另一方面，在服務器不需要先前信息時它的應答就較快。
4.2 請求報文
一個HTTP請求報文由請求行（request line）、請求頭（header）、空行和請求數據4個部分組成，下圖給出了請求報文的一般格式。
- 請求行 ：包括請求方法字段、URL字段和HTTP協議版本，如：GET /index.html HTTP/1.1。
- 請求頭
請求頭部由關鍵字/值對組成，每行一對，關鍵字和值用英文冒號“:”分隔。請求頭部通知服務器有關于客戶端請求的信息，典型的請求頭有：
- User-Agent：產生請求的瀏覽器類型。
- Accept：客戶端可識別的內容類型列表。
- Host：請求的主機名，允許多個域名同處一個IP地址，即虛擬主機。
- Content-Type：請求體的MIME類型 （用于POST和PUT請求中）。如：Content-Type: application/x-www-form-urlencoded
- 空行
最后一個請求頭之后是一個空行，發送回車符和換行符，通知服務器以下不再有請求頭。
- 請求數據
請求數據不在GET方法中使用，而是在POST方法中使用。POST方法適用于需要客戶填寫表單的場合。與請求數據相關的最常使用的請求頭是Content-Type和Content-Length。
4.3 響應報文
包括：狀態行、響應頭、空行、響應正文。
4.4 HTTP 狀態碼
HTTP狀態碼的英文為HTTP Status Code。狀態代碼由三位數字組成，第一個數字定義了響應的類別，且有五種可能取值。
- 1xx：指示信息--表示請求已接收，繼續處理。
- 2xx：成功--表示請求已被成功接收、理解、接受。
- 3xx：重定向--要完成請求必須進行更進一步的操作。
- 4xx：客戶端錯誤--請求有語法錯誤或請求無法實現。
- 5xx：服務器端錯誤--服務器未能實現合法的請求。
常見狀態代碼、狀態描述的說明如下。
- 200 OK：客戶端請求成功。
- 400 Bad Request：客戶端請求有語法錯誤，不能被服務器所理解。
- 401 Unauthorized：請求未經授權，這個狀態代碼必須和WWW-Authenticate報頭域一起使用。
- 403 Forbidden：服務器收到請求，但是拒絕提供服務。
- 404 Not Found：請求資源不存在，舉個例子：輸入了錯誤的URL。
- 500 Internal Server Error：服務器發生不可預期的錯誤。
- 503 Server Unavailable：服務器當前不能處理客戶端的請求，一段時間后可能恢復正常，舉個例子：HTTP/1.1 200 OK（CRLF）。
4.5 優化
DNS 預解析
<!--在head標簽中，越早越好--> <link rel="dns-prefetch" href="//example.com"> 復制代碼HTTP預連接
<link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin> 復制代碼4.6 瀏覽器輸入 url 之后發生了什么
網上有很多答案，也沒有一個統一的標準答案，多看幾個把大概流程說出來即可。
五、原型鏈
5.1 創建對象的幾種方法
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>原型鏈</title><link rel="stylesheet" href=""> </head> <body><script type="text/javascript" charset="utf-8">//創建對象的幾種方式//1.字面量var obj1 = {name: 'solo obj1'};//2.new Objectvar obj2 = new Object({name: 'solo obj2'})//3.構造函數創建var M = function(name){this.name = name;}var obj3 = new M('solo obj3');//4.Object.createvar p = {name: 'p'};var obj4 = Object.create(p);</script> </body> </html> 復制代碼然后在控制臺查看各對象的值
5.2 原型、構造函數、實例、原型鏈
構造函數、原型對象、實例的關系可以參照下圖：
結合上一節控制臺的打印值，可以得出結論：
- 構造函數.prototype.constructor === 構造函數
M.prototype.constructor === M 的結果為 true
- 構造函數.prototype === 實例對象. proto
M.prototype === obj3._ proto _ 的結果為 true
5.3 instanceof 的原理
instanceof 用于判斷一個引用類型是否屬于某構造函數；還可以在繼承關系中用來判斷一個實例是否屬于它的父類型。
instanceof 的原理是判斷實例對象的 __proto__ 是否與構造函數的 prototype 指向同一個引用。
只要在實例對象的原型鏈上的構造函數，instaceof 都會返回 true。看下圖：
obj3 是 M 的實例，所以 obj3 instanceof M = true ;
同時 obj3 instanceof Object
的結果也是 true，因為
obj3.__proto__ === M.prototype true M.prototype.__proto__ === Object.prototype true 復制代碼如果想準確的判斷構造函數究竟是哪個，可以用 constructor
obj3.__proto__.constructor === M trueobj3.__proto__.constructor === Object false 復制代碼5.4 instanceof 和 typeof 的區別
typeof 對于基本數據類型（null, undefined, string, number, boolean, symbol），除了 null 都會返回正確的類型。null 會返回 object。
typeof 對于對象類型，除了函數會返回 function，其他的都返回 object。
如果我們想獲得一個變量的正確類型，可以通過 Object.prototype.toString.call(xx) 。這樣我們就可以獲得類似 [object Type] 的字符串。
判斷是否等于 undefined 的方法：
let a // 我們也可以這樣判斷 undefined a === undefined // 但是 undefined 不是保留字，能夠在低版本瀏覽器被賦值 let undefined = 1 // 這樣判斷就會出錯 // 所以可以用下面的方式來判斷，并且代碼量更少 // 因為 void 后面隨便跟上一個組成表達式 // 返回就是 undefined a === void 0 復制代碼5.5 new運算符
用代碼實現一個 new 方法
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>模擬new的過程</title><link rel="stylesheet" href=""> </head> <body><script type="text/javascript" charset="utf-8" async defer>function Person(name, age){this.name = name;this.age = age;}//手動實現newfunction _new(){//1.拿到傳入的參數中的第一個參數，即構造函數名Funcvar Func = [].shift.call(arguments)//2.創建一個空對象obj,并讓其繼承Func.prototypevar obj = Object.create(Func.prototype)//第二步也可以這樣寫// var obj = {}// obj.__proto__ = Func.prototype//3.執行構造函數，并將this指向創建的空對象objvar ret = Func.apply(obj, arguments)//4.如果構造函數返回的值是對象則返回，不是對象則返回創建的對象objreturn typeof ret === 'object' ? ret : obj}var p1 = _new(Person, 'bob', 19)console.log(p1)</script> </body> </html> 復制代碼如何理解 [].shift.call(arguments)
因為 shift 內部實現是使用的this代表調用對象。那么當[].shift.call() 傳入 arguments對象的時候，通過 call函數改變原來 shift 方法的 this 指向, 使其指向 arguments，并對 arguments 進行復制操作，而后返回一個新數組。至此便是完成了 arguments 類數組轉為數組的目的！
其實這可以理解為，讓類數組調用數組的方法！
六、面向對象
6.1 類的聲明和實例化
聲明類有兩種方法：
function Animal(name){this.name = name; }class Animal2 {constructor(name){this.name = name;} } 復制代碼類的實例化只有一種方式
var a1 = new Animal('shape'); var a2 = new Animal2('cat'); 復制代碼6.2 繼承
繼承有多種實現方式
6.2.1 借助構造函數實現繼承
先看代碼，Parent1 是父類，Child1 是子類。通過 Parent1.call(this, name) 改變了 this 指向，使子類繼承了父類的屬性，即 Child1 也有了 name 屬性。
/*構造函數實現繼承 */ function Parent1(name){this.name = name; }function Child1(name, age){Parent1.call(this, name)this.age = age }var c1 = new Child1('bobo', 19) console.log(c1) 復制代碼運行程序，打印結果
但是， 這種方式不能繼承父類原型鏈上的屬性，只能繼承在父類顯式聲明的屬性 。
看下面的代碼，通過Parent1.prototype.say
給 Parent1 新增一個 say 方法，那么 Child1 能不能也繼承呢？
function Parent1(name){this.name = name; }Parent1.prototype.say = function(){console.log('say hello') }function Child1(name, age){Parent1.call(this, name)this.age = age }var p1 = new Parent1('hehe') var c1 = new Child1('bobo', 19) console.log(p1) console.log(c1) 復制代碼輸出結果如下：
Parent1 中有 say 方法，而 Child1 中沒有，說明沒有繼承到。
6.2.2 借助原型鏈實現繼承
實現原理是將 Child.prototype 賦值為一個新的 Parent 對象，即 Child2.prototype = new Parent2('bob')
function Parent2(name){this.name = name;this.arr = [1,2,3] }function Child2(age){this.age = age }//重點在這句 Child2.prototype = new Parent2('bob')c2 = new Child2(20) c3 = new Child2(22) console.log('c2', c2) console.log('c3', c3) 復制代碼控制臺輸出如下：
這種方法也有缺點，看 arr 屬性是一個數組，如果創建兩個實例對象 c2、c3，因為這兩個實例對象的 arr 指向同一個引用，所以改變其中一個的值，另一個也會跟著改變。
我們來看下面的實驗：c2.arr 和 c3.arr 值都是 [1,2,3]，此時通過 c2.arr.push(4) 給 c2.arr 添加一個元素，c2.arr 變成了 [1,2,3,4]，這沒有問題。但再看 c3.arr ，也是 [1,2,3,4]，這就有問題了，不是我們期望的。
6.2.3 組合方式實現繼承
以上兩種方式單獨使用都有一定局限性，把兩種方式結合起來是不是完美了呢？
/*** 組合模式*/ function Parent3(name){this.name = name;this.arr = [1,2,3] } function Child3(name, age){Parent3.call(this, name)this.age = age } Child3.prototype = new Parent3()Parent4.prototype.say = function(){console.log('say hi') }var c4 = new Child3('ciri', 16) var c5 = new Child3('heha', 32) 復制代碼再在控制臺做實驗，通過結果可以看到，子類 Child3 繼承了父類原型鏈上的屬性，一個實例改變 arr 的值，不會影響到另一個。解決了前兩種的缺陷。
但是， 在實例化 Child3 的時候，父類 Parent3 的構造函數被執行了兩遍，這是沒必要的。
為什么執行了兩遍父類構造函數？因為 new Child3('ciri', 16) 的時候，子類構造函數中 Parent3.call(this, name) 執行了一次父類構造函數，然后 Child3.prototype = new Parent3() 又有一個 new Parent() ，第二次執行了父類構造函數。
所以還可以再優化。
6.2.4 組合方式優化1
上面說到了執行了兩次父類構造函數，其中第二次是 Child3.prototype = new Parent3() ，那么把 new Parent3() 換掉不就可以了？是的！根據上一章原型鏈的知識，可以替換為 Child3.prototype = Parent3.prototype
//組合方式優化1 function Parent4(name){this.name = name;this.arr = [1,2,3] }function Child4(name, age){//重點1Parent4.call(this, name)this.age = age } //重點2 Child4.prototype = Parent4.prototypeParent4.prototype.say = function(){console.log('say hi') }var c6 = new Child4('ciri', 16) var c7 = new Child4('heha', 32)console.log(c6 instanceof Child4, c6 instanceof Parent4) console.log(c6.constructor) 復制代碼以上就是組合方式優化1，解決了執行兩遍父類構造函數的問題。
這種方式就完美了嗎？NO！
看最后打印的兩行， c6 instanceof Child4 和 c6 instanceof Parent4 都為 true，這沒問題。
但是 c6.constructor 是誰呢？正常來說應該是 Child4，那么看一下打印結果卻是 Parent4。
**
為什么有這種現象呢？再看一下這張圖
Parent4.prototype.constructor 其實是指向了 Parent4 自己，因為 Child4.prototype = Parent4.prototype ，共用了一個原型對象，所以 Child4.prototype.constructor 當然也是 Parent4 了。
那用 6.2.3 中 Child3.prototype = new Parent3() 這種方式有沒有這個問題呢？一樣的，因為 Child3 沒有 constructor，它的 constructor 是從 new Parent3() 繼承的，所以也是 Parent3。
6.2.5 組合方式優化2
直接看最完美的繼承寫法：
//組合方式優化2 function Parent5(name){this.name = name } function Child5(name, age){Parent5.call(this, name)this.age = age } Child5.prototype = Object.create(Parent5.prototype) Child5.prototype.constructor = Child5var c8 = new Child5() console.log(c8 instanceof Child5, c8 instanceof Parent5) console.log(c8.constructor) 復制代碼與上一種方法的區別是：
Child5.prototype = Object.create(Parent5.prototype) Child5.prototype.constructor = Child5 復制代碼** Object.create() **方法創建一個新對象，使用現有的對象來提供新創建的對象的__proto__。即返回一個帶著指定的原型對象和屬性的新對象。
Child5.prototype 和 Parent5.prototype 不再使用同一個引用，中間用一個新的對象隔離開了。
此時 Child5 還沒有 constructor，所以要手動指定一個： Child5.prototype.constructor = Child5
至此，繼承的完美解決方案誕生了。
那么可不可以在 6.2.4 中 Child4.prototype = Parent4.prototype 下面直接寫個 Child4.prototype.constructor = Child4 呢？不可以，因為它們指向的是同一個對象，改變了 Child4 的 constructor，Parent4 的 constructor 也變成了 Child4。
七、通信類
7.1 同源策略及限制
同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的重要安全機制。
協議、域名、端口只要有一個不一樣，就是不同的源。
不同源的限制
- Cookie、LocalStorage、IndexDB 無法獲取
- DOM 無法獲取
- Ajax 請求不能發送(Ajax 只限于同源使用，不能跨域使用)
7.2 前后端如何通信
- Ajax
- WebSocket
- CORS
7.3 跨域通信的幾種方式
- JSONP(利用 script 標簽的異步加載實現的)
- Hash（window.location.hash + iframe）
- postMessage (H5中新增的)
- WebSocket
- CORS
參考文章： segmentfault.com/a/119000001…
八、安全類
前端安全分兩類：CSRF、XSS
常考點：基本概念和縮寫、攻擊原理、防御措施
8.1 CSRF
CSRF（Cross-site request forgery）跨站請求偽造。
攻擊原理
防御措施
8.2 XSS
XSS（cross-site scripting）跨域腳本攻擊
攻擊原理
往 Web 頁面里插入惡意Script代碼
防御措施
九、算法
算法前端問的不太多，建議先復習其他的，有精力了再復習算法。
排序
排序算法比較多，重點掌握：快速排序、選擇排序、希爾排序、冒泡排序這四種即可。
術語：
穩定 ：如果a原本在b前面，而a=b，排序之后a仍然在b的前面； 不穩定 ：如果a原本在b的前面，而a=b，排序之后a可能會出現在b的后面； 內排序 ：所有排序操作都在內存中完成； 外排序 ：由于數據太大，因此把數據放在磁盤中，而排序通過磁盤和內存的數據傳輸才能進行； 時間復雜度 ： 一個算法執行所耗費的時間。 空間復雜度 ：運行完一個程序所需內存的大小。
各種算法的時間復雜度：
冒泡排序
冒泡排序 是一種簡單的排序算法。它重復地走訪過要排序的數列，一次比較兩個元素，如果它們的順序錯誤就把它們交換過來。走訪數列的工作是重復地進行直到沒有再需要交換，也就是說該數列已經排序完成。這個算法的名字由來是因為越小的元素會經由交換慢慢“浮”到數列的頂端。
時間復雜度：
- 最佳情況：T(n) = O(n)
- 最差情況：T(n) = O(n^2)
- 平均情況：T(n) = O(n^2)
選擇排序
選擇排序(Selection-sort) 是一種簡單直觀的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再從剩余未排序元素中繼續尋找最小（大）元素，然后放到已排序序列的末尾。以此類推，直到所有元素均排序完畢。
時間復雜度：
- 最佳情況：T(n) = O(n^2)
- 最差情況：T(n) = O(n^2)
- 平均情況：T(n) = O(n^2)
堆棧、隊列、列表
待完善…
遞歸
待完善…
波蘭式和逆波蘭式
待完善…
十、渲染機制
10.1 DOCTYPE 及其作用
DTD (Document type definition，文檔類型定義) 是一系列的語法規則，用來定義 XML 或 HTML 的文件類型。瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式。
DOCTYPE 是用來聲明文檔類型和 DTD 規范的，一個主要的用途便是文件的合法性驗證。如果文件代碼不合法，那么瀏覽器解析時便會出一些差錯。
注意：<!DOCTYPE> 聲明不區分大小寫。
HTML5
<!DOCTYPE html> 復制代碼HTML 4.01 Strict
這個 DTD 包含所有 HTML 元素和屬性，但不包括表象或過時的元素（如 font ）。框架集是不允許的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 復制代碼HTML 4.01 Transitional
這個 DTD 包含所有 HTML 元素和屬性，包括表象或過時的元素（如 font ）。框架集是不允許的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 復制代碼HTML 4.01 Frameset
這個 DTD 與 HTML 4.01 Transitional 相同，但是允許使用框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 復制代碼10.2 瀏覽器渲染過程
這個問題照著這張圖講清楚就好。
瀏覽器拿到 HTML 和 CSS 之后，通過 HTML Parser 把 HTML 解析成 DOM Tree , 通過 CSS Parser 把 CSS 解析成 Style Rules 即 CSS 規則，然后 DOM Tree 和 CSS規則 結合起來形成 Render Tree 。
然后進行布局 Layout 和繪制 Painting，最終 Display 顯示在頁面上。
10.3 重排 Reflow
定義
DOM 結構中各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式來計算并根據計算結果將元素放到它該出現的位置，這個過程稱為 reflow。
觸發 Reflow
什么情況會觸發 Reflow 呢？（記住兩三個就可以）
- 增加、刪除、修改 DOM 節點時，會導致 Reflow 或 Repaint
- 移動 DOM 位置，或搞個動畫時
- 修改 CSS 樣式時
- Resize 窗口（移動端沒這個問題）或滾動的時候
- 修改網頁默認字體時
10.4 重繪 Repaint
定義
當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定之后，瀏覽器把這些元素按照各自的特性繪制了一遍，于是頁面內容出現了，這個過程稱之為 repaint。
觸發 Repaint
- DOM 改動
- CSS 改動
如何最小程度的 Repaint
比如要添加多個 DOM 節點，一次性添加，而不要一個個添加。
10.5 dispaly:none 和 visibility:hidden
dispaly:none 設置該屬性后，該元素下的元素都會隱藏，占據的空間消失。
visibility:hidden 設置該元素后，元素雖然不可見了，但是依然占據空間的位置。
display:none和visibility:hidden的區別？
1.visibility具有繼承性，其子元素也會繼承此屬性，若設置visibility:visible，則子元素會顯示
2.visibility不會影響計數器的計算，雖然隱藏掉了，但是計數器依然繼續運行著。
3.在css3的transition中支持visibility屬性，但是不支持display，因為transition可以延遲執行，因此配合visibility使用純css實現hover延時顯示效果可以提高用戶體驗
4. display:none會引起回流(重排)和重繪 visibility:hidden會引起重繪
十一、JS運行機制
掌握下面幾個要點：
- 理解 JS 的單線程概念
- 理解任務隊列
- 理解 EventLoop
- 理解哪些語句會放入異步任務隊列
- 理解語句放入異步任務隊列的時機
11.1 為什么 JavaScript 是單線程
JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。
JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？
所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。
11.2 任務隊列
單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。
所有任務可以分成兩種，一種是 同步任務 （synchronous），另一種是 異步任務 （asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。
具體來說，異步執行的運行機制如下:（同步執行也是如此，因為它可以被視為沒有異步任務的異步執行。）
（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。 （2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。 （3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行。 （4）主線程不斷重復上面的第三步。 復制代碼只要主線程空了，就會去讀取"任務隊列"，這就是JavaScript的運行機制。這個過程會不斷重復。
11.3 宏任務 & 微任務
這里需要注意的是new Promise是會進入到主線程中立刻執行，而promise.then則屬于微任務
- 宏任務(macro-task)：整體代碼script、setTimeOut、setInterval
- 微任務(mincro-task)：promise.then、promise.nextTick(node)
11.4 EventLoop 事件循環
主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環）。
11.5 定時器
除了放置異步任務的事件，"任務隊列"還可以放置定時事件，即指定某些代碼在多少時間之后執行。這叫做"定時器"（timer）功能，也就是定時執行的代碼。
定時器功能主要由setTimeout()和setInterval()這兩個函數來完成，它們的內部運行機制完全一樣，區別在于前者指定的代碼是一次性執行，后者則為反復執行。以下主要討論setTimeout()。
setTimeout()接受兩個參數，第一個是回調函數，第二個是推遲執行的毫秒數。
console.log(1); setTimeout(function(){console.log(2);},1000); console.log(3); 復制代碼上面代碼的執行結果是1，3，2，因為setTimeout()將第二行推遲到1000毫秒之后執行。
如果將setTimeout()的第二個參數設為0，就表示當前代碼執行完（執行棧清空）以后，立即執行（0毫秒間隔）指定的回調函數。
setTimeout(function(){console.log(1);}, 0); console.log(2); 復制代碼上面代碼的執行結果總是2，1，因為只有在執行完第二行以后，系統才會去執行"任務隊列"中的回調函數。
總之，setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。
HTML5標準規定了setTimeout()的第二個參數的最小值（最短間隔），不得低于 4毫秒 ，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對于那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是 每16毫秒執行一次 。這時使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在setTimeout()指定的時間執行。
11.6 哪些是異步任務
11.7 常考題
1) 第一題
下面代碼的輸出結果是什么？
console.log(1); setTimeout(function(){console.log(2) }, 0); console.log(3) 復制代碼答案：1，3，2
解析： console.log() 是同步任務， setTimeout 是異步任務。異步任務會等同步任務執行完再執行。雖然 setTimeout 設置的延遲是 0，但瀏覽器規定延遲最小為 4ms，所以 console.log(2) 在 4ms 后被放入任務隊列。當同步任務執行完，即打印完 1，3 之后，主線程再從任務隊列中取任務，打印 2。
2) 第二題
下面的代碼輸出結果是什么
console.log('A') while(true){} console.log('B') 復制代碼答案：A
解析：代碼從上往下執行，先打印 A，然后 while 循環，因為條件一直是 true，所以會進入死循環。while 不執行完就不會執行到第三行。
這個題目還有個變種：
console.log('A'); setTimeout(function(){console.log('B') }, 0); while(1){} 復制代碼同樣只會輸出 A。因為異步任務需要等同步任務執行完之后才執行，while 進入了死循環，所以不會打印 B。
3) 第三題
下面代碼輸出結果
for(var i=0; i<4; i++){setTimeout(function(){console.log(i)}, 0) } 復制代碼結果：4個4。
解析：這題主要考察異步任務放入任務隊列的時機。當執行到 setTimeout 即定時器時，并不會馬上把這個異步任務放入任務隊列，而是等時間到了之后才放入。然后等執行棧中的同步任務執行完畢后，再從任務隊列中依次取出任務執行。
for 循環是同步任務，會先執行完循環，此時 i 的值是 4。4ms后 console.log(i) 被依次放入任務隊列，此時如果執行棧中沒有同步任務了，就從任務隊列中依次取出任務，所以打印出 4 個 4。
那么如何才能按照期望打印出 0, 1，2，3 呢？有三個方法：
//方法1：把 var 換成 let for(let i=0; i<4; i++){setTimeout(function(){console.log(i)}, 0) }//方法2：使用立即執行函數 for(let i=0; i<4; i++){(function(i){setTimeout(function(){console.log(i)}, 0)})(i) }//方法3：加閉包 for(let i=0; i<4; i++){var a = function(){var j = i;setTimeout(function(){console.log(j)}, 0)}a(); } 復制代碼4) 第四題
setTimeout(function(){console.log(1) }); new Promise(function(resolve){console.log(2);for(var i = 0; i < 10000; i++){i == 9999 && resolve();} }).then(function(){console.log(3) }); console.log(4); 執行結果： // 2， 4， 3， 1 復制代碼分析：
1.setTimeout是異步，且是宏函數，放到宏函數隊列中；
2.new Promise是同步任務，直接執行，打印2，并執行for循環；
3.promise.then是微任務，放到微任務隊列中；
4.console.log(4)同步任務，直接執行，打印4；
5.此時主線程任務執行完畢，檢查微任務隊列中，有promise.then，執行微任務，打印3；
6.微任務執行完畢，第一次循環結束；從宏任務隊列中取出第一個宏任務到主線程執行，打印1；
7.結果：2，4，3，1
5) 第五題
console.log(1);setTimeout(function() {console.log(2); }, 0);Promise.resolve().then(function() {console.log(3); }).then(function() {console.log('4.我是新增的微任務'); });console.log(5);執行結果： // 1，5，3，4.我是新增的微任務，2 復制代碼分析：
1.console.log(1)是同步任務，直接執行，打印1；
2.setTimeout是異步，且是宏函數，放到宏函數隊列中；
3.Promise.resolve().then是微任務，放到微任務隊列中；
4.console.log(5)是同步任務，直接執行，打印5；
5.此時主線程任務執行完畢，檢查微任務隊列中，有Promise.resolve().then，執行微任務，打印3；
6.此時發現第二個.then任務，屬于微任務，添加到微任務隊列，并執行，打印4.我是新增的微任務；
7.這里強調一下，微任務執行過程中，發現新的微任務，會把這個新的微任務添加到隊列中，微任務隊列依次執行完畢后，才會執行下一個循環；
8.微任務執行完畢，第一次循環結束；取出宏任務隊列中的第一個宏任務setTimeout到主線程執行，打印2；
9.結果：1，5，3，4.我是新增的微任務，2
6) 第六題
function add(x, y) {console.log(1)setTimeout(function() { // timer1console.log(2)}, 1000) } add();setTimeout(function() { // timer2console.log(3) })new Promise(function(resolve) {console.log(4)setTimeout(function() { // timer3console.log(5)}, 100)for(var i = 0; i < 100; i++) {i == 99 && resolve()} }).then(function() {setTimeout(function() { // timer4console.log(6) }, 0)console.log(7) })console.log(8)執行結果 //1，4，8，7，3，6，5，2 復制代碼分析：
1.add()是同步任務，直接執行，打印1；
2.add()里面的setTimeout是異步任務且宏函數，記做timer1放到宏函數隊列；
3.add()下面的setTimeout是異步任務且宏函數，記做timer2放到宏函數隊列；
4.new Promise是同步任務，直接執行，打印4；
5.Promise里面的setTimeout是異步任務且宏函數，記做timer3放到宏函數隊列；
6.Promise里面的for循環，同步任務，執行代碼；
7.Promise.then是微任務，放到微任務隊列；
8.console.log(8)是同步任務，直接執行，打印8；
9.此時主線程任務執行完畢，檢查微任務隊列中，有Promise.then，執行微任務，發現有setTimeout是異步任務且宏函數，記做timer4放到宏函數隊列；
10.微任務隊列中的console.log(7)是同步任務，直接執行，打印7；
11.微任務執行完畢，第一次循環結束；
12.檢查宏任務Event Table，里面有timer1、timer2、timer3、timer4，四個定時器宏任務，按照定時器延遲時間得到可以執行的順序，即Event Queue：timer2、timer4、timer3、timer1，取出排在第一個的timer2；
13.取出timer2執行，console.log(3)同步任務，直接執行，打印3；
14.沒有微任務，第二次Event Loop結束；
15.取出timer4執行，console.log(6)同步任務，直接執行，打印6；
16.沒有微任務，第三次Event Loop結束；
17.取出timer3執行，console.log(5)同步任務，直接執行，打印5；
18.沒有微任務，第四次Event Loop結束；
19.取出timer1執行，console.log(2)同步任務，直接執行，打印2；
20.沒有微任務，也沒有宏任務，第五次Event Loop結束；
21.結果：1，4，8，7，3，6，5，2
7) 第七題
setTimeout(function() { // timer1console.log(1);setTimeout(function() { // timer3console.log(2);}) }, 0); setTimeout(function() { // timer2console.log(3); }, 0);執行結果 //1，3，2 復制代碼分析：
1.第一個setTimeout是異步任務且宏函數，記做timer1放到宏函數隊列；
2.第三個setTimeout是異步任務且宏函數，記做timer2放到宏函數隊列；
3.沒有微任務，第一次Event Loop結束；
4.取出timer1，console.log(1)同步任務，直接執行，打印1；
5.timer1里面的setTimeout是異步任務且宏函數，記做timer3放到宏函數隊列；
6.沒有微任務，第二次Event Loop結束；
7.取出timer2，console.log(3)同步任務，直接執行，打印3；
8.沒有微任務，第三次Event Loop結束；
9.取出timer3，console.log(2)同步任務，直接執行，打印2；
10.沒有微任務，也沒有宏任務，第四次Event Loop結束；
11.結果：1，3，2
十二、頁面性能
面試必考，這五個最好都能記住。異步加載和瀏覽器緩存都會延伸了問，其他三個只要說出來即可。
提升頁面性能的方法有哪些？
12.1 異步加載
異步加載的方式
異步加載的區別
下面兩張圖可以更清楚地闡述 defer 和 async 的執行以及和 DOMContentLoaded 、 load 事件的關系：
12.2 瀏覽器緩存
緩存策略的分類：
- 強緩存
- 協商緩存
緩存策略都是通過設置 HTTP Header 來實現的。
瀏覽器每次發起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識。
瀏覽器每次拿到返回的請求結果都會將該結果和緩存標識存入瀏覽器緩存中。
12.2.1 強緩存
強緩存：不會向服務器發送請求，直接從緩存中讀取資源，在chrome控制臺的Network選項中可以看到該請求返回200的狀態碼，并且Size顯示from disk cache或from memory cache。強緩存可以通過設置兩種 HTTP Header 實現：Expires 和 Cache-Control。
1. Expires
緩存過期時間，用來指定資源到期的時間，是服務器端的具體的時間點。也就是說，Expires=max-age + 請求時間，需要和Last-modified結合使用。Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。
Expires 是 HTTP/1 的產物，受限于本地時間，如果修改了本地時間，可能會造成緩存失效。 Expires: Wed, 22 Oct 2018 08:41:00 GMT 表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 后過期，需要再次請求。
2. Cache-Control
在HTTP/1.1中，Cache-Control是最重要的規則，主要用于控制網頁緩存。比如當 Cache-Control:max-age=300 時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次加載資源，就會命中強緩存。
Cache-Control 可以在請求頭或者響應頭中設置，并且可以組合使用多種指令：
3. Expires和Cache-Control兩者對比
其實這兩者差別不大，區別就在于 Expires 是http1.0的產物，Cache-Control是http1.1的產物，兩者同時存在的話，Cache-Control優先級高于Expires ；在某些不支持HTTP1.1的環境下，Expires就會發揮用處。所以Expires其實是過時的產物，現階段它的存在只是一種兼容性的寫法。
強緩存判斷是否緩存的依據來自于是否超出某個時間或者某個時間段，而不關心服務器端文件是否已經更新，這可能會導致加載文件不是服務器端最新的內容，那我們如何獲知服務器端內容是否已經發生了更新呢？此時我們需要用到協商緩存策略。
12.2.2 協商緩存
協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程，主要有以下兩種情況：
- 協商緩存生效，返回304和Not Modified
- 協商緩存失效，返回200和請求結果
協商緩存可以通過設置兩種 HTTP Header 實現：Last-Modified 和 ETag 。
1. Last-Modified 和 If-Modified-Since
瀏覽器在第一次訪問資源時，服務器返回資源的同時，在response header中添加 Last-Modified 的header，值是這個資源在服務器上的最后修改時間，瀏覽器接收后緩存文件和 header；
Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT 復制代碼瀏覽器下一次請求這個資源，瀏覽器檢測到有 Last-Modified這個header，于是添加If-Modified-Since這個header，值就是Last-Modified中的值；服務器再次收到這個資源請求，會根據 If-Modified-Since 中的值與服務器中這個資源的最后修改時間對比，如果沒有變化，返回304和空的響應體，直接從緩存讀取，如果If-Modified-Since的時間小于服務器中這個資源的最后修改時間，說明文件有更新，于是返回新的資源文件和200。
但是 Last-Modified 存在一些弊端：
- 如果本地打開緩存文件，即使沒有對文件進行修改，但還是會造成 Last-Modified 被修改，服務端不能命中緩存導致發送相同的資源
- 因為 Last-Modified 只能以秒計時，如果在不可感知的時間內修改完成文件，那么服務端會認為資源還是命中了，不會返回正確的資源
既然根據文件修改時間來決定是否緩存尚有不足，能否可以直接根據文件內容是否修改來決定緩存策略？所以在 HTTP / 1.1 出現了 ETag 和 If-None-Match
2. ETag 和 If-None-Match
Etag 是服務器響應請求時，返回當前資源文件的一個唯一標識(由服務器生成)，只要資源有變化，Etag就會重新生成。瀏覽器在下一次加載資源向服務器發送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，服務器只需要比較客戶端傳來的If-None-Match跟自己服務器上該資源的ETag是否一致，就能很好地判斷資源相對客戶端而言是否被修改過了。如果服務器發現ETag匹配不上，那么直接以常規GET 200回包形式將新的資源（當然也包括了新的ETag）發給客戶端；如果ETag是一致的，則直接返回304知會客戶端直接使用本地緩存即可。
3. 兩者之間對比：
- 首先在精確度上，Etag要優于Last-Modified。
Last-Modified的時間單位是秒，如果某個文件在1秒內改變了多次，那么他們的Last-Modified其實并沒有體 現出來修改，但是Etag每次都會改變確保了精度；如果是負載均衡的服務器，各個服務器生成的Last- Modified也有可能不一致。
- 第二在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務器通過算法來計算出一個hash值。
- 第三在優先級上，服務器校驗優先考慮Etag
12.2.3 緩存機制
強制緩存優先于協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，返回200，重新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存。
12.2.4 強緩存與協商緩存的區別
強緩存與協商緩存的區別可以用下表來表示：
緩存類型獲取資源形式狀態碼發送請求到服務器強緩存從緩存取200（from cache）否，直接從緩存取協商緩存從緩存取304（Not Modified）是，通過服務器來告知緩存是否可用
用戶行為對緩存的影響
用戶操作Expires/Cache-ControlLast-Modied/Etag地址欄回車有效有效頁面鏈接跳轉有效有效新開窗口有效有效前進回退有效有效F5刷新無效有效Ctrl+F5強制刷新無效無效
12.2.5 from memory cache 與 from disk cache對比
在chrome瀏覽器中的控制臺Network中size欄通常會有三種狀態
1.from memory cache
2.from disk cache
3.資源本身的大小(如：1.5k)
三種的區別：
- from memory cache ：字面理解是從內存中，其實也是字面的含義，這個資源是直接從內存中拿到的，不會請求服務器一般已經加載過該資源且緩存在了內存當中，當關閉該頁面時，此資源就被內存釋放掉了，再次重新打開相同頁面時不會出現from memory cache的情況。
- from disk cache ：同上類似，此資源是從磁盤當中取出的，也是在已經在之前的某個時間加載過該資源，不會請求服務器但是此資源不會隨著該頁面的關閉而釋放掉，因為是存在硬盤當中的，下次打開仍會from disk cache
- 資源本身大小數值 ：當http狀態為200是實實在在從瀏覽器獲取的資源，當http狀態為304時該數字是與服務端通信報文的大小，并不是該資源本身的大小，該資源是從本地獲取的
狀態類型說明200form memory cache不請求網絡資源，資源在內存當中，一般腳本、字體、圖片會存在內存當中。200form disk ceche不請求網絡資源，在磁盤當中，一般非腳本會存在內存當中，如css等。200資源大小數值資源大小數值 從服務器下載最新資源。304報文大小請求服務端發現資源沒有更新，使用本地資源，即命中協商緩存。
十三、錯誤監控
13.1 前端錯誤分類
前端錯誤分為兩大類：
- 即時運行錯誤（代碼錯誤）
- 資源加載錯誤
13.2 錯誤的捕獲方式
即時運行錯誤的捕獲方式
- try...catch
- window.onerror
資源加載錯誤捕獲：
- object.onerror
- performance.getEntries()
- Error 事件捕獲
window.onerror 只能捕獲即時運行錯誤，不能捕獲資源加載錯誤，因為資源加載錯誤不會冒泡。
資源加載錯誤可以通過捕獲 Error 來拿到，代碼演示：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>錯誤監控</title><link rel="stylesheet" href=""><script type="text/javascript">window.addEventListener("error", function(e){console.log('捕獲了錯誤：', e)}, true)</script> </head> <body><script src="//baidu.con/test.js" charset="utf-8"></script> </body> </html> 復制代碼#### 跨域的 js 運行錯誤可以捕獲到嗎？錯誤提示是什么，應該怎么處理 可以捕獲到，錯誤如下：
如何處理？
### 13.3 上報錯誤的基本原理
十四、this，call，apply，bind
14.1 call 和 apply 共同點
- 都能夠改變函數執行時的上下文，將一個對象的方法交給另一個對象來執行，并且是立即執行的。
- 調用 call 和 apply 的對象，必須是一個函數 Function
14.2 call 和 apply 的區別
區別主要體現在參數上。
call 的寫法：
Function.call(obj,[param1[,param2[,…[,paramN]]]]) 復制代碼- 調用 call 的對象，必須是個函數 Function。
- call 的第一個參數，是一個對象。 Function 的調用者，將會指向這個對象。如果不傳，則默認為全局對象 window。
- 第二個參數開始，可以接收任意個參數。每個參數會映射到相應位置的 Function 的參數上。但是如果將所有的參數作為數組傳入，它們會作為一個整體映射到 Function 對應的第一個參數上，之后參數都為空。
apply 的寫法
Function.apply(obj[,argArray]) 復制代碼- 它的調用者必須是函數 Function，并且只接收兩個參數，第一個參數的規則與 call 一致。
- 第二個參數，必須是數組或者類數組，它們會被轉換成類數組，傳入 Function 中，并且會被映射到 Function 對應的參數上。這也是 call 和 apply 之間，很重要的一個區別。
14.3 call 和 apply 的用途
下面會分別列舉 call 和 apply 的一些使用場景。聲明：例子中沒有哪個場景是必須用 call 或者必須用 apply 的，只是個人習慣這么用而已。
call 的使用場景
1、對象的繼承。如下面這個例子：
function superClass () {this.a = 1;this.print = function () {console.log(this.a);} } function subClass () {superClass.call(this);this.print(); } subClass(); // 1 復制代碼subClass 通過 call 方法，繼承了 superClass 的 print 方法和 a 變量。此外，subClass 還可以擴展自己的其他方法。
2、借用方法。還記得剛才的類數組么？如果它想使用 Array 原型鏈上的方法，可以這樣：
let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*")); 復制代碼這樣，domNodes 就可以應用 Array 下的所有方法了。
apply 的一些妙用
1、Math.max。用它來獲取數組中最大的一項。
let max = Math.max.apply(null, array); 復制代碼同理，要獲取數組中最小的一項，可以這樣：
let min = Math.min.apply(null, array); 復制代碼2、實現兩個數組合并。在 ES6 的擴展運算符出現之前，我們可以用 Array.prototype.push來實現。
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; Array.prototype.push.apply(arr1, arr2); console.log(arr1); // [1, 2, 3, 4, 5, 6] 復制代碼14.4 bind 的使用
最后來說說 bind。在 MDN 上的解釋是：bind() 方法創建一個新的函數，在調用時設置 this 關鍵字為提供的值。并在調用新函數時，將給定參數列表作為原函數的參數序列的前若干項。
它的語法如下：
Function.bind(thisArg[, arg1[, arg2[, ...]]]) 復制代碼bind 方法 與 apply 和 call 比較類似，也能改變函數體內的 this 指向。不同的是， bind 方法的返回值是函數，并且需要稍后調用，才會執行 。而 apply 和 call 則是立即調用。
來看下面這個例子：
function add (a, b) {return a + b; } function sub (a, b) {return a - b; } add.bind(sub, 5, 3); // 這時，并不會返回 8 add.bind(sub, 5, 3)(); // 調用后，返回 8 復制代碼如果 bind 的第一個參數是 null 或者 undefined，this 就指向全局對象 window。
總結
call 和 apply 的主要作用，是改變對象的執行上下文，并且是立即執行的。它們在參數上的寫法略有區別。
bind 也能改變對象的執行上下文，它與 call 和 apply 不同的是，返回值是一個函數，并且需要稍后再調用一下，才會執行。
十五、防抖節流
防抖：觸發高頻函數事件后，n秒內函數只能執行一次，如果在n秒內這個事件再次被觸發的話，那么會重新計算時間。
節流：所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函數。節流會稀釋函數的執行頻率
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>防抖節流2</title><link rel="stylesheet" href=""> </head> <body><script type="text/javascript">//防抖function debounce(func, wait){let timeout;return function(){if(timeout){clearTimeout(timeout)}timeout = setTimeout(() => {func.apply(this, arguments)}, wait)}}//節流function throttle(func, wait){let timeout;return function(){if(!timeout){timeout = setTimeout(() => {timeout = null;func.apply(this, arguments)}, wait)}}}function say(){console.log('hi haha')}// document.onmousemove = debounce(say, 1000)document.onmousemove = throttle(say, 1000)</script> </body> </html> 復制代碼還有其他感興趣的可以看一下
含光丶 - 簡書
總結
以上是生活随笔為你收集整理的前端面试技巧和注意事项_前端面试百分之九十九过的技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java android aes加密解密
- 下一篇： 如何查看cplex的help文档_wor