本篇文章給大家談談中級前端開發(fā)面試題，以及前端開發(fā)面試筆試題對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

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

2021上海中級前端面試常問問題整理

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

我是主要做vue的還沒有學vue3所以面試中大多是vue2的問題，但是上海挺多公司開始轉vue3了，這個還是要抓緊學習

先把問題記錄下來，有時間會更新答案

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

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

computed是vue的計算屬性，可以用于一些復雜的運算，有緩存性，依賴的值不變的情況下不會重新計算

1.是計算值，

2.應用：就是簡化tempalte里面{{}}計算和處理props或$emit的傳值

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

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

1.是觀察的動作，

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

3.無緩存性，頁面重新渲染時值不變化也會執(zhí)行

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

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

pc：elementui，avue，Ant Design of Vue

移動：vantui，mint ui

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

onLoad(option)

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

wx.navigateToMiniProgram

可配置跳轉版本（開發(fā)版，體驗版，正式版)

配置合法域名，新建web-view頁面

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

可參考

計算寬度不一致

ie：content+padding+border

標準：content

box-sizing：content-box ( 標準 )

box-sizing：border-box ( ie )

flex布局可以更好的適配移動端

1.flex布局

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

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

1.flex布局，左側固定寬，右側flex:1

2.左側浮動，右側margin-left:左側的寬

3.左側定寬，右側絕對定位，left:左側的寬

4.左側絕對定位，右側margin-left:左側的寬

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

相當于一個完全封閉的盒子，元素布局不受外界影響

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

可以解決浮動布局造成的父元素塌陷

解決外邊距重合的問題

可以計算浮動的高，

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

大家好，我是王我。

隨著春節(jié)的結束，各個行業(yè)也普遍開始了上班的節(jié)奏， 不過本人17號才上班。為什么？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。

HTML篇

1.doctype是什么？有哪些類型？

2.input有哪些新類型？簡要說明其8用法。

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

4.bootstrap響應式的原理是什么？

5.多移動終端頁面適配是如何實現(xiàn)的？

CSS篇

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

2.用CSS畫一個三角形

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

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

5.position為absolute，relative，fixed的定點位置

6.用三種方法清除浮動

7.請介紹一下margin塌陷問題

js篇

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

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

3.簡述一下事件穿透以及解決辦法

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

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

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

7.簡述一下ajax請求的過程。

8.簡述一下new一個人構造函數(shù)的人過程。

9.為什么會有跨域？是怎么解決跨域問題的？簡述一下原理。

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

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

12.typeof有哪些結果？

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

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

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

jquery篇

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

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

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

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

vue篇

1.簡述一下vue的生命周期及其特點

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

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

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

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

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

7.webpack的原理是什么？

8.簡述一下$nextTick的用法

瀏覽器篇

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

2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制

網絡篇

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

2.從服務器的安全考慮，是使用get請求還是post請求？

3.URL請求的過程有哪些？

項目經驗篇

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

2.常見的網頁優(yōu)化有哪些？

作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。

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

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

前幾次都是各種培訓公司，各種忽悠就不提了，說說后面4次面試的經歷。

第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個后端，一來沒有問我關于js的知識，直接問我以前做過什么，有沒有經驗，我本人不會吹牛，簡歷也沒怎么包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。

第二次面試是一個國企，這個問了很多問題，都很基礎，js數(shù)據(jù)類型，數(shù)組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然后因為他們主要用jq，所以問了很多jq的操作，關于節(jié)點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然后問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最后在現(xiàn)場做了個題目，主要就是布局然后通過ajax呈現(xiàn)數(shù)據(jù)。后面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了?？上Ш竺骐娫捗嬖嚥恢趺椿厥驴赡鼙憩F(xiàn)的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什么的也不知怎么就一五一十交代了，估計因為這個掛掉了。

第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據(jù)他的描述自己找個設計圖然后做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。

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

最后總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然后js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以后面過在來回答

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

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

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

考慮到安全應當使用session。

3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

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

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

MVVM：

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

vue中采用的是mvvm模式，這是從mvc衍生過來的

MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題

圖片說明一下：

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

MVC：

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

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

MVC兩種方式，圖片說明：

總結：

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

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

不懂得可以復制鏈接查看：

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

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

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

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

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性

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

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

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

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

5.keepAlive用過嗎？什么作用？

緩存路由組件

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

使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀

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

Home是對應的組件對象的名字，不是路由的名字

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

數(shù)組拍平也稱數(shù)組扁平化，就是將數(shù)組里面的數(shù)組打開，最后合并為一個數(shù)組

一紅六種方法吧……

了解的請看：

7.跨域的原因 解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。

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

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

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是后端解決跨域問題

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

8.uniApp兼容問題

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

§ 如果你使用離線打包，請注意HBuilderX升級后，真機運行基座和云打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯后HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座，之前制作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX后你應該重新制作新版自定義基座。

§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。

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

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

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

§ 如果你使用其他ide開發(fā)uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。

§ 云打包的引擎版本說明

HBuilderX Alpha，只有1套云打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。

HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。

中間的緊急更新版本沒有獨立打包機。

舉個例子：

HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。

那么當前可用的打包機有1.9.1和1.8.2這2臺。（即每個大版本的最后一個版本）

除了這2個HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的云打包機）

【詳情請看】

一、HTML

HTML書寫規(guī)范

H5新增標簽

HTML渲染過程

二、CSS

css盒子模型概念

css彈性布局概念

三、JavaScript

事件模型

DOM2級事件模型

閉包

原型鏈

四、移動Web開發(fā)

常見的布局方案

移動端前端常見的觸摸相關事件touch、tap、swipe等整理

移動端前端手勢事件

移動端頁面渲染優(yōu)化

GPU渲染

GPU核心渲染過程

五、調試

常用的調試工具

Chrome控制臺調試js使用

移動端測試

六、HTTP網絡知識

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

不同請求類型的區(qū)別

WEB緩存方案

——————————

?？途W（）

- 專業(yè)IT筆試面試備考平臺

- 最全C++JAVA前端等互聯(lián)網技術求職題庫

- 全面提升IT編程能力

- 程序員交友圣地

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

放心，這些面試題都是一些非?；A的知識，只要你在平時認真聽課、學習了，那么這些面試題肯定不會難道你。

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

一、HTML常見題目

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

02、HTML5為什么只需要寫？

03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

04、頁面導入樣式時，使用link和@import有什么區(qū)別？

05、介紹一下你對瀏覽器內核的理解？

06、常見的瀏覽器內核有哪些？

07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

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

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

10、HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

二、CSS類的題目

01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

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

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

04、CSS3新增偽類有那些？

05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？

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

07、position的值relative和absolute定位原點是？

08、CSS3有哪些新特性？

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

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

三、Java類的題目

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

02、說說寫Java的基本規(guī)范？

03、Java原型，原型鏈？有什么特點？

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

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

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

07、Java作用鏈域？

08、談談This對象的理解。

09、eval是做什么的？

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

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

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

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

如果你只答出了小部分或者答出了大部分題但答案不正確，那么我只想說：“騷年，你的水平還差的遠呢?！边B這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！

扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那么想要攻克“高薪”這個厚實的堡壘，那只是癡人說夢罷了。

1.前端框架類問題，問你會不會用vue react啊

2.語言類，問你一些JavaScript語言的問題

3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道

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

今天小編要跟大家分享的文章是關于2020年Web前端面試題匯總。由于內容較多小編分開為大家介紹，今天首先來和小編一起看一看第一部分的內容，希望這些面試題能夠對正準備找Web前端相關工作的小伙伴們有所幫助。

1.說幾條寫JavaScript的基本規(guī)范?

1)不要在同一行聲明多個變量;

2)請使用===/!==來比較true/false或者數(shù)值;

3)使用對象字面量替代newObject這種形式;

4)減少使用全局函數(shù),全局變量;

5)switch語句必須帶有default分支;

6)if語句必須使用大括號;

7)for-in循環(huán)中的變量;

應該使用var關鍵字明確限定作用域;

從而避免作用域全局污染。

2.說說平衡二叉樹?

平衡二叉搜索樹(Self-balancingbinarysearchtree)

又被稱為AVL樹。

具有以下性質：

1)它是一棵空樹或它的左右兩個子樹

的高度差的絕對值不超過1，

并且左右兩個子樹都是一棵平衡二叉樹。

2)平衡二叉樹必定是二叉搜索樹，反之則不一定。

3)平衡二叉樹的常用實現(xiàn)方法有紅黑樹、AVL、

替罪羊樹、Treap、伸展樹等。

最小二叉平衡樹的節(jié)點的公式如下：

F(n)=F(n-1)+F(n-2)+1備注：1是根節(jié)點，

F(n-1)是左子樹的節(jié)點數(shù)量，

F(n-2)是右子樹的節(jié)點數(shù)量。

3.清除浮動和解決垂直外邊距重疊的解決方案?

問題描述:

1)父元素沒有設置寬高，尺寸由子元素撐起;

子元素一旦浮動，父元素高度會發(fā)生塌陷。

2)子元素設置margin-top會作用的父元素的margin-top;

此時會造成垂直外邊距重疊。

.clearfix::after,.clearfix::before{

content:'';

display:table;

clear:both;

}

4.sessionStorage、localStorage和cookie?

相同點:

都用于瀏覽器端存儲的緩存數(shù)據(jù);

不同點:

1)存儲內容是否發(fā)送到服務器端

當設置了Cookie后，數(shù)據(jù)會發(fā)送到服務器端，

造成一定的寬帶浪費;xxxstorage則會將數(shù)據(jù)保存

到本地，不會造成寬帶浪費;

2)數(shù)據(jù)存儲大小不同

Cookie數(shù)據(jù)不能超過4K，適用于會話標識;

xxxstorage數(shù)據(jù)存儲可以達到5M;

3)數(shù)據(jù)存儲的有效期限不同

cookie只在設置了Cookid過期時間

之前一直有效，即使關閉窗口或者瀏覽器;

sessionStorage,僅在關閉瀏覽器之前有效;

localStorage,數(shù)據(jù)存儲永久有效;

4)作用域不同

cookie和localStorage是在同源同窗口中

都是共享的;

sessionStorage不在不同的瀏覽器窗口

中共享，即使是同一個頁面;

5.判斷一個單詞是否是回文?

回文是指把相同的詞匯或句子，

在下文中調換位置或顛倒過來，

產生首尾回環(huán)的情景，

叫做回文，也叫回環(huán)。

比如cacac，redivider。

letcheckPalindrom=(str)={

returnstr===

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

}

6.不借助臨時變量，進行兩個整數(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.請寫出至少5個html5新增的標簽，并說明其語義和應用場景?

section：定義文檔中的一個章節(jié);

nav：定義只包含導航鏈接的章節(jié);

header：定義頁面或章節(jié)的頭部;

它經常包含logo、頁面標題和導航性的目錄。

footer：定義頁面或章節(jié)的尾部;

它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯(lián)度較低的內容，

如果被刪除，剩下的內容仍然很合理。

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

get請求類似于查找的過程，用戶獲取數(shù)據(jù)，

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

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

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

因此get請求適合于請求緩存。

9.如何解決異步回調地獄?

promise、generator、async/await

10.圖片的懶加載和預加載?

預加載：提前加載圖片，

當用戶需要查看時可直接

從本地緩存中渲染。

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

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

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

兩種技術的本質：

兩者的行為是相反的，

一個是提前加載，

一個是遲緩甚至不加載。

懶加載對服務器前端有一定

的緩解壓力作用，

預加載則會增加服務器前端壓力。

11.bind，apply，call的區(qū)別?

通過apply和call改變函數(shù)的this指向，

這兩個函數(shù)的第一個參數(shù)都是一樣的，

表示要改變指向的那個對象，

第二個參數(shù)，apply是數(shù)組，

而call則是arg1,arg2...這種形式。

通過bind改變this作用域

會返回一個新的函數(shù)，

這個函數(shù)不會馬上執(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="";

}

}

加載中

以上就是小編今天為大家分享的關于2020年Web前端面試題匯總的文章，希望本篇文章能夠對想要參加web前端面試的小伙伴們有所幫助，想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網。最后祝愿小伙伴們面試成功，成為一名優(yōu)秀的Web前端工程師。

前端常見面試題

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

自我介紹（一定要對項目很熟悉）

ui-app web前端技術體系？

響應式怎么做？

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

類組件的生命周期？

阻止冒泡，阻止事件默認行為

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

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

解釋localstorage sessionstorage cookie

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

display有幾個值？默認值？

position有幾個值？默認值？

div水平垂直居中？

position有哪些值

react相關問題（概念理解、通訊組件等）、react常用內置

React-router

html+css

頁面增刪改查

position的值 absolute relative fixed static

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

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

對Hooks的理解

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

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

用css寫一個布局，左側固定寬度，右側自適應

你看

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