最近總結(jié)了一些前端面試一面題目,比較偏基礎(chǔ),大部分題目都應(yīng)該會,即使不會也似曾相識,都能說上幾句。但為什么有些人能過有些人過不了,這就是考查你的基礎(chǔ)知識是否全面且扎實。會是應(yīng)該的,但你的答案一定要詳細(xì)并且有些題要說出多種答案,這就需要各位平常的積累了。
calc, support, media各自的含義及用法? @support主要是用于檢測瀏覽器是否支持CSS的某個屬性,其實就是條件判斷,如果支持某個屬性,你可以寫一套樣式,如果不支持某個屬性,你也可以提供另外一套樣式作為替補。 calc() 函數(shù)用于動態(tài)計算長度值。calc()函數(shù)支持 “+”, “-“, “*”, “/” 運算; @media 查詢,你可以針對不同的媒體類型定義不同的樣式。
css水平、垂直居中的寫法,請至少寫出4種? 這題考查的是css的基礎(chǔ)知識是否全面,所以平時一定要注意多積累
行內(nèi)元素:?text-align: center
塊級元素:?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: center
display:table+display:table-cell + vertical-align: middle; 1rem、1em、1vh、1px各自代表的含義? rem是全部的長度都相對于根元素元素。通常做法是給html元素設(shè)置一個字體大小,然后其他元素的長度單位就為rem。
子元素字體大小的em是相對于父元素字體大小 元素的width/height/padding/margin用em的話是相對于該元素的font-size 全稱是 Viewport Width 和 Viewport Height,視窗的寬度和高度,相當(dāng)于 屏幕寬度和高度的 1%,不過,處理寬度的時候%單位更合適,處理高度的 話 vh 單位更好。 px像素(Pixel)。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。 一般電腦的分辨率有{1920*1024}等不同的分辨率 1920*1024 前者是屏幕寬度總共有1920個像素,后者則是高度為1024個像素
畫一條0.5px的直線?
height : 1px;
transform : scale(0.5);
說一下盒模型? 盒模型是css中重要的基礎(chǔ)知識,也是必考的基礎(chǔ)知識 盒模型的組成,由里向外content,padding,border,margin. 在IE盒子模型中,width表示content+padding+border這三個部分的寬度 在標(biāo)準(zhǔn)的盒子模型中,width指content部分的寬度 ?box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型
box-sizing的默認(rèn)屬性是content-box
畫一個三角形? 這屬于簡單的css考查,平時在用組件庫的同時,也別忘了原生的css 清除浮動的幾種方式,及原理? 清除浮動簡單,但這題要引出的是BFC,BFC也是必考的基礎(chǔ)知識點 ::after / / clear: both
創(chuàng)建父級?BFC
(overflow:hidden) 父級設(shè)置高度 BFC ( 塊級格式化上下文) ,是一個獨立的渲染區(qū)域,讓處于?BFC
?內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會相互影響。根元素 position: absolute/fixed
display: inline-block / table
float
?元素ovevflow !== visible
屬于同一個?BFC
?的兩個相鄰?Box
?垂直排列 屬于同一個?BFC
?的兩個相鄰?Box
?的?margin
?會發(fā)生重疊 BFC
?的區(qū)域不會與?float
?的元素區(qū)域重疊計算?BFC
?的高度時,浮動子元素也參與計算 文字層不會被浮動層覆蓋,環(huán)繞于周圍 HTML 說一下標(biāo)簽的用法 label標(biāo)簽主要是方便鼠標(biāo)點擊使用,擴(kuò)大可點擊的范圍,增強用戶操作體驗 遍歷A節(jié)點的父節(jié)點下的所有子節(jié)點 這題考查原生的js操作dom,屬于非常簡單的基礎(chǔ)題,但長時間使用mvvm框架,可能會忘記
<script >
?var ?b=document .getElementById("a" ).parentNode.children;
?console .log(b)
script >
JS 用js遞歸的方式寫1到100求和? 遞歸我們經(jīng)常用到,vue在實現(xiàn)雙向綁定進(jìn)行數(shù)據(jù)檢驗的時候用的也是遞歸,但要我們面試的時候手寫一個遞歸,如果對遞歸的概念理解不透徹,可能還是會有一些問題。 頁面渲染html的過程? 1.瀏覽器解析html源碼,然后創(chuàng)建一個 DOM樹。并行請求 css/image/js在DOM樹中,每一個HTML標(biāo)簽都有一個對應(yīng)的節(jié)點,并且每一個文本也都會有一個對應(yīng)的文本節(jié)點。DOM樹的根節(jié)點就是 documentElement,對應(yīng)的是html標(biāo)簽。 2.瀏覽器解析CSS代碼,計算出最終的樣式數(shù)據(jù)。構(gòu)建CSSOM樹。對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優(yōu)先級:瀏覽器默認(rèn)設(shè)置 < 用戶設(shè)置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style。 3.DOM Tree + CSSOM –> 渲染樹(rendering tree)。渲染樹和DOM樹有點像,但是是有區(qū)別的。 DOM樹完全和html標(biāo)簽一一對應(yīng),但是渲染樹會忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節(jié)點。渲染樹中的每一個節(jié)點都存儲有對應(yīng)的css屬性。 4.一旦渲染樹創(chuàng)建好了,瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。 以上四個步驟并不是一次性順序完成的。如果DOM或者CSSOM被修改,以上過程會被重復(fù)執(zhí)行。實際上,CSS和JavaScript往往會多次修改DOM或者CSSOM。 說一下CORS? CORS是一種新標(biāo)準(zhǔn),支持同源通信,也支持跨域通信。fetch是實現(xiàn)CORS通信的 如何中斷ajax請求? 一種是設(shè)置超時時間讓ajax自動斷開,另一種是手動停止ajax請求,其核心是調(diào)用XML對象的abort方法,ajax.abort() 說一下事件代理? 事件委托是指將事件綁定到目標(biāo)元素的父元素上,利用冒泡機(jī)制觸發(fā)該事件 target、currentTarget的區(qū)別? currentTarget當(dāng)前所綁定事件的元素 說一下宏任務(wù)和微任務(wù)? 宏任務(wù):當(dāng)前調(diào)用棧中執(zhí)行的任務(wù)稱為宏任務(wù)。(主代碼快,定時器等等)。 微任務(wù):當(dāng)前(此次事件循環(huán)中)宏任務(wù)執(zhí)行完,在下一個宏任務(wù)開始之前需要執(zhí)行的任務(wù)為微任務(wù)。(可以理解為回調(diào)事件,promise.then,proness.nextTick等等)。 宏任務(wù)中的事件放在callback queue中,由事件觸發(fā)線程維護(hù);微任務(wù)的事件放在微任務(wù)隊列中,由js引擎線程維護(hù)。 說一下繼承的幾種方式及優(yōu)缺點? 說比較經(jīng)典的幾種繼承方式并比較優(yōu)缺點就可以了 借用構(gòu)造函數(shù)繼承,使用call或apply方法,將父對象的構(gòu)造函數(shù)綁定在子對象上 原型繼承,將子對象的prototype指向父對象的一個實例 組合繼承 字面量重寫原型會中斷關(guān)系,使用引用類型的原型,并且子類型還無法給超類型傳遞參數(shù)。 借用構(gòu)造函數(shù)雖然解決了剛才兩種問題,但沒有原型,則復(fù)用無從談起。 組合式繼承是比較常用的一種繼承方法,其背后的思路是使用原型鏈實現(xiàn)對原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。這樣,既通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用,又保證每個實例都有它自己的屬性。 說一下閉包? 閉包的實質(zhì)是因為函數(shù)嵌套而形成的作用域鏈 閉包的定義即:函數(shù)?A
?內(nèi)部有一個函數(shù)?B
,函數(shù)?B
?可以訪問到函數(shù)?A
?中的變量,那么函數(shù)?B
?就是閉包 export和export default的區(qū)別?