一文分析前端面試中的圖片懶載入問題，快來看看吧~

嗨！大家好！我是前端小白，一隻治療系前端碼猿，小白學前端，從這開始，和我一起與程式碼對話，傾聽它們心底的呼聲，期待著大家的點贊與關注➕，我們一起學前端吧。

最近整理了一些前端高頻面試題，分享給大家，如有問題歡迎留言指正，面試專欄我會長期更新，歡迎大家點贊、收藏，感謝！

1。 什麼是 _DOCTYPE_， 有何作用？

Doctype

是HTML5的文件宣告，透過它可以告訴瀏覽器，使用哪一個HTML版本標準解析文件。在瀏覽器發展的過程中，HTML出現過很多版本，不同的版本之間格式書寫上略有差異。如果沒有事先告訴瀏覽器，那麼瀏覽器就不知道文件解析標準是什麼？此時，大部分瀏覽器將開啟最大相容模式來解析網頁，我們一般稱為

怪異模式

，這不僅會降低解析效率，而且會在解析過程中產生一些難以預知的`bug`，所以文件宣告是必須的。

2。 說說對 _html_ 語義化的理解

HTML標籤的語義化，簡單來說，就是用正確的標籤做正確的事情，給某塊內容用上一個最恰當最合適的標籤，使頁面有良好的結構，頁面元素有含義，無論是誰都能看懂這塊內容是什麼。

語義化的優點如下：

在沒有CSS樣式情況下也能夠讓頁面呈現出清晰的結構

有利於SEO和搜尋引擎建立良好的溝通，有助於爬蟲抓取更多的有效資訊，爬蟲是依賴於標籤來確定上下文和各個關鍵字的權重

方便團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化

3。 _src_ 和 _href_ 的區別

src和href都是HTML中特定元素的屬性，都可以用來引入外部的資源。兩者區別如下：

src：全稱_source_，它通常用於img、video、audio、script元素，透過src指向請求外部資源的來源地址，指向的內容會嵌入到文件中當前標籤所在位置，在請求src資源時，它會將資源下載並應用到文件內，比如說：js指令碼、img圖片、frame等元素。當瀏覽器解析到該元素時，會暫停其它資源下載，直到將該資源載入、編譯、執行完畢。這也是為什麼將js指令碼放在底部而不是頭部的原因。

href：全稱_hyper reference_，意味著超連結，指向網路資源，當瀏覽器識別到它指向的⽂件時，就會並⾏下載資源，不會停⽌對當前⽂檔的處理，通常用於a、link元素。

4。 _title_ 與 _h1_ 的區別、_b_ 與 _strong_ 的區別、_i_ 與 _em_ 的區別？

_title_ 屬性表示網頁的標題，_h1_ 元素則表示層次明確的頁面內容標題，對頁面資訊的抓取也有很大的影響

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

_i_ 是_italic_（斜體）的簡寫，是早期的斜體元素，表示內容展示為斜體，而 _em_ 是_emphasize_（強調）的簡寫，表示強調的文字

5。 什麼是嚴格模式與混雜模式？

嚴格模式：是以瀏覽器支援的最高標準執行

混雜模式：頁面以寬鬆向下相容的方式顯示，模擬老式瀏覽器的行為

6。 前端頁面有哪三層構成，分別是什麼？

構成：`

結構層

`、`

表示層

`、`

行為層

`

1。 結構層（structural layer）

結構層類似於蓋房子需要打地基以及房子的懸樑框架，它是由HTML超文字標記語言來建立的，也就是頁面中的各種標籤，在結構層中儲存了使用者可以看到的所有內容，比如說：一段文字、一張圖片、一段影片等等

2。 表示層（presentation layer）

表示層是由CSS負責建立，它的作用是如何顯示有關內容，學名：`層疊樣式表`，也就相當於裝修房子，看你要什麼風格的，田園的、中式的、地中海的，總之CSS都能辦妥

3。 行為層（behaviorlayer）

行為層表示網頁內容跟使用者之間產生互動性，簡單來說就是使用者操作了網頁，網頁給使用者一個反饋，這是`JavaScript`和`DOM`主宰的領域

7。 iframe的作用以及優缺點

iframe也稱作嵌入式框架，嵌入式框架和框架網頁類似，它可以把一個網頁的框架和內容嵌入到現有的網頁中。

優點：

可以用來處理載入緩慢的內容，比如：廣告

缺點：

iframe會阻塞主頁面的On​load事件

iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。但是可以透過JS動態給ifame新增src屬性值來解決這個問題，當然也可以解決iframe會阻塞主頁面的On​load事件的問題

會產生很多頁面，不易管理

瀏覽器的後退按鈕沒有作用

無法被一些搜尋引擎識別

8。 img上 title 與 alt

alt：全稱`alternate`，切換的意思，如果無法顯示影象，瀏覽器將顯示alt指定的內容

title：當滑鼠移動到元素上時顯示title的內容

區別：

一般當滑鼠滑動到元素身上的時候顯示`title`，而`alt`是img標籤特有的屬性，是圖片內容的等價描述，用於圖片無法載入時顯示，這樣使用者還能看到關於丟失了什麼東西的一些資訊，相對來說比較友好。

9。 H5和HTML5區別

H5是一個產品名詞，包含了最新的HTML5、CSS3、ES6等新技術來製作的應用

HTML5是一個技術名詞，指的就是第五代HTML

10。 行內元素和塊級元素分別有哪些？有何區別？怎樣轉換？

常見的塊級元素：`p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd`

常見的行級元素：`span、a、img、button、input、select`

塊級元素：

總是在新行上開始，就是每個塊級元素獨佔一行，預設從上到下排列

寬度缺少時是它的容器的100%，除非設定一個寬度

高度、行高以及外邊距和內邊距都是可以設定的

塊級元素可以容納其它行級元素和塊級元素

行內元素：

和其它元素都會在一行顯示

高、行高以及外邊距和內邊距可以設定

寬度就是文字或者圖片的寬度，不能改變

行級元素只能容納文字或者其它行內元素

使用行內元素需要注意的是：

行內元素設定寬度`width`無效

行內元素設定`height`無效，但是可以透過`line-height`來設定

設定`margin`只有左右有效，上下無效

設定`padding`只有左右有效，上下無效

可以透過`

`屬性對行內元素和塊級元素進行切換（主要看第 `2、3、4`三個值）：

11。 label的作用是什麼？是怎麼用的？

`label`元素不會向用戶呈現任何特殊效果，但是，它為滑鼠使用者改進了可用性，當我們在label元素內點選文字時就會觸發此控制元件。也就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。最常用label的地方就是表單中的性別單選框了，當點選文字時也能夠自動聚焦繫結的表單控制元件。

12。 對於Web標準以及W3C的理解

`Web標準`簡單來說可以分為結構、表現、行為。其中結構是由HTML各種標籤組成，簡單來說就是body裡面寫入標籤是為了頁面的結構。表現指的是CSS層疊樣式表，透過CSS可以讓我們的頁面結構標籤更具美感。行為指的是頁面和使用者具有一定的互動，這部分主要由JS組成

`W3C`，全稱：world wide web consortium是一個制定各種標準的非盈利性組織，也叫全球資訊網聯盟，標準包括HTML、CSS、ECMAScript等等，web標準的制定有很多好處，比如說：

可以統一開發流程，統一使用標準化開發工具（VSCode、WebStorm、Sublime），方便多人協作

學習成本降低，只需要學習標準就行，否則就要學習各個瀏覽器廠商標準

跨平臺，方便遷移都不同裝置

降低程式碼維護成本

13。 Quirks（怪癖）模式是什麼？它和Standards（標準）有什麼區別？

頁面如果寫了DTD，就意味著這個頁面採用對CSS支援更好的佈局，而如果沒有，則採用相容之前的佈局方式，這就是Quirks模式，有時候也叫怪癖模式、詭異模式、怪異模式。

區別：總體會有佈局、樣式解析、指令碼執行三個方面區別，這裡列舉一些比較常見的區別：

`盒模型`：在W3C標準中，如果設定一個元素的寬度和高度，指的是元素內容的寬度和高度，然而在Quirks模式下，IE的寬度和高度還包含了padding和border

`設定行內元素的高寬`：在Standards模式下，給行內元素設定width和height都不會生效，而在Quriks模式下會生效

`用margin：0 auto設定水平居中`：在Standards模式下，設定margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效

`設定百分比高度`：在Standards模式下，元素的高度是由包含的內容決定的，如果父元素沒有設定百分比的高度，子元素設定百分比的高度是無效的

14。 知道什麼是微格式嗎？談談理解，在前端構建中應該考慮微格式嗎？

所謂的微格式是建立在已有的、被廣泛採用的標準基礎之上的一組簡單的、開放的資料格式。

具體表現是把語義嵌入到HTML中，以便有助於分離式開發，並透過制定一些簡單的約定，來兼顧HTML文件的人機可讀性，相當於對web網頁進行語義註解。

採用微格式的web頁面，在HTML文件中給一些標籤增加一些屬性，這些屬性對資訊的語義結構進行註解，有助於處理HTML文件的軟體，更好的理解HTML文件。當爬取web內容時，能夠更為準確地識別內容塊的語義，微格式可以對網站進行SEO最佳化。

15。 HTML5為什麼只需要寫`<！DOCTYPE html>`？

為什麼HTML5只需要寫一段：

<！DOCTYPE html>

而HTML4卻需要寫很長的一段

<！DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4。01 Transitional//EN” “http：//www。w3。org/TR/html4/loose。dtd”>

其實主要是因為HTML5不基於SGML，所以不需要引用DTD。在HTML4中，`<！DOCTYPE>`宣告引用DTD，因為HTML4基於SGML。DTD規定了標記語言的規則，這樣瀏覽器才能正確的呈現內容。

16。 HTML5新增了哪些新特性？移除了哪些元素？

HTML5主要是關於影象、位置、儲存、多工等功能的增加：

語義化標籤，如：article、footer、header、nav等

影片video、音訊audio

畫布canvas

表單控制元件，calemdar、date、time、email

地理

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

拖拽釋放

移除的元素：

純表現的元素：`basefont、font、s、strike、tt、u、big、center`

對可選用性產生負面影響的元素：`frame、frameset、noframes`

17。 怎麼處理HTML5新標籤相容問題？

主要有兩種方式：

1。 實現標籤被識別：透過`document。createElement（tagName）`方法可以讓瀏覽器識別新的標籤，瀏覽器支援新標籤後。還可以為新標籤新增CSS樣式

2。 用JavaScript解決：使用HTML5的shim框架，在`head`標籤中呼叫以下程式碼：

<！——［if lt IE 9］>

<！［endif］——>

18。 如何實現在一張圖片上的某個區域做到點選事件

我們可以透過圖片熱區技術：

1。 插入一張圖片，並設定好影象的有關引數，在``標記中設定引數`usemap=“#Map”`，以表示對影象地圖的引用。

2。 用`

3。 分別用``標記針對相應位置互粉出多個矩形作用區域，並設定好連結引數`href`

例：

coords=“65，71，98，58，114，90，108，112，79，130，56，116，38，100，41，76，52，53，83，34，110，33，139，46，141，75，145，101，127，115，113，133，85，132，82，131，159，117” />

19。 a元素除了用於導航外，還有什麼作用？

href屬性中的url可以是瀏覽器支援的任何協議，所以a標籤可以用來手機撥號`110`，也可以用來發送簡訊`110`，還有郵件等等

當然，a元素最常見的就是用來做_錨點_和 _下載檔案_。

錨點可以在點選時快速定位到一個頁面的某個位置，而下載的原理在於a標籤所對應的資源瀏覽器無法解析，於是瀏覽器會選擇將其下載下來。

20。 你知道SEO中的TDK嗎？

在SEO中，TDK其實就是`title`、`description`、`keywords`這三個標籤，title表示標題標籤，description是描述標籤，keywords是關鍵詞標籤

想了解更多精彩內容，快來關注小白前端圈