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（銷燬後） 在例項銷燬之後呼叫。呼叫後，所有的事件監聽器會被移除，所有的子例項也會被銷燬。該鉤子在伺服器端渲染期間不被呼叫。

推薦：