測試 | 幾道前端開發面試題，你會做嗎？

發布時間：

2020-12-16
版權所有：

云和教育
分享：

最近總結了一些前端面試一面題目，比較偏基礎，大部分題目都應該會，即使不會也似曾相識，都能說上幾句。但為什么有些人能過有些人過不了，這就是考查你的基礎知識是否全面且扎實。會是應該的，但你的答案一定要詳細并且有些題要說出多種答案，這就需要各位平常的積累了。

css

calc, support, media各自的含義及用法？

@support主要是用于檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個屬性，你可以寫一套樣式，如果不支持某個屬性，你也可以提供另外一套樣式作為替補。

calc() 函數用于動態計算長度值。calc()函數支持 “+”, “-“, “*”, “/” 運算；

@media 查詢，你可以針對不同的媒體類型定義不同的樣式。

css水平、垂直居中的寫法，請至少寫出4種？

這題考查的是css的基礎知識是否全面，所以平時一定要注意多積累

水平居中

行內元素:?text-align: center
塊級元素:?margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

設置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

1rem、1em、1vh、1px各自代表的含義？

rem

rem是全部的長度都相對于根元素<html>元素。通常做法是給html元素設置一個字體大小，然后其他元素的長度單位就為rem。

子元素字體大小的em是相對于父元素字體大小
元素的width/height/padding/margin用em的話是相對于該元素的font-size

vw/vh

全稱是 Viewport Width 和 Viewport Height，視窗的寬度和高度，相當于屏幕寬度和高度的 1%，不過，處理寬度的時候%單位更合適，處理高度的話 vh 單位更好。

px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

一般電腦的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕寬度總共有1920個像素,后者則是高度為1024個像素

畫一條0.5px的直線？

考查的是css3的transform

height: 1px;transform: scale(0.5);

說一下盒模型？

盒模型是css中重要的基礎知識，也是必考的基礎知識

盒模型的組成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border這三個部分的寬度

在標準的盒子模型中，width指content部分的寬度

box-sizing的使用

 ?box-sizing: content-box 是W3C盒子模型

box-sizing: border-box 是IE盒子模型

box-sizing的默認屬性是content-box

畫一個三角形？

這屬于簡單的css考查，平時在用組件庫的同時，也別忘了原生的css

清除浮動的幾種方式，及原理？

清除浮動簡單，但這題要引出的是BFC，BFC也是必考的基礎知識點

::after / <br> / clear: both
創建父級?BFC(overflow:hidden)
父級設置高度

BFC （塊級格式化上下文），是一個獨立的渲染區域，讓處于?BFC?內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

觸發條件:

根元素
position: absolute/fixed
display: inline-block / table
float?元素
ovevflow !== visible

規則:

屬于同一個?BFC?的兩個相鄰?Box?垂直排列
屬于同一個?BFC?的兩個相鄰?Box?的?margin?會發生重疊
BFC?的區域不會與?float?的元素區域重疊
計算?BFC?的高度時，浮動子元素也參與計算
文字層不會被浮動層覆蓋，環繞于周圍

HTML

說一下<label>標簽的用法

label標簽主要是方便鼠標點擊使用，擴大可點擊的范圍，增強用戶操作體驗

遍歷A節點的父節點下的所有子節點

這題考查原生的js操作dom,屬于非常簡單的基礎題，但長時間使用mvvm框架，可能會忘記

<script> var b=document.getElementById("a").parentNode.children; console.log(b)</script>

JS

用js遞歸的方式寫1到100求和？

遞歸我們經常用到，vue在實現雙向綁定進行數據檢驗的時候用的也是遞歸，但要我們面試的時候手寫一個遞歸，如果對遞歸的概念理解不透徹，可能還是會有一些問題。

頁面渲染html的過程？

不需要死記硬背，理解整個過程即可

瀏覽器渲染頁面的一般過程：

1.瀏覽器解析html源碼，然后創建一個 DOM樹。并行請求 css/image/js在DOM樹中，每一個HTML標簽都有一個對應的節點，并且每一個文本也都會有一個對應的文本節點。DOM樹的根節點就是 documentElement，對應的是html標簽。

2.瀏覽器解析CSS代碼，計算出最終的樣式數據。構建CSSOM樹。對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優先級：瀏覽器默認設置 < 用戶設置 < 外鏈樣式 < 內聯樣式 < html中的style。

3.DOM Tree + CSSOM –> 渲染樹（rendering tree）。渲染樹和DOM樹有點像，但是是有區別的。

DOM樹完全和html標簽一一對應，但是渲染樹會忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節點。渲染樹中的每一個節點都存儲有對應的css屬性。

4.一旦渲染樹創建好了，瀏覽器就可以根據渲染樹直接把頁面繪制到屏幕上。

以上四個步驟并不是一次性順序完成的。如果DOM或者CSSOM被修改，以上過程會被重復執行。實際上，CSS和JavaScript往往會多次修改DOM或者CSSOM。

說一下CORS？

CORS是一種新標準，支持同源通信，也支持跨域通信。fetch是實現CORS通信的

如何中斷ajax請求？

一種是設置超時時間讓ajax自動斷開，另一種是手動停止ajax請求，其核心是調用XML對象的abort方法，ajax.abort()

說一下事件代理？

事件委托是指將事件綁定到目標元素的父元素上，利用冒泡機制觸發該事件

target、currentTarget的區別？

currentTarget當前所綁定事件的元素

target當前被點擊的元素

說一下宏任務和微任務？

宏任務：當前調用棧中執行的任務稱為宏任務。（主代碼快，定時器等等）。
微任務：當前（此次事件循環中）宏任務執行完，在下一個宏任務開始之前需要執行的任務為微任務。（可以理解為回調事件，promise.then，proness.nextTick等等）。
宏任務中的事件放在callback queue中，由事件觸發線程維護；微任務的事件放在微任務隊列中，由js引擎線程維護。

說一下繼承的幾種方式及優缺點？

說比較經典的幾種繼承方式并比較優缺點就可以了

借用構造函數繼承，使用call或apply方法，將父對象的構造函數綁定在子對象上
原型繼承，將子對象的prototype指向父對象的一個實例
組合繼承

原型鏈繼承的缺點

字面量重寫原型會中斷關系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數。

借用構造函數（類式繼承）

借用構造函數雖然解決了剛才兩種問題，但沒有原型，則復用無從談起。

組合式繼承

組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數復用，又保證每個實例都有它自己的屬性。

說一下閉包？

閉包的實質是因為函數嵌套而形成的作用域鏈

閉包的定義即：函數?A?內部有一個函數?B，函數?B?可以訪問到函數?A?中的變量，那么函數?B?就是閉包

export和export default的區別？

使用上的不同

說一下自己常用的es6的功能？

此題是一道開放題，可以自由回答。但要注意像let這種簡單的用法就別說了，說一些經常用到并有一定高度的新功能

像module、class、promise等，盡量講的詳細一點。

什么是會話cookie,什么是持久cookie?

cookie是服務器返回的，指定了expire time（有效期）的是持久cookie,沒有指定的是會話cookie

數組去重？

此題看著簡單，但要想面試官給你高分還是有難度的。至少也要寫出幾種方法

es6

get、post的區別

此題比較簡單，但一定要回答的全面

1.get傳參方式是通過地址欄URL傳遞，是可以直接看到get傳遞的參數，post傳參方式參數URL不可見，get把請求的數據在URL后通過？連接，通過&進行參數分割。psot將參數存放在HTTP的包體內

2.get傳遞數據是通過URL進行傳遞，對傳遞的數據長度是受到URL大小的限制，URL最大長度是2048個字符。post沒有長度限制

3.get后退不會有影響，post后退會重新進行提交

4.get請求可以被緩存，post不可以被緩存

5.get請求只URL編碼，post支持多種編碼方式

6.get請求的記錄會留在歷史記錄中，post請求不會留在歷史記錄

7.get只支持ASCII字符，post沒有字符類型限制

你所知道的http的響應碼及含義？

此題有過開發經驗的都知道幾個，但還是那句話，一定要回答的詳細且全面。

1xx(臨時響應)

100: 請求者應當繼續提出請求。

101(切換協議) 請求者已要求服務器切換協議，服務器已確認并準備進行切換。

2xx(成功)

200：正確的請求返回正確的結果

201：表示資源被正確的創建。比如說，我們 POST 用戶名、密碼正確創建了一個用戶就可以返回 201。

202：請求是正確的，但是結果正在處理中，這時候客戶端可以通過輪詢等機制繼續請求。

3xx(已重定向)

300：請求成功，但結果有多種選擇。

301：請求成功，但是資源被永久轉移。

303：使用 GET 來訪問新的地址來獲取資源。

304：請求的資源并沒有被修改過

4xx(請求錯誤)

400：請求出現錯誤，比如請求頭不對等。

401：沒有提供認證信息。請求的時候沒有帶上 Token 等。

402：為以后需要所保留的狀態碼。

403：請求的資源不允許訪問。就是說沒有權限。

404：請求的內容不存在。

5xx(服務器錯誤)

500：服務器錯誤。

501：請求還沒有被實現。

云和數據HTML5全棧精英班，經過多年的技術迭代和項目革新，逐步發展成為集網站、手機應用、小程序、快應用、桌面應用、后臺開發等多領域開發課程，新增Egg、TypeScript、Vue、React、HybridAPP等時下最流行的新技術，結合企業實際用人需求，只為培養更多高端IT技術人才。

上一篇云和學員有話說：努力吧，為了自己的夢想而奮斗！
下一篇收藏 | 10道瀏覽器面試題解析

国产色诱美女免费视频|欧美精彩狠狠色丁香婷婷|91黑人|日本黄色小视频|欧美一级黄色视频在这里免费观看