前端面試題及其總結

劍開天門發表於2019-02-06
前端面試題

HTML部分

1、Doctype作用？標準模式與相容模式有什麼區別？

  • 宣告位於HTML文件的第一行，處於標籤之前。用來告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現
  • 標準模式：排版和js運作方式都是以該瀏覽器支援的最高標準執行。
  • 相容模式：頁面以寬鬆的向後相容的方式顯示，模擬老式瀏覽器的行為以防止站點無法執行。
  • 例子：1、width不同 在嚴格模式中，width是內容寬度(content)，但是在相容模式中，width是(元素的實際寬度),(怪異盒模型是margin之外是width的範圍)

2、html5為什麼只需要寫<!DOCTYPE>

HTML5不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為

所以，html5只有一種：<!DOCTYPE> 但是html4.01有三種，分別是strict（不包含展示性和棄用元素，不允許框架集）、transitional（包含展示性和棄用元素，不允許框架集）、frameset（允許框架集）

3、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

常見的行內元素有：a，b，span，img（我曾以為是block），input，strong，select

常見的塊級元素有：div、ul（無序）、ol（有序）、li、p等

常見的空元素：<br><hr><link><script>

空元素定義：html元素的內容就是其兩個標籤之間的content，所以，標籤之間沒有內容的就是空元素

4、頁面匯入樣式時，使用link和@import有什麼區別

寫法上：

<link rel="stylesheet" href="路徑" />

<style type="text/css">
    @import '路徑'
</style>
複製程式碼

本質上：link屬於XHTML標籤，除了載入css之外，還能定義RSS，定義rel連線屬性等作用。而@import是css提供的，只能用於載入css

解析上：link是跟著頁面載入同時載入的，但是@import會等到頁面載入完再載入

相容上：@import IE5以上才能識別，無限制

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

主要分為兩部分：

  • 渲染引擎
  • JS引擎

渲染引擎：取得網頁的內容（html、xml、圖片）、構造cssom樹、計算網頁的顯示方式，比如各元素寬高，然後輸出至顯示器或印表機。

js引擎：解析和執行javascript來實現網頁的動態效果

6、常見的瀏覽器核心有哪些（背記）？

  • Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
  • Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  • Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
  • Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

*Blink是Chrome使用的，webkit的簡化版本，但是效率等都較之前有了提升

詳細文章：瀏覽器核心的解析和對比

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

實現上：h5不再是SGML的子集。

新特性：主要是關於影象，位置，儲存，多工等功能的增加。

如：

繪畫canvas

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

本地離線儲存localStorage，長期儲存，瀏覽器關閉之後資料不丟失
sessionStorage的資料在瀏覽器關閉後自動刪除

語意化更好的內容元素，比如 article、footer、header、nav、section

表單控制元件，calendar、date、time、email、url、search;

新的技術webworker, websocket, Geolocation;

移除的元素：
  純表現的元素：basefont，big，center，font, s，strike，tt，u;
  對可用性產生負面影響的元素：frame，frameset，noframes；
複製程式碼

處理相容性： IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式。

也可以使用html5shim，可以讓IE9或更低版本能支援html5

 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
複製程式碼

如何區分HTML5： DOCTYPE宣告\新增的結構元素\功能元素

8、對html語義化的理解（瞭解）

  • 用正確的標籤做正確的事情。
  • html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
  • html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
  • 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
  • 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

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

在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。 原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。

如何使用：

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

2、在cache.manifest檔案的編寫離線儲存的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

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

10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？（這個比上面重要）

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

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

11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。

  • cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
  • sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小：

  • cookie資料大小不能超過4k。
  • sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：

  • localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
  • sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
  • cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

12、iframe有那些缺點？

  • iframe會阻塞主頁面的Onload事件；
  • 搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
  • iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
  • 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
  • 動態給iframe新增src屬性值，這樣可以繞開以上兩個問題。

13、Label的作用是什麼？是怎麼用的？

用來關聯某個標籤，可以是表單標籤，也可以是button，這樣就可以直接點選label的範圍來觸發繫結標籤的事件

用法：

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

自動完成：當你給輸入框輸入內容時，瀏覽器會從之前同名輸入框的歷史記錄中查詢出類似的內容並列在輸入框下面。

給form或者該input設定autocomplete=off。

經過實驗，提交之後，歷史記錄才會儲存，當然，必須是name相同的input才會共享歷史記錄

15、如何實現瀏覽器內多個標籤頁之前的通訊（阿里）？

WebSocket、SharedWorder（需要實現試試）

也可以呼叫localstorage、cookies等本地儲存方式

16、webSocket如何相容低瀏覽器？(阿里)（暫時沒有實現）

Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於 multipart 編碼傳送 XHR 、基於長輪詢的 XHR

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

頁面可見性：該網頁是否處於可見狀態。比如網頁最小化，或是一個非前置的網頁卡，那麼visibilityState 的值就是hidden，如果是可見狀態，則是visible。

用途：

  • 通過 visibilityState 的值檢測頁面當前是否可見，以及開啟網頁的時間等;
  • 在頁面被切換到其他後臺程式的時候，自動暫停音樂或視訊的播放；

詳細可見：Page Visibility(頁面可見性) API介紹、微擴充

18、如何在頁面上實現一個圓形的可點選區域？（只有第二個會，其餘需要實現）

1、map+area或者svg

2、border-radius

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

19、實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

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

區分使用者是計算機還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水；

有效防止黑客對某一個特定註冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試。

簡單的歸總，就是為了分清楚操作者是人還是惡意程式

title與h1的區別、b與strong的區別、i與em的區別？

這個問題涉及到語義化的問題

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，主要影響的頁面爬蟲與SEO

strong是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：<strong>會重讀，而<B>是展示強調內容。

i內容展示為斜體，em表示強調的文字

Physical Style Elements -- 自然樣式標籤: b, i, u, s, pre

Semantic Style Elements -- 語義樣式標籤:strong, em, ins, del, code

如果不能確定時首選使用自然樣式標籤。

（。。。未完待續）

相關文章