[面試題]關於HTML，你瞭解多少？

時間 2019-11-07

原文原文鏈接

導讀

都說金九銀十是一個面試的好季節，最近在GitHub上看到了一些關於前端的面試題，也比較基礎，在這裏整理了一下，由於內容較多，在這裏分爲HTML、CSS、JavaScript三篇，但願能夠對你們有所幫助，趁着「好季節」，找到本身心儀的工做,固然也包括我本身在內，你們一塊兒加油哈！前端

由於掘金的某條沸點，在這裏先說明一下，本篇文章適合目前正在找工做或者以爲本身的基礎不太紮實的小夥伴，大神就跳過吧O(∩_∩)O。git

轉發自 github.com/yangshun/fr…github

1.DOCTYPE有什麼用？

DOCTYPE是「document type」的縮寫。它是 HTML 中用來區分標準模式和怪異模式的聲明，用來告知瀏覽器使用標準模式渲染頁面。從中得到的啓發：在頁面開始處添加便可。面試

2.如何提供包含多種語言內容的頁面？

這個問題有點問得含糊其辭，我認爲這是在詢問最多見的狀況：如何提供包含多種語言內容的頁面，並保證頁面內容語言的一致性。瀏覽器

當客戶端向服務器發送 HTTP 請求時，一般會發送有關語言首選項的信息，好比使用Accept-Language請求頭。若是替換語言存在，服務器能夠利用該信息返回與之相匹配的 HTML 文檔。返回的 HTML 文檔還應在標籤中聲明lang屬性，好比...bash

在後臺中，HTML 將包含i18n佔位符和待以替換的內容，這些按照不一樣語言，以 YML 或 JSON 格式存儲。而後，服務器將動態生成指定語言內容的 HTML 頁面。整個過程一般須要藉助後臺框架實現。服務器

3.什麼是data-屬性？

在 JavaScript 框架變得流行以前，前端開發者常用data-屬性，把額外數據存儲在 DOM 自身中。當時沒有其餘 Hack 手段（好比使用非標準屬性或 DOM 上額外屬性）。這樣作是爲了將自定義數據存儲到頁面或應用中，對此沒有其餘更適當的屬性或元素。cookie

而如今，不鼓勵使用data-屬性。緣由之一是，用戶能夠經過在瀏覽器中利用檢查元素，輕鬆地修改屬性值，藉此修改數據。數據模型最好存儲在 JavaScript 自己中，並利用框架提供的數據綁定，使之與 DOM 保持更新。網絡

4.將 HTML5 看做成開放的網絡平臺，什麼是 HTML5 的基本構件（building block）？

1.語義 - 提供更準確地描述內容。
2.鏈接 - 提供新的方式與服務器通訊。
3.離線和存儲 - 容許網頁在本地存儲數據並有效地離線運行。
4.多媒體 - 在 Open Web 中，視頻和音頻被視爲一等公民（first-class citizens）。
5.2D/3D 圖形和特效 - 提供更多種演示選項。
6.性能和集成 - 提供更快的訪問速度和性能更好的計算機硬件。
7.設備訪問 - 容許使用各類輸入、輸出設備。
8.外觀 - 能夠開發豐富的主題。
複製代碼

5.請描述cookie、sessionStorage和localStorage的區別。

	cookie	localStorage	sessionStorage
由誰初始化	客戶端或服務器，服務器可使用Set-Cookie請求頭	客戶端	客戶端
過時時間	手動設置	永不過時	當前頁面關閉時
在當前瀏覽器會話（browser sessions）中是否保持不變	取決因而否設置了過時時間	是	否
是否隨着每一個 HTTP 請求發送給服務器	是，Cookies 會經過Cookie請求頭，自動發送給服務器	否	否
容量（每一個域名）	4kb	5MB	5MB
訪問權限	任意窗口	任意窗口	當前頁面窗口

6.請描述 `<script>`、`<script async>`和`<script defer>`的區別

<script> - HTML 解析中斷，腳本被提取並當即執行。執行結束後，HTML 解析繼續。session

<script async> - 腳本的提取、執行的過程與 HTML 解析過程並行，腳本執行完畢可能在 HTML 解析完畢以前。當腳本與頁面上其餘腳本獨立時，可使用async，好比用做頁面統計分析。

<script defer> - 腳本僅提取過程與 HTML 解析過程並行，腳本的執行將在 HTML 解析完畢後進行。若是有多個含defer的腳本，腳本的執行順序將按照在 document 中出現的位置，從上到下順序執行。

注意：沒有src屬性的腳本，async和defer屬性會被忽略。

7.爲何最好把 CSS 的`<link>`標籤放在`<head></head>`之間？爲何最好把 JS 的`<script>`標籤剛好放在`</body>`以前，有例外狀況嗎？

把<link>放在<head>中

把<link>標籤放在<head></head>之間是規範要求的內容。此外，這種作法可讓頁面逐步呈現，提升了用戶體驗。將樣式表放在文檔底部附近，會使許多瀏覽器（包括 Internet Explorer）不能逐步呈現頁面。一些瀏覽器會阻止渲染，以免在頁面樣式發生變化時，從新繪製頁面中的元素。這種作法能夠防止呈現給用戶空白的頁面或沒有樣式的內容。

把<script>標籤剛好放在</body>以前

腳本在下載和執行期間會阻止 HTML 解析。把<script>標籤放在底部，保證 HTML 首先完成解析，將頁面儘早呈現給用戶。

例外狀況是當你的腳本里包含document.write()時。可是如今，document.write()不推薦使用。同時，將<script>標籤放在底部，意味着瀏覽器不能開始下載腳本，直到整個文檔（document）被解析。也許，對此比較好的作法是，<script>使用defer屬性，放在<head>中。

複製代碼

8.什麼是漸進式渲染（progressive rendering）？

漸進式渲染是用於提升網頁性能（尤爲是提升用戶感知的加載速度），以儘快呈現頁面的技術。

在之前互聯網帶寬較小的時期，這種技術更爲廣泛。現在，移動終端的盛行，而移動網絡每每不穩定，漸進式渲染在現代前端開發中仍然有用武之地。

一些舉例：

圖片懶加載——頁面上的圖片不會一次性所有加載。當用戶滾動頁面到圖片部分時，JavaScript 將加載並顯示圖像。肯定顯示內容的優先級（分層次渲染）——爲了儘快將頁面呈現給用戶，頁面只包含基本的最少許的 CSS、腳本和內容，而後可使用延遲加載腳本或監聽DOMContentLoaded/load事件加載其餘資源和內容。異步加載 HTML 片斷——當頁面經過後臺渲染時，把 HTML 拆分，經過異步請求，分塊發送給瀏覽器。更多相關細節能夠在這裏找到。