前端面試手記

前言

面試是一個自我提高的過程，但願如下記錄可以幫助本身在面試中有所收穫。

記錄一

第一家是一個天使輪的公司，面試沒有筆試，令我感到很無奈，面試官貌似不是技術，問了我兩個題目：

• 手寫一個客戶登陸的過程，使用原生js實現。手寫
• 請問websocket怎麼使用。手寫

第二個題目我沒答上來，由於壓根沒用過。下面是這兩個題目的答案。

<!--第一題-->
var xhr  = new XMLHttpRquest()
xhr.send("GET","API",true)
shr.onreadystatechange = function(){
    if(xhr.readystate === 4){
        if(xhr.status === 200){
            JSON.parse(xhr.responseText)
        }
    }
}

<!--第二題-->
var ws = new websocket('http://128.12.1.2:8080')

ws.onmesage = function(e){
    console.log(e.data)
}

ws.onopen = function(e){
    ws.send('hello')
    
    if(ws.bufferedAmount  === 0){
        console.log('發送完畢')
    }
}

ws.onclose = function(e){
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
}


ws.onerror = function(e){
    
} 

複製代碼

---

記錄二

第二家是一箇中型的公司，下面是面試過程：

筆試

寫出你熟悉的狀態碼，並寫出含義 (10)

<!--大致分爲三類-->
<!--成功--> 200 成功 201 請求成功並建立了新的鏈接 202 已接收 服務器已經接受請求，可是還沒有處理 <!--請求失敗--> 400 錯誤請求 401 未受權 要求驗證身份 403 服務器拒絕 <!--重定向--> 300 多種選擇 301 永久移動 302 臨時移動 <!--服務器錯誤--> 500 服務器代碼運行出錯 503 服務器關閉 複製代碼

使用css3畫出一個扇形

這個題我開始使用border的特性畫出了三角形，而後使用border-raduis 使其一邊變成弧形

width:0px;
border-bottom : 100px solid red;
border-left : 30px solid transparent;
border-right: 30px solid transparent;
border-raduis : 50%
複製代碼

可是面試官說他想要一個任意角度的扇形 我沒想出來，回來看了一波博客，感受這是本身理解出的最簡單的方法·····

<style> .r1 { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: yellow; clip: rect(0, 100px, 200px, 0); } .r2 { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: white; clip: rect(0, 100px, 200px, 0); transform: rotate(40deg); } </style>

<div class="r1"></div>
<div class="r2"></div>
複製代碼

<!--必須爲position:absolute-->
clip:rect(30px 200px 200px 20px)
複製代碼

值	描述
shape	設置元素的形狀。惟一合法的形狀值是：rect (top, right, bottom, left)
auto	默認值。不該用任何剪裁。
inherit	規定應該從父元素繼承 clip 屬性的值。

主要是考閉包和函數參數的傳遞

function test(a,b){
    alert(b)
    return function(c){
        return test(c,a)
    }
}


複製代碼

主要是考變量提高。

複製代碼

寫出flex佈局的相關屬性和含義

1. 怎麼激活flex佈局

   • display:flex
   • 行內元素可使用 display:inline-flex

2. 容器的屬性

   • flex-direction: row | row-reverse | column |column-reverse //主軸的方向
   • flex-wrap: nowrap 默認 | wrap 換行第一行在上面 | wrap-reverse 換行，第一行在下面 // 在項目超過默認軸線排列數量的狀況下 （使用百分比） 超出一行的容器，以什麼方式排列
   • flex-flow: <flex-direction> || <flex-wrap> 默認值 row nowrap // 前兩個屬性的綜合
   • justify-content: flex-start| flex-end | center| space-between | space-around // 主軸X軸方向的對其方式
   • align-items: flex-start | flex-end | center | baseline 基於項目裏面的文字的base-line | stretch 上下填滿 //交叉軸Y軸上面的對齊凡是

   必須對父元素設置自由盒屬性display:flex;，而且設置排列方式爲橫向排列flex-direction:row;而且設置換行，flex-wrap:wrap;這樣這個屬性的設置纔會起做用。

   • align-content:stretch 默認 | flex-start| flex-end | center| space-between | space-around

3. 項目屬性

   • order:<integer> 默認0目的排序 數值越小越靠前
   • flex-grow:<integer> 默認0及在項目中佔幾份 通常爲1份
   • flex-shrink: <integer> 項目縮小比例 默認1 在空間不足時，爲了使全部項目在一行，數值越大小放嚴重
   • flex-basis: <length> || auto默認爲auto 若是設置px 則佔據實際寬度
   • flex:是上面三個值的簡寫 快捷值有auto(1 1 auto) none(0 0 auto)
   • align-self:除了 auto 都和 align-items同樣

以vue或者react爲例畫出他們的生命週期圖

若是須要你轉後端你會考慮使用哪一種語言，爲何？

考樹的遍歷。

估計這個要認真學一下了

// 仍是用本身的蠢方法實現的
    var nodes = [
        { id: 10, title: 'dw10', parentId: 4 },
        { id: 2, title: 'dw2', parentId: 0 },
        { id: 4, title: 'dw4', parentId: 2 },
        { id: 12, title: 'dw12', parentId: 2 },
        { id: 8, title: 'dw8', parentId: 4 },
        { id: 9, title: 'dw8', parentId: 12 }
    ]

    nodes.sort((a, b) => {
        return a.parentId - b.parentId
    })


    function toTree(arr) {
        const root = arr[0]
        _Tree(arr, root)
        return root
    }

    function _Tree(arr, root) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].parentId === root.id) {
                if (root.child) {
                    root.child.push(arr[i])
                } else {
                    root.child = [arr[i]]
                }
            }
        }

        var child = root.child
        if (child && child.length !== 0) {
            for (let i = 0; i < child.length; i++) {
                _Tree(arr, child[i])
            }
        }
    }

    toTree(nodes)
複製代碼

使用es6寫一個工廠模式

本身的理解

class Man{
    constructor(name){
        this.name = name
    }
    
    getName(){
        return this.name
    }
    
    static Factory(name){
        return new Man(name)
    }
}
複製代碼

怎麼使一個沒有長寬的div水平居中

<!--注意點：必定要在子盒子裏面添加內容，由於子盒子的div自己是沒有寬高的，若是你不加內容，根本沒法實現效果-->
<style> .one { position: relative; width: 200px; height: 200px; background-color: rebeccapurple; } .two { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style>
<div class="one">
    <div class="two">wo</div>
</div>


<style> .one { display: table-cell; text-align: center; vertical-align: middle; width: 100px; height: 100px; background-color: red; } .two { display: inline-block; } </style>
<div class="one">
    <div class="two">wo</div>
</div>

複製代碼

10. 將'i have a dream' 裏的dream替換成apple，寫出三種方法。

var str = 'i have a dream'

<!--第一種-->
var str1 = str.replace(/d\w+m$/g,'apple')

var index_d = str.indexOf('d')
var arr = str.split('')

<!--第二種-->
var arr2 = arr.slice(0,index_d) // 0 到 d 可是不包括d 不改變原來 返回已被被截取的目標 arr和str 都有這樣的方法 和substring 的參數同樣 起始位置
var str2 = arr2.concat('apple').join('')

<!--第三種-->
var arr3 = str.split('')
var arr4 = arr3.splice(index_d,5,'apple')   // arr3 = 'dream' 數組專有 改變原有數組

var str3 = arr3.join('')
<!--還有好多種...-->
複製代碼

• 對string 和 array的全部操做方法進行總結

  string

  • charAt(index) && chartCodeAt(index) 返回指定位置的字符 返回指定位置的字符的unicode編碼
  • substr(startIndex,length) substring(startIndex,endIndex) 截取的字符串不包括end。 slice() 和substring同樣，可是能夠是負數 以上三種不對源字符串有影響
  • toUpperCase toLowerCase
  • indexOf indexLastOf()
  • split

  array

  • indexOf()
  • push pop shift unshift
  • splice(index,length,....) 會影響原數組
  • slice(index,end) 不會影響原數組
  • forEach((item,index,arr)=>{}) 不產生新數組，可是arr這個參數能夠改變原數組
  • map((item,index,arr)=>{}) return 能夠產生一個新數組 arr 不能夠操控原數組
  • reduce((prevalue,item,index,arr)=>{},startVaule) 聚合 startValue 是第一次循環是prevalue的初始值

  // 統計字符串中字符出現的次數
  let str = 'fsadfasdfagagajkgnahjgasdjfajsfjk';
  let strArr = str.split('');
  console.log(strArr);
  let sr = strArr.reduce((preValue, curValue, curIndex, array) => {
      if (!preValue[curValue]) {
          preValue[curValue] = 0;
      }
      preValue[curValue] += 1;
      return preValue;
  }, {})
  console.log(sr);
  複製代碼

  • flier((item,index,array)=>{ return true}) 過濾
  • sort() 排序

  arr.sort((left,right)=>{
      //升序
      return left-right
      // 降序
      return right-left
  })
  複製代碼

面試

說一下盒子模型，盒模型會產生哪些問題。

盒子模型會有那些問題：

• margin上下重合的問題

種類	解決方法
上下兩個div	底部元素產生bfc，使用position:absolute
父子元素div	父級元素加上border:1px solid transparent或者overflow:hidden

能描述一下vue的生命週期中何時掛載的dom樹。

http中的304經歷那些過程。

重定向和轉發的區別。

若是如今要作一個日曆組件你會使用什麼佈局來解決。

操做在短期內不少次操做vue的數據，vue會怎麼刷新。

有沒有了解過jquery的源碼，你對jquery這種操做方式有什麼見解，vue是怎麼解決dom平凡操做的這種問題的。

對本身的職業1-3年內職業規劃有哪些？

解釋一下做用域鏈。

說一下對this的理解。

記錄三

電話面試

解釋一下vue的響應原理，並解釋怎麼從數據更新到視圖層的。

function observer(obj){
    // 遞歸邊界
    if(!obj || typeof obj !== 'object'){
        return
    }

    Object.keys(obj).forEach((item,index,arr)=>{
        defineReactive(obj,item,obj[item])
        observer(obj[item])
    })
}

function defineReactive(data,key,val){
    Object.defineProperty(data,key ,{
        enumerable:true,
        configurale:true,
        get:function(){
            // 須要在這裏添加訂閱者
            return val
        },
        set:function(newValue){
            val = newValue
            console.log('屬性'+key+'被監聽了'+'如今的值爲'+newValue)

            // 在這裏通知訂閱者去更新視圖
        }
    })
}


var library = {
    book1: {
        name: ''
    },
    book2: ''
};

observer(library)

library.book1.name = 'vue權威指南'; 
library.book2 = '沒有此書籍';

// 再往下面的東西不想啃了 這裏用到的是 發佈-訂閱者模式
複製代碼

緩存 cookie 頭信息的控制等等

• http 頭信息

請求頭字段	做用
Cache-control	控制cookie 的緩存
Connection	瀏覽器想要的鏈接方式 好比keep-alive
Date	報文建立報文時間
If-Modified-Since	對應響應頭裏面的 Last-Modofied 控制緩存
If-None-Match	配合響應頭ETag使用
Host	請求的服務器域名

響應頭	做用
Location	客戶端重定向的uri
server	服務器的名字
ETag	指紋
Last-Modofied	上一次服務器文件修改的時間

下面是http請求中cache-conctrol

響應頭的選項

怎麼解決父級塌陷，overflow：hidden怎麼產生bfc的，產生bfc的方式還有哪些。

清除浮動

• 當子元素浮動時，給父元素添加overflow：hidden，按照它的第一個特性，應該將子元素超出的部分截掉，可是由於子元素有浮動，沒法裁剪，全部只能由父元素增長高度去包裹住子元素，使得父元素擁有了高度，而這個高度是跟隨子元素自適應的高度，這樣就把浮動的子元素包含在父元素內了。

怎麼產生bfc？

• 根元素
• float的值不爲none
• overflow的值不爲visible
• display的值爲inline-block、table-cell、table-caption
• position的值爲absolute或fixed

看到有道友文章中把display：table也認爲能夠生成BFC，其實這裏的主要緣由在於Table會默認生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC

有哪些佈局方式。

element UI，antd的響應式佈局是根據什麼原理來的

爲何css執行順序是從右至左比較快

瀏覽器專門創建了一個反常規思惟的從右往左的匹配規則就是爲了避免對全部元素進行遍歷 遍歷的節點會變少

瀏覽器的優化 script defer 和async的差異

<script async src="script.js"></script>
複製代碼

 當瀏覽器遇到 script 標籤時，文檔的解析不會中止，其餘線程將下載腳本，腳本下載完成後開始執行腳本，腳本執行的過程當中文檔將中止解析，直到腳本執行完畢

<script defer src="myscript.js"></script>
複製代碼

當瀏覽器遇到 script 標籤時，文檔的解析不會中止，其餘線程將下載腳本，待到文檔解析完成，腳本纔會執行。