前端面試題及答案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)結尾處加空p標簽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(銷毀后) 在實例銷毀之后調用。調用后,所有的事件監聽器會被移除,所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。