YXRS游戲人生
今天小編要跟大家分享的文章是關(guān)于2020年Web前端面試題匯總。由于內(nèi)容較多小編分開(kāi)為大家介紹，今天首先來(lái)和小編一起看一看第一部分的內(nèi)容，希望這些面試題能夠?qū)φ郎?zhǔn)備找Web前端相關(guān)工作的小伙伴們有所幫助。1.說(shuō)幾條寫(xiě)JavaScript的基本規(guī)范?1)不要在同一行聲明多個(gè)變量;2)請(qǐng)使用===/!==來(lái)比較true/false或者數(shù)值;3)使用對(duì)象字面量替代newObject這種形式;4)減少使用全局函數(shù),全局變量;5)switch語(yǔ)句必須帶有default分支;6)if語(yǔ)句必須使用大括號(hào);7)for-in循環(huán)中的變量;應(yīng)該使用var關(guān)鍵字明確限定作用域;從而避免作用域全局污染。2.說(shuō)說(shuō)平衡二叉樹(shù)?平衡二叉搜索樹(shù)(Self-balancingbinarysearchtree)又被稱為AVL樹(shù)。具有以下性質(zhì)：1)它是一棵空樹(shù)或它的左右兩個(gè)子樹(shù)的高度差的絕對(duì)值不超過(guò)1，并且左右兩個(gè)子樹(shù)都是一棵平衡二叉樹(shù)。2)平衡二叉樹(shù)必定是二叉搜索樹(shù)，反之則不一定。3)平衡二叉樹(shù)的常用實(shí)現(xiàn)方法有紅黑樹(shù)、AVL、替罪羊樹(shù)、Treap、伸展樹(shù)等。最小二叉平衡樹(shù)的節(jié)點(diǎn)的公式如下：F(n)=F(n-1)+F(n-2)+1備注：1是根節(jié)點(diǎn)，F(xiàn)(n-1)是左子樹(shù)的節(jié)點(diǎn)數(shù)量，F(xiàn)(n-2)是右子樹(shù)的節(jié)點(diǎn)數(shù)量。3.清除浮動(dòng)和解決垂直外邊距重疊的解決方案?問(wèn)題描述:1)父元素沒(méi)有設(shè)置寬高，尺寸由子元素?fù)纹?子元素一旦浮動(dòng)，父元素高度會(huì)發(fā)生塌陷。2)子元素設(shè)置margin-top會(huì)作用的父元素的margin-top;此時(shí)會(huì)造成垂直外邊距重疊。.clearfix::after,.clearfix::before{content:'';display:table;clear:both;}、localStorage和cookie?相同點(diǎn):都用于瀏覽器端存儲(chǔ)的緩存數(shù)據(jù);不同點(diǎn):1)存儲(chǔ)內(nèi)容是否發(fā)送到服務(wù)器端當(dāng)設(shè)置了Cookie后，數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端，造成一定的寬帶浪費(fèi);xxxstorage則會(huì)將數(shù)據(jù)保存到本地，不會(huì)造成寬帶浪費(fèi);2)數(shù)據(jù)存儲(chǔ)大小不同Cookie數(shù)據(jù)不能超過(guò)4K，適用于會(huì)話標(biāo)識(shí);xxxstorage數(shù)據(jù)存儲(chǔ)可以達(dá)到5M;3)數(shù)據(jù)存儲(chǔ)的有效期限不同cookie只在設(shè)置了Cookid過(guò)期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器;sessionStorage,僅在關(guān)閉瀏覽器之前有效;localStorage,數(shù)據(jù)存儲(chǔ)永久有效;4)作用域不同cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面;5.判斷一個(gè)單詞是否是回文?回文是指把相同的詞匯或句子，在下文中調(diào)換位置或顛倒過(guò)來(lái)，產(chǎn)生首尾回環(huán)的情景，叫做回文，也叫回環(huán)。比如cacac，redivider。letcheckPalindrom=(str)=>{returnstr===('').reverse().join('');}6.不借助臨時(shí)變量，進(jìn)行兩個(gè)整數(shù)的交換?輸入a=3,b=1,輸出a=1,b=3letswap=(a,b)=>{b=b-a;a=a+b;b=a-b;return[a,b];}7.請(qǐng)寫(xiě)出至少5個(gè)html5新增的標(biāo)簽，并說(shuō)明其語(yǔ)義和應(yīng)用場(chǎng)景?section：定義文檔中的一個(gè)章節(jié);nav：定義只包含導(dǎo)航鏈接的章節(jié);header：定義頁(yè)面或章節(jié)的頭部;它經(jīng)常包含logo、頁(yè)面標(biāo)題和導(dǎo)航性的目錄。footer：定義頁(yè)面或章節(jié)的尾部;它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。aside：定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容，如果被刪除，剩下的內(nèi)容仍然很合理。和post請(qǐng)求在緩存方面的區(qū)別?get請(qǐng)求類似于查找的過(guò)程，用戶獲取數(shù)據(jù)，可以不用每次都與數(shù)據(jù)庫(kù)連接，所以可以使用緩存。post不同，post做的一般是修改和刪除的工作，所以必須與數(shù)據(jù)庫(kù)交互，所以不能使用緩存。因此get請(qǐng)求適合于請(qǐng)求緩存。9.如何解決異步回調(diào)地獄?promise、generator、async/await10.圖片的懶加載和預(yù)加載?預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。懶加載：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。，apply，call的區(qū)別?通過(guò)apply和call改變函數(shù)的this指向，這兩個(gè)函數(shù)的第一個(gè)參數(shù)都是一樣的，表示要改變指向的那個(gè)對(duì)象，第二個(gè)參數(shù)，apply是數(shù)組，而call則是arg1,arg2...這種形式。通過(guò)bind改變this作用域會(huì)返回一個(gè)新的函數(shù)，這個(gè)函數(shù)不會(huì)馬上執(zhí)行。怎么控制一次加載一張圖片，加載完后再加載下一張?方法一:varobj=newImage();"#/";(){("pic").innnerHTML="";}加載中
壯兒象象
分享幾道前端的面試題，可以做一個(gè)參考：HTML5 中如何嵌入視頻?為什么HTML5里面我們不需要DTD(Document Type Definition文檔類型定義)?行內(nèi)元素、塊級(jí)元素，空元素有那些HTML5 Canvas 元素有什么用?HTML5的form如何關(guān)閉自動(dòng)完成功能?xhtml 中有哪四種模式?HTML5為什么只需要寫(xiě)除了 audio 和 video，HTML5 還有哪些媒體標(biāo)簽?link與@import導(dǎo)入樣式的區(qū)別標(biāo)準(zhǔn)模式與混雜的的區(qū)別
Yoyo030303
1、一般HR會(huì)給你一份面試題，里面是一些js/css基礎(chǔ)內(nèi)容，看你的基本功是否牢固。2、做完試題技術(shù)面試官會(huì)問(wèn)你之前做過(guò)哪些項(xiàng)目經(jīng)驗(yàn)，有何得失，平時(shí)是否自學(xué)等。3、問(wèn)些框架內(nèi)容，比如Jquery,react,vue,angular等，UI框架用過(guò)哪些。4、svn/git是否用過(guò)，webpack打包等5、為什么選擇我們的公司，為什么離職等6、你還有什么問(wèn)題問(wèn)我們的
年輕就要耍大牌
今天小編要跟大家分享的文章是關(guān)于參加Web前端面試的常見(jiàn)面試題匯總。準(zhǔn)備參加Web前端面試的小伙伴們來(lái)和小編一起看一看吧，希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?.漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)漸進(jìn)增強(qiáng)并不是一種技術(shù)，而是一種設(shè)計(jì)思想。各個(gè)瀏覽器的渲染能力各不相同，要做一個(gè)每個(gè)人都能看到的網(wǎng)頁(yè)、感受到的體驗(yàn)都一致的網(wǎng)站幾乎不可能。但還是得網(wǎng)站的可訪問(wèn)性，保證用戶在任何環(huán)境下都能正常訪問(wèn)網(wǎng)頁(yè)得核心內(nèi)容或能使用基本功能(避免網(wǎng)頁(yè)打不開(kāi)、排版錯(cuò)誤等)，并為他們提供當(dāng)前條件下最好的體驗(yàn)，這就是漸進(jìn)增強(qiáng)得核心思想。優(yōu)雅降級(jí)也是一種設(shè)計(jì)思想，為了保證在高版本瀏覽器中提供最好的體驗(yàn)，碰到低版本瀏覽器再降級(jí)進(jìn)行兼容處理，使其能正常瀏覽。這兩種思想的區(qū)別在于：1.漸進(jìn)增強(qiáng)是向上兼容，優(yōu)雅降級(jí)是向下兼容;2.漸進(jìn)增強(qiáng)是從簡(jiǎn)單到復(fù)雜，優(yōu)雅降級(jí)是從復(fù)雜到簡(jiǎn)單;3.漸進(jìn)增強(qiáng)關(guān)注的是內(nèi)容(保證核心內(nèi)容)，優(yōu)雅降級(jí)關(guān)注的是瀏覽體驗(yàn)(為了兼容低版本瀏覽器)作用DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語(yǔ)法規(guī)則，用來(lái)定義XML或(X)HTML的文檔類型。瀏覽器會(huì)使用它來(lái)判斷文檔類型，決定何種協(xié)議來(lái)解析，以及切換瀏覽模式。DOCTYPE是用來(lái)聲明文檔類型和DTD規(guī)范的，一個(gè)主要的用途便是文件的合法性驗(yàn)證。如果文檔代碼不合法，那么瀏覽器解析時(shí)便會(huì)出現(xiàn)一些差錯(cuò)。HTML5的文檔類型聲明：(嚴(yán)格模式)的DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明："">標(biāo)準(zhǔn)模式與怪異模式怪異模式(QuirksMode)用于模擬舊瀏覽器的行為。早期的網(wǎng)站并不會(huì)遵循完整的規(guī)范，隨著瀏覽器支持越來(lái)越多的規(guī)范，在那些舊的瀏覽器中開(kāi)發(fā)的頁(yè)面在顯示時(shí)會(huì)被破壞。為了向后兼容，瀏覽器發(fā)明了怪異模式，一行錯(cuò)誤或無(wú)效的DOCTYPE都會(huì)觸發(fā)怪異模式。瀏覽器使用文件開(kāi)頭的DOCTYPE來(lái)決定用怪異模式處理或標(biāo)準(zhǔn)模式處理。DOCTYPE可以確保不同瀏覽器以相同的方式解析文檔，以及執(zhí)行相同的渲染模式。怪異模式與標(biāo)準(zhǔn)模式的主要區(qū)別：1.怪異模式的寬度和高度會(huì)包含padding和border。標(biāo)準(zhǔn)模式不包含，標(biāo)準(zhǔn)模式下可以通過(guò)設(shè)置box-sizing:border-box將標(biāo)準(zhǔn)盒模型轉(zhuǎn)化成怪異模式下的盒模型。2.怪異模式下，當(dāng)內(nèi)容超出容器高度時(shí)，會(huì)將容器拉伸，而不是溢出。3.怪異模式下，在表格中的字體樣式(如font-size)不會(huì)繼承。4.怪異模式下顏色值必須使用十六進(jìn)制標(biāo)記法。3.語(yǔ)義化HTML5中的語(yǔ)義化就是讓元素、屬性或?qū)傩灾涤泻x，更準(zhǔn)確地標(biāo)記特定類型的內(nèi)容。對(duì)元素語(yǔ)義化的目的是為了讓元素的語(yǔ)義和呈現(xiàn)分離，元素只負(fù)責(zé)文檔內(nèi)容的結(jié)構(gòu)與含義，而CSS樣式控制內(nèi)容的呈現(xiàn)，像元素，沒(méi)有語(yǔ)義但卻能將字體變粗，這類元素違背了語(yǔ)義化的目的，將會(huì)被廢棄。優(yōu)點(diǎn)·使得HTML文檔結(jié)構(gòu)清晰、布局合理、主體突出、可讀性更強(qiáng)?！び欣赟EO，搜索引擎根據(jù)標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重?！し奖闫渌O(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)。·有利于開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。語(yǔ)義化標(biāo)簽·定義文檔的頁(yè)眉區(qū)域,應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器;·footer內(nèi)容的頁(yè)腳，通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息;·article文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目;·nav描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁(yè)面或頁(yè)面內(nèi)部其他部分的鏈接列表;·section表示文檔中的一個(gè)區(qū)域(或節(jié))，比如，內(nèi)容中的一個(gè)專題組;·main定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無(wú)二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框(搜索框作為文檔的主要內(nèi)容);·aside表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無(wú)關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來(lái)而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。4.超鏈接偽類:link、:visited、:active和:hover的聲明順序是怎樣的?:link表示未訪問(wèn)的鏈接狀態(tài);:visited表示已訪問(wèn)狀態(tài);:active表示激活狀態(tài)(鼠標(biāo)按下);:hover表示懸停狀態(tài)。推薦順序是LVHA，即:link:visited:hover:active。理由如下：·當(dāng)鼠標(biāo)懸停在未訪問(wèn)的鏈接上時(shí)，:link和:hover都會(huì)命中，如果:hover在:link之前聲明，那么(:hover)就會(huì)被覆蓋;·當(dāng)鼠標(biāo)懸停在已訪問(wèn)的連接上時(shí)，:visited和:hover都會(huì)命中，如果:hover在:visited之前聲明，那么(:hover)就會(huì)被覆蓋;·當(dāng)鼠標(biāo)單擊鏈接時(shí)，:active和:hover都會(huì)命中，我們大多是想讓:hover只在懸停時(shí)展示樣式，按下鼠標(biāo)時(shí)使用:active樣式，因此:active在:hover之后聲明;·綜上，:hover應(yīng)在:link和:visited之后，在:active之前，因此active在最后。而:link和:visited兩者的順序無(wú)所謂，互不影響。常見(jiàn)的長(zhǎng)度單位CSS中除了px長(zhǎng)度單位之外，還有下面幾個(gè)長(zhǎng)度單位：·pc六分之一英寸，1pc=12pt=1/6*1in=16px;·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈;·in一英寸，1in=;·ex在含有“X”字母的字體中，它是該字體的小寫(xiě)字母的高度。對(duì)于很多字體來(lái)說(shuō)，1ex≈;·em1em等于父級(jí)元素的字體大小，2em就是父級(jí)元素字體大小的二倍;·rem當(dāng)用在根元素()的font-size上面時(shí)，它代表了它的初始值;·ch代表元素所用字體font中“0”這一字形的寬度;·vh1vh相當(dāng)于視口高度的1%，100vh就是視口的高度;·vw1vw相當(dāng)于視口寬度的1%，100vw就是視口的寬度;·vmax視口高度vw和寬度vh兩者中的最小值·vmin視口高度vw和寬度vh兩種中的最大值;·%相對(duì)于父級(jí)元素的大小來(lái)確定;參考：CSS[1]CSSpercentage[2]6.事件對(duì)象冒泡與捕獲事件冒泡與捕獲是事件處理的兩種機(jī)制，主要描述當(dāng)在一個(gè)元素上有兩個(gè)相同類型的事件處理器被激活會(huì)發(fā)生什么。在點(diǎn)擊子元素時(shí)，瀏覽器運(yùn)行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊(cè)了一個(gè)onclick事件處理程序，如果是，則運(yùn)行它;·然后，它移動(dòng)到中單擊元素的下一個(gè)祖先元素，并執(zhí)行相同的操作，然后是單擊元素再下一個(gè)祖先元素，依此類推，直到到達(dá)實(shí)際點(diǎn)擊的元素;而冒泡與捕獲恰恰相反：·瀏覽器檢查實(shí)際點(diǎn)擊的元素是否在冒泡階段中注冊(cè)了一個(gè)onclick事件處理程序，如果是，則運(yùn)行它;·然后它移動(dòng)到下一個(gè)直接的祖先元素，并做同樣的事情，然后是下一個(gè)，等等，直到它到達(dá)元素;而現(xiàn)代瀏覽器在默認(rèn)情況下，所有事件處理程序都在冒泡階段進(jìn)行注冊(cè)。因此上面代碼在點(diǎn)擊子元素時(shí)會(huì)先執(zhí)行子元素綁定的事件，然后向上冒泡，觸發(fā)父元素綁定的事件。addEventListener函數(shù)的第三個(gè)參數(shù)是個(gè)布爾值。含義：·當(dāng)布爾值是false時(shí)(這也是默認(rèn)值)，表示向上冒泡觸發(fā)事件;·當(dāng)布爾值是true時(shí)，表示向下捕獲觸發(fā)事件;不能冒泡的事件有些事件是不會(huì)冒泡的。比如：·blur元素失去焦點(diǎn)時(shí)觸發(fā)，focusout事件也是失去焦點(diǎn)時(shí)觸發(fā)，但可以冒泡;·focus元素獲取焦點(diǎn)時(shí)觸發(fā);·mouseenter鼠標(biāo)移動(dòng)到元素上時(shí)會(huì)觸發(fā)該事件，與之對(duì)應(yīng)的是mouseover事件，但會(huì)冒泡;·mouseleave鼠標(biāo)離開(kāi)元素時(shí)觸發(fā)，與之對(duì)應(yīng)的是mouseout，但會(huì)冒泡;事件冒泡可以讓我們利用事件委托，尤其是處理大量子元素時(shí)，如果給每個(gè)子元素都綁定事件，這是不優(yōu)雅的，可以將事件綁定到父元素上，并讓子節(jié)點(diǎn)上發(fā)生的事件冒泡到父節(jié)點(diǎn)上，利用屬性可以獲取到當(dāng)前觸發(fā)事件的子元素。事件對(duì)象中的方法·stopPropagation()阻止事件冒泡，當(dāng)設(shè)置后，點(diǎn)擊該元素時(shí)父元素綁定的事件就不會(huì)再觸發(fā);·preventDefault()阻止默認(rèn)事件的發(fā)生;·stopImmediatePropagation()它用來(lái)阻止監(jiān)聽(tīng)同一事件的其他事件監(jiān)聽(tīng)器被調(diào)用以及阻止事件冒泡，比如給同一個(gè)div元素綁定多個(gè)click事件(使用addEventListener方法可以注冊(cè)多個(gè))，當(dāng)在第二個(gè)事件函數(shù)中調(diào)用stopImmediatePropagation方法時(shí)，點(diǎn)擊div元素時(shí)，后面注冊(cè)的click將不會(huì)被觸發(fā)，而且還會(huì)阻止事件冒泡;比如下面的例子，給p綁定多個(gè)click事件，在第二個(gè)事件函數(shù)中調(diào)用stopImmediatePropagation，第三個(gè)click事件就不會(huì)觸發(fā)，因?yàn)橐沧柚沽嗣芭?，因此父元素的click事件也不會(huì)觸發(fā)。paragraph
("div").addEventListener("click",(event)=>{
alert("我是div元素,我是p元素的上層元素");
//p元素的click事件沒(méi)有向上冒泡，該函數(shù)不會(huì)被執(zhí)行
},false);
constp=('p')
("click",(event)=>{
alert("我是p元素上被綁定的第一個(gè)監(jiān)聽(tīng)函數(shù)");
},false);
("click",(event)=>{
alert("我是p元素上被綁定的第二個(gè)監(jiān)聽(tīng)函數(shù)");
();
//執(zhí)行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上綁定的其他click
事件的事件監(jiān)聽(tīng)函數(shù)的執(zhí)行.
},false);
("click",(event)=>{
alert("我是p元素上被綁定的第三個(gè)監(jiān)聽(tīng)函數(shù)");
//該監(jiān)聽(tīng)函數(shù)排在上個(gè)函數(shù)后面，該函數(shù)不會(huì)被執(zhí)行
},false);
“在IE瀏覽器中，使用也可以取消事件冒泡;使用也能阻止默認(rèn)事件的發(fā)生。target與currentTargettarget屬性指向的是事件目標(biāo)，而currentTarget屬性指向的是正在處理當(dāng)前事件的對(duì)象，它總是指向事件綁定的元素。而target指向的可能不是定義時(shí)的事件目標(biāo)。例如：('click',(e)=>{();},false);可能指向div元素，也可能指向它的子元素。而總是指向div元素。以上就是小編今天為大家分享的關(guān)于參加Web前端面試的常見(jiàn)面試題匯總的文章，希望本篇文章能夠?qū)φ郎?zhǔn)備參加前端面試的小伙伴們有所幫助，想要了解更多Web前端知識(shí)記得關(guān)注北大青鳥(niǎo)Web前端培訓(xùn)官網(wǎng)，最后祝愿小伙伴們工作順利，成為一名優(yōu)秀的Web前端工程師。參考資料[1]CSSlength:#/zh-CN/docs/Web/CSS/length[2]CSSpercentage:#/zh-CN/docs/Web/CSS/percentage
優(yōu)質(zhì)工程師考試問(wèn)答知識(shí)庫(kù)
