前端跳槽面试必备
面試模擬與技巧
如何看待面試
什么是面試？
答：面試時測查和評價人員能力素質的一種考試活動。具體地說，面試時一種經過組織者精心設計，在特定場景下，以考官對考生的面對面交談與觀察為主要手段，又表及里測評考生的知識、能力、經驗等有關素質的一種考試活動。
面試準備
職位描述分析
看公司的要求
業務分析與實戰模擬
看官方網站分析所用的技術棧
藝龍：jQuery+requireJs+模板引擎（handlerbar，underscore，Mustache）
技術棧準備
prmoise fiddler charies mock-server typeScript canvas filesystem webRTC bower browserify three.js playcanvas d3js echartjs
自我介紹
不要夸大其詞，也不要不自信
一面二面
面試技巧：
- 準備要充分
- 知識要系統
- 溝通要簡潔
- 內心要誠實
- 態度要謙虛
- 回答要靈活
頁面布局
題目：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。
五種方法
①浮動方式
②絕對定位
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>/* *{padding:0;margin:0}html,body{height:100%;}.main{height: 100%;position: relative;}.left{position: absolute;width: 300px;background: red;height: 100%;top:0;left:0;}.right{position: absolute;width: 300px;background: red;height: 100%;top:0;right:0;}.center{width: 100%;background: green;height: 100%;}//自己寫的*/html *{padding: 0;margin: 0;}.layout article div{min-height: 300px;}.layout.absolute .left-center-right>div{position: absolute;}.layout.absolute .left{left: 0;width: 300px;background: red;}.layout.absolute .center{left: 300px;right:300px;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"><h2>絕對定位解決方案</h2>1、這是三欄布局絕對定位中間部分</div><div class="right"></div></article></section> <!--<div class="main"><div class="left"></div><div class="right"></div><div class="center"></div> </div>--> </body> </html>③彈性布局
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>/* *{padding:0;margin: 0;}body,html{height: 100%;}.main{display: flex;height:100%;}.left{background: red;width: 300px;;}.center{background: green;flex-grow: 1;}.right{background: red;width:300px;}*/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: yellow;}.layout.flexbox .right{width: 300px;background: blue;}</style> </head> <body> <!--<div class="main"><div class="left"></div><div class="center"></div><div class="right"></div> </div>--> <section class="layout flexbox"><article class="left-center-right"><div class="left"></div><div class="center"><h1>這是flexbox的解決方案</h1>1.這是三欄布局的中間部分</div><div class="right"></div></article> </section></body> </html>④表格布局
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>/* *{padding:0;margin:0}html,body{height:100%;}.main{height: 100%;position: relative;}.left{position: absolute;width: 300px;background: red;height: 100%;top:0;left:0;}.right{position: absolute;width: 300px;background: red;height: 100%;top:0;right:0;}.center{width: 100%;background: green;height: 100%;}*/html *{margin: 0;padding: 0;}.layout article div{min-height: 300px;}.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: red;}.layout.table .center{background: yellow;}.layout.table .right{width: 300px;background: blue;}</style> </head> <body> <!--<div class="main"><div class="left"></div><div class="right"></div><div class="center"></div> </div>--><section class="layout table"><article class="left-center-right"><div class="left"></div><div class="center"><h1>表格布局</h1>1.這是三欄布局表格布局中間部分</div><div class="right"></div></article></section> </body> </html>⑤網格布局
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>html *{padding: 0;margin: 0;}.layout.grid .left-center-right{display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.layout.grid .left{background: red;}.layout.grid .center{background: yellow;}.layout.grid .right{background: blue;}</style> </head> <body><!--網格布局--><section class="layout grid"><div class="left-center-right"><div class="left"></div><div class="center"><h1>網格布局</h1></div><div class="right"></div></div></section> </body> </html>（1）這五種方案各有什么缺點和優點
- float，比較好的兼容性需要清除浮動，處理好與周邊元素的關系
- absolute，方便快捷，布局脫離文檔流，導致方案的可使用性較差
- flex布局，解決上述兩個的缺點，移動端使用flex更多，ie8不支持
- table-ceil布局，兼容性好，對SEO不夠友好，每一個部分可以理解為單元格，當其中的一個表格高度變高，其他的兩個表格也會變高
- grid布局，代碼量簡潔，新技術
（2）如果中間高度不固定，那個還可以用
- float不能用，中間的內容被左側擋住，因為撐開高度以后，左側沒有了遮擋物，就會流向左側。
解決方案：創建BFC - absolute不能用
- flex可以使用。
- table-ceil可以使用。
- grid不能用
（3）這五種方法兼容性怎么樣
小結
- 語義化總結到位
- 頁面布局理解要深刻
- CSS基礎知識扎實
- 思維靈活且積極上進
頁面布局的變通
三欄布局
左右寬度固定，中間自適應
上下高度固定，中間自適應
兩欄布局
左寬度固定，右自適應
右寬度固定，左自適應
上高度固定，下自適應
下高度固定，上自適應
CSS盒模型
題目：談談你對CSS盒模型的認識
文檔中每個元素都會被描述為一個矩形盒子，盒子有一個邊界，分別為margin edge，border edge，padding edge，content edge。盒子模型分為標準盒子模型和IE盒子模型（微軟沒有遵從W3C標準）
標準模型和IE模型之間的區別？
這兩者的關鍵差別在于：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
假設內容的寬度必須固定為100px
2）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
實例題（根據盒模型解釋邊距重疊）
BFC（邊距重疊解決方案）
①父子元素邊距重疊
②兄弟元素邊距重疊
③空元素邊距重疊
BFC的基本概念
塊級格式化上下文
BFC的原理（BFC的渲染規則）
①BFC元素垂直方向的邊距發生重疊
②BFC的區域不會與浮動元素的box重疊
③BFC是頁面上一個獨立的容器，內外的元素不會相互影響
④計算BFC的高度時，浮動元素也參與計算。
如何創建BFC
①float值不為none
②position為absolute或fixed
③display為inline-block，table-cell，table-caption，flex；
④overflow不為visible
BFC的使用場景
DOM事件
基本概念：DOM事件的級別
DOM0 element.οnclick=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
原型、構造函數、實例、原型鏈
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);//applythis.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的構造函數,無法區分實例是由父類創建的，還是子類創建的 **這是缺點**//組合優化2function 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
安全類
CSRF
基本概念和縮寫
CSRF，通常稱為跨站請求偽造，英文名Cross-site request forgery 縮寫CSRF
攻擊原理（登錄過后記錄cookie，其他網站利用接口，用cookie攻擊）
防范措施
Token驗證
Referer驗證
隱藏令牌
XSS
基本概念和縮寫
XSS（cross-site script，跨站腳本攻擊）
攻擊原理
不需要登錄驗證，核心原理就是向頁面注入腳本
防范措施
CSRF和XSS的區別
XSS是向頁面注入js運行，CSRF是利用本身的漏洞去執行接口，CSRF要登錄網站
算法類
排序
堆棧、隊列、鏈表
遞歸
波蘭式和逆波蘭式
總結
- 上一篇： QQ微信号数据库 微信号采集 可区分性别
- 下一篇： redis分布式集群环境搭建