今天給各位分享高級前端開發(fā)面試題150道的知識(shí)，其中也會(huì)對高級前端開發(fā)面試題150道題進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、WEB前端面試題
• 2、Web前端面試的常見面試題匯總
• 3、前端常見面試題
• 4、前端經(jīng)典面試題(60道前端面試題包含JS、CSS、React、瀏覽器等)
• 5、有哪些經(jīng)典的前端開發(fā)面試題及答案解析
• 6、Web前端崗位面試題有哪些

WEB前端面試題

第二章 面試題基礎(chǔ)篇

2.1 HTML面試題

面試題：行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

面試題：頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

面試題：title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

面試題：img標(biāo)簽的title和alt有什么區(qū)別？

面試題：png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用？

2.2 CSS面試題

面試題：css背景紋路

面試題：介紹一下CSS的盒子模型

面試題：CSS選擇符有哪些？哪些屬性可以繼承？

面試題：CSS優(yōu)先級算法如何計(jì)算？

面試題：用CSS畫一個(gè)三角形

面試題：一個(gè)盒子不給寬度和高度如何水平垂直居中？

面試題：display有哪些值？說明他們的作用。

面試題：對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？

面試題：清除浮動(dòng)有哪些方式？

面試題：在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

面試題：寫一個(gè)左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應(yīng)寬，要求先加載中間塊，請寫出結(jié)構(gòu)及樣式。

面試題：什么是CSS reset？

面試題：css sprite是什么,有什么優(yōu)缺點(diǎn)

面試題：display: none;與visibility: hidden;的區(qū)別

面試題：position有哪些值?有什么作用? 【特別多公司問】

面試題：line-height和height有什么區(qū)別？

面試題：opacity 和 rgba區(qū)別

2.3 JavaScript基礎(chǔ)面試題

面試題：延遲加載JS有哪些方式？

面試題：JS數(shù)據(jù)類型有哪些？

面試題：null和undefined的區(qū)別

面試題：JS數(shù)據(jù)類型考題

面試題：==和===有什么不同

面試題：JS微任務(wù)和宏任務(wù)

面試題：JS作用域考題

面試題：JS對象考題

面試題：JS作用域+this指向+原型 考題

面試題：JS判斷變量是不是數(shù)組，你能寫出哪些方法？

面試題：slice是干嘛的、splice是否會(huì)改變原數(shù)組

面試題：JS數(shù)組去重

面試題：找出多維數(shù)組最大值

面試題：給字符串新增方法實(shí)現(xiàn)功能

面試題：找出字符串出現(xiàn)最多次數(shù)的字符以及次數(shù)

2.4 真正移動(dòng)端 —— H5/C3面試題

面試題：什么是語義化標(biāo)簽

面試題：::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用。

面試題：如何關(guān)閉iOS鍵盤首字母自動(dòng)大寫

面試題：怎么讓Chrome支持小于12px 的文字？

面試題：rem和em有什么樣區(qū)別

面試題：ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉

面試題：webkit表單輸入框placeholder的顏色值能改變嗎？

面試題：禁止ios 長按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止iosandroid長按時(shí)下載圖片

面試題：禁止ios和android用戶選中文字

面試題：自適應(yīng) [淘寶無線適配]

面試題：響應(yīng)式

第三章 面試題進(jìn)階篇

3.1 JavaScript進(jìn)階面試題

面試題：new操作符具體做了什么

面試題：閉包 【必須會(huì)】

面試題：原型鏈 【必須會(huì)】

面試題： JS繼承有哪些方式

面試題：說一下call、apply、bind區(qū)別

面試題：sort背后原理是什么？

面試題：深拷貝和淺拷貝

面試題：localstorage、sessionstorage、cookie的區(qū)別

3.2 ES6面試題

面試題：var、let、const區(qū)別

面試題：作用域考題

面試題：將下列對象進(jìn)行合并

面試題：箭頭函數(shù)和普通函數(shù)有什么區(qū)別？

面試題：Promise有幾種狀態(tài)

面試題：find和filter的區(qū)別 【大廠】

面試題：some和every的區(qū)別 【大廠】

3.3 webpack面試題

面試題：webpack插件

3.4 Git面試題

面試題：git常用命令

面試題：解決沖突

面試題：GitFlow

第四章 面試題框架篇

4.1 區(qū)分初中高級的 —— Vue面試題

面試題：Vue2.x 生命周期有哪些？

1.系統(tǒng)自帶八個(gè)

2.當(dāng)一旦進(jìn)入到某個(gè)組件會(huì)執(zhí)行哪些生命周期

3.$el和$data在哪個(gè)階段有

4.如果使用keep-alive會(huì)多倆個(gè)生命周期

5.如果加入keep-alive第一次進(jìn)入組件會(huì)執(zhí)行哪些生命周期

6.如果加入keep-alive第二次或者第N進(jìn)入該組件會(huì)執(zhí)行哪些生命周期

面試題：談?wù)勀銓eep-alive的了解

面試題：v-if和v-show區(qū)別

面試題：v-if和v-for優(yōu)先級 2.x

面試題：ref是什么？

面試題：nextTick是什么？

面試題：Vue中如何做樣式穿透

面試題：scoped原理

面試題：Vuex是單向數(shù)據(jù)流還是雙向數(shù)據(jù)流？

面試題：講一下MVVM

面試題：雙向綁定原理

面試題：什么是虛擬DOM

面試題：key是干什么？

面試題：diff算法

面試題：Vue組件傳值

面試題：props和data優(yōu)先級誰高？

面試題：computed、methods、watch有什么區(qū)別？

面試題：Vuex

面試題：Vue路由

面試題：Vue項(xiàng)目打包后出現(xiàn)空白頁

4.2 微信小程序面試題

面試題：如何自定義頭部？

面試題：如何自定義底部？

4.3 uni-app面試題

面試題：生命周期

面試題：條件編譯

第五章 面試題性能優(yōu)化篇

Web前端面試的常見面試題匯總

今天小編要跟大家分享的文章是關(guān)于參加Web前端面試的常見面試題匯總。準(zhǔn)備參加Web前端面試的小伙伴們來和小編一起看一看吧，希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?/p>

1.漸進(jìn)增強(qiáng)與優(yōu)雅降級

漸進(jìn)增強(qiáng)

并不是一種技術(shù)，而是一種設(shè)計(jì)思想。各個(gè)瀏覽器的渲染能力各不相同，要做一個(gè)每個(gè)人都能看到的網(wǎng)頁、感受到的體驗(yàn)都一致的網(wǎng)站幾乎不可能。但還是得網(wǎng)站的可訪問性，保證用戶在任何環(huán)境下都能正常訪問網(wǎng)頁得核心內(nèi)容或能使用基本功能(避免網(wǎng)頁打不開、排版錯(cuò)誤等)，并為他們提供當(dāng)前條件下最好的體驗(yàn)，這就是漸進(jìn)增強(qiáng)得核心思想。

優(yōu)雅降級也是一種設(shè)計(jì)思想，為了保證在高版本瀏覽器中提供最好的體驗(yàn)，碰到低版本瀏覽器再降級進(jìn)行兼容處理，使其能正常瀏覽。

這兩種思想的區(qū)別在于：

1.漸進(jìn)增強(qiáng)是向上兼容，優(yōu)雅降級是向下兼容;

2.漸進(jìn)增強(qiáng)是從簡單到復(fù)雜，優(yōu)雅降級是從復(fù)雜到簡單;

3.漸進(jìn)增強(qiáng)關(guān)注的是內(nèi)容(保證核心內(nèi)容)，優(yōu)雅降級關(guān)注的是瀏覽體驗(yàn)(為了兼容低版本瀏覽器)

2.DOCTYPE

作用

DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規(guī)則，用來定義XML或(X)HTML

的文檔類型。瀏覽器會(huì)使用它來判斷文檔類型，決定何種協(xié)議來解析，以及切換瀏覽模式。

DOCTYPE是用來聲明文檔類型和DTD

規(guī)范的，一個(gè)主要的用途便是文件的合法性驗(yàn)證。如果文檔代碼不合法，那么瀏覽器解析時(shí)便會(huì)出現(xiàn)一些差錯(cuò)。

HTML5的文檔類型聲明：

HTML4.01Strict(HTML4.01嚴(yán)格模式)的DTD包含所有HTML

元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：

-//W3C//DTDXHTML1.0Strict//EN"

""

標(biāo)準(zhǔn)模式與怪異模式

怪異模式(Quirks

Mode)用于模擬舊瀏覽器的行為。早期的網(wǎng)站并不會(huì)遵循完整的規(guī)范，隨著瀏覽器支持越來越多的規(guī)范，在那些舊的瀏覽器中開發(fā)的頁面在顯示時(shí)會(huì)被破壞。為了向后兼容，瀏覽器發(fā)明了怪異模式，一行錯(cuò)誤或無效的

DOCTYPE都會(huì)觸發(fā)怪異模式。

瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標(biāo)準(zhǔn)模式處理。DOCTYPE

可以確保不同瀏覽器以相同的方式解析文檔，以及執(zhí)行相同的渲染模式。

怪異模式與標(biāo)準(zhǔn)模式的主要區(qū)別：

1.怪異模式的寬度和高度會(huì)包含padding和border。標(biāo)準(zhǔn)模式不包含，標(biāo)準(zhǔn)模式下可以通過設(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.語義化

HTML5

中的語義化就是讓元素、屬性或?qū)傩灾涤泻x，更準(zhǔn)確地標(biāo)記特定類型的內(nèi)容。對元素語義化的目的是為了讓元素的語義和呈現(xiàn)分離，元素只負(fù)責(zé)文檔內(nèi)容的結(jié)構(gòu)與含義，而CSS

樣式控制內(nèi)容的呈現(xiàn)，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會(huì)被廢棄。

優(yōu)點(diǎn)

·使得HTML文檔結(jié)構(gòu)清晰、布局合理、主體突出、可讀性更強(qiáng)。

·有利于SEO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。

·方便其他設(shè)備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁。

·有利于開發(fā)和維護(hù)，語義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。

語義化標(biāo)簽

·定義文檔的頁眉區(qū)域,應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器;

·footer內(nèi)容的頁腳，通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息;

·article

文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目;

·nav描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁面或頁面內(nèi)部其他部分的鏈接列表;

·section表示文檔中的一個(gè)區(qū)域(或節(jié))，比如，內(nèi)容中的一個(gè)專題組;

·main定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站

logo，搜索框(搜索框作為文檔的主要內(nèi)容);

·aside

表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

4.超鏈接偽類

:link、:visited、:active和:hover的聲明順序是怎樣的?

:link表示未訪問的鏈接狀態(tài);

:visited表示已訪問狀態(tài);:active表示激活狀態(tài)(鼠標(biāo)按下);:hover表示懸停狀態(tài)。

推薦順序是LVHA，即:link:visited:hover:active。理由如下：

·當(dāng)鼠標(biāo)懸停在未訪問的鏈接上時(shí)，:link和:hover都會(huì)命中，如果:hover在:link

之前聲明，那么(:hover)就會(huì)被覆蓋;

·當(dāng)鼠標(biāo)懸停在已訪問的連接上時(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兩者的順序無所謂，互不影響。

5.CSS常見的長度單位

CSS中除了px長度單位之外，還有下面幾個(gè)長度單位：

·pc六分之一英寸，1pc=12pt=1/6*1in=16px;

·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;

·in一英寸，1in=2.54cm=96px;

·ex在含有“X”字母的字體中，它是該字體的小寫字母的高度。對于很多字體來說，1ex≈0.5em;

·em1em等于父級元素的字體大小，2em就是父級元素字體大小的二倍;

·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兩種中的最大值;

·%相對于父級元素的大小來確定;

參考：CSS[1]

CSSpercentage[2]

6.事件對象

冒泡與捕獲

事件冒泡與捕獲是事件處理的兩種機(jī)制，主要描述當(dāng)在一個(gè)元素上有兩個(gè)相同類型的事件處理器被激活會(huì)發(fā)生什么。

在點(diǎn)擊子元素時(shí)，瀏覽器運(yùn)行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：

·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個(gè)onclick事件處理程序，如果是，則運(yùn)行它;

·

然后，它移動(dòng)到中單擊元素的下一個(gè)祖先元素，并執(zhí)行相同的操作，然后是單擊元素再下一個(gè)祖先元素，依此類推，直到到達(dá)實(shí)際點(diǎn)擊的元素;

而冒泡與捕獲恰恰相反：

·瀏覽器檢查實(shí)際點(diǎn)擊的元素是否在冒泡階段中注冊了一個(gè)onclick事件處理程序，如果是，則運(yùn)行它;

·然后它移動(dòng)到下一個(gè)直接的祖先元素，并做同樣的事情，然后是下一個(gè)，等等，直到它到達(dá)元素;

而現(xiàn)代瀏覽器在默認(rèn)情況下，所有事件處理程序都在冒泡階段進(jìn)行注冊。因此上面代碼在點(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ā)該事件，與之對應(yīng)的是mouseover事件，但會(huì)冒泡;

·mouseleave鼠標(biāo)離開元素時(shí)觸發(fā)，與之對應(yīng)的是mouseout，但會(huì)冒泡;

事件冒泡可以讓我們利用事件委托，尤其是處理大量子元素時(shí)，如果給每個(gè)子元素都綁定事件，這是不優(yōu)雅的，可以將事件綁定到父元素上，并讓子節(jié)點(diǎn)上發(fā)生的事件冒泡到父節(jié)點(diǎn)上，利用

e.target屬性可以獲取到當(dāng)前觸發(fā)事件的子元素。

事件對象中的方法

·stopPropagation()阻止事件冒泡，當(dāng)設(shè)置后，點(diǎn)擊該元素時(shí)父元素綁定的事件就不會(huì)再觸發(fā);

·preventDefault()阻止默認(rèn)事件的發(fā)生;

·stopImmediatePropagation()它用來阻止監(jiān)聽同一事件的其他事件監(jiān)聽器被調(diào)用以及阻止事件冒泡，比如給同一個(gè)div

元素綁定多個(gè)click事件(使用addEventListener方法可以注冊多個(gè))，當(dāng)在第二個(gè)事件函數(shù)中調(diào)用

stopImmediatePropagation方法時(shí)，點(diǎn)擊div元素時(shí)，后面注冊的click將不會(huì)被觸發(fā)，而且還會(huì)阻止事件冒泡;

比如下面的例子，給p綁定多個(gè)click事件，在第二個(gè)事件函數(shù)中調(diào)用stopImmediatePropagation，第三個(gè)click

事件就不會(huì)觸發(fā)，因?yàn)橐沧柚沽嗣芭?，因此父元素的click事件也不會(huì)觸發(fā)。

paragraph

document.querySelector("div").addEventListener("click",(event)=>{


alert("我是div元素,我是p元素的上層元素");


//p元素的click事件沒有向上冒泡，該函數(shù)不會(huì)被執(zhí)行


},false);


constp=document.querySelector('p')


p.addEventListener("click",(event)=>{


alert("我是p元素上被綁定的第一個(gè)監(jiān)聽函數(shù)");


},false);


p.addEventListener("click",(event)=>{


alert("我是p元素上被綁定的第二個(gè)監(jiān)聽函數(shù)");


event.stopImmediatePropagation();


//執(zhí)行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上綁定的其他click
事件的事件監(jiān)聽函數(shù)的執(zhí)行.


},false);


p.addEventListener("click",(event)=>{


alert("我是p元素上被綁定的第三個(gè)監(jiān)聽函數(shù)");


//該監(jiān)聽函數(shù)排在上個(gè)函數(shù)后面，該函數(shù)不會(huì)被執(zhí)行


},false);

“

在IE瀏覽器中，使用e.cancelBubble=true也可以取消事件冒泡;使用e.returnValue=false

也能阻止默認(rèn)事件的發(fā)生。

target與currentTarget

target屬性指向的是事件目標(biāo)，而currentTarget屬性指向的是正在處理當(dāng)前事件的對象，它總是指向事件綁定的元素。而target

指向的可能不是定義時(shí)的事件目標(biāo)。

例如：

div.addEventListener('click',(e)={

console.log(e.target,e.currentTarget);

},false);

e.target可能指向div元素，也可能指向它的子元素。而e.currentTarget總是指向div元素。

以上就是小編今天為大家分享的關(guān)于參加Web前端面試的常見面試題匯總的文章，希望本篇文章能夠?qū)φ郎?zhǔn)備參加前端面試的小伙伴們有所幫助，想要了解更多Web前端知識(shí)記得關(guān)注北大青鳥Web前端培訓(xùn)官網(wǎng)，最后祝愿小伙伴們工作順利，成為一名優(yōu)秀的Web前端工程師。

參考資料

[1]

CSSlength:#/zh-CN/docs/Web/CSS/length

[2]

CSSpercentage:

#/zh-CN/docs/Web/CSS/percentage

前端常見面試題

前端開發(fā)可能問到的問題：

自我介紹（一定要對項(xiàng)目很熟悉）

ui-app web前端技術(shù)體系？

響應(yīng)式怎么做？

render跟狀態(tài)的差異

類組件的生命周期？

阻止冒泡，阻止事件默認(rèn)行為

文本垂直居中。 line-height設(shè)置為元素高度。

用reduce講數(shù)組中的對象進(jìn)行合并

解釋localstorage sessionstorage cookie

eventbus滿足event.on('eventname', callback)

display有幾個(gè)值？默認(rèn)值？

position有幾個(gè)值？默認(rèn)值？

div水平垂直居中？

position有哪些值

react相關(guān)問題（概念理解、通訊組件等）、react常用內(nèi)置

React-router

html+css

頁面增刪改查

position的值 absolute relative fixed static

工作中是怎么聯(lián)調(diào)和上線的（現(xiàn)場想合適的前后端聯(lián)調(diào)方式，能和webpack環(huán)境切換聯(lián)系起來）

antd的Form shouldUpdate增量更新方式，性能優(yōu)化。

對Hooks的理解

3:操作dom點(diǎn)擊事件向服務(wù)器上傳數(shù)據(jù)，在上傳未完成之前不可重復(fù)操作事件

4:日期格式化，日期不足前兩位補(bǔ)0（2021-06-06 06:06:00）

用css寫一個(gè)布局，左側(cè)固定寬度，右側(cè)自適應(yīng)

你看

前端經(jīng)典面試題(60道前端面試題包含JS、CSS、React、瀏覽器等)

防抖

節(jié)流

誤區(qū)：我們經(jīng)常說get請求參數(shù)的大小存在限制，而post請求的參數(shù)大小是無限制的。

實(shí)際上HTTP 協(xié)議從未規(guī)定 GET/POST 的請求長度限制是多少。對get請求參數(shù)的限制是來源與瀏覽器或web服務(wù)器，瀏覽器或web服務(wù)器限制了url的長度。為了明確這個(gè)概念，我們必須再次強(qiáng)調(diào)下面幾點(diǎn):

補(bǔ)充補(bǔ)充一個(gè)get和post在緩存方面的區(qū)別：

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

vue和react都是采用diff算法來對比新舊虛擬節(jié)點(diǎn)，從而更新節(jié)點(diǎn)。在vue的diff函數(shù)中（建議先了解一下diff算法過程）。在交叉對比中，當(dāng)新節(jié)點(diǎn)跟舊節(jié)點(diǎn) 頭尾交叉對比 沒有結(jié)果時(shí)，會(huì)根據(jù)新節(jié)點(diǎn)的key去對比舊節(jié)點(diǎn)數(shù)組中的key，從而找到相應(yīng)舊節(jié)點(diǎn)（這里對應(yīng)的是一個(gè)key = index 的map映射）。如果沒找到就認(rèn)為是一個(gè)新增節(jié)點(diǎn)。而如果沒有key，那么就會(huì)采用遍歷查找的方式去找到對應(yīng)的舊節(jié)點(diǎn)。一種一個(gè)map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：

創(chuàng)建map函數(shù)

遍歷尋找

在React中， 如果是由React引發(fā)的事件處理（比如通過onClick引發(fā)的事件處理），調(diào)用setState不會(huì)同步更新this.state，除此之外的setState調(diào)用會(huì)同步執(zhí)行this.state 。所謂“除此之外”，指的是繞過React通過addEventListener直接添加的事件處理函數(shù)，還有通過setTimeout/setInterval產(chǎn)生的異步調(diào)用。

**原因：**在React的setState函數(shù)實(shí)現(xiàn)中，會(huì)根據(jù)一個(gè)變量isBatchingUpdates判斷是直接更新this.state還是放到隊(duì)列中回頭再說，而isBatchingUpdates默認(rèn)是false，也就表示setState會(huì)同步更新this.state，但是， 有一個(gè)函數(shù)batchedUpdates，這個(gè)函數(shù)會(huì)把isBatchingUpdates修改為true，而當(dāng)React在調(diào)用事件處理函數(shù)之前就會(huì)調(diào)用這個(gè)batchedUpdates，造成的后果，就是由React控制的事件處理過程setState不會(huì)同步更新this.state 。

虛擬dom相當(dāng)于在js和真實(shí)dom中間加了一個(gè)緩存，利用dom diff算法避免了沒有必要的dom操作，從而提高性能。

具體實(shí)現(xiàn)步驟如下：

用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)；然后用這個(gè)樹構(gòu)建一個(gè)真正的 DOM 樹，插到文檔當(dāng)中

當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進(jìn)行比較，記錄兩棵樹差異

把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上，視圖就更新了。

結(jié)構(gòu)：display:none: 會(huì)讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任何空間, 不能點(diǎn)擊， visibility: hidden:不會(huì)讓元素從渲染樹消失，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見，不能點(diǎn)擊 opacity: 0: 不會(huì)讓元素從渲染樹消失，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見，可以點(diǎn)擊

繼承：display: none：是非繼承屬性，子孫節(jié)點(diǎn)消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點(diǎn)屬性無法顯示。visibility: hidden：是繼承屬性，子孫節(jié)點(diǎn)消失由于繼承了hidden，通過設(shè)置visibility: visible;可以讓子孫節(jié)點(diǎn)顯式。

性能：displaynone : 修改元素會(huì)造成文檔回流,讀屏器不會(huì)讀取display: none元素內(nèi)容，性能消耗較大 visibility:hidden: 修改元素只會(huì)造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內(nèi)容 opacity: 0 ：修改元素會(huì)造成重繪，性能消耗較少

聯(lián)系：它們都能讓元素不可見

常用的一般為三種 .clearfix , clear:both , overflow:hidden ;

比較好是 .clearfix ,偽元素萬金油版本,后兩者有局限性.

clear:both :若是用在同一個(gè)容器內(nèi)相鄰元素上,那是賊好的,有時(shí)候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷

overflow:hidden :這種若是用在同個(gè)容器內(nèi),可以形成 BFC 避免浮動(dòng)造成的元素塌陷

概念：將多個(gè)小圖片拼接到一個(gè)圖片中。通過 background-position 和元素尺寸調(diào)節(jié)需要顯示的背景圖案。

優(yōu)點(diǎn)：

缺點(diǎn)：

block 元素特點(diǎn)：

1.處于常規(guī)流中時(shí)，如果 width 沒有設(shè)置，會(huì)自動(dòng)填充滿父容器 2.可以應(yīng)用 margin/padding 3.在沒有設(shè)置高度的情況下會(huì)擴(kuò)展高度以包含常規(guī)流中的子元素 4.處于常規(guī)流中時(shí)布局時(shí)在前后元素位置之間（獨(dú)占一個(gè)水平空間） 5.忽略 vertical-align

inline 元素特點(diǎn)

1.水平方向上根據(jù) direction 依次布局

2.不會(huì)在元素前后進(jìn)行換行

3.受 white-space 控制

4. margin/padding 在豎直方向上無效，水平方向上有效

5. width/height 屬性對非替換行內(nèi)元素?zé)o效，寬度由元素內(nèi)容決定

6.非替換行內(nèi)元素的行框高由 line-height 確定，替換行內(nèi)元素的行框高由 height , margin , padding , border 決定 7.浮動(dòng)或絕對定位時(shí)會(huì)轉(zhuǎn)換為 block 8. vertical-align 屬性生效

GIF :

JPEG ：

PNG ：

七種數(shù)據(jù)類型

(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,

ES6出來的 Symbol 也是原始數(shù)據(jù)類型 ，表示獨(dú)一無二的值

Object 為引用類型(范圍挺大),也包括數(shù)組、函數(shù),

輸出結(jié)果是：

工廠模式

簡單的工廠模式可以理解為解決多個(gè)相似的問題;

單例模式

只能被實(shí)例化(構(gòu)造函數(shù)給實(shí)例添加屬性與方法)一次

沙箱模式

將一些函數(shù)放到自執(zhí)行函數(shù)里面,但要用閉包暴露接口,用變量接收暴露的接口,再調(diào)用里面的值,否則無法使用里面的值

1.字面量

2.Object構(gòu)造函數(shù)創(chuàng)建

3.使用工廠模式創(chuàng)建對象

4.使用構(gòu)造函數(shù)創(chuàng)建對象

HTML中與javascript交互是通過事件驅(qū)動(dòng)來實(shí)現(xiàn)的，例如鼠標(biāo)點(diǎn)擊事件onclick、頁面的滾動(dòng)事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預(yù)訂事件。想要知道這些事件是在什么時(shí)候進(jìn)行調(diào)用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個(gè)階段。

addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個(gè)方法接收3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

IE只支持事件冒泡 。

獲取一個(gè)對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。

那么Function.proto是什么么？也就是說Function由什么對象繼承而來，我們來做如下判別。

我們發(fā)現(xiàn)Function的原型也是Function。

我們用圖可以來明確這個(gè)關(guān)系：

這里來舉個(gè)栗子，以 Object 為例，我們常用的 Object 便是一個(gè)構(gòu)造函數(shù)，因此我們可以通過它構(gòu)建實(shí)例。

則此時(shí)， 實(shí)例為instance , 構(gòu)造函數(shù)為Object ，我們知道，構(gòu)造函數(shù)擁有一個(gè) prototype 的屬性指向原型，因此原型為:

這里我們可以來看出三者的關(guān)系:

在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，并可以通過原型鏈繼承原型上的屬性或者方法。

在函數(shù)式編程中，函數(shù)是一等公民。那么函數(shù)柯里化是怎樣的呢？

函數(shù)柯里化指的是將能夠接收多個(gè)參數(shù)的函數(shù)轉(zhuǎn)化為接收單一參數(shù)的函數(shù)，并且返回接收余下參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。

函數(shù)柯里化的主要作用和特點(diǎn)就是參數(shù)復(fù)用、提前返回和延遲執(zhí)行。

在一個(gè)函數(shù)中，首先填充幾個(gè)參數(shù)，然后再返回一個(gè)新的函數(shù)的技術(shù)，稱為函數(shù)的柯里化。通?？捎糜谠诓磺秩牒瘮?shù)的前提下，為函數(shù) 預(yù)置通用參數(shù) ，供多次重復(fù)調(diào)用。

call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。

除了第一個(gè)參數(shù)外， call 可以接收一個(gè)參數(shù)列表， apply 只接受一個(gè)參數(shù)數(shù)組。

bind 和其他兩個(gè)方法作用也是一致的，只是該方法會(huì)返回一個(gè)函數(shù)。并且我們可以通過 bind 實(shí)現(xiàn)柯里化。

如何實(shí)現(xiàn)一個(gè) bind 函數(shù)

對于實(shí)現(xiàn)以下幾個(gè)函數(shù)，可以從幾個(gè)方面思考

如何實(shí)現(xiàn)一個(gè)call函數(shù)

如何實(shí)現(xiàn)一個(gè)apply函數(shù)

箭頭函數(shù)其實(shí)是沒有 this 的，這個(gè)函數(shù)中的 this 只取決于他外面的第一個(gè)不是箭頭函數(shù)的函數(shù)的 this 。在這個(gè)例子中，因?yàn)檎{(diào)用 a 符合前面代碼中的第一個(gè)情況，所以 this 是 window 。并且 this 一旦綁定了上下文，就不會(huì)被任何代碼改變。

關(guān)于 let 的是否存在變量提升，我們何以用下面的例子來驗(yàn)證：

let 變量如果不存在變量提升， console.log(name) 就會(huì)輸出 ConardLi ，結(jié)果卻拋出了 ReferenceError ，那么這很好的說明了， let 也存在變量提升，但是它存在一個(gè)“暫時(shí)死區(qū)”，在變量未初始化或賦值前不允許訪問。

變量的賦值可以分為三個(gè)階段：

關(guān)于 let 、 var 和 function ：

依次輸出：undefined - 10 - 20

答案: D

colorChange 方法是靜態(tài)的。靜態(tài)方法僅在創(chuàng)建它們的構(gòu)造函數(shù)中存在，并且不能傳遞給任何子級。由于 freddie 是一個(gè)子級對象，函數(shù)不會(huì)傳遞，所以在 freddie 實(shí)例上不存在 freddie 方法：拋出 TypeError 。

1.使用第一次push，obj對象的push方法設(shè)置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設(shè)置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時(shí)候，因?yàn)閛bj具有 length 屬性和 splice 方法，故將其作為數(shù)組進(jìn)行打印 4.打印時(shí)因?yàn)閿?shù)組未設(shè)置下標(biāo)為 0 1 處的值，故打印為empty，主動(dòng) obj[0] 獲取為 undefined

undefined {n:2}

首先，a和b同時(shí)引用了{(lán)n:2}對象，接著執(zhí)行到a.x = a = {n：2}語句，盡管賦值是從右到左的沒錯(cuò)，但是.的優(yōu)先級比=要高，所以這里首先執(zhí)行a.x，相當(dāng)于為a（或者b）所指向的{n:1}對象新增了一個(gè)屬性x，即此時(shí)對象將變?yōu)閧n:1;x:undefined}。之后按正常情況，從右到左進(jìn)行賦值，此時(shí)執(zhí)行a ={n:2}的時(shí)候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之后執(zhí)行a.x = {n：2}的時(shí)候，并不會(huì)重新解析一遍a，而是沿用最初解析a.x時(shí)候的a，也即舊對象，故此時(shí)舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。后面輸出a.x的時(shí)候，又要解析a了，此時(shí)的a是指向新對象的a，而這個(gè)新對象是沒有x屬性的，故訪問時(shí)輸出undefined；而訪問b.x的時(shí)候，將輸出舊對象的x的值，即{n:2}。

在比較相等性，原始類型通過它們的值進(jìn)行比較，而對象通過它們的引用進(jìn)行比較。 JavaScript 檢查對象是否具有對內(nèi)存中相同位置的引用。

我們作為參數(shù)傳遞的對象和我們用于檢查相等性的對象在內(nèi)存中位于不同位置，所以它們的引用是不同的。

這就是為什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。

所有對象鍵（不包括 Symbols ）都會(huì)被存儲(chǔ)為字符串，即使你沒有給定字符串類型的鍵。這就是為什么 obj.hasOwnProperty（'1'） 也返回 true 。

上面的說法不適用于 Set 。在我們的 Set 中沒有 “1” ： set.has（'1'） 返回 false 。它有數(shù)字類型 1 ， set.has（1） 返回 true 。

這題考察的是對象的鍵名的轉(zhuǎn)換。

catch 塊接收參數(shù) x 。當(dāng)我們傳遞參數(shù)時(shí)，這與變量的 x 不同。這個(gè)變量 x 是屬于 catch 作用域的。

之后，我們將這個(gè)塊級作用域的變量設(shè)置為 1 ，并設(shè)置變量 y 的值。現(xiàn)在，我們打印塊級作用域的變量 x ，它等于 1 。

在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當(dāng)我們想在 catch 塊之外的 console.log(x) 時(shí)，它返回 undefined ，而 y 返回 2 。

有哪些經(jīng)典的前端開發(fā)面試題及答案解析

行元素與塊元素的區(qū)別；

如何清除浮動(dòng)；

定位方式當(dāng)中，absolute與fixed、relative的區(qū)別；

事件的兼容問題；

Ajax是什么；

如何優(yōu)化你的頁面；

響應(yīng)式布局是什么等等。

經(jīng)典的前端面試題至少有近百道，在這里也沒辦法全部給你列出來，你可以看看這個(gè)（小-程序），里面有好幾百道面試真題，也有比較好的答案解析。

Web前端崗位面試題有哪些

前端面試題匯總，基本上會(huì)有四大類問題，具體如下：

一、HTML

1、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

2、HTML5 為什么只需要寫 !DOCTYPE HTML？

3、行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

4、頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

5、介紹一下你對瀏覽器內(nèi)核的理解？

6、常見的瀏覽器內(nèi)核有哪些？

7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

8、簡述一下你對HTML語義化的理解？

9、HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

10、瀏覽器是怎么對HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？

11、請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

12、iframe有那些缺點(diǎn)？

13、Label的作用是什么？是怎么用的？（加 for 或 包裹）

14、HTML5的form如何關(guān)閉自動(dòng)完成功能？

15、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信? (阿里)

16、webSocket如何兼容低瀏覽器？(阿里)

17、頁面可見性（Page Visibility）API 可以有哪些用途？

18、如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

19、實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

20、網(wǎng)頁驗(yàn)證碼是干嘛的，是為了解決什么安全問題？

21、tite與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

二、css

1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

2、CSS選擇符有哪些？哪些屬性可以繼承？

3、CSS優(yōu)先級算法如何計(jì)算？

4、CSS3新增偽類有那些？

5、如何居中div？如何居中一個(gè)浮動(dòng)元素？如何讓絕對定位的div居中？

6、display有哪些值？說明他們的作用。

7、position的值relative和absolute定位原點(diǎn)是？

8、CSS3有哪些新特性？

9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

10、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？

11、一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?

三、常見兼容性問題？

1、li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

2、經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

3、為什么要初始化CSS樣式。

4、absolute的containing block計(jì)算方式跟正常流有什么不同？

5、CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？

6、position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？

7、對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？

8、CSS權(quán)重優(yōu)先級是如何計(jì)算的？

9、請解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式

10、移動(dòng)端的布局用過媒體查詢嗎？

11、使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？

12、CSS優(yōu)化、提高性能的方法有哪些？

13、瀏覽器是怎樣解析CSS選擇器的？

14、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

15、margin和padding分別適合什么場景使用？

16、抽離樣式模塊怎么寫，說出思路，有無實(shí)踐經(jīng)驗(yàn)？[阿里航旅的面試題]

17、元素豎向的百分比設(shè)定是相對于容器的高度嗎？

18、全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性？

19、什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？

20、視差滾動(dòng)效果，如何給每頁做不同的動(dòng)畫？（回到頂部，向下滑動(dòng)要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）

21、::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用。

22、如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景 ？

23、你對line-height是如何理解的？

24、設(shè)置元素浮動(dòng)后，該元素的display值是多少？（自動(dòng)變成display:block）

25、怎么讓Chrome支持小于12px 的文字？

26、讓頁面里的字體變清晰，變細(xì)用CSS怎么做？（-webkit-font-smoothing: antialiased;）

27、font-style屬性可以讓它賦值為“oblique” oblique是什么意思？

28、position:fixed;在android下無效怎么處理？

29、如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）

30、display:inline-block 什么時(shí)候會(huì)顯示間隙？(攜程)

31、overflow: scroll時(shí)不能平滑滾動(dòng)的問題怎么處理？

32、有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度。

33、png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過webp？

34、什么是Cookie 隔離？（或者說：請求資源的時(shí)候不要讓它帶cookie怎么做）

35、style標(biāo)簽寫在body后與body前有什么區(qū)別？

四、JavaScript

1、介紹JavaScript的基本數(shù)據(jù)類型。

2、說說寫JavaScript的基本規(guī)范？

3、JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

4、JavaScript有幾種類型的值？（堆：原始數(shù)據(jù)類型和 棧：引用數(shù)據(jù)類型），你能畫一下他們的內(nèi)存圖嗎？

5、Javascript如何實(shí)現(xiàn)繼承？

6、Javascript創(chuàng)建對象的幾種方式？

7、Javascript作用鏈域?

8、談?wù)凾his對象的理解。

9、eval是做什么的？

10、什么是window對象? 什么是document對象?

11、null，undefined的區(qū)別？

12、寫一個(gè)通用的事件偵聽器函數(shù)(機(jī)試題)。

13、[“1”, “2”, “3”].map(parseInt) 答案是多少？

14、關(guān)于事件，IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？

15、什么是閉包（closure），為什么要用它？

16、javascript 代碼中的”use strict”;是什么意思 ? 使用它區(qū)別是什么？

17、如何判斷一個(gè)對象是否屬于某個(gè)類？

18、new操作符具體干了什么呢?

19、用原生JavaScript的實(shí)現(xiàn)過什么功能嗎？

20、Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是？

21、對JSON的了解？

22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(124))).toString(16) }) 能解釋一下這段代碼的意思嗎？

23、js延遲加載的方式有哪些？

24、Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax？

25、同步和異步的區(qū)別?

26、如何解決跨域問題?

27、頁面編碼和被請求的資源編碼如果不一致如何處理？

28、模塊化開發(fā)怎么做？

29、AMD（Modules/Asynchronous-Definition）、CMD（Common Module

Definition）規(guī)范區(qū)別？

30、requireJS的核心原理是什么？（如何動(dòng)態(tài)加載的？如何避免多次加載的？如何 緩存的？）

31、讓你自己設(shè)計(jì)實(shí)現(xiàn)一個(gè)requireJS，你會(huì)怎么做？

32、談一談你對ECMAScript6的了解？

33、ECMAScript6 怎么寫class么，為什么會(huì)出現(xiàn)class這種東西?

34、異步加載的方式有哪些？

35、documen.write和 innerHTML的區(qū)別?

36、DOM操作——怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?

37、.call() 和 .apply() 的含義和區(qū)別？

38、數(shù)組和對象有哪些原生方法，列舉一下？

39、JS 怎么實(shí)現(xiàn)一個(gè)類。怎么實(shí)例化這個(gè)類

40、JavaScript中的作用域與變量聲明提升？

41、如何編寫高性能的Javascript？

42、那些操作會(huì)造成內(nèi)存泄漏？

43、JQuery的源碼看過嗎？能不能簡單概況一下它的實(shí)現(xiàn)原理？

44、jQuery.fn的init方法返回的this指的是什么對象？為什么要返回this？

45、jquery中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

46、jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么，如何實(shí)現(xiàn)深拷貝？

47、jquery.extend 與 jquery.fn.extend的區(qū)別？

48、jQuery 的隊(duì)列是如何實(shí)現(xiàn)的？隊(duì)列可以用在哪些地方？

49、談一下Jquery中的bind(),live(),delegate(),on()的區(qū)別？

50、JQuery一個(gè)對象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的？

51、是否知道自定義事件。jQuery里的fire函數(shù)是什么意思，什么時(shí)候用？

52、jQuery 是通過哪個(gè)方法和 Sizzle 選擇器結(jié)合的？（jQuery.fn.find()進(jìn)入Sizzle）

53、針對 jQuery性能的優(yōu)化方法？

54、Jquery與jQuery UI有啥區(qū)別？

55、JQuery的源碼看過嗎？能不能簡單說一下它的實(shí)現(xiàn)原理？

56、jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

57、jQuery和Zepto的區(qū)別？各自的使用場景？

58、針對 jQuery 的優(yōu)化方法？

59、Zepto的點(diǎn)透問題如何解決？

60、jQueryUI如何自定義組件?

61、需求：實(shí)現(xiàn)一個(gè)頁面操作不會(huì)整頁刷新的網(wǎng)站，并且能在瀏覽器前進(jìn)、后退時(shí)正確響應(yīng)。給出你的技術(shù)實(shí)現(xiàn)方案？

62、如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？（阿里）

63、移動(dòng)端最小觸控區(qū)域是多大？

64、jQuery 的 slideUp動(dòng)畫 ，如果目標(biāo)元素是被外部事件驅(qū)動(dòng), 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動(dòng)畫會(huì)滯后的反復(fù)執(zhí)行，該如何處理呢?

65、把 Script 標(biāo)簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區(qū)別？瀏覽器會(huì)如何解析它們？

66、移動(dòng)端的點(diǎn)擊事件的有延遲，時(shí)間是多久，為什么會(huì)有？ 怎么解決這個(gè)延時(shí)？（click 有 300ms 延遲,為了實(shí)現(xiàn)safari的雙擊事件的設(shè)計(jì)，瀏覽器要知道你是不是要雙擊操作。）

67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優(yōu)點(diǎn)和缺點(diǎn)么?

68、Underscore 對哪些 JS 原生對象進(jìn)行了擴(kuò)展以及提供了哪些好用的函數(shù)方法？

69、解釋JavaScript中的作用域與變量聲明提升？

70、那些操作會(huì)造成內(nèi)存泄漏？

71、JQuery一個(gè)對象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的？

72、Node.js的適用場景？

(如果會(huì)用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

73、解釋一下 Backbone 的 MVC 實(shí)現(xiàn)方式？

74、什么是“前端路由”?什么時(shí)候適合使用“前端路由”? “前端路由”有哪些優(yōu)點(diǎn)和缺點(diǎn)?

75、知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調(diào)試和debug代碼么?

76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

78、簡述一下 Handlebars 的基本用法？

79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

80、用js實(shí)現(xiàn)千位分隔符?(來源：前端農(nóng)民工，提示：正則+replace)

檢測瀏覽器版本版本有哪些方式？

81、我們給一個(gè)dom同時(shí)綁定兩個(gè)點(diǎn)擊事件，一個(gè)用捕獲，一個(gè)用冒泡，你來說下會(huì)執(zhí)行幾次事件，然后會(huì)先執(zhí)行冒泡還是捕獲

高級前端開發(fā)面試題150道的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于高級前端開發(fā)面試題150道題、高級前端開發(fā)面試題150道的信息別忘了在本站進(jìn)行查找喔。