前端面試指北

時間 2019-11-08

原文原文鏈接

面試技巧

模擬一面：主要測試基礎知識
- 面試技巧
  - 準備要充分
  - 知識要系統
  - 溝通要簡潔
  - 心裏要誠實
  - 態度要謙虛
  - 回答要靈活
- 頁面佈局類

題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px，中間自適應javascript

方法一：display:flex
#container{
    display: flex;
    height: 100vh;
}
.left{
    width: 300px;
    background: red;
}
.content{
    flex: 1;
    background: darkcyan;
}
.right{
    width: 300px;
    background: red;
}
<article id="container">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</article>
方法二：浮動
#container{
    min-height: 100px;
}
.left{
    float: left;
    width: 300px;
    background: red;
}
.content{
    background: darkcyan;
}
.right{
    float: right;
    width: 300px;
    background: red;
}
<article id="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
</article>
方法三：定位
*{
    margin: 0;
    padding: 0;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background: red;
}
.content{
    margin: 0 300px;
    height: 100vh;
    background: darkcyan;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: red;
}
<article id="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
</article>
方法四：表格佈局
*{
    margin: 0;
    padding: 0;
}
#contenter{
    display: table;
    width: 100%;
    min-height: 100px;
}
.left,.center,.right{
    display: table-cell;
}
.left{
    width: 300px;
    background: red;
}
.right{
    width: 300px;
    background: cornflowerblue;
}
<article id="contenter">
    <div class="left"></div>
    <div class="center">表格佈局</div>
    <div class="right"></div>
</article>
方法五：網格佈局
*{
    margin: 0;
    padding: 0;
}
#contenter{
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
.left{
    background: red;
}
.center{
    background: rebeccapurple;
}
.right{
    background: cornflowerblue;
}
<article id="contenter">
    <div class="left"></div>
    <div class="center">表格佈局</div>
    <div class="right"></div>
</article>
複製代碼

每一個解決方案優缺點

flex佈局：是比較完美的php

表格佈局：兼容性好css

網格佈局：新技術，代碼量少html

絕對定位解決方案：前端

好處是快捷
缺點：佈局已經脫離文檔流，意味着下面的子元素也要脫離文檔流

浮動java

浮動後是脫離文檔流的，若是處理很差會帶來不少問題web

優勢是兼容性比較好面試

CSS盒模型算法

題目：談談你對CSS盒模型的認識segmentfault
- 基本概念：標準模型+IE模型
- 標準模型和IE模型區別：寬高的計算方式不一樣
- CSS是如何設置這兩種模型：
  - box-sizing:content-box
  - box-sizing:border-box (ie模型)
- JS如何設置獲取盒模型對應的寬和高
  - dom.style.width/height：只能取出內聯樣式的寬高
  - dom.currentStyle.width/height：只有IE支持
  - window.getComputedStyle(dom).width/height：兼容性好
  - dom.getBoundingClientRect().widht/height
- 實例題（根據盒模型解釋邊距重疊）
- BFC（邊距重疊解決方案）：塊級格式化上下文
- BFC原理：
  1. BFC這個元素的垂直方向會發生重疊
  2. BFC區域不會與浮動元素的box重疊
  3. BFC在頁面裏是一個獨立的容器，外面的元素不會影響裏面的元素
  4. 計算BFC高度時，浮動元素也會參與計算
- 如何建立BFC：
  1. 浮動的值不爲none
  2. 只要postion的值不是static或是relative,就建立了BFC
  3. display
  4. overflow:auto/hidden
- BFC使用場景
```
BFC垂直方法邊距重疊
<style> article{ background: blue; overflow: auto; } p{ margin: 5px 0 25px; background: red; } div{ overflow: auto; } </style>
<section>
    <article>
        <p>1</p>
        <div>
            <p>2</p>
        </div>
        <p>3</p>
    </article>
</section>
BFC不與float重疊
<style> article{ background: blue; } .left{ width: 100px; height: 100px; float: left; background: red; } .right{ height: 110px; background: #ccc; overflow: hidden; } </style>
<section>
    <article>
        <div class="left"></div>
        <div class="right"></div>
    </article>
</section>
BFC子元素即便是float，也會參與高度計算
<style> section{ /*float: left;*/ overflow: auto; background: red; } .float{ float: left; } </style>
<section>
    <div class="float">我是浮動元素</div>
</section>
複製代碼
```
- IFC:內聯格式化上下文

DOM事件類

基本概念：DOM事件的級別

DOM0 element.onclick=function(){}
DOM2 element.addEventListener('click',function(){},false)
DOM3 element.addEventListener('keyup',function(){},false)
DOM3增長了一些事件類型
複製代碼

DOM事件模型：

冒泡：從目標元素往上
捕獲：從上到下的過程往目標元素
複製代碼

DOM事件流

瀏覽器在爲當前頁面與用戶作交互的過程當中，點擊鼠標左鍵，這個左鍵是如何傳到頁面上。
一個完整的事件流分三個階段：
1. 捕獲：
2. 目標階段：事件經過捕獲到達目標元素
3. 冒泡階段：從目標元素再上傳到window對象
複製代碼

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

1.window
2.document
3.html:獲取html節點：docoment.documentElement
4.body
……
目標元素
複製代碼

Event對象的常見應用

Event對象的常見應用
event.preventDefault()：阻止默認事件
event.stopPropagation()：阻止事件冒泡
event.stopImmediatePropagation()：阻止事件執行(事件響應優先級)
event.currentTarget：當前所綁定的事件對象
event.target：當前被點擊的元素
複製代碼

自定義事件

Event('事件名')
<div id="ev">目標元素</div>
<script> var eve=new Event('custome'); ev.addEventListener('custome',function () { console.log('custome'); }); ev.dispatchEvent(eve); </script>
CustomEvent('事件名',obj)：能夠增長一個obj參數對象
detail：提供有關事件的自定義信息的子對象。
<div id="ev">目標元素</div>
<script> var ev=document.getElementById('ev'); var eve=new CustomEvent('test',{detail:{a:1, b:2}}); ev.addEventListener('test',function (e) { console.log(e.detail.a) }); ev.dispatchEvent(eve); </script>
複製代碼

HTTP協議類
- HTTP協議的主要特色
  1. 簡單快速：URI(統一資源符)是固定的
  2. 靈活：HTTP協議頭裏有一個數據類型，經過HTTP協議能夠完成不一樣數據類型的傳輸
  3. 無鏈接：鏈接一次就會斷開，不會保持鏈接
  4. 無狀態：客戶端和服務端是兩種
- HTTP報文的組成部分
  1. 請求報文
    - 請求行：HTTP方法，頁面地址，HTTP協議，版本
    - 請求頭：key:value
    - 空行:遇到空行，服務端知道下一行不是請求頭部分了，該看成請求體解析了
    - 請求休：
  2. 響應報文
    - 狀態行
    - 響應頭
    - 空行
    - 響應體
- HTTP方法
  - GET：獲取資源
  - POST：傳輸資源
  - PUT：更新資源
  - DELETE：刪除資源
  - HEAD：獲取報文首部
- 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狀態碼
  - 1**：提示信息-表示請求已接收，繼續處理
  - 2**：成功-表示請求已被成功接收
  - 3**：重定向-要完成請求必須進行更進一步的操做
  - 4**：客戶端錯誤-請求有語法錯誤或請求沒法實現
  - 5**：服務器錯誤-服務器末能實現合法的請求
  - 200 OK：客戶端請求成功
  - 206 Partial Content：客戶發送了一個帶有Range頭的GET請求，服務器完成了它
  - 301 Moved Permanently:所請求的頁面已經轉移至新的url
  - 302 Found：所請求的頁面已經臨時轉移至新的url
  - 304 Not Modified：客戶端有緩存的文檔併發出了一個條件性的請求，服務器告訴客戶，原來緩存的文檔能夠繼續使用
  - 400 Bod Request：客戶端請求有語法錯誤，不能被服務器所理解
  - 401 Unauthorized：請求未經受權，這個狀態代碼必須和WWW-Authenticate報頭域一塊兒使用
  - 403 Forbidden：對被請求頁面的訪問被禁止
  - 404 Not Found：請求資源不存在
  - 500 Internal Server Error：服務器發生不可預期的錯誤原來緩衝的文檔還能夠繼續使用
  - 503 Server Unavailable：請求未完成，服務器臨時過載或當機，一段時間後可能恢復正常
- 什麼是持久鏈接（HTTP1.1版本支持，HTTP1.0版本不支持）
  - HTTP協議採用「請求-應答」模式，當使用普通模式，即非Keep-Alive模式時，每一個請求/應答客戶和服務器都要新建一個鏈接，完成以後當即斷開鏈接（HTTP協議爲無鏈接時協議）
  - 當使用Keep-Alive模式（又稱持久鏈接、鏈接重用）時，Keep-Alive功能使客戶端到服務器端的鏈接持續有效，當出現對服務器的後繼請求時，Keep-Alive功能避免了創建或者從新創建鏈接
- 什麼是管線化：是把全部請求打包給服務器商，服務器端把全部響應一次性打包給客戶端
  - 是經過持久鏈接完成了，僅HTTP1.1支持此技術
  - 只有GET和HEAD請求能夠進行管線化，而POST則有所限制
  - 在使用持久鏈接的狀況下，某個鏈接上消息的傳遞相似於
  - 請求1-》響應1-》請求2-》響應2-》請求3-》響應3-》
  - 某個鏈接上的消息變成了相似這樣
  - 請求1-》請求2-》請求3-》響應1-》響應2-》響應3
原型鏈類
- 建立對象的幾種方法
```
//對象字面量
   var o1={name:'wbq'};
   console.log(o1.name);
   //new Object
   var o2=new Object({name:'wbq2'});
   console.log(o2.name);
   //構造函數方法
   var o3=function (name) {
       this.name=name;
   }
   var result=new o3('wbq3');
   console.log(result.name);
   //Object.create
   var o4=Object.create({name:'wbq4'});
   console.log(o4.name);
複製代碼
```
- 原型、構造函數、實例、原型鏈
  - 對象都有proto屬性
  - 原型鏈原理：利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法構造函數也是函數，任何函數經過new操做符生成一個實例，都是構造函數
  - 構造函數可使用new操做符生成一個實例
  - 函數都有一個prototype屬性，prototype指的是原型對象
  - 原型對象中有一個constructor構造器，默認指向構造函數
  - o3.prototype.constructor===o3//true
  - result.proto===o3.prototype//true
- instanceof的原理
- new 運算符
  - 一個新對象被建立，它繼承自foo.prototype
  - 構造函數被執行，執行的時候，相應的傳參會被傳入，同時上下文(this)會被指定爲這個新實例，new foo等同於new Foo(),只能用在不傳遞任何參數的狀況
  - 若是構造函數返回一個「對象」，那麼這個對象會取代整個new出來的結果，若是構造函數沒有返回對象，那麼new出來的結果爲步驟1建立的對象。
```
var M=function (name) {
    this.name=name;
}
var new2=function (func) {
  var o=Object.create(func.prototype);
  var k=func.call(o);
  if(typeof k==='object'){
      return k
  }else {
      return o
  }
}
複製代碼
```

面向對象類

類與實例

類的聲明

/*類的聲明：構造函數方法*/
function Animal(name){
    this.name=name;
}
/*ES6中的class的聲明*/
class Animal2{
    constructor(){
        this.name=name;
    }
}
複製代碼

生成實例:
new Animal()

類與繼承

如何實現繼承：實現繼承本質是原型鏈
繼承的幾種方式

/*藉助構造函數實現繼承:只實現部分繼承，沒法繼承父類原型對象的方法*/
function Parent1(){
    this.name='parent1';
}
function Child1() {
    Parent1.call(this);//繼承
    this.type='child1';
}
//call,apply改變函數運行上下文，改變this指向
console.log(new Child1());
/*藉助原型鏈實現繼承：缺點改第一個對象的屬性，第二個對象的屬性也跟着改變了*/
function Parent1(){
    this.name='parent1';
    this.play=[1,2,3];
}
function Child1() {
    this.type='child1';
}
Child1.prototype=new Parent1();
console.log(new Child1().play);
var s1=new Child1();
var s2=new Child1();
console.log(s1.play,s2.play);//[1,2,3]f
s2.play.push(4);
console.log(s1.play,s2.play);//[1, 2, 3, 4]
/*藉助組合方式實現繼承：*/
function Parent1(){
    this.name='parent1';
    this.play=[1,2,3]
}
function Child1() {
    Parent1.call(this);
    this.type='child1';
}
Child1.prototype=new Parent1();
var s1=new Child1();
var s2=new Child1();
s2.play.push(4);
console.log(s1.play,s2.play);//[1,2,3],[1, 2, 3, 4]
/*藉助組合繼承優化方式1：*/
function Parent1(){
    this.name='parent1';
    this.play=[1,2,3]
}
function Child1() {
    Parent1.call(this);
    this.type='child1';
}
Child1.prototype=Parent1.prototype;//這樣不用兩次調用new Parent1()
var s1=new Child1();
var s2=new Child1();
s2.play.push(4);
console.log(s1.play,s2.play);//[1,2,3],[1, 2, 3, 4]
console.log(s1.instanceOf Child1,s1.instanceOf Parent1);//true,true
console.log(s1.constructor);//Parent1,缺點是構造函數指向的是一個，沒法區分實例是由父類建立仍是由子類建立的
/*藉助組合繼承優化方式2：*/
function Parent1(){
    this.name='parent1';
    this.play=[1,2,3]
}
function Child1() {
    Parent1.call(this);
    this.type='child1';
}
Child1.prototype=Object.create(Parent1.prototype);//Object.create建立對象的原理：
Child1.prototype.constructor=Child1;
var s1=new Child1();
console.log(s1 instanceof Child1,s1 instanceof Parent1);//true true
console.log(s1.constructor);//Child1
複製代碼

通訊類

什麼是同源策略及限制

同源策略：端口、域名、協議相同
同源策略限制從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。
這是用於隔離潛在惡意文件的關鍵的安全機制
1. Cookie,LocalStorage和indexDB沒法讀取
2. DOM沒法得到
3. Ajax請求不能發送
複製代碼

先後端如何通訊

1.Ajax：同源下的通訊方式
2.WebSocket：不受同源策略限制
3.CORS：支持跨域通訊也支持同源通訊
複製代碼

如何建立Ajax

1.XMLHttpRequest對象的工做流程
2.兼容性處理
3.事件的觸發條件
4.事件的觸發順序
複製代碼

跨域通訊的幾種方式

1.JSONP
原理是什麼：利用script能夠實現異步加載實現的
怎麼實現的：script的src連接裏要加上一個callback名稱。在全局建立一個callback函數
2.Hash：瀏覽器連接#後面的值
window.localtion.hash
window.onhashchange
利用hash，場景是當前頁面A經過iframe或frame嵌入了跨域的頁面B
//在A中的代碼
var B=document.getElementsByTagName('iframe');
B.src=B.src+'#'+'data';
//在B中的代碼以下：
window.onhashchange=function(){
    var data=window.location.hash;
};
複製代碼

3.postMessage

窗口A向(http:A.com)向跨域的窗口B(http:B.com)發送信息
    //在A窗口發送數據：
    window.postMessage('data','http:B.com')
    //在B窗口中監聽message事件：
    window.addEventListener('message',function(event){
        console.log(event.origin);//http:A.com
        console.log(event.source);//Bwindow
        console.log(event.data);//data
    },false);
複製代碼

4.WebSocket

var ws=new WebSocket('wss://echo.websocket.org');
    ws.onopen=function(evt){
        console.log('Connection open...');
    ws.send('Hello WebSocktes!');
    ws.onmessage=function(evt){
        console.log('Received Message'+evt.data);
        ws.close();
    }
    ws.onclose=function(evt){
        console.log('connection closed')
    }
}
複製代碼

5.CORS

fetch('/some/url',{
    method:'get'
}).then(function(response){
    
}).catch(function(err){
    //出錯，等價於then的第二個參數，但這樣更好用直觀
})
http://www.ruanyifeng.com/blog/2016/04/cors.html
複製代碼

前端安全類
- CSRF
  - 基本概念和縮寫：
    Cross-site request forgery：跨站請求僞造
  - 攻擊原理：
    1. 用戶註冊過的網站
    2. 利用自己的漏洞，自動執行一些接口
  - 防護措施：
    - 加Token驗證
    - Referer驗證：頁面來源驗證
    - 隱藏令牌：隱藏在http-head頭中
- XSS
  - 基本概念和縮寫
    - XSS(cross-核潛艇 scripting)：跨域腳本攻擊
    - 攻擊原理：向頁面注入腳本
    - 防護措施
      www.imooc.com/learn/812
前端算法類
- 排序
  - 快速排序：segmentfault.com/a/119000000…
  - 選擇排序：segmentfault.com/a/119000000…
  - 希爾排序：segmentfault.com/a/119000000…
- 堆棧、隊列、鏈表
  juejin.im/entry/58759…
- 遞歸:segmentfault.com/a/119000000…
- 波蘭式和逆波蘭式:www.cnblogs.com/chenying99/…
- 練習地址：leetcode-cn.com/

模擬二面
- 面試技巧
- 渲染機制類
  - 重排Reflow
    - DOM結構中的各個元素都有自已的盒子，這些都須要瀏覽器根據各類樣式來計算並根據計算結果將元素放到它該出現的位置，這個過程稱之爲reflow
    - 觸發Reflow
    - 當你增長、刪除、修改DOM結點時，會致使Reflow或Repaint
    - 當你移動DOM的位置，或是搞個動畫時
    - 當你修改css樣式時
    - 當你Resize窗口的時候，或是滾動的時候
    - 當你修改網頁的默認字體時
  - 重繪Repaint
    - 當各類盒子位置、大小以及其餘屬性，例如顏色、字體大小等都肯定下來後，瀏覽器因而便把這些元素按照各自的特性繪製一遍，因而頁面的內容出現了。
    - 觸發Repaint
      - DOM改動
      - CSS改動
- JS運行機制
  - 異步任務
    - setTimeout和setInterval
    - DOM事件
    - ES6中的promise
- 頁面性能
  - 提高頁面性能的方法有哪些？
    - 資源壓縮合並，減小HTTP請求
    - 非核心代碼異步加載->異步加載方式-》異步加載區別
    - 利用瀏覽器緩存->緩存分類->緩存的原理
    - 使用CDN
    - 預解析DNS
```
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.imooc.com">
複製代碼
```
  - 異步加載方法
    - 動態腳本加載
    - defer
    - async
  - 異步加載區別
    - defer是在HTML解析完成以後纔會執行。若是有多個，按照加載的順序依次執行
    - async是在加載完成後當即執行，若是是多個，執行順序和加載順序無關
  - 瀏覽器緩存
    - 緩存分類
      - 強緩存
        
        Expires：Expires:Thu,21 Jan 2017 23:39:02 GMT
        
        Cache-Control：Cache-Control:max-age=3600
      - 協商緩存
        
        Last-Modified If-Modified-Since Last-Modified
        
        Etag：If-None-Match
- 錯誤監控
  - 前端錯誤的分類
    - 即時運行錯誤：代碼錯誤
    - 資源加載錯誤
  - 錯誤的捕獲方式
    - 即時運行錯誤的捕獲方法
      - try...catch
      - window.onerror
    - 資源加載錯誤
      - object.onerror
      - performance.getEntries()
      - Error事件捕獲
  - 上報錯誤的基本原理
    - 採用Ajax通訊的方式上報
    - 利用Image對象上報
      延伸：跨域的js運行錯誤能夠捕獲嗎，錯誤提示什麼，應該怎麼處理？

在script標籤上增長crossorigin屬性
設置js資源響應頭Access-Control-Allow-Origin

<script crossorigin  src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>

res.setHeader("Access-Control-Allow-Origin","*");複製代碼

做者：冰淇wbq 連接：https://www.jianshu.com/p/bab781e62f29 來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。