前端面試知識總結1

時間 2019-11-11

原文原文鏈接

這是我根據某個老師的視頻整理出來的，這裏是連接，技術是針對前端開發，可是還有別的技巧，因此，不分崗位，均可以看一看

這篇是這一系列的第一篇，也就是一面，爲了防止篇幅太長致使混亂，我分開整理的

一面

面試技巧頁面佈局類 CSS盒子模型類 DOM事件 HTTP協議類面向對象類原型鏈類通訊類安全類算法類css

面試技巧
1）準備要充分，基礎知識要紮實
2）知識要系統，前端知識點太碎，要有總體的把握
3）溝通要簡介，一面考基礎，不要拖泥帶水，一語中的
4）心裏要誠實，會就是會，不會就是不會，不要說什麼，我看過，可是我忘了，這樣子的話很讓面試官反感
5）態度要謙虛，一面是基礎面，不須要太深刻，點到爲止，不要一直和麪試官深刻講，讓他以爲你高傲，目中無人
6）回答要靈活，不要把我說的太死，不要說「就是這樣子」這類的話。這個尤爲要注意，有的人是口頭就習慣了這麼說，好比，回答某個問題，多用「能夠是，能夠用」這樣的修辭，不要說「就是」這樣子的修飾語html

頁面佈局類
題目1：假設高度已知，寫出三欄佈局，其中左欄，右欄寬度各爲300px，中間寬度自適應，這裏至少要寫出5中佈局方案前端

1）浮動　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box div{
            height: 100px;
        }
        .left{
            background: red;
            float: left;
            width: 200px;
        }
        .right{
            background: blue;
            float: right;
            width: 200px;
        }
        .middle{
            background: yellow
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">1</div>
        <div class="right">2</div>
        <div class="middle">3</div>
    </div>
</body>
</html>

View Code

　　2）絕對定位面試

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box div{
        position: absolute;
        height: 100px;
    }
    .left{
        left: 0px;
        width: 300px;
        background: red;
    }
    .middle{
        left: 300px;
        right: 300px;
        background: yellow
    }
    .right{
        right: 0px;
        width: 300px;
        background: blue
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

　　3）flex佈局ajax

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box{
        height: 100px;
        display: flex;
    }
    .left{
        flex:0 0 300px;
        background: red;
    }
    .middle{
        background: yellow;
        flex: 1 1 auto
    }
    .right{
        flex:0 0 300px;
        background: blue
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

　4）table-cell佈局算法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box{
        height: 100px;
        display: table;
        width: 100%
    }
    .box div{
        display: table-cell;
    }
    .left{
        background: red;
        width: 300px;
    }
    .middle{
        background: yellow;
    }
    .right{
        background: blue;
        width: 300px;
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

　 5）grid佈局後端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box{
        display: grid;
        width: 100%;
        grid-template-rows:100px;
        grid-template-columns:300px auto 300px;
    }
    .left{
        background: red;
    }
    .middle{
        background: yellow;
    }
    .right{
        background: blue;
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

題目2：這5種方法的特色是什麼，各有什麼優勢缺點跨域

　　　 1）浮動佈局：缺點是浮動的破壞性和包裹性，會涉及到清除浮動的知識點，優勢是兼容性好
瀏覽器

　　　 2）絕對定位：絕對定位的破壞性，脫離文檔流，優勢是方便快捷緩存

　　　 3）flex佈局：解決以上兩種佈局的不足，在移動端很流行，可是兼容性出現了問題，不支持ie8

　　　 4） table佈局：單元格約束性太強，麻煩，可是能夠解決flex佈局不能兼容ie8的問題

　　　 5）grid佈局：寫出來是爲了體現你關注熱點技術，讓面試官看到你的技術追求

題目3：若是高度未知，假如中間的內容不少，撐開了，但願左側和右側的高度也隨之撐開。以上5種佈局，還有哪些能夠實現，哪些已經做廢

　　　浮動佈局，絕對定位，都會出現問題，浮動佈局會出現一個文字環繞效果，絕對定位會撐開中間元素，

flex佈局和表格佈局，還有網格佈局，左右兩邊的寬度會增長，仍是能夠實現

　　　延伸：怎麼樣去除浮動佈局的文字環繞效果，讓內容不影響左右佈局，建立BFC等知識點，點擊這裏

頁面佈局類總結：語義化掌握到位頁面佈局理解深入 CSS基礎知識紮實思惟靈活積極向上代碼書寫規範，這些很重要，現場寫代碼，面試官是很注重代碼的規範的

思考題：頁面佈局的變通

三欄佈局：上下寬度固定，中間自適應（適合移動端）

兩欄佈局：左寬度固定，右邊自適應

兩欄佈局：右寬度固定，左邊自適應

兩欄佈局：上寬度固定，下邊自適應

兩欄佈局：下寬度固定，上邊自適應

以上5種擴展延伸題，爲了讓這篇文章篇幅清晰，點擊這裏

CSS盒模型類

題目1：談談你對CSS盒子模型的認識

基本概念：標準模型+IE模型

題目2：標準模型和IE模型的區別

　　　　這個我在之前的博客總結過的，點擊這裏查看

題目3：CSS是如何設置這兩種模型的

　　　　box-sizing:content-box 標準模型

　　　　box-sizing:border-box IE模型

題目4：JS如何設置和獲取盒模型對應的寬高

　　　 dom.style.width/height 只能取到內聯的樣式

            dom.Currentstyle.width/height只有IE支持
            window.getComputedStyle(dom).width/height
            dom.getBoundingClientRect().width/height

題目5：根據盒模型解釋邊距重疊

題目6：BFC的基本概念，工做原理，如何建立，以及使用場景

題目5，6，設計到了BFC的知識，我在別的博客整理過的，點擊這裏

DOM事件類

題目1：DOM事件的級別

　　　　DOM0 elem.onclick=function(){}
　　　　DOM2 elem.addEventListener(‘click’,function(){},true)
　　　　DOM3 elem.addEventListener(‘keyup’,function(){},true)

題目2：DOM事件模型

　　　　捕獲和冒泡

題目3：DOM事件流

　　　　捕獲--目標階段--冒泡

題目4：描述DOM事件捕獲的具體流程

　　　捕獲過程 window —document—-html—body—普通元素

延伸：怎麼獲取當前的html節點 documnet.documentElement

冒泡過程：普通元素--body--html--document--window

題目5：Event事件的常見應用　

　event.preventDefault() 
　　　　event.stopPropagation() 
　　　　event.stopImmediatePropagation() 
　　　　event.currentTarget 
　　　　event.target

題目6：自定義事件

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

HTTP協議類

題目1：HTTP協議的主要特色

　　　　簡單快速：每一個資源的url是固定的，訪問方便

　　　　靈活：http協議的的頭部能夠設置數據類型，完成不一樣數據類型的傳輸

　　　　無鏈接：鏈接一次就會斷掉

　　　　無狀態：客戶端和服務端是兩種身份

題目2：HTTP報文的組成方法

　　　　請求報文：請求行，請求頭，空行，請求體

　　　　響應報完：狀態行，響應頭，空行，相應體

題目3：HTTP方法

　　　　GET：獲取資源
　　　　POST：傳輸資源
　　　　PUT：更新資源
　　　　DELETE：刪除資源
　　　　HEAD：得到報文首部

題目4：POST和GET的區別

　　　　1）GET在瀏覽器回退的時候時候是無害的，而POST會再次的提交請求
　　　　2）GET產生的URL地址能夠被收藏，而POST不會
　　　　3）GET請求會被瀏覽器主動的緩存，而POST不會，除非手動的設置
　　　　4）GET請求只能進行url編碼，而POST請求支持多種編碼方式
　　　　5）GET請求的參數會被完整的保留在瀏覽器的歷史記錄裏面，而POST請求的參數不會被保留
　　　　6）GET請求在url中傳輸的參數是有長度的限制的，可是POST沒有
　　　　7）對參數的數據類型，GET只能接受ASCII字符，可是POST沒有限制
　　　　8）GET比POST更不安全，由於參數暴露在URL上面，不能用來傳遞敏感的信息
　　　　9）GET的參數經過URL傳遞，而POST的參數放在Request body當中

題目5：HTTP狀態碼

　　　　1xx ：指示信息，表示請求已經接受，繼續處理
　　　　2xx：成功，請求已經被成功的接受
　　　　3xx：重定向，須要完成請求必須更進一步的操做
　　　　4xx：客服端的錯誤，請求的語法有錯誤，或者請求沒法實現
　　　　5XX：服務器錯誤，服務器未能實現合法的請求

　　　　200：客戶端請求成功
　　　　206：客戶端發送了一個帶有Range頭的GET請求，服務器完成了他
　　　　301：所請求的頁面已經轉移到了新的頁面
　　　　302：所請求的頁面已經臨時的轉移到了一個新的url
　　　　304：客戶端有緩衝的文檔，併發出了一個條件下的請求，服務器告訴客戶，原來緩衝的文檔還能夠繼續使用
　　　　400：客戶端語法錯醋
　　　　401：請求未經受權
　　　　403：請求頁面的訪問被禁用
　　　　404：請求的資源不存在
　　　　500：服務器發生不可預期的錯誤，原來的緩衝文檔還能夠繼續的使用
　　　　503：請求未完成，服務器臨時過載或當機，一段時間後可能恢復正常

題目6：什麼事持久鏈接
題目7：什麼是管線化

原型鏈類

題目1：建立對象的幾種方法

第一種

var obj1={
    name:'lili'
}

var obj2 = new Object({
name:'lucy'
})

這裏，我把這兩種方法都總結在了一塊兒，由於對象實際上，都是經過Object這個構造函數生成的，上面的方法只是一種簡寫，語法糖而已

第二種

function Obj(){
    this.name='jack'
}
var obj3=new Obj()

這個就是經過構造函數的方式，生成一個對象，也是很簡單的

第三種

var obj4={
    name:'fack'
}
var obj5=Object.create(obj4)
console.log(obj5.name)    //fack
console.log(obj5.hasOwnProperty(name))  //false

這也是建立對象的一種方式，這個Object.create方法，不知道的能夠去這裏看看

就是說，obj5對象的原型，直接指向了obj4，因此obj5擁有name屬性，可是這個是原型鏈上的屬性，不是本身的屬性

題目2：原型，構造函數，實例，原型鏈

　　　每個對象，都擁有一個屬性，叫作 _proto_，該屬性的值是一個對象

　　　每個函數，都有一個屬性（由於函數也是對象，因此函數也是能夠擁有屬性的），叫作 prototype，這個屬性的值，仍是一個對象

　　　何時，對象的_proto_屬性和函數的prototype屬性會關聯起來呢？

　　　咱們前面說過，對象都是經過函數來建立的，咱們把建立這個對象的函數，稱爲這個對象的構造函數，把找個對象，叫作構造函數的實例

　　　因此，對象的_proto_屬性，和該對象的構造函數的prototype屬性，指向的是同一個堆地址！

若是某一個屬性，該對象沒有，那麼就會沿着_proto_屬性向上查找，找到構造函數的prototype，看這個對象裏面有沒有咱們須要的屬性

題目3：instanceof的原理

　　　 instanceof是用來判斷，實例對象的_proto_屬性，和函數的prototype屬性，指向的是不是同一個內存位置，是就返回true，不然返回false

　　　這裏須要注意，instanceof和constructor熟悉，這兩個的區別蠻大的　　　

function M(){
   this.age=21
}
var obj=new M()
console.log(obj instanceof M)    //true
console.log(M.prototype instanceof Object)  //true
console.log(obj instanceof Object)   //true

obj的_proto_屬性，和M的prototype屬性，指向同一個地址，因此 obj instanceof M 爲true

M.prototype是一個對象，而找個對象是經過構造函數Object產生的，因此，M.prototype instanceof Object 也是爲 true

再看第三行，你就會發現，只要是沿着這一條原型鏈，都會返回true

這兩個題目，推薦你們去看王老師的博客，一清二楚，點擊這裏
題目4：new運算符的工做原理

　　　　建立一個新的對象，這個對象的_proto_屬性，指向函數的prototype屬性

　　　　執行構造函數，將函數的執行上下文變爲這個新建立的對象，而後返回這個對象

function newObj(fn){
     var obj=Object.create(fn.prototype)
     fn.apply(obj)
     return obj
}
function M(){
    this.age=21
}
var obj=newObj(M)
console.log(obj)

這個是模擬的構造函數的寫法，從這個代碼能夠看出來new運算符的工做原理

面向對象類

題目1：類的聲明

funciton Animal(){
　　this.name='name'
}

也許這個說法不是很嚴謹，在js當中，構造函數充當了類的做用

class Animal2{
　　constructor(){
　　　　this.name=name
　　}
}

這是ES6當中的新寫法，你能寫出來，面試官也會喜歡的，體現你的技術追求嘛

題目2：生成實例

var a = new Animal()
var b = new Anima2()

生成實例的方法是同樣的，都是構造函數調用，很簡單

題目3：如何實現繼承

題目4：以上繼承的幾種方式的特色，有什麼優缺點

這兩個題目是重點，方法有不少種，咱們一塊兒講述，每講述一種方法，就說出他的特色

1）原型鏈實現繼承

function Parent1(){
    this.age=21
}
function Child1(){
   this.name='lili'
}
Child1.prototype=new Parent1()
var chi=new Child1()
console.log(chi)

直接看這個截圖，因爲咱們 Child1.prototype=new Parent1()，因此，將chi的原型指向了parent1，是實現了繼承

這個方法存在問題嗎？

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        this.name = 'lili'
    }
    Child1.prototype = new Parent1()
    var chi = new Child1()
    var chi2 = new Child1()
    chi.frid.push(3)
    console.log(chi2.frid)   //[1,2,3]

看到問題了吧，因爲這兩個實例對象的原型是同一個引用，當操做一個的時候，另外一個也是會發生變化的

咱們能夠測試的看看

 console.log(chi.__proto__===chi2.__proto__)  //true

這兩個對象的原型，是嚴格相等的。

2）構造函數實現繼承

 function Parent1(){
     this.age=21
 }
 function Child1(){
    Parent1.apply(this)
    this.name='lili'
 }
 var chi=new Child1()
 console.log(chi)

 Parent1.apply(this)

這行代碼的做用很大，在Child函數裏面，執行了Parent函數，並且，將這個Parent函數的上下文，綁定到了this，在這裏，這個this表示的是實例對象chi

爲何不這麼寫？

Parent1.apply(Child1)

　　function Parent1(){
        this.age=21
    }

    function Child1(){
        Parent1.apply(Child1)
        this.name='lili'
    }
    var chi=new Child1()
    console.log(chi.age)  //undefined

這至關於，把age這個屬性，添加到了Child1上面，可是並不會被Child1的實例對象所擁有

仍是回到最開始的正確狀態的構造函數實現繼承，這種方法的問題是什麼？

　　function Parent1(){
        this.age=21
    }
    function Child1(){
        Parent1.apply(this)
        this.name='lili'
    }
    Parent1.prototype.sex = function() {}     var chi=new Child1()
    console.log(chi.sex)   //undefined

能夠看到，這個chi實例對象，只能繼承 Parent對象的屬性，不能繼承這個對象原型鏈上的屬性，只能實現部分的繼承

3）組合的方式

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = new Parent1()
    var chi = new Child1()
    var chi2 = new Child1()
    chi.frid.push(3)
    console.log(chi.frid)   //[1,2,3]
    console.log(chi2.frid)   //[1,2]
    console.log(chi.__proto__===chi2.__proto__)   //true

這個寫法非常神奇啊，兩個的原型指向的是同一個對象

這個Parent函數但是執行了兩次的啊，發現沒有

4）組合繼承的優化方式

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = Parent1.prototype     var chi = new Child1()
    var chi2 = new Child1()
    chi.frid.push(3)
    console.log(chi)
    console.log(chi2)
    console.log(chi.__proto__===chi2.__proto__)

這個和構造函數相比，僅僅是多了一行，構造函數繼承的方式當中，沒辦法繼承Parent的原型屬性，因此咱們手動添加

Child1.prototype = Parent1.prototype 這一行代表，Parent的原型添加到了Child的原型上面，因此，能夠繼承Parent的原型了

可是這個方法仍是會出現問題的，請看

　　function Parent1() {
        this.frid = [1, 2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = Parent1.prototype
    var chi = new Child1()
    console.log(chi instanceof Child1)      //true
    console.log(chi instanceof Parent1)     //true
    console.log(chi.constructor == Child1) //false
    console.log(chi.constructor == Parent1)   //true

chi竟然不是Child的直接實例，竟然變成了Parent的實例

咱們知道，這個函數的prorotype指向的是一個對象，這個對象有一個constructor屬性，這個屬性又指向了這個函數對象

chi沒有本身的constructor屬性，因此沿着原型鏈查找，他的原型對象，也就是 Child1.prototype，可是，找個對象被從新賦值爲了 Parent1.prototype，那麼Parent1.prototyped的constructor指向什麼？
固然是他本身啊—-Parent1

再回頭去看看之前的寫法，只要的原型鏈的方式繼承，都會改變原來的 constructor 的指向

5）組合繼承的優化方式 2

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype =Object.create(Parent1.prototype)
　　Child1.prototype.constructor=Child1      var chi = new Child1()
    console.log(chi.constructor)

這兩行代碼，一個都不能少，也許有人好奇了？爲何前面的代碼，不直接加一句 Child1.prototype.constructor=Child1呢？

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = Parent1.prototype
    Child1.prototype.constructor=Child1
    var chi = new Child1()
    var pat=new Parent1()
    console.log(chi.constructor)
    console.log(pat.constructor)

這個會致使，pat.constructor也變成了 Child 構造函數，顯然，是存在問題的

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype =Object.create(Parent1.prototype)
    Child1.prototype.constructor=Child1
    var chi = new Child1()
    var pat=new Parent1()
    console.log(chi.constructor)   //Child
    console.log(pat.constructor)  //Parent

因此，綜合以上，這總方式纔是最完美的！！

通訊類

題目1：什麼是同源策略以及限制
同源策略：同一個源才能交互，一個源包含三部分的內容，協議，域名還有端口號，這三個必須徹底同樣，纔是同一個源

限制：
1) Cookie，LocalStorge和IndexDB沒法讀取
2) DOM沒法得到
3) AJAX請求沒法發送

題目2：先後端如何通訊
Ajax WebScoket CORS

題目3：如何建立ajax

　var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange(function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status = 304){
        alert(xmlhttp.responseText)
      }
    }
  })
  xmlhttp.open('GET', 'url', trur)
  xmlhttp.send(null)