前言准備：有前端基礎、端正的求職心態、不浮躁的求知心境、不求押題的初衷
什么是面試？
答：面試時測查和評價人員能力素質的一種考試活動。具體地說，面試時一種經過組織者精心設計，在特定場景下以考官對考生的面對面交談與觀察為主要手段，由表及里測評考生的知識、能力、經驗等有關素質的一種考試活動。
1、面試准備
一、職位描述（JD）分析：
仔細思考職位描述里面的每一句話。
二、業務分析或實戰模擬：
打開公司官網，查看其所用到的技術棧，然后根據這些數據進行有目的的復習，准備面試。
三、技術棧准備：
JD要求技術+前端工程構建工具。
四、自我介紹：
簡歷（基本信息，姓名-年齡-手機-郵箱-籍貫；學歷；工作經歷，時間-公司-崗位-職責-技術棧-業績；開源項目，Github和說明）；
自我陳述（把握面試的溝通方向；豁達自信的適度發揮）。
2、面試技巧
一、模擬一面
前提：准備要充分、知識要系統、溝通要簡潔、內心要誠實、態度要謙虛、回答要靈活
（一）頁面布局
題目：假設高度已知，請寫出三欄布局，其中左欄和右欄寬度各為300px，中間自適應
//解決方案一：利用浮動
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html *{ margin: 0; padding: 0; } .layout article div{ min-height: 100px; } .layout.float .left{ float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style> </head> <body> <section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮動解決方案</h1> <p> 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 </p> </div> </article> </section> </body> </html>
//解決方案二：利用絕對定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html *{ margin: 0; padding: 0; } .layout article div{ min-height: 100px; } .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ left: 0; width: 300px; background: red; } .layout.absolute .center{ left: 310px; right: 310px; background: yellow; } .layout.absolute .right{ right: 0; width: 300px; background: blue; } </style> </head> <body> <section class="layout absolute"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>絕對定位解決方案</h1> <p> 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 </p> </div> <div class="right"></div> </article> </section> </body> </html>
//解決方案三：利用flexbox
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html *{ margin: 0; padding: 0; } .layout article div{ min-height: 100px; } .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex: 1; background: green; } .layout.flexbox .right{ width: 300px; background: yellow; } </style> </head> <body> <section class="layout flexbox"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flexbox解決方案</h1> <p> 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 </p> </div> <div class="right"></div> </article> </section> </body> </html>
//解決方案四：表格布局法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html *{ margin: 0; padding: 0; } .layout article div{ min-height: 100px; } .layout.table .left-center-right{ width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div{ display: table-cell; } .layout.table .left{ width: 300px; background: black; } .layout.table .center{ background: green; } .layout.table .right{ width: 300px; background: burlywood; } </style> </head> <body> <section class="layout table"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>表格布局解決方案</h1> <p> 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 這是三欄布局中間部分 </p> </div> <div class="right"></div> </article> </section> </body> </html>
（二）CSS盒模型
標准盒模型：
寬度=width+padding+border+margin
IE盒模型：
寬度=width+margin
標准盒模型和IE盒模型的區別：
這兩種盒子模型最主要的區別就是width的包含范圍，在標准的盒子模型中，width指content部分的寬度，在IE盒子模型中，width表示content+padding+border這三個部分的寬度，故這使得在計算整個盒子的寬度時存在着差異。
CSS如何設置這兩種模型：
標准盒模型box-sizing：content-box；IE盒模型box-sizing：border-box
JavaScript如何設置獲取盒模型對應的寬和高：
1、dom.style.width/height（只能獲取到內聯樣式的寬和高）
2、dom.currentStyle.width/height（只有IE瀏覽器支持）
3、window.getComputedStyle(dom).width/height（兼容性好，輸出值帶單位）
4、dom.getBoundingClientRect().width/height（兼容性好，輸出值不帶單位）
實例題（根據盒模型解釋邊框重疊）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html *{
padding: 0;
margin: 0;
}
#sec{
background: red;
}
.child{
margin-top: 10px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<section id="sec">
<article class="child"></article>
</section>
</body>
</html>
//父盒子高度為100px。打開瀏覽器=>F12=>elements=>computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html *{
padding: 0;
margin: 0;
}
#sec{
background: red;
overflow: hidden;
}
.child{
margin-top: 10px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<section id="sec">
<article class="child"></article>
</section>
</body>
</html>
//父盒子高度為110px。打開瀏覽器=>F12=>elements=>computed
//給父盒子創建了塊級上下文（overfl:hidden）
BFC（邊距重疊解決方案）
BFC基本概念：
BFC是Block Formatting Context （塊級格式化上下文）的縮寫，它是W3C CSS 2.1 規范中的一個概念，是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相干。
BFC渲染規則（原理）：
1、內部的box會在垂直方向，一個接一個的放置；
2、box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊；
3、每個元素的margin box的左邊，與包含快border box的左邊相接觸，即使存在浮動也是如此；
4、BFC的區域不會與float box重疊；
5、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素；
6、計算BFC的高度時，浮動元素也參與計算。
如何創建BFC：
float屬性不為none、position屬性值為absolute或fixed、display屬性值為inline-block，table-cell,table-caption,flex,inline-flex、overflow屬性值不為visible。
BFC的使用場景：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html *{
padding: 0;
margin: 0;
}
#margin{
background: #ccc;
overflow: hidden;
}
#margin>p{
margin-top: 5px;
margin-bottom: 25px;
margin-left: 0px;
margin-right: 0px;
background: pink;
}
</style>
</head>
<body>
<!--BFC垂直方向邊距重疊-->
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
</body>
</html>
解決BFC垂直方向邊距重疊（增加一個父元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html *{
padding: 0;
margin: 0;
}
#margin{
background: #ccc;
overflow: hidden;
}
#margin>p{
margin-top: 5px;
margin-bottom: 25px;
margin-left: 0px;
margin-right: 0px;
background: pink;
}
</style>
</head>
<body>
<!--BFC垂直方向邊距重疊-->
<section id="margin">
<p>1</p>
<div style="overflow: hidden;background: black;">
<p>2</p>
</div>
<p>3</p>
</section>
</body>
</html>
解決和浮動元素的重疊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html *{
padding: 0;
margin: 0;
}
#layout{
background: green;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: black;
/*創建一個BFC，避免和周圍浮動元素重疊*/
overflow: hidden;
}
</style>
</head>
<body>
<section id="layout">
<div class="left"></div>
<div class="right"></div>
</section>
</body>
</html>
清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html *{
padding: 0;
margin: 0;
}
#float{
background: green;
/*清除浮動元素的影響*/
overflow: auto;
}
#float .fla{
float: left;
font-size: 30px;
}
</style>
</head>
<body>
<!--BFC子元素即使是float也會參與高度計算-->
<section id="float">
<div class="fla">我是浮動元素</div>
</section>
</body>
</html>
（三）DOM事件
DOM事件的級別：
1、DOM0 element.onclick = function(){}
2、DOM2 element.addEventListener('click',function(){},false)
3、DOM3 element.addEventListener('keyup',function(){},false)
DOM事件模型：
1、捕獲 向下
2、冒泡 向上
DOM事件流：
捕獲==>目標階段==>冒泡
描述DOM事件捕獲的具體流程：
window==>document==>html==>body==>父級元素==>目標元素
//代碼說明事件捕獲的流程，驗證冒泡是把true改為false即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Event</title> <style> html *{ margin: 0; padding: 0; } #ev{ height: 100px; width: 300px; color: #fff; background: black; text-align: center; line-height: 100px; } </style> </head> <body> <div id="ev"> 目標元素 </div> <script> var ev = document.getElementById("ev"); //DOM2級事件，true表明事件是在捕獲階段響應 ev.addEventListener('click',function(){ console.log('ev captrue'); },true); window.addEventListener('click',function(){ console.log('window captrue'); },true); document.addEventListener('click',function(){ console.log('document captrue'); },true); document.documentElement.addEventListener('click',function(){ console.log('html captrue'); },true); document.body.addEventListener('click',function(){ console.log('body captrue'); },true); </script> </body> </html>
Event對象的常見應用：
1、event.preventDefault();
2、event.stopPropagation();
3、event.stopImmediatePropagation();
4、event.currentTarget
5、event.target
自定義事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event</title>
<style>
html *{
margin: 0;
padding: 0;
}
#ev{
height: 100px;
width: 300px;
color: #fff;
background: black;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="evvv">
目標元素
</div>
<script>
var eve = new Event('test');
evvv.addEventListener('test',function(){
console.log('test dispatch');
})
evvv.dispatchEvent(eve);
</script>
</body>
</html>
（四）HTTP協議
1、HTTP協議的主要特點：
簡單快速、靈活、無連接、無狀態
2、HTTP報文的組成部分：
請求報文（請求行：http方法、頁面地址、http協議版本； 請求頭：關鍵字/值對，告訴服務端要哪些內容； 空行：發送回車符合換行符，通知服務器一下行不再有請求頭； 請求體：包含了傳進來的內容）；
響應報文（狀態行：http協議版本、狀態碼； 響應頭：關鍵字/值對； 空行：同上； 響應體）；
3、HTTP方法：
GET 獲取資源；
POST 傳輸資源
PUT 更新資源
DELETE 刪除資源
HEAD 獲得報文首部
4、POST和GET的區別：
GET在瀏覽器回退時是無害的，而POST會再次提交請求；
GET產生的URL地址可以被收藏，而POST不可以；
GET請求會被瀏覽器主動緩存，而POST不會，除非手動設置；
GET請求只能進行url編碼，而POST支持多種編碼方式；
GET請求參數會被完整保留在瀏覽器歷史記錄里，而POST的參數不會被保留；
GET請求在url中傳送的參數是有長度限制的，而POST是沒有限制的；
對參數的數據類型，GET只接受ASCll字符，而POST沒有限制；
GET比POST更不安全，因為參數直接暴露在url上，所以不能用來傳遞敏感信息；
GET參數通過url傳遞，POST放在Request body中。
5、HTTP狀態碼：
1xx：提示信息-表示請求已經被接收，繼續處理；
2xx：成功-表示請求已經被成功接收；
3xx：重定向-要完成請求必須進行更進一步的操作；
4xx：客戶端錯誤-請求有語法錯誤或請求無法實現；
5xx：服務器錯誤-服務器未能實現合法的請求。
進一步說明
200 OK：客戶端請求成功；
206 Partial Content：客戶發送了一個帶有Range頭的GET請求，服務器完成了它；
301 Moved Permanently：所請求的頁面已經轉移至新的url；
302 Found：所請求的頁面已經臨時轉移至新的url；
304 Not Modified：客戶端有緩沖的文檔並發出了一個條件性的請求，服務器告訴客戶，原來緩沖的文檔還可以繼續使用；
400 Bad Request：客戶端請求有語法錯誤，不能被服務器所理解；
401 Unauthorized：請求未經授權，這個狀態碼必須和WWW-Authenticate報頭域一起使用；
403 Forbidden：對被請求頁面的訪問被禁止；
404 Not Found：請求資源不存在；
500 Internal Server Error：服務器發生不可預期的錯誤，原來緩沖的文檔還可以繼續使用；
503 Server Unavailable：請求未完成，服務器臨時過載或宕機，一段時間后可恢復正常。
6、什么是持久連接：
HTTP協議 采用“請求-應答”模式，當使用普通模式，即非Keep-Alive模式時，每個請求/應答客戶和服務器都要新建一個連接，完成之后立即斷開連接（HTTP協議為無連接的協議）；
當使用Keep-Alive模式（又稱持久連接、連接重用）時，Keep-Alive功能使客戶端到服務器端的連接持續有效，當出現對服務器的后繼請求時，Keep-Alive功能避免了建立或者重新建立連接。（前提HTTP 1.1版本）
7、什么是管線化：
在使用持久連接的情況下，某個連接上消息的傳遞類似於：請求1->響應1->請求2->響應2->請求3->響應3；
某個連接上的消息變成了類似這樣的：請求1->請求2->請求3->響應1-響應2->響應3
其他：
管線話機制通過持久連接完成，僅HTTP/1.1支持此技術；
只有GET和HEAD請求可以進行管線化，而POST則有所限制；
初次創建連接時不應該啟動管線機制，因為服務器不一定支持HTTP/1.1版本的協議；
管線化不會影響響應到來的順序，如上面的例子所示，響應返回的順序並未改變；
HTTP/1.1要求服務器端支持管線化，但並不要求服務器端也對響應進行管線化處理，只是要求對於管線化的請求不失敗即可；
由於上面提到的服務器端問題，開啟管線化可能並不會帶來大幅度的性能提升，而且很多服務器端和代理程序對管線化支持並不好，因此現代瀏覽器默認並未開啟管線化支持。
（五）面向對象
類與實例：
類的聲明
生成的實例
類與繼承：
如何實現繼承
繼承的幾種方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//借助構造函數實現不完全繼承，無法繼承方法
function Parent1(){
this.name = 'parent1';
}
function Child1(){
Parent1.call(this);
this.type = 'child1';
}
console.log(new Child1());
//借助原型鏈實現繼承
function Parent2(){
this.name = 'parent2';
this.play = [1,2,3];
}
function Child2(){
this.type = 'child2';
}
Child2.prototype = new Parent2();
console.log(new Child2());
var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play,s2.play);
s1.play.push(4);
//組合方式實現繼承
function Parent3(){
this.name = 'parent3';
this.play = [1,2,3];
}
function Child3(){
Parent3.call(this);
this.type = 'child3';
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play,s4.play);
//組合繼承的優化1
function Parent4(){
this.name = 'parent4';
this.play = [1,2,3];
}
function Child4(){
Parent4.call(this);
this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
console.log(s5.play,s6.play);
console.log(s5 instanceof Child4,s5 instanceof Parent4);
console.log(s5.constructor);
//組合繼承的優化2
function Parent5(){
this.name='parent5';
this.play=[1,2,3];
}
function Child5(){
Parent5.call(this);
this.type='child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
var s7 = new Child5();
console.log(s7 instanceof Child5,s7 instanceof Parent5);
console.log(s7.constructor);
</script>
</body>
</html>
（六）原型鏈
創建對象有幾種方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型鏈</title>
</head>
<body>
<script type="text/javascript">
//第一種方式：字面量
var k1 = {name:'k1'};
var k2 = new Object({name:'k2'});
//第二種方式：通過構造函數
var m = function(name){this.name=name;};
var k3 = new m('k3');
//第三種方式：Object.create
var p = {name:'ppp'};
var k4 = Object.create(p);
</script>
</body>
</html>
//打開瀏覽器控制台，分別輸入k1、k2、k3和k4看看結果
原型 構造函數 實例 原型鏈關系圖
構造函數：被new之后的函數稱之為構造函數
實例：只要是個對象，那么就是個實例（函數也是一個對象）
構造函數、實例和原型對象的關系圖驗證
原型鏈實現繼承的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型鏈</title>
</head>
<body>
<script type="text/javascript">
//第一種方式：字面量
var k1 = {name:'k1'};
var k2 = new Object({name:'k2'});
//第二種方式：通過構造函數
var m = function(name){this.name=name;};
var k3 = new m('k3');
//第三種方式：Object.create
var p = {name:'pppp'};
var k4 = Object.create(p);
m.prototype.say = function(){
console.log("say hi");
}
var k5 = new m('k5');
</script>
</body>
</html>
//打開控制台
instanceof原理圖
案例結果分析
new運算符：
一個新對象被創建，它繼承自foo.prototype ==》
構造函數foo被執行，執行的時候，相應的傳參會被傳入，同時上下文（this）會被指定為這個新實例。new foo等同於new foo()，只能用在不傳遞任何參數的情況==》
如果構造函數返回了一個對象，那么這個對象會取代整個new出來的結果；如果構造函數沒有返回對象，那么new出來的結果為步驟1創建的對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型鏈</title>
</head>
<body>
<script type="text/javascript">
//第一種方式：字面量
var k1 = {name:'k1'};
var k2 = new Object({name:'k2'});
//第二種方式：通過構造函數
var m = function(name){this.name=name;};
var k3 = new m('k3');
//第三種方式：Object.create
var p = {name:'pppp'};
var k4 = Object.create(p);
m.prototype.say = function(){
console.log("say hi");
}
var k5 = new m('k5');
var new2 = function(func){
var k = Object.create(func.prototype);
var j = func.call(k);
if(typeof j==='object'){
return j;
}else{
return k;
}
}
</script>
</body>
</html>
//理解測試圖
（七）通信類
什么是同源策略及限制：
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
源（協議、域名、端口組成）。
限制：
Cookie、LocalStorage和IndexDB無法讀取；
DOM無法獲得；
AJAX請求不能發送。
前后端如何通信：
Ajax、WebSocket、CORS
如何創建Ajax：
1、XMLHttpRequest對象的工作流程
2、兼容性的處理
3、事件的觸發條件
4、事件的觸發順序
跨域通信的幾種方式：
JSONP
Hash
postMessage
WebSocket
CORS
（八）安全類
CSRF：
基本概念 通常稱為跨站請求偽造
攻擊原理
防御措施 Token驗證、Referer驗證、隱藏令牌
XSS：
基本概念 跨域腳本攻擊
攻擊原理 （慕課有）
防御措施
（九）算法類
排序：（快速排序、選擇排序、希爾排序、冒泡排序）
堆棧、隊列、鏈表：
遞歸：
波蘭式和逆波蘭式：
二、模擬二面
（一）面試技巧
知識面要廣、理解要深刻、內心要誠實、態度要謙虛、回答要靈活、要學會贊美
（二）渲染機制
1、什么是DOCTYPE及作用？
DTD（document type definition，文檔類型定義）是一系列的語法規則，用來定義XML或（X）HTML的文件類型，瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式。
意思即是：DOCTYPE是用來聲明文檔類型和DTD規范的，一個主要的用途便是文件的合法性驗證，如果文件代碼不合法，那么瀏覽器解析時便會出一些差錯。
如<!DOCTYPE html> HTML5
如傳統模式、嚴格模式 HTML4
2、瀏覽器渲染的過程
3、重排Reflow
定義：
DOM結構中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置，這個過程稱之為reflow。
觸發reflow ：
當你增加、刪除、修改DOM節點時，會導致reflow或repaint；
當你移動DOM的位置，或是搞個動畫的時候；
當你修改CSS樣式的時候；
當你resize窗口的時候（移動端沒有這個問題），或是滾動的時候；
當你修改網頁默認字體的時候。
4、重繪Repaint
定義：
當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來后，瀏覽器於是便把這些元素都按照各自的特性繪制了一遍，於是頁面的內容出現了，這個過程稱之為repaint。
觸發Repaint：
DOM的改動和CSS改動
5、布局Layout
（三）JavaScript運行機制
JavaScript是單線程，一個時間段內，JavaScript只能干一件事情。
任務隊列分為同步任務和異步任務。
Event Loop
異步任務類型 setTimeout和setInterval、DOM事件、ES6中的Promise
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//同步任務
console.log(1);
//異步任務，要暫時掛起
setTimeout(function(){
console.log(2);
},0);
//同步任務
console.log(3);
console.log(4);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//同步任務
console.log('A');
//同步任務
while(1){
}
//同步任務
console.log('B')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
for(var i=0;i<4;i++){
setTimeout(function(){
document.write(i); //4 4 4 4
},1000);
}
</script>
</body>
</html>
（四）頁面性能
1、提升頁面性能的方法
資源壓縮合並，減少HTTP請求；
非核心代碼異步加載——>異步加載的方式——>異步加載的區別；
利用瀏覽器的緩存——>緩存的分類——>緩存的原理；
使用CDN；
預解析DNS <meta http-equiv="x-dns-prefetch-control" content="on""> <link rel="dns-prefetch" href="//host_name_to_prefetch.com">；
2、異步加載的方式
動態腳本加載 defer async
3、異步加載的區別
defer是在HTML解析完之后才會執行，如果是多個，按照加載的順序依次執行；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/defer1.js" defer="defer"></script>
<script type="text/javascript" src="js/defer2.js" defer="defer"></script>
</head>
<body>
<div class="">
test
<script>
console.log('write');
document.write('<span>write</span>');
</script>
<script>
for(var i=0;i<1000;i++){
if(i%200===0){
console.log(i);
}
}
</script>
</div>
</body>
</html>
async是在加載完之后立即執行，如果是多個，執行順序和加載順序無關；
4、緩存的分類
強緩存和協商緩存
（五）錯誤監控
前端錯誤的分類：
代碼錯誤（即時運行錯誤）和資源加載錯誤
錯誤的捕獲方式：
即時運行錯誤 try...catch和window.onerror
資源加載錯誤 object.onerror、performance.getEntries()、Error事件捕獲
上報錯誤的基本原理：
利用Ajax通信的方式上報
利用image對象上報
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
(new Image()).src = 'http://baidu.com/tesjk?r=tkjs';
</script>
</body>
</html>
三、模擬三面
（一）面試技巧
准備要充分、描述要演練、引導找時機、優勢要發揮、回答要靈活。
（二）考察點
業務能力：我做過什么業務？負責的業務有什么業績？使用了什么技術方案？突破了什么技術難點？遇到了什么問題？最大的收獲是什么？
團隊協作能力：
事務推動能力：
帶人能力：
其他能力：
組織能力、學習能力、行業經驗等。
四、模擬終面
（一）面試技巧
樂觀積極、主動溝通、邏輯順暢、上進有責任心、有主張做事果斷。
（二）職業競爭力描述
（三）職業規划描述
五、課程總結
1、JD描述：一定要好好看。
2、簡歷：對照JD寫出相吻合的簡歷，對於未掌握的技術棧快速復習、理解。
3、自我介紹：一定要打草稿，展示什么優勢、描述什么項目，切記臨場發揮。
4、一面：重基礎、懂原理，要思考、知進退、勢不可擋。
5、二面：橫向擴展、項目結合，做到有的放矢。
6、三面：有經驗、懂合作、有擔當、懂規矩、察言觀色。
7、終面：會溝通、要上進、好性格、有主見、強邏輯、無可挑剔。
8、復盤：勝不驕、敗不餒、總結經驗、步步為營、多拿幾個offer。