前端跳槽面試必備

時間 2019-12-10

原文原文鏈接

面試模擬與技巧
如何看待面試
什麼是面試？javascript

答：面試時測查和評價人員能力素質的一種考試活動。具體地說，面試時一種通過組織者精心設計，在特定場景下，以考官對考生的面對面交談與觀察爲主要手段，又表及裏測評考生的知識、能力、經驗等有關素質的一種考試活動。

面試準備css

職位描述分析
看公司的要求

業務分析與實戰模擬html

看官方網站分析所用的技術棧 
藝龍：jQuery+requireJs+模板引擎（handlerbar，underscore，Mustache）

技術棧準備java

prmoise fiddler charies mock-server typeScript canvas filesystem webRTC bower browserify three.js playcanvas d3js echartjs

自我介紹web

不要誇大其詞，也不要不自信

一面二面面試

面試技巧：
準備要充分
知識要系統
溝通要簡潔
心裏要誠實
態度要謙虛
回答要靈活

CSS盒模型

題目：談談你對CSS盒模型的認識算法

文檔中每一個元素都會被描述爲一個矩形盒子，盒子有一個邊界，分別爲margin edge，border edge，padding edge，content edge。盒子模型分爲標準盒子模型
和IE盒子模型（微軟沒有聽從W3C標準）

　　標準模型和IE模型之間的區別？chrome

這二者的關鍵差異在於：W3C盒子模型——屬性高（height）和屬性寬（width）這兩個值不包括（padding）和邊框（border）；IE盒子模型——屬性高（height）
和屬性寬（width）這兩個值包含填充（padding）和邊框（border）。

CSS如何設置這兩種模型？
（1）」標準模式」下各個瀏覽器是沒有區別的，以寬度爲例：總寬度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C標準盒子模型）。頁面在」怪異模式」下，css中爲元素的width和height設置的值在標準瀏覽器和ie系列（ie9除外）裏的表明的含義是不一樣的（IE盒子模型）。也就是說在「怪異模式」下ie瀏覽器使用的IE盒子模型。
（2）標準模式和怪異模式些來由？
在HTML和CSS的標準化未完成以前，各個瀏覽器對於HTML和CSS的解析有各自不一樣的實現，而有不少舊的網頁都是按照這些非標準的實現去設計的。在HTML和CSS標準肯定之後，瀏覽器一方面要按照標準去實現對HTML和CSS的支持，另外一方面又要保證對非標準的舊網頁設計的後向兼容性。所以，現代的瀏覽器通常都有兩種渲染模式：標準模式和怪異模式。在標準模式下，瀏覽器按照HTML和CSS標準對文檔進行解析和渲染；在怪異模式下，瀏覽器則按照舊有的非標準的實現方式對文檔進行解析和渲染。這樣的話，對於舊有的網頁，瀏覽器啓動怪異模式，就可以使得舊網頁正常顯示；對於新的網頁，則能夠先啓動標準模式，使得新網頁可以用HTML和CSS標準特性。
（3）瀏覽器如何肯定使用哪一種渲染模式
知道了這兩種渲染模式的來由，那剩下的問題就是瀏覽器如何可以肯定應該使用哪一種模式了。其實歸根結底就是，瀏覽器如何能將舊網頁和新網頁區分開來。
日常編寫網頁的時候，通常都會將見到HTML文檔的頭部會有文檔類型聲明：DOCTYpe。當瀏覽器遇到正確的文檔聲明時，瀏覽器就會啓動標準模式，按照指定的文檔類型標準解析和渲染文檔。而對於舊有的網頁，因爲網頁編寫的當時標準尚未肯定，因此通常是不會有文檔類型聲明的。因此，對於沒有文檔類型聲明或者文檔類型聲明不正確的文檔，瀏覽器就會認爲他是一箇舊的HTML文檔，就會使用怪異模式解析和渲染該文檔。關於DOCTYPE的更詳細說明，請戳這裏DOCTYPE聲明做用和用法詳解
（4）如何兼容IE模型
前提是頁面處於」怪異模式」，「標準模式」不存在兼容性問題。
1）hack
假設內容的寬度必須固定爲100pxcanvas

#box {  
width:100px !important; // ie9,ff,chrome,opera這樣的標準瀏覽器
width:160px; //全部的瀏覽器；它的本意是隻對不認識!important的設置。但是ie七、ie8也認識
+width:160px!important;//ie7
width:160px/0!important;//ie8
padding:0 10px;border:20px solid blue;margin:70px;  
}

wrapper
#box{ width:100px; margin:70px; float:left; } .wrapper{ padding:0 10px;border:20px solid blue; }

(5)Css3對盒子模型的設置後端

box-sizing有兩個值一個是content-box， 另外一個是border-box。 
當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式； 
當設置爲box-sizing:border-box時，將採用怪異模式解析計算；

JS如何設置獲取盒模型對應的寬和高？

dom.style.width/height 
dom.currentStyle.width/height //渲染以後的寬高 只IE支持 
window.getComputedStyle(dom).width/height //全部瀏覽器支持 渲染以後的寬高 
dom.getBoundingClientRect().width/height //計算元素的絕對位置，根據viewport左上角肯定，會獲得left top width height

DOM事件

基本概念：DOM事件的級別

DOM0 element.onclick=function(){} 
DOM2 element.addEventListener(‘click’,function(){},fasle); 
DOM3 element.addEventListener(‘keyup’,function(){},false)
---------------------

DOM事件模型

事件模型：捕獲和冒泡

DOM事件流

第一階段：捕獲
第二階段：目標階段
第三階段：冒泡從目標元素上傳到window對象

描述DOM事件捕獲的具體流程

window–>document–>html(document.documentElement)–>
body–>…–>目標元素

Event對象的常見應用

e.target //當前被點擊的元素
e.preventDefault()
e.currentTarget //代理中的父元素
e.stopPropagation()
e.stopImmediatePropagation() //按鈕綁定了兩個click事件A、B，但願點擊A以後加上這句話，就能夠阻止B的執行。

自定義事件

var eve=new Event(‘custome’);
ev.addEventListener(‘custome’,function(){console.log(‘custom’); })
ev.dispatchEvent(eve);

HTTP協議類
HTTP協議的主要特色

簡單快速
靈活
無鏈接連接一次就會斷掉，不會持久連接
無狀態

HTTP報文的組成部分

請求報文

①請求行（http方法 頁面地址 http協議及版本） 
②請求頭（告訴服務端我要什麼內容） 
③空行 
④請求體

響應報文

①狀態行 
②響應頭 
③空行 
④響應體

HTTP方法

GET——>獲取資源 
POST——>傳輸資源 
PUT——>更新資源 
DELETE——>刪除資源 
HEAD——>得到報文首部 
OPTIONS——>詢問支持的方法 
TRACE——>追蹤路徑 
CONNECT——>要求用隧道協議鏈接代理

POST和GET的區別

GET在瀏覽器回退是無害的，而POST請求會再次提交請求 
GET產生的URL地址能夠被收藏，而POST不能夠 
GET請求會被瀏覽器主動緩存，而POST不會，除非手動設置 
GET請求只能進行URL編碼，而POST支持多種編碼方式 
GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留 
GET請求在URL中傳送的參數是有長度限制的，而POST沒有限制 
對參數的數據類型，GET只接受ASCII字符，而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 Fonud:所請求的頁面已經臨時轉移至新的url 
304 Not Modified：客戶端有緩存的文檔併發出了一個條件性的請求，服務器告訴客戶，原來緩衝的文檔還能夠繼續使用 
400 Bad Request：客戶端請求有語法錯誤，不能被服務器所理解 
401 Unauthoried：請求未經受權，這個狀態碼必須和WWW-Authenticate報頭域一塊兒使用 
403Forbidden：對被請求頁面的訪問禁止 
404 Not Found：請求的資源不存在 
500 Internal Server Error：服務器發生不可預期的錯誤原來緩存的文檔還能夠繼續使用 
503 Server Unavailable：請求未完成，服務器臨時過載或當機，一段時間後可能恢復正常。

什麼是持久連接

HTTP協議採用的是「請求-應答模式」，當使用普通模式，即非Keep-Alive模式時，每一個請求/應答客戶和服務器都要新建一個鏈接，完成以後當即斷開鏈接（HTTP協議爲無鏈接的協議）
當使用Keep-Alive模式（又稱持久連接、鏈接重用）時，Keep-Alive功能使客戶端到服務器端的鏈接有效，當出現對服務器的後繼請求時，Keep-Alive功能避免了創建或者從新創建鏈接

什麼是管線化

在使用持久連接的狀況下，某個鏈接上消息的傳遞相似於請求1->響應1->請求2->響應2->請求3->響應3
某個鏈接上的消息變成了相似這樣
請求1->請求2->請求3->響應1->響應2->響應3

①管線化機制經過持久鏈接完成，僅HTTP/1.1支持此技術
②只有GET和Head請求能夠管線化，而POST則有所限制
③初次建立鏈接時不該啓動管線機制，由於對方（服務器）不必定支持HTTP/1.1版本的協議
④HTTP/1.1要求服務器端支持管線化，但並不要求服務器端也對響應進行管線化處理，只是要求對於管線化的請求不失敗便可
⑤因爲上面提到的服務器端問題，開啓管線化極可能並不會帶來大幅度的性能提高，而不少服務器端和代理程序對管線化的支持並很差。所以現代瀏覽器如Chrome和Firefox默認並未開啓管線化支持
⑥管線化不會影響響應到來的順序，如上面的例子所示，響應返回的順序並未改變

原型鏈
建立對象有幾種方法

var o1={name:’o1’};
var o2=new Object({name:’o2’});

var M=function(){this.name=’o3’}
var o3=new M();

var P={name:’p’}
var o4=Object.create(P)；//o4.proto===P

---------------------

原型鏈
建立對象有幾種方法

var o1={name:’o1’};
var o2=new Object({name:’o2’});

var M=function(){this.name=’o3’}
var o3=new M();

var P={name:’p’}
var o4=Object.create(P)；//o4.proto===P

原型、構造函數、實例、原型鏈

instanceof的原理

new運算符

模擬new過程
var o6=function(func){
var o=Object.create(func.prototype);
var k=func.call(o);
if(typeof k===’object’)
return k;
else
return o;
}

面向對象
類與實例

①類的聲明

function Animal(){
this.name="name";
}
//ES6中的class的聲明
class Animal2{
constructor(){
this.name=name;
}
}
//實例化
console.log(new Animal(),new Animal2());

類與繼承

① 繼承的幾種方式

//藉助構造函數實現繼承
function Parent1(){
this.name="parent1"
}
Parent1.prototype.say=function(){} ;//缺點：child1沒有繼承Parent1原型對象的方法
function Child1(){
Parent1.call(this);//apply
this.type="child1";
}
console.log(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);//缺點：s1改變的東西，s2也會看到

//組合方式
function Parent3(){
this.name="parent3";
this.play=[1,2,3];
}
function Child3(){
Parent3.call(this);
this.type='child3';
}
Child3.prototype=new Parent3();//Parent3初始化了兩次
var s3=new Child3();
var s4=new Child3();
s3.play.push(4);
console.log(s3.play,s4.play);
console.log(s3.constructor);//指向Parent3構造函數

//組合繼承的優化1
function Parent4(){
this.name="parent4";
this.play=[1,2,3];
}
function Child4(){
Parent4.call(this);
this.type='child4';
}
Child4.prototype=Parent4.prototype;
//Child4.prototype.contructor=Child4;//沒法區分父類的實例的原型對象
var s5=new Child4();
var s6=new Child4();
console.log(s5,s6);

console.log(s5 instanceof Child4);//true
console.log(s5 instanceof Parent4);//true 繼承的本質就是原型鏈
console.log(s5.constructor);//指向Parent4的構造函數,沒法區分實例是由父類建立的，仍是子類建立的 **這是缺點**

//組合優化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);//true true
console.log(s7.constructor);//指向Child5的構造函數

通訊類
什麼是同源策略及限制

同源策源限制從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
①Cookie、LocalStorage和IndexDB沒法讀取
②DOM沒法得到
③Ajax請求不能發送
先後端如何通訊
Ajax
WebSocket
CORS
如何建立Ajax
XMLHttpRequest對象的工做流程
兼容性處理（XMLHttpRequest只有高級瀏覽器中支持，低版本中要用xmlhttp=new ActiveXObject(「Microsoft.XMLHTTP」);）
事件的觸發條件
事件的觸發順序
跨域通訊的幾種方式
JSONP

Hash(hash改變頁面不刷新)

PostMessage（H5）

WebSocket

CORS