noah的前端面試題（一）｜掘金技術徵文

時間 2019-11-15

標籤 noah 端面試題技術徵文简体版

原文原文鏈接

這段時間面試了一些公司而後我也整理一些面試題目供給你們參考一下，一些基本的題目就不分享出來了，還有一些手寫的題目，另加一些我附加連接防止我表達的不夠清晰詳細。 javascript

1. 談一下css盒模型如何觸發他是解決什麼樣子的問題html

這個是老生常談的題目了前端

1）BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此 2）內部的Box會在垂直方向，一個接一個地放置 3）屬於同一個BFC的兩個相鄰Box的 margin會發生重疊 4）BFC的區域不會與float box重疊主要是這四個也沒比較每一個都說的很清晰最主要的是第一個
vue

那些元素生成BFC

根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible

主要的解決是一些圖形文字環繞效果和避免子元素的浮動脫離文檔流而形成的高度坍塌的問題java

2. 說一下你瞭解的彈性FLEX佈局node

各類概念和屬性能想到你們均可以說一下，也扯到了Grid佈局，基本這個也沒啥問題。
react

分享一篇flex佈局很詳細的 Flex 佈局教程webpack

3. css預處理器有哪些你用了那個能夠詳細說一下其中特性嗎ios

平時我在開發中主要使用的是 Less，因此可能對 Sass 和 Stylus 的熟悉程度稍差一些

能夠基本語法嵌套語法變量 @import 混入繼承函數邏輯控制這些來講說同時我給你們分享一篇文章再談 CSS 預處理器

4. 談一談移動端適配的問題

以前的公司是用rem佈局同時我也談到淘寶的flexible.js用來適配的，vh佈局一些東西。被問到用rem佈局有什麼缺點時候我想了想說我以爲很完美

5. 談談大家用的ui庫和一些css類庫

6. js中call apply bind的用法和其中之間的區別

他們三個都是爲了動態改變某個函數運行時的上下文（context）或者是爲了改變函數體內部this的指向

apply()與call()做用沒有區別，用法與call()方法稍有區別，就是call()的第二個參數(調用函數使用的參數)，是一個一個傳入的

bind()的做用其實與call()以及apply()都是同樣的，都是爲了改變函數運行時的上下文，bind()與後面二者的區別是，call()和apply()在調用函數以後會當即執行，而bind()方法調用並改變函數運行時的上下文的以後，返回一個新的函數，在咱們須要調用的地方去調用他。

若是你們可以理解這個題目那麼這三個用法也會了解很清晰了 cat.call(dog, a, b) = cat.apply(dog, [a, b]) = (cat.bind(dog, a, b))() = dog.cat(a, b)

7. 談一談你對this的理解箭頭函數內部的this是指向哪裏的

this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象，也就是說 this是和上下文有關係，誰調用了他，他就指向誰。

箭頭函數內部的this是詞法做用域應該繼承的是父執行上下文裏面的this，切忌是父執行上下文這樣就不少箭頭函數中的指向不明確就迎刃而解了。注意：簡單對象（非函數）是沒有執行上下文的 還有箭頭函數call apply等方法會失效也不能使用 let that = this 的hack寫法

8. es6一些新的語法

你們能夠看一看阮一峯老師的 ECMAScript 6 入門 隨便抽幾點來講

9. 如何用es6進行數組的複製

擴展運算符提供了複製數組的簡便寫法

const a1 = [1, 2]; const a2 = [...a1]; const [...a2] = a1;

10. 如何用es6進行數組去重，而後用es5實現的幾種方法談談你的思路

es6 數組 set能夠用來實現數組去重

es5 裏面能夠用對象key值惟一的方式來實現和數組indexof方式

11. es6 es7有哪些方法實現函數的異步操做 es6以前呢是如何實現的

promise， async await ， generator。

es6以前經過回調函數來實現的

12. 手寫原聲ajax get請求代碼，在裏面設置同步異步是在那個方法裏面，get 和 post 區別

function get(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("GET", url , true);  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
        req.send(null);  
    }  
}  複製代碼

XMLHttpRequest.open(method, url, async);一個可選的布爾參數，默認爲true，表示要不要異步執行操做。若是值爲false，send()方法直到收到答覆前不會返回。若是true，已完成事務的通知可供事件監聽器使用。若是multipart屬性爲true則這個必須爲true，不然將引起異常。

HTTP POST GET 本質區別詳解

13. HTTP請求報文和HTTP響應報文

1.請求行

請求行由請求方法字段、URL字段和HTTP協議版本字段3個字段組成，它們用空格分隔。例如，GET /index.html HTTP/1.1。

HTTP協議的請求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

HEAD就像GET，只不過服務端接受到HEAD請求後只返回響應頭，而不會發送響應內容。當咱們只須要查看某個頁面的狀態的時候，使用HEAD是很是高效的，由於在傳輸的過程當中省去了頁面內容。

列子：

Request URL:https://www.baidu.com/

Request Method:GET

Status Code:200 OK

Remote Address:172.31.1.246:8080

2.請求頭部

請求頭部由關鍵字/值對組成，每行一對，關鍵字和值用英文冒號「:」分隔。請求頭部通知服務器有關於客戶端請求的信息，典型的請求頭有：

User-Agent：產生請求的瀏覽器類型。

Accept：客戶端可識別的內容類型列表。

Host：請求的主機名，容許多個域名同處一個IP地址，即虛擬主機。

列子：

Cache-Control:private, max-age=10

Connection:Keep-Alive

Content-Encoding:gzip

Content-Type:text/html; charset=utf-8

Date:Tue, 21 Feb 2017 03:05:37 GMT

Expires:Tue, 21 Feb 2017 03:05:47 GMT

Last-Modified:Tue, 21 Feb 2017 03:05:37 GMT

Proxy-Connection:Keep-Alive

Transfer-Encoding:chunked

Vary:Accept-Encoding

X-UA-Compatible:IE=10

3.空行

最後一個請求頭以後是一個空行，發送回車符和換行符，通知服務器如下再也不有請求頭。

4.請求數據

請求數據不在GET方法中使用，而是在POST方法中使用。POST方法適用於須要客戶填寫表單的場合。與請求數據相關的最常使用的請求頭是Content-Type和Content-Length。

HTTP響應也由三個部分組成，分別是：狀態行、消息報頭、響應正文 在響應中惟一真正的區別在於第一行中用狀態信息代替了請求信息。狀態行經過提供一個狀態碼來講明所請求的資源狀況。

13. http狀態碼說一下200和304的理解和區別

協商緩存和強制緩存的區別，流程，還有一些細節，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特徵還有同時有Etag,last-Modified同時出現的時候 etag（包括文件修改時間文件大小文件內容等信息）優先級高瀏覽器緩存詳解:expires,cache-control,last-modified,etag詳細說明

14. websocket理解 websocket產生緣由瞭解http2嘛

在之前 HTTP 協議中所謂的 keep-alive connection 是指在一次 TCP 鏈接中完成多個 HTTP 請求，可是對每一個請求仍然要單獨發 header；所謂的 polling 是指從客戶端（通常就是瀏覽器）不斷主動的向服務器發 HTTP 請求查詢是否有新數據。這兩種模式有一個共同的缺點，就是除了真正的數據部分外，服務器和客戶端還要大量交換 HTTP header，信息交換效率很低。它們創建的「長鏈接」都是僞.長鏈接，只不過好處是不須要對現有的 HTTP server 和瀏覽器架構作修改就能實現。

WebSocket 解決的第一個問題是，經過第一個 HTTP request 創建了 TCP 鏈接以後，以後的交換數據都不須要再發 HTTP request了，使得這個長鏈接變成了一個真.長鏈接。可是不須要發送 HTTP header就能交換數據顯然和原有的 HTTP 協議是有區別的，因此它須要對服務器和客戶端都進行升級才能實現。在此基礎上 WebSocket 仍是一個雙通道的鏈接，在同一個 TCP 鏈接上既能夠發也能夠收信息。此外還有 multiplexing 功能，幾個不一樣的 URI 能夠複用同一個 WebSocket 鏈接。這些都是原來的 HTTP 不能作到的。

http2它常被提起的特性有:

多路複用：多個HTTP請求能夠放在同一個鏈接中進行。且自有數據流能並行傳輸之後沒必要在使用雪碧圖來

HEAD 壓縮：HTTP1中每次HTTP請求，都是必需要帶上HTTP頭的.而HTTP/2則在創建鏈接後，把頭字段做爲鍵值對，在兩邊維護一份字典，相同的就不用再傳了，若有新增或變動，則再在傳輸時帶上。減小HTTP頭的傳輸，交互密集時，其實能省很多流量服務器推送

優先級請求：好比說你滾動條滑倒底部底部圖片的圖片就會優先加載出來

服務器推送：就是服務端能主動推東西過去，之前只能是被動的。在個人印象中，不少年前「Comet"這門技術曾經在淘寶大放光彩過。

即當客戶端發一個請求過來時，服務端能依據這個請求，推斷出你後續還要什麼，主動給推過去。大大減小了請求數，加快了反應時間.

15. 說一下爲何會有跨域問題你平時怎麼解決跨域的。以及後續JSONP的原理和實現以及cors怎麼設置。

瀏覽器的同源策略同源是指，域名，協議，端口相同，三者有一個不一樣，則爲跨域

node代理，具體本身起個node服務，在node中轉發來自瀏覽器的請求，node服務和瀏覽器請求要同源，而後轉發攜帶具體參數，cookie...,轉發到後端的跨域接口，轉發庫能夠用axios，支持在node，和瀏覽器均可以使用。

nginx配置代理

在react,vue中能夠用webpack-dev-server配置代理

跨域資源共享cors，後端設置Access-Control-Allow-Origin：*

jsonp利用script標籤支持跨域並在其中加入回調函數 jsonp只支持get請求

iframe+script 等現實開發中，並非很實用

16.如何設置cookie的跨域請求

Access-Control-Allow-Credentials設置爲true

17. 從輸入連接到前端渲染出頁面通過什麼步驟

從輸入URL到頁面加載的過程？如何由一道題完善本身的前端知識體系！內容有不少你們能夠按到本身的理解說一下其實不必那麼詳細

瀏覽器解析->查詢緩存->dns查詢->創建連接->服務器處理請求->服務器發送響應->客戶端收到頁面->解析HTML->構建渲染樹->開始顯示內容(白屏時間)->首屏內容加載完成(首屏時間)->用戶可交互(DOMContentLoaded)->加載完成(load)

18. js繼承能夠說一下哪幾種和其中的優缺點

我說了原型和構造函數相結合的組合繼承方法又談了寄生組合繼承

19. 談一談淺拷貝和深拷貝區別

object是JavaScript引用類型對象只會被克隆最外部的一層,至於更深層的對象,則依然是經過引用指向同一塊堆內存.

我說了用JSON對象parse方法能夠將JSON字符串反序列化成JS對象，stringify方法能夠將JS對象序列化成JSON字符串,這兩個方法結合起來就能產生一個便捷的深克隆.

還有Object.assign() 只是一級屬性複製，比淺拷貝多深拷貝了一層而已。

20. 尾遞歸來實現斐波那契

function fibonacci(n, n1, n2) {
    if(n <= 1) {
        return n2
    }
    return fibonacci(n - 1, n2, n1 + n2)
}複製代碼

21. 用proxy實現string repeat方法

22. vue數據雙向綁定

數據雙向綁定是經過oject.defineProerty進行數據劫持和訂閱者觀察者模式相結合

1.實現一個監聽器Observer，用來劫持並監聽全部屬性，若是有變更的，就通知訂閱者。

2.實現一個訂閱者Watcher，能夠收到屬性的變化通知並執行相應的函數，從而更新視圖。

3.實現一個解析器Compile，能夠掃描和解析每一個節點的相關指令，並根據初始化模板數據以及初始化相應的訂閱器

23. vue的生命週期

beforecreated create mounted updated destory等

有分別說了created和mounted區別 created 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用

mounted 掛載元素，獲取到DOM節點

destory能夠作一些內存泄漏的東西

24. vue router模式和懶加載

vue-router 默認 hash 模式使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。
若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。
不過這種模式要玩好，還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 oursite.com/user/id 就會返回 404，這就很差看了。
因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面

懶加載：當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。

25. 怎麼管理vuex的state

用module

26. 服務端渲染的優勢

1. 服務器端渲染當然耗CPU，但可使用服務器端緩存的方式解決，並非每一個用戶訪問都須要從新渲染一遍。並且服務器端渲染甚至能夠潛在地增長服務器效率（這點在參考資料第二個裏有提到，不過是純英文的，我有空會翻譯下）。

2. 服務器端和客戶端能夠共享某些代碼，避免重複定義。這樣可使結構更清晰，增長可維護性

3. 首次加載頁面的速度加快。客戶端渲染的一個缺點是，當用戶第一次進入站點，此時瀏覽器中沒有緩存，須要下載代碼後在本地渲染，時間較長。而服務器渲染則是，用戶在下載的已是渲染好的頁面了，打開速度比本地渲染快。

4. SEO。服務器端渲染可讓搜索引擎更容易讀取頁面的meta信息以及其餘SEO相關信息，大大增長網站在搜索引擎中的可見度。

27. 若是有個圖片特別大展現出來如何優化；若是有大量圖片想圖庫要展現如何處理

能夠把圖片轉化base64的格式的非高清圖片用來展現，等圖片顯示完了之後再經過js進行圖片src替換；

先給每一個圖片src附上通用loading圖片經過滾輪觸發事件把想要的圖片替換loading圖片