本篇文章給大家談?wù)勚屑?jí)前端開(kāi)發(fā)面試題，以及前端開(kāi)發(fā)面試筆試題對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、2021上海中級(jí)前端面試常問(wèn)問(wèn)題整理
• 2、你遇到的前端面試題都有什么？
• 3、2020年Web前端面試題匯總(一)
• 4、前端常見(jiàn)面試題

2021上海中級(jí)前端面試常問(wèn)問(wèn)題整理

金九銀十的時(shí)間到了，又是適合跳槽的時(shí)間，我之前是在鄭州工作，然后九月來(lái)上海這邊，面了一周左右，找到了還算滿(mǎn)意的工作，現(xiàn)在整理一下面試中遇到的問(wèn)題，給要在上海找工作的小伙伴一個(gè)參考，也給自己下次換工作做一個(gè)參考，哈哈

我是主要做vue的還沒(méi)有學(xué)vue3所以面試中大多是vue2的問(wèn)題，但是上海挺多公司開(kāi)始轉(zhuǎn)vue3了，這個(gè)還是要抓緊學(xué)習(xí)

先把問(wèn)題記錄下來(lái)，有時(shí)間會(huì)更新答案

在mvvm架構(gòu)下，View和Model之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model 和 View 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。

ViewModel通過(guò)雙向數(shù)據(jù)綁定把View層和Model層連接起來(lái)，而View和Model之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者只需要關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM，不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由MVVM來(lái)統(tǒng)一管理

computed是vue的計(jì)算屬性，可以用于一些復(fù)雜的運(yùn)算，有緩存性，依賴(lài)的值不變的情況下不會(huì)重新計(jì)算

1.是計(jì)算值，

2.應(yīng)用：就是簡(jiǎn)化tempalte里面{{}}計(jì)算和處理props或$emit的傳值

3.具有緩存性，頁(yè)面重新渲染值不變化,計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)

watch是監(jiān)聽(tīng)屬性，沒(méi)有緩存，deep(深度監(jiān)聽(tīng)，用于數(shù)組，對(duì)象)，handler，immediate（立即執(zhí)行）

1.是觀察的動(dòng)作，

2.應(yīng)用：監(jiān)聽(tīng)props，$emit或本組件的值執(zhí)行異步操作

3.無(wú)緩存性，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行

組件實(shí)例對(duì)象data必須為函數(shù)，目的為了防止多個(gè)組件實(shí)例直接共用一個(gè)data，產(chǎn)生數(shù)據(jù)污染

在組件復(fù)用時(shí)，data作為函數(shù)，有自己的存儲(chǔ)空間，每次都能返回一個(gè)新的data，其中一個(gè)組件中data的值變化，不會(huì)影響其他組件中的data

pc：elementui，avue，Ant Design of Vue

移動(dòng)：vantui，mint ui

不能，v-for優(yōu)先級(jí)比v-if高，放在一起使用的時(shí)候，v-if要在每個(gè)循環(huán)中創(chuàng)建銷(xiāo)毀dom，浪費(fèi)資源

onLoad(option)

上傳---提審---發(fā)布

wx.navigateToMiniProgram

可配置跳轉(zhuǎn)版本（開(kāi)發(fā)版，體驗(yàn)版，正式版)

配置合法域名，新建web-view頁(yè)面

wx-open-launch-weapp 小程序原始id

可參考

計(jì)算寬度不一致

ie：content+padding+border

標(biāo)準(zhǔn)：content

box-sizing：content-box ( 標(biāo)準(zhǔn) )

box-sizing：border-box ( ie )

flex布局可以更好的適配移動(dòng)端

1.flex布局

2.不知道子元素寬高：position:absolute;top:50%;left50%; transform:translate(-50%,-50%)

3.已知子元素的寬高：position:absolute;top:50%;left50%;margin-left:寬的一半,margin-top:高的一半

1.flex布局，左側(cè)固定寬，右側(cè)flex:1

2.左側(cè)浮動(dòng)，右側(cè)margin-left:左側(cè)的寬

3.左側(cè)定寬，右側(cè)絕對(duì)定位，left:左側(cè)的寬

4.左側(cè)絕對(duì)定位，右側(cè)margin-left:左側(cè)的寬

上下寬高固定，下用絕對(duì)定位定在底部，中間絕對(duì)定位，top：上高，bottom：下高；height：auto

相當(dāng)于一個(gè)完全封閉的盒子，元素布局不受外界影響

生成BFC的條件：float(除none)、overflow、

可以解決浮動(dòng)布局造成的父元素塌陷

解決外邊距重合的問(wèn)題

可以計(jì)算浮動(dòng)的高，

你遇到的前端面試題都有什么？

大家好，我是王我。

隨著春節(jié)的結(jié)束，各個(gè)行業(yè)也普遍開(kāi)始了上班的節(jié)奏， 不過(guò)本人17號(hào)才上班。為什么？因?yàn)殚L(zhǎng)得帥的都上班比較晚。 當(dāng)然，每到新年結(jié)束，又迎來(lái)了一批招聘者與面試者，我來(lái)說(shuō)說(shuō)作為一年工作經(jīng)驗(yàn)應(yīng)該知道的面試題。

HTML篇

1.doctype是什么？有哪些類(lèi)型？

2.input有哪些新類(lèi)型？簡(jiǎn)要說(shuō)明其8用法。

3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分HTML和HTML5？

4.bootstrap響應(yīng)式的原理是什么？

5.多移動(dòng)終端頁(yè)面適配是如何實(shí)現(xiàn)的？

CSS篇

1.如何實(shí)現(xiàn)兩列布局，左邊自適應(yīng)，右邊固定寬度？

2.用CSS畫(huà)一個(gè)三角形

3.CSS實(shí)現(xiàn)字體大寫(xiě)

4.display有哪些常用的屬性值？分別是什么意思？

5.position為absolute，relative，fixed的定點(diǎn)位置

6.用三種方法清除浮動(dòng)

7.請(qǐng)介紹一下margin塌陷問(wèn)題

js篇

1.什么是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實(shí)現(xiàn))

2.js創(chuàng)建對(duì)象，至少使用三種方法

3.簡(jiǎn)述一下事件穿透以及解決辦法

4.用三種方式判斷變量類(lèi)型是否是數(shù)組

5.如何實(shí)現(xiàn)對(duì)象的拷貝？

6.什么是閉包？閉包的優(yōu)缺點(diǎn)。

7.簡(jiǎn)述一下ajax請(qǐng)求的過(guò)程。

8.簡(jiǎn)述一下new一個(gè)人構(gòu)造函數(shù)的人過(guò)程。

9.為什么會(huì)有跨域？是怎么解決跨域問(wèn)題的？簡(jiǎn)述一下原理。

10.js原始數(shù)據(jù)類(lèi)型有哪些？

11.學(xué)一個(gè)函數(shù)，判斷一個(gè)變量是否是字符串

12.typeof有哪些結(jié)果？

13.剪頭函數(shù)和普通函數(shù)有什么區(qū)別？

14.請(qǐng)用三種方法實(shí)現(xiàn)數(shù)組去重

15.href和src有什么區(qū)別？

jquery篇

1.attr()和prop()有什么區(qū)別？

2.on和bind有什么區(qū)別？js動(dòng)態(tài)添加的dom元素是通過(guò)on還是bind？

3.touch和click有什么區(qū)別？

4.window.onload和jquery的ready有什么區(qū)別？

vue篇

1.簡(jiǎn)述一下vue的生命周期及其特點(diǎn)

2.vue雙向綁定的原理是什么？

3.vue的特點(diǎn)有哪些？和jquery有什么區(qū)別？

4.父子組件之間傳遞數(shù)據(jù)的方法

5.子組件如何共享數(shù)據(jù)？

6.一般有什么工具進(jìn)行數(shù)據(jù)交互？

7.webpack的原理是什么？

8.簡(jiǎn)述一下$nextTick的用法

瀏覽器篇

1.cookie、sessionStorage、localStorage的區(qū)別是什么？

2.有用過(guò)瀏覽器緩存嗎？簡(jiǎn)述一下基本的緩存機(jī)制

網(wǎng)絡(luò)篇

1.http和https之間的區(qū)別

2.從服務(wù)器的安全考慮，是使用get請(qǐng)求還是post請(qǐng)求？

3.URL請(qǐng)求的過(guò)程有哪些？

項(xiàng)目經(jīng)驗(yàn)篇

1.項(xiàng)目中遇到的最大挑戰(zhàn)以及解決辦法

2.常見(jiàn)的網(wǎng)頁(yè)優(yōu)化有哪些？

作為一個(gè)面試一年以?xún)?nèi)工作經(jīng)驗(yàn)的前端程序員來(lái)說(shuō)，以上的問(wèn)題能夠倒答如流月薪6k應(yīng)該不成問(wèn)題啦。這些面試題也是我在很多面試中感覺(jué)經(jīng)常被問(wèn)到的題目。

希望大家年后找工作能夠順順利利， 千萬(wàn)不要跟我一樣哦，只有帥氣就一無(wú)所有了。

大家好，我是王我，中國(guó)最帥的前端程序員。

前幾次都是各種培訓(xùn)公司，各種忽悠就不提了，說(shuō)說(shuō)后面4次面試的經(jīng)歷。

第一次是面一個(gè)小公司，不過(guò)他們好像沒(méi)有厲害的前端，來(lái)面我的是個(gè)后端，一來(lái)沒(méi)有問(wèn)我關(guān)于js的知識(shí)，直接問(wèn)我以前做過(guò)什么，有沒(méi)有經(jīng)驗(yàn)，我本人不會(huì)吹牛，簡(jiǎn)歷也沒(méi)怎么包裝，就是自己把自學(xué)的知識(shí)和做的幾個(gè)小demo弄在上面，也用github掛在頁(yè)面上了，不過(guò)他根本不點(diǎn)開(kāi)看，也不問(wèn)，問(wèn)我會(huì)不會(huì)vue，我當(dāng)時(shí)對(duì)框架還不了解，他就說(shuō)他們需要能直接上手開(kāi)始寫(xiě)的，所以我第一個(gè)就直接掛了。

第二次面試是一個(gè)國(guó)企，這個(gè)問(wèn)了很多問(wèn)題，都很基礎(chǔ)，js數(shù)據(jù)類(lèi)型，數(shù)組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然后因?yàn)樗麄冎饕胘q，所以問(wèn)了很多jq的操作，關(guān)于節(jié)點(diǎn)的，動(dòng)畫(huà)的，我看鋒利的jq大概看了3遍，也練過(guò)多次，所以我答的很熟。然后問(wèn)了些布局方面的，bootstrap我了解過(guò)，又看過(guò)css3，所以這方面也沒(méi)啥問(wèn)題，最后在現(xiàn)場(chǎng)做了個(gè)題目，主要就是布局然后通過(guò)ajax呈現(xiàn)數(shù)據(jù)。后面聽(tīng)介紹我面試的說(shuō)面試官比較滿(mǎn)意，說(shuō)我jq很熟，一面就過(guò)了?？上Ш竺骐娫?huà)面試不知怎么回事可能表現(xiàn)的不夠自信，雖然沒(méi)問(wèn)技術(shù)，但是我沒(méi)啥自信，把沒(méi)項(xiàng)目經(jīng)驗(yàn)什么的也不知怎么就一五一十交代了，估計(jì)因?yàn)檫@個(gè)掛掉了。

第三次沒(méi)問(wèn)問(wèn)題，直接就是一套題開(kāi)做，我在那做了一個(gè)多小時(shí)。題目就是按照要求一步一步做一個(gè)頁(yè)面出來(lái)，我也搞忘了我當(dāng)時(shí)卡在哪個(gè)地方了，坐在那得時(shí)候就是做不出來(lái)，沒(méi)有設(shè)計(jì)圖，要根據(jù)他的描述自己找個(gè)設(shè)計(jì)圖然后做，我第一次遇到這個(gè)有點(diǎn)懵，雖然當(dāng)時(shí)沒(méi)做出來(lái)，不過(guò)回來(lái)我自己花了幾個(gè)小時(shí)把它做了。所以這個(gè)也是涼了。

第四個(gè)問(wèn)的比較多，數(shù)據(jù)類(lèi)型，數(shù)組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問(wèn)的js。然后問(wèn)了html5的新特性 css3 的新特性，遇到過(guò)什么瀏覽器的兼容性問(wèn)題，怎么解決的，以后想往什么方面發(fā)展。這個(gè)時(shí)候我已經(jīng)會(huì)點(diǎn)vue了，照著做了個(gè)小demo，不過(guò)后來(lái)知道公司用的angularjs，面試官也沒(méi)看我做的，問(wèn)也沒(méi)問(wèn)。。以前聽(tīng)網(wǎng)上說(shuō)要帶上自己的項(xiàng)目去面試感覺(jué)沒(méi)起多大效果。

最后總結(jié)下如果面的比較初級(jí)的崗位，應(yīng)該主要問(wèn)js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然后js的基礎(chǔ)知識(shí)，對(duì)了還有apply和call也問(wèn)了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點(diǎn)的，暫時(shí)還沒(méi)面過(guò)，等以后面過(guò)在來(lái)回答

1. cookie session 的用途和區(qū)別，以及有效期

1、cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪(fǎng)問(wèn)增多，會(huì)比較占用你服務(wù)器的性能

考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

4、單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。

2. vue的數(shù)據(jù)綁定原理，mvvm與mvc的區(qū)別

MVVM：

m:model數(shù)據(jù)模型層 v:view視圖層 vm:ViewModel

vue中采用的是mvvm模式，這是從mvc衍生過(guò)來(lái)的

MVVM讓視圖與viewmodel直接的關(guān)系特別的緊密，就是為了解決mvc反饋不及時(shí)的問(wèn)題

圖片說(shuō)明一下：

說(shuō)到MVVM就要說(shuō)一下雙向綁定和數(shù)據(jù)劫持的原理，

MVC：

m:model數(shù)據(jù)模型層 v:view視圖層 c:controller控制器

原理： c層需要控制model層的數(shù)據(jù)在view層進(jìn)行顯示

MVC兩種方式，圖片說(shuō)明：

總結(jié)：

mvvm與mvc最大的區(qū)別：

MVVM實(shí)現(xiàn)了view與model的自動(dòng)同步，也就是model屬性改變的時(shí)候， 我們不需要再自己手動(dòng)操作dom元素去改變view的顯示，而是改變屬性后該屬性對(duì)應(yīng)的view層會(huì)自動(dòng)改變。

不懂得可以復(fù)制鏈接查看：

3. storage 的區(qū)別 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存儲(chǔ)數(shù)據(jù)，即使關(guān)閉瀏覽器，也不會(huì)讓數(shù)據(jù)消失，除非主動(dòng)的去刪除數(shù)據(jù)，使用的方法如上所示。localStorage有l(wèi)ength屬性

sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說(shuō)，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的

4.v-model雙向數(shù)據(jù)原理

有一個(gè)文本框 通過(guò)v-bind綁定了value屬性 值為myname 是我們?cè)趘ue實(shí)例中定義的屬性

傳統(tǒng)我們獲取文本框值方法 可能通過(guò)getElementById找到文本框 然后獲取其value屬性

但是vue中直接通過(guò)v-bind綁定了value屬性 所以不需要像之前那樣獲取值

所以在后面的按鈕中獲取name值 直接獲取vue實(shí)例對(duì)象data里面的myname屬性即可

【數(shù)據(jù)為尊 ----數(shù)據(jù)映射到瀏覽器 如果數(shù)據(jù)v-model后修改（肯定input）然后到數(shù)據(jù)在有數(shù)據(jù)映射到瀏覽器頁(yè)面 ----映射關(guān)系統(tǒng)稱(chēng)】

5.keepAlive用過(guò)嗎？什么作用？

緩存路由組件

使用的是vue的一個(gè)組件，參考vue的官方文檔

使用這個(gè)東西可以保證我們?cè)谇袚Q組件的時(shí)候，原來(lái)顯示的組件不被銷(xiāo)毀

-----【保障組件的數(shù)據(jù)不會(huì)被切換路由而銷(xiāo)毀數(shù)據(jù)】

Home是對(duì)應(yīng)的組件對(duì)象的名字，不是路由的名字

6.多維數(shù)組拍平

數(shù)組拍平也稱(chēng)數(shù)組扁平化，就是將數(shù)組里面的數(shù)組打開(kāi)，最后合并為一個(gè)數(shù)組

一紅六種方法吧……

了解的請(qǐng)看：

7.跨域的原因 解決方案

跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。

這樣就可以說(shuō)同源策略----協(xié)議---端口---域名

原生的src和href可以解決跨域

代理可以解決

請(qǐng)求頭也可以攜帶瀏覽器提示的也可以解決

一般都是后端解決跨域問(wèn)題

【別的需要了解看下方鏈接】

8.uniApp兼容問(wèn)題

§ 如果你使用cli創(chuàng)建項(xiàng)目（即項(xiàng)目根目錄是package.json），不管用什么ide，即便是用HBuilderX，切記cli項(xiàng)目的編譯器是在項(xiàng)目下的，HBuilderX不管怎么升級(jí)都不會(huì)影響編譯器版本。你需要手動(dòng)npm update來(lái)升級(jí)編譯器。以及如果你想要安裝less、scss等預(yù)編譯器，也需要自己npm安裝在項(xiàng)目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線(xiàn)打包，請(qǐng)注意HBuilderX升級(jí)后，真機(jī)運(yùn)行基座和云打包對(duì)應(yīng)引擎跟隨HBuilderX升級(jí)，而你的sdk需要手動(dòng)升級(jí)。sdk的版本升級(jí)一般滯后HBuilderX正式版升級(jí)一兩天。

§ 如果你使用自定義基座，之前制作的自定義基座是不會(huì)跟隨HBuilderX升級(jí)的，升級(jí)HBuilderX后你應(yīng)該重新制作新版自定義基座。

§ 如果你使用wgt升級(jí)，新版HBuilderX編譯的wgt，運(yùn)行到之前的runtime上，一定要先測(cè)試好，看有沒(méi)有兼容性問(wèn)題。如果有問(wèn)題，就不要wgt升級(jí)，整包升級(jí)。

§ 考慮到向下兼容，uni-app編譯器在升級(jí)為新的自定義組件模式后，同時(shí)保留了對(duì)老編譯模式的向下兼容。

在HBuilderX alpha版中，App端一定會(huì)使用新編譯器，不理會(huì)manifest配置。

在HBuilderX 正式版中，新創(chuàng)建的項(xiàng)目會(huì)使用新編譯器，老項(xiàng)目不會(huì)強(qiáng)制使用，而是開(kāi)發(fā)者自己在manifest里配置開(kāi)啟。

§ 如果你使用其他ide開(kāi)發(fā)uni-app，會(huì)經(jīng)常因?yàn)槠村e(cuò)單詞而運(yùn)行失敗，因?yàn)榻?jīng)過(guò)webpack編譯一道，很多錯(cuò)誤反應(yīng)的不夠直觀，排錯(cuò)時(shí)間很長(zhǎng)，不如從開(kāi)始就依賴(lài)有良好提示的HBuilderX，避免敲錯(cuò)單詞。

§ 云打包的引擎版本說(shuō)明

HBuilderX Alpha，只有1套云打包機(jī)，不管你的HBuilderX alpha版本多少，對(duì)應(yīng)的打包機(jī)一定是最新的alpha版的客戶(hù)端引擎。

HBuilderX正式版，有2套打包機(jī)，一個(gè)是最新正式版，一個(gè)是次新正式版。

中間的緊急更新版本沒(méi)有獨(dú)立打包機(jī)。

舉個(gè)例子：

HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個(gè)正式版。

那么當(dāng)前可用的打包機(jī)有1.9.1和1.8.2這2臺(tái)。（即每個(gè)大版本的最后一個(gè)版本）

除了這2個(gè)HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版對(duì)應(yīng)的打包機(jī)。（即只保留2個(gè)大版本的云打包機(jī)）

【詳情請(qǐng)看】

一、HTML

HTML書(shū)寫(xiě)規(guī)范

H5新增標(biāo)簽

HTML渲染過(guò)程

二、CSS

css盒子模型概念

css彈性布局概念

三、JavaScript

事件模型

DOM2級(jí)事件模型

閉包

原型鏈

四、移動(dòng)Web開(kāi)發(fā)

常見(jiàn)的布局方案

移動(dòng)端前端常見(jiàn)的觸摸相關(guān)事件touch、tap、swipe等整理

移動(dòng)端前端手勢(shì)事件

移動(dòng)端頁(yè)面渲染優(yōu)化

GPU渲染

GPU核心渲染過(guò)程

五、調(diào)試

常用的調(diào)試工具

Chrome控制臺(tái)調(diào)試js使用

移動(dòng)端測(cè)試

六、HTTP網(wǎng)絡(luò)知識(shí)

常見(jiàn)的HTTP狀態(tài)碼

不同請(qǐng)求類(lèi)型的區(qū)別

WEB緩存方案

——————————

牛客網(wǎng)（）

- 專(zhuān)業(yè)IT筆試面試備考平臺(tái)

- 最全C++JAVA前端等互聯(lián)網(wǎng)技術(shù)求職題庫(kù)

- 全面提升IT編程能力

- 程序員交友圣地

分享了一些Web前端的面試題，限時(shí)一小時(shí)，你看看自己能夠答出多少道！

放心，這些面試題都是一些非常基礎(chǔ)的知識(shí)，只要你在平時(shí)認(rèn)真聽(tīng)課、學(xué)習(xí)了，那么這些面試題肯定不會(huì)難道你。

建議：雖然沒(méi)有人監(jiān)督你，但還是希望你不要去尋找答案，脫離百度，拿起紙筆，你試一下自己究竟能夠答出個(gè)什么水平！有沒(méi)有真本領(lǐng)？答案盡在這些面試題里！那么，你準(zhǔn)備好了嗎？OK！計(jì)時(shí)開(kāi)始！

一、HTML常見(jiàn)題目

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

02、HTML5為什么只需要寫(xiě)？

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

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

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

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

07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？

08、如何區(qū)分HTML和HTML5？

09、簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？

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

二、CSS類(lèi)的題目

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

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

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

04、CSS3新增偽類(lèi)有那些？

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

06、display有哪些值？說(shuō)明他們的作用。

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

08、CSS3有哪些新特性？

09、請(qǐng)解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場(chǎng)景？

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

三、Java類(lèi)的題目

01、介紹Java的基本數(shù)據(jù)類(lèi)型。

02、說(shuō)說(shuō)寫(xiě)Java的基本規(guī)范？

03、Java原型，原型鏈？有什么特點(diǎn)？

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

05、Java如何實(shí)現(xiàn)繼承？

06、Java創(chuàng)建對(duì)象的幾種方式？

07、Java作用鏈域？

08、談?wù)凾his對(duì)象的理解。

09、eval是做什么的？

10、什么是window對(duì)象？什么是document對(duì)象？

OK，一小時(shí)到了，這個(gè)時(shí)間可不算短了，那么這些面試題你答出了幾道呢？你寫(xiě)的答案正確了嗎？現(xiàn)在你可以去翻看答案了。

如果你答出了絕大多數(shù)的或者是全部的題，并且答案也正確了，那么恭喜你……

你這時(shí)心里是不是有點(diǎn)小竊喜，認(rèn)為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實(shí)上這只能表明你的基礎(chǔ)扎實(shí)，畢竟這只是一些非?；A(chǔ)的面試題。騷年~繼續(xù)努力吧！

如果你只答出了小部分或者答出了大部分題但答案不正確，那么我只想說(shuō)：“騷年，你的水平還差的遠(yuǎn)呢。”連這么基礎(chǔ)的題你都打不出來(lái)，還想拿高薪？回去再練一段時(shí)間吧！

扎實(shí)的基礎(chǔ)是你拿高薪的重要武器，如果你連基礎(chǔ)都不扎實(shí)，那么想要攻克“高薪”這個(gè)厚實(shí)的堡壘，那只是癡人說(shuō)夢(mèng)罷了。

1.前端框架類(lèi)問(wèn)題，問(wèn)你會(huì)不會(huì)用vue react啊

2.語(yǔ)言類(lèi)，問(wèn)你一些JavaScript語(yǔ)言的問(wèn)題

3.項(xiàng)目經(jīng)驗(yàn)，讓你講講做過(guò)的項(xiàng)目，遇到的問(wèn)題和解決之道

2020年Web前端面試題匯總(一)

今天小編要跟大家分享的文章是關(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)

又被稱(chēng)為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(n-1)是左子樹(shù)的節(jié)點(diǎn)數(shù)量，

F(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;

}

4.sessionStorage、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ì)話(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===

str.split('').reverse().join('');

}

6.不借助臨時(shí)變量，進(jìn)行兩個(gè)整數(shù)的交換?

輸入a=3,b=1,

輸出a=1,b=3

letswap=(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)容仍然很合理。

8.get和post請(qǐng)求在緩存方面的區(qū)別?

get請(qǐng)求類(lèi)似于查找的過(guò)程，用戶(hù)獲取數(shù)據(jù)，

可以不用每次都與數(shù)據(jù)庫(kù)連接，所以可以使用緩存。

post不同，post做的一般是修改和刪除的工作，

所以必須與數(shù)據(jù)庫(kù)交互，所以不能使用緩存。

因此get請(qǐng)求適合于請(qǐng)求緩存。

9.如何解決異步回調(diào)地獄?

promise、generator、async/await

10.圖片的懶加載和預(yù)加載?

預(yù)加載：提前加載圖片，

當(dāng)用戶(hù)需要查看時(shí)可直接

從本地緩存中渲染。

懶加載：懶加載的主要目的

是作為服務(wù)器前端的優(yōu)化，

減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。

兩種技術(shù)的本質(zhì)：

兩者的行為是相反的，

一個(gè)是提前加載，

一個(gè)是遲緩甚至不加載。

懶加載對(duì)服務(wù)器前端有一定

的緩解壓力作用，

預(yù)加載則會(huì)增加服務(wù)器前端壓力。

11.bind，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í)行。

12.js怎么控制一次加載一張圖片，加載完后再加載下一張?

方法一:

varobj=newImage();

obj.src="#/21.jpg";

obj.onload=function(){

document.getElementById("pic")

.innnerHTML="";

}

加載中

方法二:

varobj=newImage();

obj.src="#/21.jpg";

obj.onreadystatechange=function(){

if(this.readyState=="complete"){

document.getElementById("pic")

.innnerHTML="";

}

}

加載中

以上就是小編今天為大家分享的關(guān)于2020年Web前端面試題匯總的文章，希望本篇文章能夠?qū)ο胍獏⒓觲eb前端面試的小伙伴們有所幫助，想要了解更多Web前端相關(guān)知識(shí)記得關(guān)注北大青鳥(niǎo)Web培訓(xùn)官網(wǎng)。最后祝愿小伙伴們面試成功，成為一名優(yōu)秀的Web前端工程師。

前端常見(jiàn)面試題

前端開(kāi)發(fā)可能問(wèn)到的問(wèn)題：

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

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

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

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

類(lèi)組件的生命周期？

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

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

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

解釋localstorage sessionstorage cookie

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

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

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

div水平垂直居中？

position有哪些值

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

React-router

html+css

頁(yè)面增刪改查

position的值 absolute relative fixed static

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

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

對(duì)Hooks的理解

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

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

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

你看

關(guān)于中級(jí)前端開(kāi)發(fā)面試題和前端開(kāi)發(fā)面試筆試題的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。