前端實習生面試題分析（一）

時間 2019-11-10

標籤前端實習生面試題分析简体版

原文原文鏈接

最近面試拿了不少公司的實習offer，只要是面試的都經過了。css

接下來就分析下面試題，也能給本身一個提高吧，以便後續的面試更輕車熟路些，題目沒什麼順序，想起什麼寫什麼，還有我面試過程當中的一些小套路。web

估計要寫好多，天天寫幾道題，並且有些經驗性的東西也不容易寫出來面試

這篇寫的都是相似一些概念性的理論東西。canvas

1.JS防抖和節流

先說爲何要作防抖和節流，針對一些會頻繁觸發的事件，像scroll、resize，若是正常綁定事件處理函數的話，可能在很短的時間內屢次連續觸發事件，十分影響性能。瀏覽器

因此，針對這種事件要作防抖或者節流處理。緩存

1.防抖安全

作法就是限制下次函數調用以前必須等待的事件間隔。服務器

實現方法就是維護一個定時器，規定事件後觸發函數，規定時間內觸發的話，就會取消以前的計時器而且從新設置計時器，這樣一來，只有最後一次操做能觸發。cookie

2.節流網絡

節流只容許一個函數在規定的時間內觸發一次。

它和防抖最大的區別就是，節流函數無論事件觸發多頻繁，都保證事件處理函數只在規定的時間內觸發一次；防抖只是最後一次事件纔會觸發事件處理函數。

好比在頁面無限加載的場景下，咱們須要用戶在滾動頁面時，每隔一段事件發送一次異步請求，而不是用戶在中止頁面滾動時發送異步請求。因此這種場景，就適合用節流來實現。

兩種實現方式：

時間戳：容易理解，當高頻事件觸發時，第一次應該當即執行事件處理函數，而後再怎麼頻繁觸發事件，也都是會等到規定的時間間隔後才執行一次。
定時器：當觸發事件的時候，設置一個定時器，再觸發事件的時候，若定時器是存在，就什麼都不作；知道規定時間後，定時器執行事件處理函數，而後定時器被清空，這樣就能夠設置下一個定時器。

2.TCP和UDP的區別

這個東西能說好多，面試要求簡潔，就寫個總結的答案，我推薦謝希仁的《計算機網絡》第六版。

1.TCP是面向鏈接的運輸層協議；UDP是無鏈接的，即發送數據以前不須要創建連接，所以減小了開銷和發送數據的時延。

2.TCP提供可靠交付的服務，經過TCP鏈接傳送的數據，無差錯、不丟失、不重複、而且按時到達；UDP使用最大努力交付，即不保證可靠性交付，所以主機不須要維持複雜的鏈接狀態。

3.TCP面向字節流，TCP中的「流」指的是流入到進程或從進程流出的字節序列；UDP是面向報文的，發送方的UDP對應用程序交下來的報文，在添加首部後就向下交付IP層。

4.UDP沒有擁塞控制，所以網絡出現的擁塞不會使源主機的發送速率下降，符合不少實時應用（如IP電話、實時視頻會議等）的要求。

5.每一條TCP鏈接只能有兩個端點，每一條TCP鏈接只能是點對點的；UDP支持一對1、一對多、多對一和多對多的交互通訊。

6.UDP的首部開銷小，只有8個字節，比TCP的20個字節的首部短。

7.TCP提供可靠的全雙工通訊，TCP容許通訊雙方的應用進程在任什麼時候候都能發送數據；UDP是不可靠信道。

3.GET和POST的區別

紅字標記的必定要說出來

GET請求在瀏覽器回退時是無害的，POST會再次提交請求
GET請求產生的URL地址能夠被收藏，而POST不能夠
GET請求會被瀏覽器主動緩存，而POST不會，除非手動設置
GET請求只能進行URL編碼，而POST支持多種編碼方式
GET請求參數會被完整的保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留
GET請求在URL中傳遞的參數是有長度限制的（不固定，因瀏覽器決定），而POST沒有限制
GET請求只接受ASC2字符，而對參數的數據類型POST沒有限制
GET請求比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感數據
GET請求參數經過URL傳遞，而POST放在request.body上

4.JS加載時間線

一、建立Document對象，開始解析web頁面。解析HTML元素和他們的文本內容後添加Element對象和Text節點到文檔中。這個階段document.readyState = 'loading'。

二、遇到link外部css，建立線程加載，並繼續解析文檔。

三、遇到script外部js，而且沒有設置async、defer，瀏覽器加載，並阻塞，等待js加載完成並執行該腳本，而後繼續解析文檔。

四、遇到script外部js，而且設置有async、defer，瀏覽器建立線程加載，並繼續解析文檔；對於async屬性的腳本，腳本加載完成後當即執行。（異步禁止使用document.write()）

五、遇到img等，先正常解析dom結構，而後瀏覽器異步加載src，並繼續解析文檔。

六、當文檔解析完成，document.readyState = 'interactive'。

七、文檔解析完成後，全部設置有defer的腳本會按照順序執行。（注意與async的不一樣,但一樣禁止使用document.write()）;

八、document對象觸發DOMContentLoaded事件，這也標誌着程序執行從同步腳本執行階段，轉化爲事件驅動階段。

九、當全部async的腳本加載完成並執行後、img等加載完成後，document.readyState = 'complete'，window對象觸發load事件。

十、今後，以異步響應方式處理用戶輸入、網絡事件等。

5.如何解決canvas高分屏模糊問題？

在分辨率比較高的屏幕，例如ip6/6s/mac等機器上，由於canvs繪製的是位圖，因此會致使模糊，解決方法是根據屏幕分辨率修改canvas樣式代碼中的寬和高與canvas的width和height屬性的比例

6.cookie、localStorage、sessionStorage區別

1.從數據生命週期上來講

cookie：通常由服務器端生成，可設置失效時間，若是在瀏覽器端生成cookie，則默認關閉瀏覽器後失效。
localStorage：永久保存，除非被清除。
sessionStorage：僅在當前會話下有效，關閉頁面或者瀏覽器被清除。

2.從數據存儲方面來講

cookie大小爲4KB左右
storage通常爲5MB

3.從與服務器端通訊方面

cookie每次都會攜帶在HTTP頭中，若是cookie保存過多會帶來性能問題
storage僅在客戶端保存，不參與和服務器的通訊

4.從易用性方面來講

cookie原生接口不友好
storage原生接口友好，也可自行封裝

7.使用CDN的好處

CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。

CDN的基本原理是普遍採用各類緩存服務器，將這些緩存服務器分佈到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離最近的工做正常的緩存服務器上，由緩存服務器直接響應用戶請求。

CDN網絡是在用戶和服務器之間增長Cache層，如何將用戶的請求引導到Cache上得到源服務器的數據，主要是經過接管DNS實現，這就是CDN的最基本的原理

因此好處就能總結出來了：

加速不說了

2.爲了實現跨運營商、跨地域的全網覆蓋

CDN加速能夠覆蓋全球的線路，經過和運營商合做，部署IDC資源，在全國骨幹節點商，合理部署CDN邊緣分發存儲節點，充分利用帶寬資源，平衡源站流量

3.保障網站安全

CDN的負載均衡和分佈式存儲技術，能夠增強網站的可靠性，至關無無形中給你的網站添加了一把保護傘，應對絕大部分的互聯網攻擊事件。防攻擊系統也能避免網站遭到惡意攻擊

4.異地備援

當某個服務器發生意外故障時，系統將會調用其餘臨近的健康服務器節點進行服務，進而提供接近100%的可靠性，這就讓你的網站能夠作到永不宕機

5.節約成本

使用CDN加速能夠實現網站的全國鋪設，你根據不用考慮購買服務器與後續的託管運維，服務器之間鏡像同步，也不用爲了管理維護技術人員而煩惱，節省了人力、精力和財力

8.手寫一個快排

簡單，找到樞軸，左右分治再遞歸就行了

function qucikSort (arr) {
        if (arr.length <= 1) {
            return arr
        }

        var num = Math.floor(arr.length / 2)
        var numVal = arr.splice(num, 1)

        var left = []
        var right = []

        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < numVal) {
                left.push(arr[i])
            } else if (arr[i] > numVal) {
                right.push(arr[i])
            }
        }

        return qucikSort(left).concat(numVal, qucikSort(right))
    }