前端面试——初(H)入(T)江(M)湖(L)
前言
如果覺得文章對您有幫助記得給個 Star，你的 star 是我動力的源泉。github 地址
正所謂面試如考試，考試如戰(zhàn)場。戰(zhàn)場上必將刀光劍影。
閱文檔，刷試題，只求簡歷能入圍
會面試官，戲 HR，一面二面全拿下
三年實戰(zhàn)，五年經驗，項目實戰(zhàn)全靠吹
等通知，等通知，（此處不知道寫什么了）
小生最近查閱了許多關于html的面試資料，發(fā)現比較散亂不集中，于是把大多數有關html比較重要的部分給摘要下來。
| 標簽相關 |
| DOCTYPE 有什么用 |
| HTML5 為什么只需要寫<!DOCTYPE HTML> |
| script、script async 和 script defer 的區(qū)別 |
| 簡述一下你對 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 頁面
所以使用<!DOCTYPE>來解決這個問題，它不是 HTML 標簽，只是為瀏覽器提供文檔類型的聲明。
HTML5 類型文檔的聲明為：<!DOCTYPE html>
<!DOCTYPE>聲明位于位于 HTML 文檔中的第一行，處于<html>標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE 不存在或格式不正確會導致文檔以兼容模式呈現
標準模式的排版和 JS 運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作
HTML5 為什么只需要寫<!DOCTYPE HTML>
目錄
HTML5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；而 HTML4.01 基于 SGML,所以需要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。
cookie，session，sessionStorage，localStorage 對比
目錄
| 由誰初始化 | 服務器 | 客戶端或者服務器(一般是服務器)，如果客戶端創(chuàng)建則默認關閉瀏覽器 cookies 失效 | 客戶端 | 客戶端 |
| 存儲位置 | 服務器，但是 sessionId 會返回客戶端存儲在 cookie 中 | 客戶端 | 客戶端 | 客戶端 |
| 生命周期 | 設定超時時間（默認關閉瀏覽器失效） | 手動設置 | 當前會話有效(同源同窗口)關閉頁面或瀏覽器被清除，刷新或者進入另一個同源頁面沒有影響 | 永久 |
| 容量 | 不宜過大，否則會給服務器性能造成影響 | 4kb | 5mb | 5mb |
| 與服務器端通信 | 服務器操作 | 每次都會攜帶在 http 頭中，保存過多的數據會帶來性能 | 僅在客戶端保存，不參與服務器通信 | 當前頁面窗口 |
| 訪問權限 | 任意窗口（因為 sessionId 存在 cookie 中） | 任意窗口 | 任意窗口 |
<script>、<script async>和<script defer>的區(qū)別
目錄
- <script> : 遇到該標簽將導致 HTML 解析中斷，然后去提取對應腳本并立即執(zhí)行，執(zhí)行結束 HTML 才能繼續(xù)解析。
- <script async> : 遇到該標簽 HTML 并不會停止解析，而是與腳本的提取和執(zhí)行工作同時進行，腳本執(zhí)行完畢時間不確定，可能在 HTML 解析完成之前或之后，所以只有當腳本與其他腳本獨立時才使用該標簽，否則可能導致后續(xù)腳本訪問不到前面腳本情況。
-
<script defer> : 腳本提取過程與 HTML 解析過程并行，但執(zhí)行過程必須等到 HTML 解析完畢，如果有多個 defer，腳本的執(zhí)行順序與在文檔中的出現順序執(zhí)行。
注：沒有 src 屬性的腳本，async 與 defer 屬性會被忽略。
為什么最好把 css 的<link>標簽放在<head>標簽中，而把 js 的<script>標簽放在</body>標簽前？
目錄
css 標簽應該放在標簽之間，因為如果放在標簽的前面，那么當 DOM 樹構建完成了，渲染樹才構建，那么當渲染樹構建完成，瀏覽器不得不再重新渲染整個頁面，這樣造成了資源的浪費，效率也不高。如果放在之間，瀏覽器邊構建邊渲染，效率要高的多。將樣式表放在文檔底部附近一些瀏覽器會阻止渲染，以避免在頁面樣式發(fā)生變化時，重新繪制頁面中的元素。所以將標簽放在標簽中這種做法可以防止呈現給用戶空白的頁面或沒有樣式的內容。
當 js 文件放在中時，瀏覽器構建 DOM 樹的時候遇到 js 文件加載會阻塞，也就是說，瀏覽器不會加載 body 中的標簽，一旦這個 js 文件的數量和內容都比較大，那么就會造成頁面空白的情況，導致較差的用戶體驗。（js 文件之所以會阻塞后續(xù)加載是因為在當前 JS 加載和執(zhí)行完成前，后續(xù)所有資源的下載有可能是沒必要的）。所以 script 標簽最好放在標簽的前面，因為放在所有 body 中的標簽后面就不會出現網頁加載時出現空白的情況，可以持續(xù)的給用戶提供視覺反饋，同時在有些情況下，會降低錯誤的發(fā)生。
img 元素的 srcset 屬性
目錄
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" /> 復制代碼上面的例子表示瀏覽器寬度達到 800px 則加載 middle.jpg ，達到 1400px 則加載 big.jpg。注意：像素密度描述只對固定寬度圖片有效。
img 元素的 size 屬性給瀏覽器提供一個預估的圖片顯示寬度。
<imgsrc="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 規(guī)范規(guī)定，每個元素都有 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 引擎則：解析和執(zhí)行 javascript 來實現網頁的動態(tài)效果。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。
內核筆記
| 渲染引擎 | Blink | Gecko | Webkit | Trident |
| js 引擎 | V8 | SpiderMonkey | Nitro | Chakra |
如何實現瀏覽器內多個標簽頁之間的通信?(阿里)
目錄
WebSocket、SharedWorker；
也可以調用 localstorge、cookies 等本地存儲方式；
localstorge 另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，
我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信；
注意 quirks：Safari 在無痕模式下設置 localstorge 值時會拋出 QuotaExceededError 的異常
實現多個標簽頁之間通信的幾種方法(sharedworker)
webSocket 如何兼容低瀏覽器
目錄
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR
頁面導入樣式時，使用 link 和@import 有什么區(qū)別
目錄
-
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 一樣被存儲了下來。之后當網絡在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
使用:
頁面頭部像下面一樣加入一個 manifest 的屬性；
在 cache.manifest 文件的編寫離線存儲的資源；
CACHEMANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK://offline.html 復制代碼在離線狀態(tài)時，操作 window.applicationCache 進行需求實現。
瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢
目錄
在線的情況下，瀏覽器發(fā)現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
iframe 有那些缺點
目錄
-
iframe 會阻塞主頁面的 Onload 事件；
-
搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO;
動態(tài)給 iframe 添加 src 屬性值，這樣可以繞開以下兩個問題。
-
iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
-
使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe，最好是通過 javascript
頁面可見性
目錄
通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放；
通常我們使用獲取頁面是否可見會使用到如下的方法。
// 當前窗口得到焦點 window.onfocus = function() {// 動畫// ajax 輪詢等等 };// 當前窗口失去焦點 window.onblur = function() {// 停止動畫// 停止 ajax 輪詢等等 }; 復制代碼但是上面的方法有個缺陷，就是當我們頁面并沒有隱藏，比如我將鼠標點擊頁面以外的任何地方，都會觸發(fā)窗口失去焦點的事件。所以我們比較難知道頁面是否真的隱藏了。
如果是做的移動端頁面，上面的方法就比較可靠
使用 H5 引入的 Page Visibility API，能夠比較好的彌補我們上面所提到的缺陷。
Page Visibility API 本身非常簡單，由以下三部分組成。
- document.hidden：表示頁面是否隱藏的布爾值。頁面隱藏包括 頁面在后臺標簽頁中 或者 瀏覽器最小化（注意，頁面被其他軟件遮蓋并不算隱藏，比如打開的 sublime 遮住了瀏覽器）
- document.visibilityState：表示下面 4 個可能狀態(tài)的值
- hidden：頁面在后臺標簽頁中或者瀏覽器最小化
- visible：頁面在前臺標簽頁中
- prerender：頁面在屏幕外執(zhí)行預渲染處理 document.hidden 的值為 true
- unloaded：頁面正在從內存中卸載
- Visibilitychange 事件：當文檔從可見變?yōu)椴豢梢娀蛘邚牟豢梢娮優(yōu)榭梢姇r，會觸發(fā)該事件。
監(jiān)聽 Visibilitychange 事件，當事件觸發(fā)的時候獲取 document.hidden 的值
document.addEventListener('visibilitychange', function() {var isHidden = document.hidden;if (isHidden) {// 動畫停止// 服務器輪詢停止 等等} else {// 動畫開始// 服務器輪詢} }); 復制代碼DOM 事件流
目錄
流的概念，在現今的 JavaScript 中隨處可見。比如說 React 中的單向數據流，Node 中的流，又或是 DOM 事件流。都是流的一種生動體現。
事件流之事件冒泡與事件捕獲
事件流分有事件冒泡與事件捕獲兩種
DOM 事件流的三個階段：
事件捕獲階段
處于目標階段
事件冒泡階段
事件捕獲階段
當事件發(fā)生時，首先發(fā)生的是事件捕獲，為父元素截獲事件提供了機會。
處于目標與事件冒泡階段
事件到了具體元素時，在具體元素上發(fā)生，并且被看成冒泡階段的一部分。隨后，冒泡階段發(fā)生，事件開始冒泡。
阻止事件冒泡
事件冒泡過程，是可以被阻止的。防止事件冒泡而帶來不必要的錯誤和困擾。
。。。不斷更新
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的前端面试——初(H)入(T)江(M)湖(L)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： xttdbopen.sql
- 下一篇： 5.6 前端开发日报