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