前端面試題彙總（長期更新）

彙總來自網絡教程，僅做爲參考

 

1.瀏覽器頁面有哪三層構成，分別是什麼，做用是什麼?

構成：結構層、表示層、行爲層 

分別是：HTML、CSS、JavaScript 

做用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。

 

2.HTML5的優勢與缺點？

優勢： a、網絡標準統1、HTML5自己是由W3C推薦出來的。

          b、多設備、跨平臺 ，被大量應用於移動應用程序和遊戲。

          c、提升可用性和改進用戶的友好體驗。

          d、語義化。

          e、能夠給站點帶來更多的多媒體元素(視頻和音頻)。

          f、能夠很好的替代Flash和Silverlight。

          g、涉及到網站的抓取和索引的時候，對於SEO很友好。

         

 

缺點： a、安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。 

          b、瀏覽器兼容性支持度不夠。 

          c、技術門檻：HTML5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰 

          d、性能：某些平臺上的引擎問題致使HTML5性能低下。 

 

3.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、 聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。 

（2）、嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行。 

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。               

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。 

 

4.HTML5有哪些新特性、移除了哪些元素？

Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規範，把 HTML5 的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。

結構性元素主要負責web上下文結構的定義

section：在 web 頁面應用中，該元素也能夠用於區域的章節描述。

header：頁面主體上的頭部， header 元素每每在一對 body 元素中。

footer：頁面的底部（頁腳），一般會標出網站的相關信息。

nav：專門用於菜單導航、連接導航的元素，是 navigator 的縮寫。

article：用於表現一篇文章的主體內容，通常爲文字集中顯示的區域。

級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割。

aside：用於表達註記、貼士、側欄、摘要、插入的引用等做爲補充主體的內容。

figure：是對多個元素進行組合並展現的元素，一般與 ficaption 聯合使用。

code：表示一段代碼塊。

dialog：用於表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用於表示說話者，而 dd 用來表示說話內容。

行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展現的基礎。

meter：表示特定範圍內的數值，可用於工資、數量、百分比等。

time：表示時間值。

progress：用來表示進度條，可經過對其 max 、 min 、 step 等屬性進行控制，完成對進度的表示和監事。

video：視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。

audio：音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種音頻媒體格式。

交互性元素主要用於功能性的內容表達，會有必定的內容和數據的關聯，是各類事件的基礎。

details：用來表示一段具體的內容，可是內容默承認能不顯示，經過某種手段（如單擊）與 legend 交互纔會顯示出來。

datagrid：用來控制客戶端數據與顯示，能夠由動態腳本及時更新。

menu：主要用於交互菜單（曾被廢棄又被從新啓用的元素）。

command：用來處理命令按鈕。

 

5.你作的網頁在哪些流覽器測試過,這些瀏覽器的內核分別是什麼?

a、 IE: trident 內核

b、 Firefox ： gecko 內核

c、 Safari:webkit 內核

d、 Opera: 之前是 presto 內核， Opera 現已改用 Google Chrome 的 Blink 內核

e、 Chrome:Blink( 基於 webkit ， Google 與 Opera Software 共同開發 )

 

6.對WEB標準以及W3C的理解與認識?

閉合標籤，標籤小寫，正確嵌套，提升搜索機器人搜索概率。

使用外鏈的css和js，結構表現和行爲分離。

文件下載和頁面響應更快。

內容被更多，更廣的用戶設備訪問。

簡潔的代碼和組件。

易維護，模塊化，易用性。

 

7.什麼是WebGL,它有什麼優勢?

3D繪圖標準。

把openGL ES2.0和js結合在一塊兒，在HTML5 canvas上提供硬件加速。

用於設計3D結構的網頁或者遊戲。

 

優點在於：無需任何瀏覽器插件，經過統一接口實現。

 

8.什麼是語義化

HTML5新增的許多標籤體現了語義化。

好比<section>標籤就是章節的意思，可使用在一些文章裏。

使用語義化能夠更好的維護代碼，使瀏覽器能更好的解析。

 

9.說說你對SVG理解?

圖片任意縮放而不會損壞圖片質量。

圖片小，加載速度快。

 

10.介紹一下你對瀏覽器內核的理解？

瀏覽器內核分爲渲染引擎和js引擎。

渲染引擎負責html，xml和圖像等，也包括css。同時計算如何顯示網頁等。不一樣的內核對於網頁語法的解釋也不一樣，那麼顯示的樣式也就會不一樣。

js引擎是對js的解析和執行，實現網頁的動態效果。

 

11.如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket、 SharedWorker ；

也能夠調用localstorage、 cookies 等本地存儲方式；

localstorage另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，

咱們經過監聽事件，控制它的值來進行頁面信息通訊；

注意quirks： Safari 在無痕模式下設置 localstorge 值時會拋出 QuotaExceededError 的異常；

 

12.title與h3的區別、b與strong的區別、i與em的區別？

title僅僅是標題，而h3強調了標題的層次。

strong爲重讀內容，增強語氣，在使用閱讀設備的時候會重讀。b只是強調內容。

i爲斜體，而em爲強調文本。

 

13.HTML5標籤的做用?(用途)

更加規範

是瀏覽器更易解析識別。

 

14.簡述一下src與href的區別？

src：引用並替換當前位置的資源。好比你在html的一個地方使用圖片的src，那麼在瀏覽器上就會有一個圖片代替在你的代碼這個位置。

href：重點是這是一個連接，word裏的超文本連接和這個的意思差很少，它是連接的一種關係。

 

兩者的區別：src在加載的時候是串行的，必需要等src加載完才能夠。而href是並行的。