前端面試總結
前言準備：有前端基礎、端正的求職心態、不浮躁的求知心境、不求押題的初衷javascript
什麼是面試？html
答：面試時測查和評價人員能力素質的一種考試活動。具體地說，面試時一種通過組織者精心設計，在特定場景下以考官對考生的面對面交談與觀察爲主要手段，由表及裏測評考生的知識、能力、經驗等有關素質的一種考試活動。前端
一、面試準備java
1、職位描述（JD）分析：面試
仔細思考職位描述裏面的每一句話。算法
2、業務分析或實戰模擬：後端
打開公司官網，查看其所用到的技術棧，而後根據這些數據進行有目的的複習，準備面試。跨域
3、技術棧準備：瀏覽器
JD要求技術+前端工程構建工具。緩存
4、自我介紹：
簡歷（基本信息，姓名-年齡-手機-郵箱-籍貫；學歷；工做經歷，時間-公司-崗位-職責-技術棧-業績；開源項目，Github和說明）；
自我陳述（把握面試的溝通方向；豁達自信的適度發揮）。
二、面試技巧
1、模擬一面
前提：準備要充分、知識要系統、溝通要簡潔、心裏要誠實、態度要謙虛、回答要靈活
（一）頁面佈局
題目：假設高度已知，請寫出三欄佈局，其中左欄和右欄寬度各爲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如何設置獲取盒模型對應的寬和高：
一、dom.style.width/height（只能獲取到內聯樣式的寬和高）
二、dom.currentStyle.width/height（只有IE瀏覽器支持）
三、window.getComputedStyle(dom).width/height（兼容性好，輸出值帶單位）
四、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渲染規則（原理）：
一、內部的box會在垂直方向，一個接一個的放置；
二、box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊；
三、每一個元素的margin box的左邊，與包含快border box的左邊相接觸，即便存在浮動也是如此；
四、BFC的區域不會與float box重疊；
五、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素；
六、計算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事件的級別：
一、DOM0 element.onclick = function(){}
二、DOM2 element.addEventListener('click',function(){},false)
三、DOM3 element.addEventListener('keyup',function(){},false)
DOM事件模型：
一、捕獲 向下
二、冒泡 向上
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對象的常見應用：
一、event.preventDefault();
二、event.stopPropagation();
三、event.stopImmediatePropagation();
四、event.currentTarget
五、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協議
一、HTTP協議的主要特色：
簡單快速、靈活、無鏈接、無狀態
二、HTTP報文的組成部分：
請求報文（請求行：http方法、頁面地址、http協議版本； 請求頭：關鍵字/值對，告訴服務端要哪些內容； 空行：發送回車符合換行符，通知服務器一下行再也不有請求頭； 請求體：包含了傳進來的內容）；
響應報文（狀態行：http協議版本、狀態碼； 響應頭：關鍵字/值對； 空行：同上； 響應體）；
三、HTTP方法：
GET 獲取資源；
POST 傳輸資源
PUT 更新資源
DELETE 刪除資源
HEAD 得到報文首部
四、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中。
五、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：請求未完成，服務器臨時過載或宕機，一段時間後可恢復正常。
六、什麼是持久鏈接：
HTTP協議 採用「請求-應答」模式，當使用普通模式，即非Keep-Alive模式時，每一個請求/應答客戶和服務器都要新建一個鏈接，完成以後當即斷開鏈接（HTTP協議爲無鏈接的協議）；
當使用Keep-Alive模式（又稱持久鏈接、鏈接重用）時，Keep-Alive功能使客戶端到服務器端的鏈接持續有效，當出現對服務器的後繼請求時，Keep-Alive功能避免了創建或者從新創建鏈接。（前提HTTP 1.1版本）
七、什麼是管線化：
在使用持久鏈接的狀況下，某個鏈接上消息的傳遞相似於：請求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>
//打開瀏覽器控制檯，分別輸入k一、k二、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：
一、XMLHttpRequest對象的工做流程
二、兼容性的處理
三、事件的觸發條件
四、事件的觸發順序
跨域通訊的幾種方式：
JSONP
Hash
postMessage
WebSocket
CORS
（八）安全類
CSRF：
基本概念 一般稱爲跨站請求僞造
攻擊原理
防護措施 Token驗證、Referer驗證、隱藏令牌
XSS：
基本概念 跨域腳本攻擊
攻擊原理 （慕課有）
防護措施
（九）算法類
排序：（快速排序、選擇排序、希爾排序、冒泡排序）
堆棧、隊列、鏈表：
遞歸：
波蘭式和逆波蘭式：
2、模擬二面
（一）面試技巧
知識面要廣、理解要深入、心裏要誠實、態度要謙虛、回答要靈活、要學會讚美
（二）渲染機制
一、什麼是DOCTYPE及做用？
DTD（document type definition，文檔類型定義）是一系列的語法規則，用來定義XML或（X）HTML的文件類型，瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式。
意思便是：DOCTYPE是用來聲明文檔類型和DTD規範的，一個主要的用途即是文件的合法性驗證，若是文件代碼不合法，那麼瀏覽器解析時便會出一些差錯。
如<!DOCTYPE html> HTML5
如傳統模式、嚴格模式 HTML4
二、瀏覽器渲染的過程
三、重排Reflow
定義：
DOM結構中的各個元素都有本身的盒子（模型），這些都須要瀏覽器根據各類樣式來計算並根據計算結果將元素放到它該出現的位置，這個過程稱之爲reflow。
觸發reflow ：
當你增長、刪除、修改DOM節點時，會致使reflow或repaint；
當你移動DOM的位置，或是搞個動畫的時候；
當你修改CSS樣式的時候；
當你resize窗口的時候（移動端沒有這個問題），或是滾動的時候；
當你修改網頁默認字體的時候。
四、重繪Repaint
定義：
當各類盒子的位置、大小以及其餘屬性，例如顏色、字體大小等都肯定下來後，瀏覽器因而便把這些元素都按照各自的特性繪製了一遍，因而頁面的內容出現了，這個過程稱之爲repaint。
觸發Repaint：
DOM的改動和CSS改動
五、佈局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>
（四）頁面性能
一、提高頁面性能的方法
資源壓縮合並，減小HTTP請求；
非核心代碼異步加載——>異步加載的方式——>異步加載的區別；
利用瀏覽器的緩存——>緩存的分類——>緩存的原理；
使用CDN；
預解析DNS <meta http-equiv="x-dns-prefetch-control" content="on""> <link rel="dns-prefetch" href="//host_name_to_prefetch.com">；
二、異步加載的方式
動態腳本加載 defer async
三、異步加載的區別
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是在加載完以後當即執行，若是是多個，執行順序和加載順序無關；
四、緩存的分類
強緩存和協商緩存
（五）錯誤監控
前端錯誤的分類：
代碼錯誤（即時運行錯誤）和資源加載錯誤
錯誤的捕獲方式：
即時運行錯誤 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>
3、模擬三面
（一）面試技巧
準備要充分、描述要演練、引導找時機、優點要發揮、回答要靈活。
（二）考察點
業務能力：我作過什麼業務？負責的業務有什麼業績？使用了什麼技術方案？突破了什麼技術難點？遇到了什麼問題？最大的收穫是什麼？
團隊協做能力：
事務推進能力：
帶人能力：
其餘能力：
組織能力、學習能力、行業經驗等。
4、模擬終面
（一）面試技巧
樂觀積極、主動溝通、邏輯順暢、上進有責任心、有主張作事果斷。
（二）職業競爭力描述
（三）職業規劃描述
5、課程總結
一、JD描述：必定要好好看。
二、簡歷：對照JD寫出相吻合的簡歷，對於未掌握的技術棧快速複習、理解。
三、自我介紹：必定要打草稿，展現什麼優點、描述什麼項目，切記臨場發揮。
四、一面：重基礎、懂原理，要思考、知進退、勢不可擋。
五、二面：橫向擴展、項目結合，作到有的放矢。
六、三面：有經驗、懂合做、有擔當、懂規矩、察言觀色。
七、終面：會溝通、要上進、好性格、有主見、強邏輯、無可挑剔。
八、覆盤：勝不驕、敗不餒、總結經驗、步步爲營、多拿幾個offer。
- 1. 前端面試總結
- 2. 前端面試題總結
- 3. web前端面試總結
- 4. 前端面試總結1
- 5. 前端面試總結（css）
- 6. 前端面試總結（轉）
- 7. 前端面試（總結）
- 8. 前端面試題（總結）
- 9. 2018前端面試總結
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Eclipse Debug 調試 - Eclipse 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
- 1. 前端面試總結
- 2. 前端面試題總結
- 3. web前端面試總結
- 4. 前端面試總結1
- 5. 前端面試總結（css）
- 6. 前端面試總結（轉）
- 7. 前端面試（總結）
- 8. 前端面試題（總結）
- 9. 2018前端面試總結