前端面試——初(H)入(T)江(M)湖(L)

時間 2019-11-08

標籤前端面試欄目快樂工作简体版

原文原文鏈接

前言

若是以爲文章對您有幫助記得給個 Star，你的 star 是我動力的源泉。github 地址javascript

正所謂面試如考試，考試如戰場。戰場上必將刀光劍影。css

閱文檔，刷試題，只求簡歷能入圍html

會面試官，戲 HR，一面二面全拿下java

三年實戰，五年經驗，項目實戰全靠吹git

等通知，等通知，（此處不知道寫什麼了）github

小生最近查閱了許多關於html的面試資料，發現比較散亂不集中，因而把大多數有關html比較重要的部分給摘要下來。web

目錄
標籤相關
DOCTYPE 有什麼用
HTML5 爲何只須要寫`<!DOCTYPE HTML>`
script、script async 和 script defer 的區別
簡述一下你對 HTML 語義化的理解
行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
爲何最好把 css 的 link 標籤放在 head 標籤中，而把 js 的 script 標籤放在 body 標籤前
瀏覽器內核
什麼是漸進式渲染
常見的瀏覽器內核有哪些
介紹一下你對瀏覽器內核的理解
離線緩存
HTML5 的離線儲存怎麼使用
瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和加載的呢
其餘
cookie，session，sessionStorage，localStorage 對比
link 和 @import
如何實現瀏覽器內多個標籤頁之間的通訊?(阿里)
img 元素的 srcset 屬性
iframe 有那些缺點
什麼是漸進式渲染
頁面可見性
DOM 事件流

引言

DOCTYPE 有什麼用

WEB 世界中存在許多不一樣的文檔，只有瞭解文檔的類型，瀏覽器才能正確的把文檔顯示出來面試
HTML 也有多個不一樣的版本，只有確切知道頁面使用的是哪一個具體的 HTML 版本，瀏覽器才能徹底正確地顯示出 HTML 頁面ajax

因此使用<!DOCTYPE>來解決這個問題，它不是 HTML 標籤，只是爲瀏覽器提供文檔類型的聲明。瀏覽器

HTML5 類型文檔的聲明爲：<!DOCTYPE html>

<!DOCTYPE>聲明位於位於 HTML 文檔中的第一行，處於<html>標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE 不存在或格式不正確會致使文檔以兼容模式呈現

標準模式的排版和 JS 運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做

HTML5 爲何只須要寫`<!DOCTYPE HTML>`

HTML5 不基於 SGML，所以不須要對 DTD 進行引用，可是須要 doctype 來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而 HTML4.01 基於 SGML,因此須要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。

cookie，session，sessionStorage，localStorage 對比

操做/名	session	cookie	sessionStorage	localStorage
由誰初始化	服務器	客戶端或者服務器(通常是服務器)，若是客戶端建立則默認關閉瀏覽器 cookies 失效	客戶端	客戶端
存儲位置	服務器，可是 sessionId 會返回客戶端存儲在 cookie 中	客戶端	客戶端	客戶端
生命週期	設定超時時間（默認關閉瀏覽器失效）	手動設置	當前會話有效(同源同學口)關閉頁面或瀏覽器被清除，刷新或者進入另外一個同源頁面沒有影響	永久
容量	不宜過大，不然會給服務器性能形成影響	4kb	5mb	5mb
與服務器端通訊	服務器操做	每次都會攜帶在 http 頭中，保存過多的數據會帶來性能	僅在客戶端保存，不參與服務器通訊	當前頁面窗口
訪問權限	任意窗口（由於 sessionId 存在 cookie 中）	任意窗口	任意窗口

`<script>`、`<script async>`和`<script defer>`的區別

<script> : 遇到該標籤將致使 HTML 解析中斷，而後去提取對應腳本並當即執行，執行結束 HTML 才能繼續解析。

<script async> : 遇到該標籤 HTML 並不會中止解析，而是與腳本的提取和執行工做同時進行，腳本執行完畢時間不肯定，可能在 HTML 解析完成以前或以後，因此只有當腳本與其餘腳本獨立時才使用該標籤，不然可能致使後續腳本訪問不到前面腳本狀況。

<script defer> : 腳本提取過程與 HTML 解析過程並行，但執行過程必須等到 HTML 解析完畢，若是有多個 defer，腳本的執行順序與在文檔中的出現順序執行。

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

爲何最好把 css 的`<link>`標籤放在`<head>`標籤中，而把 js 的`<script>`標籤放在`</body>`標籤前？

css 標籤應該放在標籤之間，由於若是放在標籤的前面，那麼當 DOM 樹構建完成了，渲染樹才構建，那麼當渲染樹構建完成，瀏覽器不得再也不從新渲染整個頁面，這樣形成了資源的浪費，效率也不高。若是放在之間，瀏覽器邊構建邊渲染，效率要高的多。將樣式表放在文檔底部附近一些瀏覽器會阻止渲染，以免在頁面樣式發生變化時，從新繪製頁面中的元素。因此將標籤放在標籤中這種作法能夠防止呈現給用戶空白的頁面或沒有樣式的內容。
當 js 文件放在中時，瀏覽器構建 DOM 樹的時候遇到 js 文件加載會阻塞，也就是說，瀏覽器不會加載 body 中的標籤，一旦這個 js 文件的數量和內容都比較大，那麼就會形成頁面空白的狀況，致使較差的用戶體驗。（js 文件之因此會阻塞後續加載是由於在當前 JS 加載和執行完成前，後續全部資源的下載有多是不必的）。因此 script 標籤最好放在標籤的前面，由於放在全部 body 中的標籤後面就不會出現網頁加載時出現空白的狀況，能夠持續的給用戶提供視覺反饋，同時在有些狀況下，會下降錯誤的發生。

img 元素的 srcset 屬性

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
複製代碼

上面的例子表示瀏覽器寬度達到 800px 則加載 middle.jpg ，達到 1400px 則加載 big.jpg。注意：像素密度描述只對固定寬度圖片有效。

img 元素的 size 屬性給瀏覽器提供一個預估的圖片顯示寬度。

<img src="images/gun.png" srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w" sizes="(max-width: 320px) 300w, 1200w" />
複製代碼

上面的例子表示瀏覽器視口爲 320px 時圖片寬度爲 300px，其餘狀況爲 1200px。

css 屬性 image-set()支持根據用戶分辨率適配圖像。

body {
  background-image: -webkit-image-set(
    url(../images/pic-1.jpg) 1x,
    url(../images/pic-2.jpg) 2x,
    url(../images/pic-3.jpg) 600dpi
  );
  background-image: image-set(
    url(../images/pic-1.jpg) 1x,
    url(../images/pic-2.jpg) 2x,
    url(../images/pic-3.jpg) 600dpi
  );
}
複製代碼

述代碼將會爲普通屏幕使用 pic-1.jpg，爲高分屏使用 pic-2.jpg，若是更高的分辨率則使用 pic-3.jpg，好比印刷。

什麼是漸進式渲染

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

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

首先：CSS 規範規定，每一個元素都有 display 屬性，肯定該元素的類型，每一個元素都有默認的 display 值，如 div 的 display 默認值爲「block」，則爲「塊級」元素；span 默認 display 屬性值爲「inline」，是「行內」元素

行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常見的空元素：br hr img input link meta

常見的瀏覽器內核有哪些

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

編寫 css 的時候兼容不一樣內核 ：

/* 設置文字不可選取 */
* {
  -moz-user-select: none; /* 火狐 瀏覽器 */
  -webkit-user-select: none; /* Webkit 瀏覽器 */
  -o-user-select: none; /* Opera 瀏覽器 */
  -ms-user-select: none; /* IE10 瀏覽器 */
  -khtml-user-select: none; /* 早期瀏覽器 */
  user-select: none; /* 默認 */
}
複製代碼

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

主要分紅兩部分：渲染引擎(layoutengineer 或 RenderingEngine)和 JS 引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

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

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

內核筆記

引擎/瀏覽器	Chrome	Firefox	Safari	IE
渲染引擎	Blink	Gecko	Webkit	Trident
js 引擎	V8	SpiderMonkey	Nitro	Chakra

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

WebSocket、SharedWorker；

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

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

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

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

實現多個標籤頁之間通訊的幾種方法(sharedworker)

webSocket 如何兼容低瀏覽器

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

基於 multipart 編碼發送 XHR 、

基於長輪詢的 XHR

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

link 屬於 XHTML 標籤，除了加載 CSS 外，還能用於定義 RSS,定義 rel 鏈接屬性等做用；而@import 是 CSS 提供的，只能用於加載 CSS;
頁面被加載的時，link 會同時被加載，而@import 引用的 CSS 會等到頁面被加載完再加載;
import 是 CSS2.1 提出的，只在 IE5 以上才能被識別，而 link 是 XHTML 標籤，無兼容問題;

簡述一下你對 HTML 語義化的理解

html 語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式 CSS 狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於 HTML 標記來肯定上下文和各個關鍵字的權重，利於 SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5 的離線儲存怎麼使用

原理：HTML5 的離線存儲是基於一個新建的.appcache 文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

使用:

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

在 cache.manifest 文件的編寫離線存儲的資源；

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html
複製代碼

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

瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和加載的呢

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

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

iframe 有那些缺點

iframe 會阻塞主頁面的 Onload 事件；
搜索引擎的檢索程序沒法解讀這種頁面，不利於 SEO;

動態給 iframe 添加 src 屬性值，這樣能夠繞開如下兩個問題。
iframe 和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用 iframe 以前須要考慮這兩個缺點。若是須要使用 iframe，最好是經過 javascript

頁面可見性

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;

在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

一般咱們使用獲取頁面是否可見會使用到以下的方法。

// 當前窗口獲得焦點
window.onfocus = function() {
  // 動畫
  // ajax 輪詢等等
};

// 當前窗口失去焦點
window.onblur = function() {
  // 中止動畫
  // 中止 ajax 輪詢等等
};
複製代碼

可是上面的方法有個缺陷，就是當咱們頁面並無隱藏，好比我將鼠標點擊頁面之外的任何地方，都會觸發窗口失去焦點的事件。因此咱們比較難知道頁面是否真的隱藏了。

若是是作的移動端頁面，上面的方法就比較可靠

使用 H5 引入的 Page Visibility API，可以比較好的彌補咱們上面所提到的缺陷。

Page Visibility API 自己很是簡單，由如下三部分組成。

document.hidden：表示頁面是否隱藏的布爾值。頁面隱藏包括頁面在後臺標籤頁中或者瀏覽器最小化（注意，頁面被其餘軟件遮蓋並不算隱藏，好比打開的 sublime 遮住了瀏覽器）

document.visibilityState：表示下面 4 個可能狀態的值
- hidden：頁面在後臺標籤頁中或者瀏覽器最小化
- visible：頁面在前臺標籤頁中
- prerender：頁面在屏幕外執行預渲染處理 document.hidden 的值爲 true
- unloaded：頁面正在從內存中卸載

Visibilitychange 事件：當文檔從可見變爲不可見或者從不可見變爲可見時，會觸發該事件。

監聽 Visibilitychange 事件，當事件觸發的時候獲取 document.hidden 的值

document.addEventListener('visibilitychange', function() {
  var isHidden = document.hidden;
  if (isHidden) {
    // 動畫中止
    // 服務器輪詢中止 等等
  } else {
    // 動畫開始
    // 服務器輪詢
  }
});
複製代碼