我的前端口試日誌（一）

2023年5月11日 89次阅读 来源: keywords

第一次寫口試閱歷，雖然之前有過一些電話口試閱歷，但相對而言覺得此次的閱歷對本身收成照樣比較大，這裏留下面經看成日誌吧！（口試時候：2018-6-12 下晝2:10；時長：50min；公司：
*）

1、說說React，為何挑選React

（一）、React特性

  1. 高效、假造DOM，最大限制地削減與DOM的交互：

    • 瀏覽器在襯着網頁時，會先將HTML文檔剖析並構建DOM樹，然後與CSSOM樹天生RenderObject樹，末了襯着成頁面。瀏覽器中襯着引擎和JavaScript引擎是星散的，襯着引擎會供應一些接口給JavaScript挪用，它們兩者通訊是經由歷程橋接的，機能現實上是很差的。
    • 以往，為了優化機能平常採納的要領是削減DOM操縱次數。而React提出了一個新的思緒就是假造DOM：組件的HTML構造不再是直接天生DOM，而是映照天生假造的JavaScript DOM構造，React經由歷程diff算法將最小變動寫入DOM中，從而削減DOM的現實次數，提拔機能。

  2. 服務器端襯着

    • React供應開箱即用的服務器端襯着，服務器端襯着解除了服務器端對瀏覽器的依靠，它會將“可視”部份先襯着，然後再交給客戶端做襯着。

  3. 組件化編碼

    • React 的一切都是基於組件的。可以經由歷程定義一個組件，然後在其他的組件中，可以像HTML標籤一樣援用它。說得淺顯點，組件實在就是自定義的標籤；經由歷程 React 構建組件，使得代碼越發輕易獲得復用，可以很好的運用在大項目的開闢中。

  4. 聲明式設想

    • React採納聲明範式，函數式編程，可以輕鬆形貌運用。

  5. 天真

    • React可以與已知的庫或框架很好地合營。

  6. JSX

    • JSX 是 JavaScript 語法的擴大。React開闢不一定運用 JSX ，但我們發起運用它。

  7. 單向響應的數據流

    • React 完成了單向響應的數據流，數據是自頂向下單向活動的，即從父組件到子組件，這類準繩讓組件之間的關聯變得簡樸可展望；props作為外部接口、state作為內部狀況。

（二）、為何挑選React

  1. 比擬其他如Vue、angular的雙向數據綁定的框架，個人比較喜好這類比較流程化的單向數據流情勢，由於可以更好的展望數據的變化；
  2. 固然最重要的原因是學校圖書館，關於React的書本材料更雄厚（。。。。道出了原形、為難）

2、方才你說到了假造DOM的Diff算法，談談你對它的明白

  • 由於當時沒有怎麼看這個算法，所以只是依附之前的學問點簡樸的說了下；
  • 這裡在細緻的回憶下：
  • React的Diff算法奇妙的運用了試探法將複雜度為O（n^3）的數差別比較算法轉換成O(n)複雜度的題目；

  • 該算法基於兩個假定：

    1. 雷同類的兩個組件將會天生類似的樹形構造，而差別類的兩個組件將會天生差別的樹形構造；
    2. 可認為元素供應唯一的標識，確保該元素在差別的襯着歷程當中堅持穩定。

  • 細緻完成細節：

    1. （樹形構造的比較）即起首搜檢兩個節點的差別

    2. 節點範例差別時

      • React會把它們當作兩個差別的字樹，致使直接移除之前的那顆子樹，然後豎立並插進去之前的那顆子樹
      • 長處：奇妙的避開了對樹形構造的大批差別檢測，然後關注與雷同的部份，完成了疾速而又準確的差別檢測邏輯；
      • 缺點：假如兩個子樹具有類似的構造，即頂節點差別，子節點構造雷同，這時候原本只須要對差別的頂節點舉行刪除插進去操縱，然則React會將悉數子樹都刪除然後重新構建插進去

3、對React性命周期相識嗎

（1）、裝載歷程

  • 當組件第一次被襯着時，順次挪用的函數：

    • construction
    • getInitalState
    • getDefaultProps
    • componentWillMount
    • render
    • componentDidMount

（2）、更新曆程

  • 更新曆程會順次挪用以下性命周期函數，个中render函數和“裝載”歷程一樣：
     – componentWillReceiveProps
     – shouldComponentUpdate

    • componentWillUpdate
    • render
    • componentDidUpdate
  • 並非一切的更新曆程都邑實行悉數函數。

（3）、React組件的卸載歷程只觸及一個函數componentWillUnmount

4、說到shouldComponentUpdate，你是怎樣運用的、怎樣推斷是不是更新

  • 在性命周期中render函數決議了該襯着什麼，而shouldComponentUpdate決議了一個組件什麼時候不須要襯着；
  • shouldComponentUpdate(nextProps,nextState)吸收兩個參數，即此次襯着的props和state對象，返回一個布爾，默許返回true，示意舉行更新；返回false示意此次更新不須要到此停止；
  • 經由歷程比較此次props、state和上次是不是雷同決議是不是須要舉行更新可以很好的防備不必要的更新操縱，提拔機能；
  • 由於props和state的是對象，日常平凡運用的平常都淺層比較，假如須要對兩個對象舉行深度周全比較，我斟酌的是運用JSON.stringify()

5、假如在React中我須要獵取DOM節點、應當在什麼階段獵取、怎樣獵取

  • 要獵取DOM節點的話，須要在componentDidMount或許componentDidUpdata中獵取，由於只需在這個階段實在DOM節點才構建完成了
  • 獵取DOM節點可以運用ref屬性

6、假如我又須要經由歷程原生js獵取這個節點的父節點呢

  • 能夠只是作為一個過渡，比較簡樸、直接回覆了運用DOM節點的parentNode屬性獵取；不過這裏照樣補充一點。

  • nextSibling 屬性 ：

    • 返回目的節點的下一個兄弟節點。
    • 假如目的節點背面沒有同屬於一個父節點的節點，nextSibling 將返回null ；
    • nextSibling 屬性是一個只讀屬性。

  • previousSibling屬性 ：

    • 返回目的節點的前一個兄弟節點。
    • 假如目的節點前面沒有同屬於一個父節點的節點，previousSibling 將返回null ；
    • previousSibling 屬性是一個只讀屬性。

  • parentNode 屬性 ：

    • 注：parentNode屬性返回的節點永遠是一個元素節點，由於只需元素節點才有能夠有子節點。
    • 固然有個破例：
    • document節點，他沒有父節點。所以document節點的parentNode屬性將返回null；
    • parentNode 屬性是一個只讀屬性。

7、如今我又須要以類名獵取DOM

  • 當時直接說的是：可以運用document.getElementsByClassName()、document.querySelector()、document.querySelectorAll()；
  • 然後又引出了辨別題目~

8、說說以上三種要領的辨別

  • 回覆：

    • getElementsByClassName()、和querySelectorAll()返回的是一個DOM列表，雖然可以用輪迴遍歷，然則它們只是偽數組，不能運用數組的要領；
    • getElementsByClassName()只能經由歷程類名獵取，而和querySelectorAll、querySelector是運用CSS挑選器獵取的，
    • 當時只說了querySelector是返回一個DOM節點，有點毛病吧；querySelector是返迴文檔中婚配指定的CSS挑選器的第一元素

9、方才你說到偽數組，那末怎樣辨別一個對象是數組呢

  • 回覆：
  1. obj instanceof Array假如返回true或許false；
  2. Object.prototype.toString.call(obj) === "[object Array]"；
  • 另有一個當時沒有說道：
  1. obj.constructor == Array為true或false
  • 當時還補充了Array.isArray(obj),用於肯定通報的值是不是是一個 Array,假如對象是 Array，則為true; 否則為false。

10、談到ES6，說說你對ES6的相識

  • 回覆：
  1. ES6重要增加了一些新的殊效，如:
  2. const定義常量，然則const定義的常量只是值不可變，即基礎數據範例不可變，關於援用範例，由於它豎立的是援用，所以縱然運用const定義的對象，其屬性照樣可變的；
  3. let定義變量，相干於var，它修復了一些題目，比方變量提拔、反覆定義等題目，而且const和let的定義具有塊級作用域；
  4. 關於字符串擴大有：字符串模板、另有一些要領（忘了，趕忙跳過）；
  5. 另有就是：盈餘參數、函數默許參數、模塊化、Promise、裝潢器、Symbol、set和map等；
  6. 剛進修不久，也許就說了這些；近來也在更新ES6的筆記深切明白ES6

對ES6並沒有深切的問，直接從let和const的塊級作用域引到了閉包

11、方才說到塊級作用域，談談它和閉包的辨別，就是說平常什麼時候運用閉包？

  • 回覆:

    1. 閉包運用的作用的話重要是為了獵取函數內部的變量和將變量保留下來，使其不被渣滓接納器接納，供應以後運用；
    2. 運用的話平常是為了封裝作用域，即替代全局變量，防備全局變量污染；
    3. 由於運用閉包，會將變量保留不被接納器接納，所以應當只管防備運用，防備構成內存走漏
  • 答的不是太周全，這裏補充：

  • 閉包的運用場景

    1. 運用閉包替代全局變量
    2. 函數外或在其他函數中接見某一函數內部的參數
    3. 在函數實行之前為要實行的函數供應細緻參數
    4. 在函數實行之前為函數供應只需在函數實行或援用時才曉得的細緻參數
    5. 為節點輪迴綁定click事宜，在事宜函數中運用當次輪迴的值或節點，而不是末了一次輪迴的值或節點
    6. 停息實行
    7. 包裝相干功用

12、說到接納器，說說怎樣推斷一個變量可接納，假如我須要運用閉包，該怎樣防備你所說的內存走漏？

  • 覺得有點給本身挖坑了，（接納機制、內存走漏不是太懂啊~~）

  • 回覆：

    1. 一個變量的可接納性，平常須要依據瀏覽器js引擎的接納器機制推斷，也許有兩種體式格局（當時只說到了一種）；
    2. 即援用計數:援用計數的寄義是跟蹤紀錄每一個變量被援用的次數，當期的援用次數為0時表接納
    3. 平常手動消滅是將它賦值為null

科普：

  1. 援用計數：

    • 當聲明一個變量並將一個援用範例值賦給該變量時，則這個值的援用次數就是1，假如同一個值又被賦給另一個變量，則該值的援用次數加1，相反，假如包括對這個值援用的變量又取得了另一個值，則這個值的援用次數減1。當這個值的援用次數為0時，申明沒有要領接見到它了，因此可以將其佔用的內存空間接納

  2. 標記消滅：

    • 當變量進入環境時，比方，在函數中聲明一個變量，就將這個變量標記為“進入環境”。從邏輯上講，永遠不能開釋進入環境的變量所佔用的內存，由於只需實行流進入響應的環境，就能夠會用到它們。而當變量離開環境時，則將其標記為“離開環境”。

13、HTML5相識嗎？談一談

  • HTML5 重要增加了一些語義化標籤和一些API、刪除了一些元素
  1. 繪畫 canvas
  2. 用於序言回放的 video 和 audio 元素
  3. 當地離線存儲 localStorage 歷久存儲數據，瀏覽器封閉后數據不喪失
  4. sessionStorage 的數據在瀏覽器封閉后自動刪除
  5. 語意化更好的內容元素，比方 article、footer、header、nav、section
  6. 表單控件，calendar、date、time、email、url、search
  7. 新的手藝webworker, websocket, Geolocation
  • 移除的元素：
  1. 純表現的元素：basefont，big，center，font, s，strike，tt，u
  2. 對可用性發生負面影響的元素：frame，frameset，noframes

沒有到這麼細緻，以上回憶

14、說到localStorage和sessionStorage另有cookie談談他們的辨別？

  • 雷同點：都可以作為瀏覽器存儲，且都不能舉行跨域接見；

  • 差別點：

    1. cookie一向會在同源 http 請求頭中照顧（縱然不須要），在瀏覽器和服務器間往返通報
    2. sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在當地保留；
    3. sessionStorage 和 localStorage 存儲大小比cookie大得多，可以到達5M或更大；
    4. localStorage 存儲耐久數據，瀏覽器封閉后數據不喪失除非主動刪除數據；
    5. sessionStorage 數據在當前瀏覽器窗口封閉后自動刪除；
    6. cookie 設置的cookie逾期時候之前一向有用，與瀏覽器是不是封閉無關。

15、簡歷上看你上過《計算機收集》？談一談ISO七層，按遞次說說

運用層、示意層、會話層、傳輸層、收集層、數據鏈路層、物理層

16、說說http和ftp協定離別在哪一層

  • 都處於運用層（如今回憶彷佛錯了一個~~~~）

  • 科普：

    • 運用層：許可接見OSI環境的手腕（運用協定數據單位APDU）（HTTP、FTP、SMTP、DNS）
    • 示意層：對數據舉行翻譯、加密和緊縮（示意協定數據單位PPDU）
    • 會話層：豎立、治理和停止會話（會話協定數據單位SPDU）；
    • 傳輸層：供應端到端的牢靠報文通報和毛病恢復（段Segment）（TCP和UDP）；
    • 收集層：擔任數據包從源到宿的通報和網際互連（包PackeT）IP尋址；
    • 數據鏈路層：將比特組裝成幀和點到點的通報（幀Frame）
    • 物理層：經由歷程序言傳輸比特,肯定機器及電氣範例（比特Bit）

17、說說你對http的相識，就說狀況碼吧，你經常使用的狀況碼及其寄義

  • HTTP超文本傳輸協定，基於請求/響應形式。
  • HTTP是無狀況協定，FTP是有狀況

  • 狀況碼：

    • 100：post請求第一次發送頭信息后服務器返回100，示意請求繼承；
    • 200： 示意請求一般，請求勝利；
    • 301：永遠重定向；
    • 302： 暫時重定向；
    • 304： 用於協商緩存，示意瀏覽器緩存資本未轉變，任然可用
    • 400：請求語法或參數毛病；
    • 401：認證未經由歷程，如跨域未經由歷程；
    • 403：請求未受權；
    • 404：找不到響應資本的位置；
    • 500：服務器內部失足；
    • 502： 毛病網關

18、聽你談到瀏覽器緩存，說說你所曉得的緩存體式格局

  • 緩存範例有兩種，強緩存和協商緩存
  • 強緩存：不會向服務器發送請求，直接從緩存中讀取資本（Expires、cache-control）；
  • 協商緩存：向服務器發送請求，服務器會依據這個請求的request header的一些參數來推斷是不是擲中協商緩存，假如擲中，則返回304狀況碼並帶上新的response header關照瀏覽器從緩存中讀取資本；

科普更多瀏覽器緩存細節：
深切瀏覽器緩存

19、那接下來我們談談CSS，兩個div垂直規劃，上面的設置margin—bottom:50px;下面的margin-top:100px;此時兩個div相距若干

20、假如我須要消弭這類狀況，怎樣處置懲罰

  • 由於是消弭兩個兄弟div間的margin堆疊題目：

    1. 兩個兄弟div設置為float：left（或display：inline-block）；width：100%；

  • 科普更多（父子間的margin堆疊消弭）

    • 外層元素padding替代
    • 內層元素通明邊框 border:1px solid transparent;
    • 內層元素相對定位 postion:absolute:
    • 外層元素 overflow:hidden;
    • 內層元素 加float:left;或display:inline-block;
    • 內層元素padding:1px;

21、如今我須要完成兩個div程度規劃

  • 運用flex規劃：父元素設置display;flex
  • 運用float規劃(或許display：inline-block)
//html
<div class="box">
    <div class="item1">float</div>
    <div class="item2">overflow：hidden</div>        
</div>
//CSS
.item1 {
    float: left;
   //display:inline-block
}
.item2 {
    overflow: hidden;
    //display:inline-block
}

22、如今我轉變需求，左側牢固寬度，右側自適應

  • 左側定寬width：200px;設置浮動float:left;右側overflow：hidden（或許margin-left：左側寬度）；
  • 父元素display：flex；左側定寬width：200px;；右側設置項舒展屬性flex-grow: 1;
  • 父元素position：relative；左側定寬width：200px;position：absolute；右側margin-left：左側寬度；
  • 父元素display：table；左側定寬width：200px;右側width：100%；display:tabel-cell;。

23、如今我須要，兩個div舉行兩列規劃，請求高度不定（父元素也是），我須要兩個div及時等高，即左側div高度被其內人元素撐高時，右側的div高度和左側同步

  • 父元素display：table；左側定寬width：200px;display:tabel-cell;右側width：100%。
  • 父元素display：flex；align-items:stretch;左側定寬width：200px;；右側設置項舒展屬性flex-grow: 1;

24、倏忽又有新的需求，完成擺布雙方牢固寬度，中心自適應

  • 運用flex規劃：父元素display：flex；左側定寬width：200px；右側定寬width：200px；中心flex-grow：1；

  • 運用浮動規劃：父元素overflow：hidden；左側定寬width：200px；float：left；右側定寬width：200px；float：right；中心margin：0 200px；

    • 這裡有個坑，那就是HTML構造必須得變更，即中和右要換取位置（當時沒想到，一向被問你肯定就這樣可以？短路短路~）
    • 細想由於center的div在一般文檔流中，且佔有全屏寬度，天然以後的浮動元素會被安排下一行
// Html構造
<div class="box">
        <div class="left">left</div>
        <div class="right">right</div>
    <div class="center">center</div>
 </div>
 // CSS款式規劃
         .left {
             width: 200px;
             background: bisque;
             float: left;
         }
         .center{
             background: red;
             margin: 0 200px;
         }
         .right {
             background: rgba(22,220,22,0.5);
             float: right;
             width: 200px;
             
         }

  • 運用相對定位規劃：

    • 相對定位法道理是將擺布雙方運用absolute定位，由於相對定位使其離開文檔流，背面的center會天然活動到他們上面，然後運用margin屬性，留出擺布元素的寬度，既可以使中心元素自適應屏幕寬度。（這類體式格局）

         // CSS款式規劃
        .left {
            width: 200px;
            background: bisque;
            position: absolute;
        }
        .center{
            background: red;
            margin: 0 200px;
        }
        .right {
            background: rgba(22,220,22,0.5);
            position: absolute;
       right: 0;
            width: 200px;
            
        }
  • 聖杯規劃（不是太明白）
  • 聖杯規劃的道理是margin負值法。運用聖杯規劃起首須要在center元素外部包括一個div，包括div須要設置float屬性使其構成一個BFC，並設置寬度，而且這個寬度要和left塊的margin負值舉行合營：
    • // html構造
<div class="box">
    <div class="wrap">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
// CSS 款式
.left {
    width: 200px;
    background: bisque;
    float: left;
    margin-left: -100%;
}
.wrap {
    float: left;
    width: 100%;
}
.center{
    background: red;
    margin: 0 200px;
}
.right {
    background: rgba(22,220,22,0.5);
    float: left;
    margin-left: -200px;
    width: 200px;
}

    悉數歷程用時1個小時擺布，覺得還好吧，怎麼說不管過沒過，最少曉得本身另有哪些方面不足，可以針對性的深切進修。

    • 末了附上此次口試觸及的一些學問點
    1. React學問冊；
    2. 瀏覽器緩存詳解；
    3. ES6學問總結；
    4. 末了加上前端口試題JavaScript

    延續跟進中，喜好可以留下個贊哦~~

        原文作者：keywords
        原文地址: https://segmentfault.com/a/1190000015268943
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞