分享一些前端面試題實例

HTML

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

1. 聲明位於文檔中的最前面的位置，處於 標籤之前。此標籤可告知瀏覽器文件使用哪種HTML 或XHTML 規範

2. 所謂的標準模式是指，瀏覽器以W3C 標準解析執行程式碼；怪異模式則是使用瀏覽器自己的方式解析執行程式碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。

3. 瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式載入網頁並顯示，忽略DTD 聲明, 將使網頁進入怪異模式。

    * HTML5 為什麼只要寫 ？

doctype是document type（文件類型）的簡寫，在頁面中，用來指定頁面所使用的xhtml（或html）的版本。要製作符合標準的頁面，一個必不可少的關鍵組成部分就 是doctype聲明。只有確定了一個正確的doctype，xhtml裡的標識和css才能正常生效。 html 告訴瀏覽器這個檔案是html格式網頁檔.

兩個合起來就是html5標準網頁宣告,原先的是一串很長的字串,現在是這個簡潔形式,支援html5標準的主流瀏覽器都認識這個聲明。

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

行內元素有：a b span img input select strong（強調的語氣）

區塊級元素有：div ul ol li dl dt dd h1-h6 p

知名的空元素：

---

鮮為人知的是：

 

常見區塊元素(block element) address - 地址 blockquote - 區塊引用 center - 居中對齊區塊 dir - 目錄清單 div - 常用區塊級容器，也是css layout. - 互動表單 h1 - 大標題 h2 - 副標題 h3 - 3級標題 h4 - 4級標題 h5 - 5級標題 h6 - 6等級的水平分隔線選單- rames可選內容， （適用於不支援frame的瀏覽器顯示此區塊內容） noscript - 可選腳本內容（適用於不支援script的瀏覽器顯示此內容） ol - 排序表單 p - 段落 pre - 格式化文字排序清單（無序列表）

常見行內元素(inline element) a - 錨點 abbr - 縮寫 acronym - 首字 b - - 大字體 br - 換行 cite - 引用 code - 電腦程式碼(在引用原始碼的時候需要) dfn - 定義欄位 em - 強調 font - 鍵盤文字 label - 表格標籤 q - 短引用 s - 中劃線(不推薦) samp - 定義範例電腦程式碼 select - 項目選擇 線 strong - 粗體強調 sub - 下標 sup - 上標 textarea - 多行文字輸入框 tt - 電傳文字 u - 下劃線 var -「定義變數」# 電傳文字元素由上下文語境決定是塊元素還是內聯元素[1] 。 applet - java applet button - 按鈕 del - 刪除文字 iframe - inline frame ins - 插入的文字 map - 圖片區塊（map） object#- object#5

空白元素 由於HTML元素的內容是開始標籤與結束標籤之間的內容。而某些 HTML 元素具有空內容。 （empty content），那些含有空內容的HTML元素，就是空元素。空元素[2] 是在開始標籤中關閉的。 範例 
 就是沒有關閉標籤的空元素。

    * 頁面匯入樣式時，使用link和@import有什麼不同？

（1）link屬於XHTML標籤，除了載入CSS外，還能用來定義RSS, 定義rel連結屬性等作用；而@import是CSS提供的，只能用於載入CSS;

（2）頁面被載入的時，link會同時被載入，而@import所引用的CSS會等到頁面被載入完再載入;

（3）import是CSS2.1 提出的，只有在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

（4 ）：使用dom控制樣式時的差別。使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的。

（5）：@import可以在css中再次引入其他樣式表，例如可以建立一個主樣式表，在主樣式表中再引入其他的樣式表.

    * 介紹一下你對瀏覽器核心的理解？

    主要分成兩個部分：渲染引擎​​(layout engineer或Rendering Engine)和JS引擎。

　　渲染引擎：負責取得網頁的內容(HTML、XML、圖片等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然後會輸出至顯示器或列印                機。瀏覽器的核心的差異對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件用戶端以及其它需要編輯、顯示網頁內容的應用程式都需要內核。

　　JS引擎則：解析並執行javascript來實現網頁的動態效果。

   最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

    * 常見的瀏覽器核心有哪些？

    常見的有四個核心:

Trident： IE瀏覽器所使用的內核，該核心程式在1997年的IE4中首次被採用，是微軟在Mosaic程式碼的基礎之上修改而來的，並沿用到目前的IE9。 Trident實際上是一款開放的內核，其介面內核設計的相當成熟，因此才有許多採用IE內核而非IE的瀏覽器湧現（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。

 

Gecko： Netscape6開始採用的內核，後來的Mozilla FireFox (火狐瀏覽器) 也採用了該內核，Gecko的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。 Gecko引擎的由來跟IE不無關係，前面說過IE沒有使用W3C的標準，這導致了微軟內部一些開發人員的不滿；他們與當時已經停止更新了的Netscape的一些員工一起創辦了Mozilla，以當時的Mosaic內核為基礎重新編寫內核，於是開發出了Geckos。不過事實上，Gecko 核心的瀏覽器還是Firefox (火狐) 用戶最多，所以有時也會被稱為Firefox核心。另外Gecko也是一個跨平台內核，可以在Windows、 BSD、Linux和Mac OS X中使用。

 

Presto： 目前Opera採用的內核，該內核在2003年的Opera7中首次被使用，該引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，Presto有著天生的優勢，頁面的全部或部分都能夠在回應腳本事件時等情況下被重新解析。另外該核心在執行Javascrīpt的時候有著最快的速度，根據在同等條件下的測試，Presto核心執行同等Javascrīpt所需的時間僅有Trident和Gecko核心的約1/3（Trident核心最慢，不過兩者相差沒有太大）。只可惜Presto是商業引擎，這很大程度限制了Presto的發展。

 

Webkit：蘋果公司自己的內核，也是蘋果的Safari瀏覽器所使用的核心。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，皆是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟體，在GPL條約下授權，同時支援BSD系統的開發。所以Webkit也是自由軟體，同時開放原始碼。在安全性方面不受IE、Firefox的限制，所以Safari瀏覽器在國內還是很安全的。 google的chrome也使用webkit作為核心。 WebKit 核心在手機上的應用也十分廣泛，例如 Google 的手機 Gphone、 Apple 的 iPhone， 等所使用的 Browser 核心引擎，都是基於 WebKit。 win 10 的IE edge也是.......

    * html5有哪些新功能、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？

   HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

      繪畫canvas;

      用於媒介回放的video 和audio 元素;

      本地離線儲存localStorage 長期儲存數據，瀏覽器後資料不遺失;

      sessionStorage 的資料在瀏覽器關閉後自動刪除;

      語化較好的內容元素，例如article、footer、header、nav、section;## date、time、email、url、search;

      新的技術 webworker,websocket, Geolocation;

   

移除的元素：

#o #    

移除的元素：

 的元素：basefont，big，center，font, s，strike，tt，u;

      對可用性產生負面影響的元素：frame，frameset，noframes;

#     --相容:1 .IE8/IE7/IE6支援透過document.createElement方法產生的標籤，利用此特性讓這些瀏覽器支援HTML5新標籤。 2.使用是html5shim框架

         --區分:DOCTYPE宣告的方式是區分HTML和HTML5標誌的一個重要因素，此外，也可以根據新增的結構、功能元素來區分。

 

    * 簡述一下你對HTML語意化的理解？

語意化的HTML就是寫出的HTML程式碼，符合內容的結構化（內容語意化），選擇適當的標籤（程式碼語意化），能夠方便開發者閱讀和寫出更優雅的程式碼​​的同時讓瀏覽器的爬蟲和機器很好地解析。
　　1.語義化有利於SEO，有利於搜尋引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。

　　2.在沒有CSS的時候能夠清楚的看出網頁的結構，增強可讀性。

　　3.方便團隊開發與維護，語意化的HTML可以讓開發者更容易的看明白，進而提升團隊的效率與協調能力。

　　4.支援多終端設備的瀏覽器渲染。

    * HTML5的離線儲存怎麼能使用，運作原理能不能解釋一下？

HTML5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面重新加載將使用本地資源文件，在離線情況下可以繼續存取web應用，同時透過一定的手法(更新相關文件或使用相關API)，可以更新、刪除離線儲存等操作;

如何使用

：上面提到的HTML5的離線儲存是基於一個新建的.appcache檔案的，透過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在離線狀態下時，瀏覽器會透過離線儲存的資料進行頁面展示。

（1）頁面頭部像下面一樣加入一個manifest的屬性；

（2）在cache.manifest檔案的編寫離線儲存的資源；

    CACHEMANIFEST

    #v0.11

#    CACHE:

    js/app.js

    css/style.css

"

   resourse/logo.png

    FALLBACK:

    //offline.html

（3）離線狀態時，操作window.applicationCache進行需求實現。

    * 瀏覽器是怎麼對HTML5的離線儲存資源進行管理與載入的呢？

   在線的情況下，瀏覽器發現html頭部有manifest屬性，它會要求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載對應的資源並且進行離線儲存。如果已經造訪過app且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest文件，如果檔案沒有改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。

   離線的情況下，瀏覽器就直接使用離線儲存的資源。

    * 請描述 cookies，sessionStorage 和 localStorage 的差異？

 

共通點：都是保存在瀏覽器端，且同源的。

區別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地保存。 Cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。 sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。資料有效期限不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直保存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。 Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。 Web Storage 的 api 介面使用更方便。

    * iframe有那些優點和缺點？

 

iframe的優點：
1.iframe能夠原封不動的把嵌入的網頁展現出來。
2.如果有多個網頁引​​用iframe，那麼你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
3.網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加程式碼的可重複使用。
4.如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。
iframe的缺點：
1.會產生很多頁面，不容易管理。
2.iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪客的注意力，使用者體驗度差。
3.程式碼複雜，無法被一些搜尋引擎索引到，這一點很關鍵，現在的搜尋引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜尋引擎優化。
4.很多的行動裝置（PDA 手機）無法完全顯示框架，裝置相容性差。
5.iframe框架頁面會增加伺服器的http請求，對於大型網站是不可取的。

分析了這麼多，現在基本上都是用Ajax來取代iframe，所以iframe已經漸漸的退出了前端開發。

    * Label的功能是什麼？是怎麼用的？ （加 for 或 包裹）

label 標籤為 input 元素定義標註（標記）。
label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。
Label 中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。 
FOR屬性 :
功能：表示Label標籤要綁定的HTML元素，你點選這個標籤的時候，所綁定的元素將會取得焦點。 
ACCESSKEY屬性： 

功能：表示存取Label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將會取得焦點。

    * HTML5的form如何關閉自動完成功能？

autocomplete 屬性規定表單是否應該啟用自動完成功能。
自動完成允許瀏覽器預測對欄位的輸入。當使用者在欄位開始鍵入時，瀏覽器是基於先前鍵入的值，應該顯示出在欄位中填寫的選項。 <form autocomplete="on/off">
on 預設。規定啟用自動完成功能。

off 規定停用自動完成功能。

    * 如何實作瀏覽器內多個標籤頁之間的通訊? (阿里)

即將到來的 SharedWorker API 能夠在iframe甚至瀏覽器標籤或視窗中傳輸資料。它在幾年前就已在 Chrome 中得以實現，不久前也在 Firefox 上實現了，不過它在 IE 和 Safari 中仍然難以覓食。
(需要對以下應用情境找到一個優雅的解決方案：假設有個人訪問了你的網站。他依次登錄，打開第二個標籤頁並在那個標籤頁裡選擇了註銷。這時，他打開的第一個標籤頁看起來仍然保留著「已登入」的狀態，但這時他的所有操作要麼會重定向到登入頁面，要麼會直接讓他抓狂。使用者是否已登出，並對頁面做相應的改變。小題大作了。畢竟殺雞焉用牛刀，於是我開始尋找一些其它的跨標籤頁通信方式。我首先想到的就是使用 cookies ，來週期性地透過 setInterval 檢查使用者是否登入。對這個方案我並不滿意，因為這樣會把許多 CPU 週期耗費在檢查一個可能自始至終都不會滿足的條件上。這時候我就覺得還不如就直接用 「comet」（又稱輪詢）、伺服器端事件或 WebSockets 算了呢。
當我發現自己是在騎驢子找驢子的時候還是很吃驚，因為答案就是一直以來的 localStorage！

你知道 localStorage 會觸發一個事件嗎？具體地說，不論其中的哪一項在另一個瀏覽上下文中被添加、修改或刪除時，它都會觸發一個事件。實際上，這就意味著不論在哪個瀏覽器的標籤頁裡訪問了 localStorage，所有其它的標籤頁都能透過 window 對象監聽到這個事件.不論某個標籤頁在何時修改了 localStorage，都會對其餘的所有標籤觸發事件。這就代表我們只要為 localStorage 賦值，就能夠跨瀏覽器標籤通訊了。

    * webSocket如何相容於低瀏覽器？ (阿里)

(WebSocket protocol 是HTML5一種新的協定。它實作了瀏覽器與伺服器全雙工通訊(full-duplex)。在瀏覽器中透過http僅能實現單向的通訊,comet可以一定程度上模擬雙向通訊,但效率較低,並需要伺服器有較好的支援; flash中的socket和xmlsocket可以實現真正的雙向通訊,透過flex ajax bridge,可以在javascript中使用這兩個功能. 可以預見,如果websocket一旦在瀏覽器中得到實現,將會替代上面兩項技術,得到廣泛的使用.)

WebSocket是目前"唯一"的一個瀏覽器下的Socket的標準, 它是透過瀏覽器內部提供的API來實現訪問的. 低版本的瀏覽器沒有WebSocket這個標準, 就意味這些瀏覽器不允許用戶通過它們來實現Socket通訊. 解決兼容性的辦法就是準備一套Ajax + Server-side Script的後備方案. PHP Socket. 
其他方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於multipart 編碼

發送XHR 、基於長輪詢的XHR.

    * 頁面可見性（Page Visibility）API 可以有哪些用途？

透過visibilityState 的值偵測頁面目前是否可見，以及開啟網頁的時間等;

在頁面被切換到其他後台進程的時候，自動暫停音樂或影片的播放；

    * 如何在頁面上實現一個圓形的可點擊區域？

（1）map+area或svg

（2）border-radius

（3）純js實作需要求一個點在不在圓上簡單演算法、取得滑鼠座標等等

    * 實作不使用border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能維持相同效果。

 

    * 網頁驗證碼是幹嘛的，是為了解決什麼安全問題？

防止惡意註冊和暴力破解 所謂惡意註冊和暴力破解都是用軟體進行的。 人工註冊再快，也需要一項一項輸入資料，速度很慢，對伺服器基本上沒有影響。如果沒有驗證碼可以使用軟體註冊的話，可以同時運行成千上萬個線程，一次能註冊成千上萬個用戶，讓伺服器的資料庫很快變得臃腫不堪，運作效率下降。 如果一個無聊的人或競爭對手對某個網站懷有敵意，那麼這種方法很容易就能讓對方癱瘓。

    * tite與h1的差別、b與strong的差別、i與em的差別？

tilte與h1的區別

從搜尋引擎角度來說，title標籤是用來描述這個頁面的主題的，是一個網頁權重的最高點。但title標籤並不出現在文章的正文中。而h1標籤一般出現在文章的正文中，是展示給訪客的文章的標題。所以說這兩個標籤不只是不衝突的，而是合作的關係。一篇文章既要有title又要有h1標籤，既突出了文章的主題，又突出了標題和關鍵字，達到雙重優化網站的效果。一般會把title和h1標籤的內容寫成一樣，而且一般情況下一篇文章最好只用一個h1標籤，過多的h1標籤反而會讓搜尋引擎迷糊，認不清文章的主題。

b與strong的差別、i與em的差別

其實這兩對標籤最大差別就是一個給搜尋引擎看的，一個是給使用者看的。就用b和strong標籤做例子。

b標籤和strong標籤給我們的主觀感受都是加粗，但對搜尋引擎來說b標籤和普通的文字並沒有什麼區別，而strong標籤卻是起強調作用的。也就是說如果你想讓搜尋引擎認為你的某句話很重要時那就用strong標籤。如果只是想讓使用者看到加粗的效果，那就用b標籤。同理如em標籤也是針對搜尋引擎來運作的，i標籤只是讓使用者看到展示的是斜體。