今天小編要跟大家分享的文章是關于參加Web前端面試的常見面試題匯總。準備參加Web前端面試的小伙伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。1.漸進增強與優(yōu)雅降級漸進增強并不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人都能看到的網(wǎng)頁、感受到的體驗都一致的網(wǎng)站幾乎不可能。但還是得網(wǎng)站的可訪問性，保證用戶在任何環(huán)境下都能正常訪問網(wǎng)頁得核心內容或能使用基本功能(避免網(wǎng)頁打不開、排版錯誤等)，并為他們提供當前條件下最好的體驗，這就是漸進增強得核心思想。優(yōu)雅降級也是一種設計思想，為了保證在高版本瀏覽器中提供最好的體驗，碰到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。這兩種思想的區(qū)別在于：1.漸進增強是向上兼容，優(yōu)雅降級是向下兼容;2.漸進增強是從簡單到復雜，優(yōu)雅降級是從復雜到簡單;3.漸進增強關注的是內容(保證核心內容)，優(yōu)雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)作用DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規(guī)則，用來定義XML或(X)HTML的文檔類型。瀏覽器會使用它來判斷文檔類型，決定何種協(xié)議來解析，以及切換瀏覽模式。DOCTYPE是用來聲明文檔類型和DTD規(guī)范的，一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法，那么瀏覽器解析時便會出現(xiàn)一些差錯。HTML5的文檔類型聲明：(嚴格模式)的DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明："">標準模式與怪異模式怪異模式(QuirksMode)用于模擬舊瀏覽器的行為。早期的網(wǎng)站并不會遵循完整的規(guī)范，隨著瀏覽器支持越來越多的規(guī)范，在那些舊的瀏覽器中開發(fā)的頁面在顯示時會被破壞。為了向后兼容，瀏覽器發(fā)明了怪異模式，一行錯誤或無效的DOCTYPE都會觸發(fā)怪異模式。瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標準模式處理。DOCTYPE可以確保不同瀏覽器以相同的方式解析文檔，以及執(zhí)行相同的渲染模式。怪異模式與標準模式的主要區(qū)別：1.怪異模式的寬度和高度會包含padding和border。標準模式不包含，標準模式下可以通過設置box-sizing:border-box將標準盒模型轉化成怪異模式下的盒模型。2.怪異模式下，當內容超出容器高度時，會將容器拉伸，而不是溢出。3.怪異模式下，在表格中的字體樣式(如font-size)不會繼承。4.怪異模式下顏色值必須使用十六進制標記法。3.語義化HTML5中的語義化就是讓元素、屬性或屬性值有含義，更準確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現(xiàn)分離，元素只負責文檔內容的結構與含義，而CSS樣式控制內容的呈現(xiàn)，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會被廢棄。優(yōu)點·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強?！び欣赟EO，搜索引擎根據(jù)標簽來確定上下文和各個關鍵字的權重?！し奖闫渌O備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁?！び欣陂_發(fā)和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。語義化標簽·定義文檔的頁眉區(qū)域,應作為介紹內容或者導航鏈接欄的容器;·footer內容的頁腳，通常包含該章節(jié)作者、版權數(shù)據(jù)或者與文檔相關的鏈接等信息;·article文檔、頁面、應用或網(wǎng)站中的獨立結構，是可獨立分配的、可復用的結構，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目;·nav描述一個含有多個超鏈接的區(qū)域，該區(qū)域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;·section表示文檔中的一個區(qū)域(或節(jié))，比如，內容中的一個專題組;·main定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網(wǎng)站logo，搜索框(搜索框作為文檔的主要內容);·aside表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現(xiàn)為側邊欄或嵌入內容。4.超鏈接偽類:link、:visited、:active和:hover的聲明順序是怎樣的?:link表示未訪問的鏈接狀態(tài);:visited表示已訪問狀態(tài);:active表示激活狀態(tài)(鼠標按下);:hover表示懸停狀態(tài)。推薦順序是LVHA，即:link:visited:hover:active。理由如下：·當鼠標懸停在未訪問的鏈接上時，:link和:hover都會命中，如果:hover在:link之前聲明，那么(:hover)就會被覆蓋;·當鼠標懸停在已訪問的連接上時，:visited和:hover都會命中，如果:hover在:visited之前聲明，那么(:hover)就會被覆蓋;·當鼠標單擊鏈接時，:active和:hover都會命中，我們大多是想讓:hover只在懸停時展示樣式，按下鼠標時使用:active樣式，因此:active在:hover之后聲明;·綜上，:hover應在:link和:visited之后，在:active之前，因此active在最后。而:link和:visited兩者的順序無所謂，互不影響。常見的長度單位CSS中除了px長度單位之外，還有下面幾個長度單位：·pc六分之一英寸，1pc=12pt=1/6*1in=16px;·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈;·in一英寸，1in=;·ex在含有“X”字母的字體中，它是該字體的小寫字母的高度。對于很多字體來說，1ex≈;·em1em等于父級元素的字體大小，2em就是父級元素字體大小的二倍;·rem當用在根元素()的font-size上面時，它代表了它的初始值;·ch代表元素所用字體font中“0”這一字形的寬度;·vh1vh相當于視口高度的1%，100vh就是視口的高度;·vw1vw相當于視口寬度的1%，100vw就是視口的寬度;·vmax視口高度vw和寬度vh兩者中的最小值·vmin視口高度vw和寬度vh兩種中的最大值;·%相對于父級元素的大小來確定;參考：CSS[1]CSSpercentage[2]6.事件對象冒泡與捕獲事件冒泡與捕獲是事件處理的兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發(fā)生什么。在點擊子元素時，瀏覽器運行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它;·然后，它移動到中單擊元素的下一個祖先元素，并執(zhí)行相同的操作，然后是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素;而冒泡與捕獲恰恰相反：·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它;·然后它移動到下一個直接的祖先元素，并做同樣的事情，然后是下一個，等等，直到它到達元素;而現(xiàn)代瀏覽器在默認情況下，所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執(zhí)行子元素綁定的事件，然后向上冒泡，觸發(fā)父元素綁定的事件。addEventListener函數(shù)的第三個參數(shù)是個布爾值。含義：·當布爾值是false時(這也是默認值)，表示向上冒泡觸發(fā)事件;·當布爾值是true時，表示向下捕獲觸發(fā)事件;不能冒泡的事件有些事件是不會冒泡的。比如：·blur元素失去焦點時觸發(fā)，focusout事件也是失去焦點時觸發(fā)，但可以冒泡;·focus元素獲取焦點時觸發(fā);·mouseenter鼠標移動到元素上時會觸發(fā)該事件，與之對應的是mouseover事件，但會冒泡;·mouseleave鼠標離開元素時觸發(fā)，與之對應的是mouseout，但會冒泡;事件冒泡可以讓我們利用事件委托，尤其是處理大量子元素時，如果給每個子元素都綁定事件，這是不優(yōu)雅的，可以將事件綁定到父元素上，并讓子節(jié)點上發(fā)生的事件冒泡到父節(jié)點上，利用屬性可以獲取到當前觸發(fā)事件的子元素。事件對象中的方法·stopPropagation()阻止事件冒泡，當設置后，點擊該元素時父元素綁定的事件就不會再觸發(fā);·preventDefault()阻止默認事件的發(fā)生;·stopImmediatePropagation()它用來阻止監(jiān)聽同一事件的其他事件監(jiān)聽器被調用以及阻止事件冒泡，比如給同一個div元素綁定多個click事件(使用addEventListener方法可以注冊多個)，當在第二個事件函數(shù)中調用stopImmediatePropagation方法時，點擊div元素時，后面注冊的click將不會被觸發(fā)，而且還會阻止事件冒泡;比如下面的例子，給p綁定多個click事件，在第二個事件函數(shù)中調用stopImmediatePropagation，第三個click事件就不會觸發(fā)，因為也阻止了冒泡，因此父元素的click事件也不會觸發(fā)。paragraph


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


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


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


},false);


constp=('p')


("click",(event)=>{


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


},false);


("click",(event)=>{


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


();


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


},false);


("click",(event)=>{


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


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


},false);


“在IE瀏覽器中，使用也可以取消事件冒泡;使用也能阻止默認事件的發(fā)生。target與currentTargettarget屬性指向的是事件目標，而currentTarget屬性指向的是正在處理當前事件的對象，它總是指向事件綁定的元素。而target指向的可能不是定義時的事件目標。例如：('click',(e)=>{();},false);可能指向div元素，也可能指向它的子元素。而總是指向div元素。以上就是小編今天為大家分享的關于參加Web前端面試的常見面試題匯總的文章，希望本篇文章能夠對正準備參加前端面試的小伙伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web前端培訓官網(wǎng)，最后祝愿小伙伴們工作順利，成為一名優(yōu)秀的Web前端工程師。參考資料[1]CSSlength:#/zh-CN/docs/Web/CSS/length[2]CSSpercentage:#/zh-CN/docs/Web/CSS/percentage

vue的路由模式一共有兩種，分別是哈希和history，他們的區(qū)別是hash模式不會包含在http請求當中，并且hash不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報404錯誤，所以history的原理是利用html5新增的兩個特性方法，分別是psuhState和replaceState來完成的，以上就是對vue路由的理解。 路由的導航守衛(wèi) 又叫做路由的鉤子函數(shù)（生命周期函數(shù)） 就是在跳轉頁面的時候把路由欄下來，做一些操作在放行，vue一共提供了三種路由守衛(wèi)。 第一種是全局守衛(wèi) beforeEach路由進入之前 afterEach路由進入之后 第二種 組件內守衛(wèi) beforeRouteEnter 路由進入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由離開之前 第三種 路由獨享守衛(wèi) beforeEnter 路由進入之前 分別是 to from next next 這個參數(shù) 在路由版本的時候，是必須的 但是到了路由版本的時候next參數(shù)變成可選的了 一般來說vue2搭配 的路由 vue3搭配 的路由 比如說購物車頁面只有登陸的才能訪問，我們可以用組件級守衛(wèi)購物車頁面，如果已經(jīng)登陸存有token 的話，就繼續(xù)訪問這個頁面，如果沒有登陸的話就會跳轉到登陸頁面。 在項?中我們經(jīng)常使?路由守衛(wèi)實現(xiàn)??的鑒權. ?如:當?戶登錄之后,我們會把后臺返回的token以及?戶信息保存到vuex 和本地,當??進?跳轉的時候,我們會在路由守衛(wèi)??獲取vuex??的token,如果token存在的話,我們則使?next讓他進?要 跳轉的??,如果token不存在的話我們使?next?法讓他回到登錄? 以上就是我對vue路由守衛(wèi)的理解。 ?先v-if和v-show都是控制元素的顯示與隱藏, 不過v-if控制元素的顯 示和隱藏的時候會刪除對?的dom元素,當每?個顯示的時候,都會重新創(chuàng)建dom和渲染. ?v-show則是通過css的display:none 和display:block來控制元素的顯示與隱藏. v-if?較耗費性能,所以我們涉及到頻繁的顯示隱藏操作我們建議使?v-show,如果不 是頻繁操作的話,我們可以v-if 在項?中我會經(jīng)常使?v-if和v-show,?如我們在搜索功能的時候,他有?個歷史記錄,這個時候我們根據(jù)是否有搜索的結果來判 斷歷史記錄的顯示與隱藏,這塊我就可以使?v-if ,當然?v-show也可以. 以上就是我對v-if和v-show的理解。 v-for的優(yōu)先級?. 因為v-for的時候我們才開始渲染dom元素,這個v-if還?法進?判斷. v-for和v-if不能同時使?,我們可以通過標簽,?如div或者template標簽來進?包裹,把v-if寫到包裹的標簽上?(寫到v-for外?)。 ?先呢,methods是?來定義?法的區(qū)域,methods定義的?法需要調?才能觸發(fā). 不具備緩存? ?computed是計算屬性,他依賴于屬性值的變化,當屬性發(fā)?改變的時候,計算屬性??定義的?法就會觸發(fā),computed具有緩 存性,依賴屬性值的變化?變化. ?watch主要是?于監(jiān)聽,不具備被緩存性.依賴于數(shù)據(jù)變化?觸發(fā). 在項?中,?如我們獲取state的狀態(tài)的時候我們會把它放到computed??,或者在寫購物?數(shù)量計算的時候也會使?計算屬性. ?watch也在項?經(jīng)常使?,?如我們封裝編輯 和 新增彈窗組件的時候會通過watch來進?id判斷我們要顯否要清空表單的數(shù) 據(jù). 以上就是我對computed和watch的理解。