關于2020年前端面試題以答案分析

這篇文章主要介紹關于2020年前端面試題以答案分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1、瀏覽器的內核分別是什么?

IE瀏覽器：trident內核 

火狐瀏覽器 gecko內核

蘋果瀏覽器 webkit內核

谷歌瀏覽器及歐鵬瀏覽器  bink內核

2、標簽上title與alt屬性的區別是什么?

alt是錯誤時提示，頁面時錯誤無法顯示時鼠標經過提示文本信息

Title 為該屬性提供信息

3、說下bootstrap柵格系統？

Bootstrap是前端一款開發移動端響應框架，會將提供視口自動分為最多12列。用行（row）與列（column）的組合來創建頁面布局，

還可以根據視口大小區分個屏幕下顯示樣式，主要分為：

.col-xs-盒子占分數超   /超小屏幕_手機/

.col-sm-盒子占分數   /小屏下/

.col-md-盒子占分數    />-992px中屏/

 .col-lg-盒子占分數  />=1200px大屏/

4、說下優雅降級和漸進增強有什么不同？

優雅降級

是指先針對高版本瀏覽器開發完整樣式功能，在對低版本瀏覽器進行優化處理，從而解決瀏覽器各版本開發時兼容問題

漸進增強

是指根據低版本瀏覽器構建符合瀏覽器基本功能樣式，在對高版本瀏覽器進行交互頁面性能優化

5、rgba和opacity有什么區別？

共同點：

rgba() 和 opacity()都可以對頁面元素進行樣式透明效果

不同點：

rgba()只作用于元素color于background屬性透明，但子級不會繼承屬性。

opacity()針對元素所有樣式透明效果

6、display:none與visiblity:hidden之間有什么區別：

display:none與visiblity:hidden是css樣式中隱藏元素方法，display:none隱藏元素不占有原來位置，

visiblity:hidden隱藏還占有原來位置

7、清除浮動方法：浮動一般發生在高度塌陷

(1)給父盒子定高

(2)給父盒子設置overflow:hidden,auto

(3)給元素定偽類：:after、zoom=1提升

(4)定位方法清除

(5)結尾處加空div標簽clear:both

8、什么是外邊距重疊：

相鄰的兩個盒子margin可結合為一個單獨外邊距

(1)margin都為正數時，折疊結果取兩者最大值

(2)margin都為負數時，折疊結果取絕對值較大值

(3)margin一正一負時，結果為兩者和

9、你遇到過哪些兼容性問題？

(1)瀏覽器默認的margin和padding不同-- 解決方案：添加全局的margin：0;padding: 0;來統一

(2)png24位圖片在iE6瀏覽器上出現背景--解決方案：做成PNG8

(3)問題癥狀：IE6里的間距比超過設置的間距

    解決方案：在display:block;后面加入display:inline;display:table;

(4)Chrome中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入CSS屬性-webkit-text-size-adjust:none解決

10、請說出幾種隱藏元素的方法：

display:none:

visibility:hidden;

position:absolute;

opacity:0;設置為0元使素完全透明

transform：scale(0)

11、::before 和:after 中雙冒號和單冒號有什么區別？解釋一下這 2 個偽元素的作用？

單冒號（:）用于CSS3偽類，雙冒號（::）用于CSS3偽元素。

想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；

在代碼順序上，::after生成的內容也比::before生成的內容靠后。

 12、=  ==  ===之間區別？

= 表示變量賦值，

==表示一般等同，會自動轉換數據類型

===  不做類型轉換，兩邊類型一定等同

13、CSS3新增偽類有那些？

  X:first-of-type 選擇其父元素的首個 <p> 元素的每個 <p> 元

 X:last-of-type  選擇其父元素的最后 <p> 元素的每個 <p> 元素。

 X:only-of-type  選擇其父元素唯一的 <p> 元素的每個 <p> 元素

 X:only-child    選擇其父元素的唯一子元素的每個 <p> 元素。

 X:nth-child(2)  選擇其父元素的第二個子元素的每個 <p> 元素。

 :enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或復選框被選中。

14、javascript數據類型：

javascript數據類型主要分為基本數據類型和引用數據類型

基本數據類型：string    boolean  number  undefined  null

特點：直接存儲在棧(中的數據

引用數據類型：object(aobujk)  Array(e we)  Function(放k生)

特點：數據存放在堆內存里

15、Sessionstorage、localstorage、cookie之間區別？

共同點：都是用于瀏覽器存儲緩存數據

不同點；

(1)cookie會將數據發送到服務端造成浪費

(2)cookie存儲數據大小不能超過4K，Sessionstorage存儲可以達5M

(3)cookie過期時間以前一直有效即使關閉瀏覽器，Sessionstorage僅在關閉瀏覽器之前，localstorage數據存儲一直有效

(4)cookie和localstorage在同源窗口下都是共享，SessionStorage不在不同不同瀏覽器下共享

16、說明this指向？

(1)全局作用域、定時器、立即執行函數this指向window

(2)comm.js中this指向當前模塊

(3)es6中this指向undefined,如：箭頭函數沒有this指向

(4)事件函數中this指向事件源，普通事件函數this指向widow

(5)對象方法調用函數this指向調用對象

更改this指向方法：

call、apply、bind

(1)都可改變this指向，都采用后續傳參方式

(2)call傳參是單個傳遞，apply是數組形式

(3)call、apply函數執行是立即執行，bind會返回一個函數，需要調用才會執行

17、Vue 生命周期***

vue實例從創建到銷毀的過程，在聲明周期每個階段，不同方法 鉤子函數共八個

(1)beforeCreate（創建前） 在數據觀測和初始化事件還未開始

(2)created（創建后） 完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來

(3)beforeMout（載入前） 在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data里面的數據和模板生成html。注意此時還沒有掛載html到頁面上

(4)mouted（載入后） 在el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互

(5)beforeUpadate（更新前） 在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

(6)updated （更新后）在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用

(7)beforeDestroy（銷毀前） 在實例銷毀之前調用。實例仍然完全可用

(8)destroyed（銷毀后） 在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

以上是關于2020年前端面試題以答案分析的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！