IT培訓(xùn)-高端面授IT培訓(xùn)機(jī)構(gòu)
測試 | 幾道前端開發(fā)面試題，你會(huì)做嗎？
發(fā)布時(shí)間：
2020-12-16
版權(quán)所有：
云和教育
分享：
最近總結(jié)了一些前端面試一面題目，比較偏基礎(chǔ)，大部分題目都應(yīng)該會(huì)，即使不會(huì)也似曾相識(shí)，都能說上幾句。但為什么有些人能過有些人過不了，這就是考查你的基礎(chǔ)知識(shí)是否全面且扎實(shí)。會(huì)是應(yīng)該的，但你的答案一定要詳細(xì)并且有些題要說出多種答案，這就需要各位平常的積累了。
calc, support, media各自的含義及用法？
@support主要是用于檢測瀏覽器是否支持CSS的某個(gè)屬性，其實(shí)就是條件判斷，如果支持某個(gè)屬性，你可以寫一套樣式，如果不支持某個(gè)屬性，你也可以提供另外一套樣式作為替補(bǔ)。
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長度值。calc()函數(shù)支持 “+”, “-“, “*”, “/” 運(yùn)算；
@media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。
css水平、垂直居中的寫法，請(qǐng)至少寫出4種？
這題考查的是css的基礎(chǔ)知識(shí)是否全面，所以平時(shí)一定要注意多積累
行內(nèi)元素:?text-align: center
塊級(jí)元素:?margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
設(shè)置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: centerdisplay:table+display:table-cell + vertical-align: middle;
1rem、1em、1vh、1px各自代表的含義？
rem是全部的長度都相對(duì)于根元素<html>元素。通常做法是給html元素設(shè)置一個(gè)字體大小，然后其他元素的長度單位就為rem。
子元素字體大小的em是相對(duì)于父元素字體大小
元素的width/height/padding/margin用em的話是相對(duì)于該元素的font-size
全稱是 Viewport Width 和 Viewport Height，視窗的寬度和高度，相當(dāng)于 屏幕寬度和高度的 1%，不過，處理寬度的時(shí)候%單位更合適，處理高度的 話 vh 單位更好。
px像素（Pixel）。相對(duì)長度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
一般電腦的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕寬度總共有1920個(gè)像素,后者則是高度為1024個(gè)像素
畫一條0.5px的直線？
?
height : 1px;transform : scale(0.5);
說一下盒模型？
盒模型是css中重要的基礎(chǔ)知識(shí)，也是必考的基礎(chǔ)知識(shí)
盒模型的組成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border這三個(gè)部分的寬度
在標(biāo)準(zhǔn)的盒子模型中，width指content部分的寬度
?box-sizing: content-box 是W3C盒子模型
box-sizing的默認(rèn)屬性是content-box
畫一個(gè)三角形？
這屬于簡單的css考查，平時(shí)在用組件庫的同時(shí)，也別忘了原生的css
清除浮動(dòng)的幾種方式，及原理？
清除浮動(dòng)簡單，但這題要引出的是BFC，BFC也是必考的基礎(chǔ)知識(shí)點(diǎn)
::after / <br> / clear: both創(chuàng)建父級(jí)?BFC(overflow:hidden)
父級(jí)設(shè)置高度
BFC （ 塊級(jí)格式化上下文） ，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于?BFC?內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。
根元素
position: absolute/fixeddisplay: inline-block / tablefloat?元素ovevflow !== visible
屬于同一個(gè)?BFC?的兩個(gè)相鄰?Box?垂直排列
屬于同一個(gè)?BFC?的兩個(gè)相鄰?Box?的?margin?會(huì)發(fā)生重疊
BFC?的區(qū)域不會(huì)與?float?的元素區(qū)域重疊計(jì)算?BFC?的高度時(shí)，浮動(dòng)子元素也參與計(jì)算
文字層不會(huì)被浮動(dòng)層覆蓋，環(huán)繞于周圍
HTML
說一下<label>標(biāo)簽的用法
label標(biāo)簽主要是方便鼠標(biāo)點(diǎn)擊使用，擴(kuò)大可點(diǎn)擊的范圍，增強(qiáng)用戶操作體驗(yàn)
遍歷A節(jié)點(diǎn)的父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
這題考查原生的js操作dom,屬于非常簡單的基礎(chǔ)題，但長時(shí)間使用mvvm框架，可能會(huì)忘記
?
<script > var b=document .getElementById("a" ).parentNode.children; console .log(b) </script >
JS
用js遞歸的方式寫1到100求和？
遞歸我們經(jīng)常用到，vue在實(shí)現(xiàn)雙向綁定進(jìn)行數(shù)據(jù)檢驗(yàn)的時(shí)候用的也是遞歸，但要我們面試的時(shí)候手寫一個(gè)遞歸，如果對(duì)遞歸的概念理解不透徹，可能還是會(huì)有一些問題。
頁面渲染html的過程？
1.瀏覽器解析html源碼，然后創(chuàng)建一個(gè) DOM樹。并行請(qǐng)求 css/image/js在DOM樹中，每一個(gè)HTML標(biāo)簽都有一個(gè)對(duì)應(yīng)的節(jié)點(diǎn)，并且每一個(gè)文本也都會(huì)有一個(gè)對(duì)應(yīng)的文本節(jié)點(diǎn)。DOM樹的根節(jié)點(diǎn)就是 documentElement，對(duì)應(yīng)的是html標(biāo)簽。
2.瀏覽器解析CSS代碼，計(jì)算出最終的樣式數(shù)據(jù)。構(gòu)建CSSOM樹。對(duì)CSS代碼中非法的語法它會(huì)直接忽略掉。解析CSS的時(shí)候會(huì)按照如下順序來定義優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置 < 用戶設(shè)置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style。
3.DOM Tree + CSSOM –> 渲染樹（rendering tree）。渲染樹和DOM樹有點(diǎn)像，但是是有區(qū)別的。
DOM樹完全和html標(biāo)簽一一對(duì)應(yīng)，但是渲染樹會(huì)忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一個(gè)行在渲染樹中都是獨(dú)立的一個(gè)節(jié)點(diǎn)。渲染樹中的每一個(gè)節(jié)點(diǎn)都存儲(chǔ)有對(duì)應(yīng)的css屬性。
4.一旦渲染樹創(chuàng)建好了，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。
以上四個(gè)步驟并不是一次性順序完成的。如果DOM或者CSSOM被修改，以上過程會(huì)被重復(fù)執(zhí)行。實(shí)際上，CSS和JavaScript往往會(huì)多次修改DOM或者CSSOM。
說一下CORS？
CORS是一種新標(biāo)準(zhǔn)，支持同源通信，也支持跨域通信。fetch是實(shí)現(xiàn)CORS通信的
如何中斷ajax請(qǐng)求？
一種是設(shè)置超時(shí)時(shí)間讓ajax自動(dòng)斷開，另一種是手動(dòng)停止ajax請(qǐng)求，其核心是調(diào)用XML對(duì)象的abort方法，ajax.abort()
說一下事件代理？
事件委托是指將事件綁定到目標(biāo)元素的父元素上，利用冒泡機(jī)制觸發(fā)該事件
target、currentTarget的區(qū)別？
currentTarget當(dāng)前所綁定事件的元素
target當(dāng)前被點(diǎn)擊的元素
說一下宏任務(wù)和微任務(wù)？
宏任務(wù)：當(dāng)前調(diào)用棧中執(zhí)行的任務(wù)稱為宏任務(wù)。（主代碼快，定時(shí)器等等）。
微任務(wù)：當(dāng)前（此次事件循環(huán)中）宏任務(wù)執(zhí)行完，在下一個(gè)宏任務(wù)開始之前需要執(zhí)行的任務(wù)為微任務(wù)。（可以理解為回調(diào)事件，promise.then，proness.nextTick等等）。
宏任務(wù)中的事件放在callback queue中，由事件觸發(fā)線程維護(hù)；微任務(wù)的事件放在微任務(wù)隊(duì)列中，由js引擎線程維護(hù)。
說一下繼承的幾種方式及優(yōu)缺點(diǎn)？
說比較經(jīng)典的幾種繼承方式并比較優(yōu)缺點(diǎn)就可以了
借用構(gòu)造函數(shù)繼承，使用call或apply方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上
原型繼承，將子對(duì)象的prototype指向父對(duì)象的一個(gè)實(shí)例
組合繼承
字面量重寫原型會(huì)中斷關(guān)系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)。
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題，但沒有原型，則復(fù)用無從談起。
組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性。
說一下閉包？
閉包的實(shí)質(zhì)是因?yàn)楹瘮?shù)嵌套而形成的作用域鏈
閉包的定義即：函數(shù)?A?內(nèi)部有一個(gè)函數(shù)?B，函數(shù)?B?可以訪問到函數(shù)?A?中的變量，那么函數(shù)?B?就是閉包
export和export default的區(qū)別？
此題是一道開放題，可以自由回答。但要注意像let這種簡單的用法就別說了，說一些經(jīng)常用到并有一定高度的新功能
像module、class、promise等，盡量講的詳細(xì)一點(diǎn)。
什么是會(huì)話cookie,什么是持久cookie?
cookie是服務(wù)器返回的，指定了expire time（有效期）的是持久cookie,沒有指定的是會(huì)話cookie
數(shù)組去重？
此題看著簡單，但要想面試官給你高分還是有難度的。至少也要寫出幾種方法
get、post的區(qū)別
1.get傳參方式是通過地址欄URL傳遞，是可以直接看到get傳遞的參數(shù)，post傳參方式參數(shù)URL不可見，get把請(qǐng)求的數(shù)據(jù)在URL后通過？連接，通過&進(jìn)行參數(shù)分割。psot將參數(shù)存放在HTTP的包體內(nèi)
2.get傳遞數(shù)據(jù)是通過URL進(jìn)行傳遞，對(duì)傳遞的數(shù)據(jù)長度是受到URL大小的限制，URL最大長度是2048個(gè)字符。post沒有長度限制
3.get后退不會(huì)有影響，post后退會(huì)重新進(jìn)行提交
4.get請(qǐng)求可以被緩存，post不可以被緩存
5.get請(qǐng)求只URL編碼，post支持多種編碼方式
6.get請(qǐng)求的記錄會(huì)留在歷史記錄中，post請(qǐng)求不會(huì)留在歷史記錄
7.get只支持ASCII字符，post沒有字符類型限制
你所知道的http的響應(yīng)碼及含義？
此題有過開發(fā)經(jīng)驗(yàn)的都知道幾個(gè)，但還是那句話，一定要回答的詳細(xì)且全面。
100: 請(qǐng)求者應(yīng)當(dāng)繼續(xù)提出請(qǐng)求。
101(切換協(xié)議) 請(qǐng)求者已要求服務(wù)器切換協(xié)議，服務(wù)器已確認(rèn)并準(zhǔn)備進(jìn)行切換。
200：正確的請(qǐng)求返回正確的結(jié)果
201：表示資源被正確的創(chuàng)建。比如說，我們 POST 用戶名、密碼正確創(chuàng)建了一個(gè)用戶就可以返回 201。
202：請(qǐng)求是正確的，但是結(jié)果正在處理中，這時(shí)候客戶端可以通過輪詢等機(jī)制繼續(xù)請(qǐng)求。
300：請(qǐng)求成功，但結(jié)果有多種選擇。
301：請(qǐng)求成功，但是資源被永久轉(zhuǎn)移。
400：請(qǐng)求出現(xiàn)錯(cuò)誤，比如請(qǐng)求頭不對(duì)等。
401：沒有提供認(rèn)證信息。請(qǐng)求的時(shí)候沒有帶上 Token 等。
403：請(qǐng)求的資源不允許訪問。就是說沒有權(quán)限。
501：請(qǐng)求還沒有被實(shí)現(xiàn)。
云和數(shù)據(jù)HTML5全棧精英班，經(jīng)過多年的技術(shù)迭代和項(xiàng)目革新，逐步發(fā)展成為集網(wǎng)站、手機(jī)應(yīng)用、小程序、快應(yīng)用、桌面應(yīng)用、后臺(tái)開發(fā)等多領(lǐng)域開發(fā)課程，新增Egg、TypeScript、Vue、React、HybridAPP等時(shí)下最流行的新技術(shù)，結(jié)合企業(yè)實(shí)際用人需求，只為培養(yǎng)更多高端IT技術(shù)人才。
