1. DOCTYPE 的作用是什么？
<!DOCTYPE> 聲明一般位于文檔的第一行，它的作用主要是告訴瀏覽器以什么樣的模式來解析文檔。一般指定了之后會以標(biāo)準(zhǔn)模式來
進行文檔解析，否則就以兼容模式進行解析。在標(biāo)準(zhǔn)模式下，瀏覽器的解析規(guī)則都是按照最新的標(biāo)準(zhǔn)進行解析的。而在兼容模式下，瀏
覽器會以向后兼容的方式來模擬老式瀏覽器的行為，以保證一些老的網(wǎng)站的正確訪問。
html5
<!DOCTYPE html>
html4（需要指定dtd）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2. 標(biāo)準(zhǔn)模式與兼容模式
在W3C標(biāo)準(zhǔn)出來之前，瀏覽器對頁面的渲染沒有統(tǒng)一的標(biāo)準(zhǔn)，各個瀏覽器對同一頁面的渲染有一定的差異，而每個瀏覽器的不同版本對頁面的渲染也有一定程度上的差異。而W3C標(biāo)準(zhǔn)出來之后，瀏覽器對頁面的渲染就有了統(tǒng)一的標(biāo)準(zhǔn)。前者對于瀏覽器使用自己的方式渲染頁面的模式，我們稱之為兼容模式或怪異模式；而對于后者瀏覽器按照標(biāo)準(zhǔn)解析執(zhí)行代碼的模式，我們稱之為標(biāo)準(zhǔn)模式或嚴(yán)格模式。
在標(biāo)準(zhǔn)模式中，瀏覽器根據(jù)規(guī)范呈現(xiàn)頁面；
在兼容模式中，頁面以一種比較寬松的向后兼容的方式顯示。
3. 有關(guān)DTD
DTD（ Document Type Definition 文檔類型定義）是一組機器可讀的規(guī)則，它們定義 XML 或 HTML 的特定版本中所有允許元素及它們的屬性和層次關(guān)系的定義。換言之他會告訴瀏覽器這份文檔是html，而不是其他文本標(biāo)記語言
4. SGML 、 HTML 、XML 和 XHTML 的區(qū)別？
SGML 是標(biāo)準(zhǔn)通用標(biāo)記語言，是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國際標(biāo)準(zhǔn)語言，是所有電子文檔標(biāo)記語言的起源。
HTML 是超文本標(biāo)記語言，主要是用于規(guī)定怎么顯示網(wǎng)頁。
XML 是可擴展標(biāo)記語言是未來網(wǎng)頁語言的發(fā)展方向，XML 和 HTML 的最大區(qū)別就在于 XML 的標(biāo)簽是可以自己創(chuàng)建的，數(shù)量無限多，而 HTML 的標(biāo)簽都是固定的而且數(shù)量有限。
XHTML 也是現(xiàn)在基本上所有網(wǎng)頁都在用的標(biāo)記語言，他其實和 HTML 沒什么本質(zhì)的區(qū)別，標(biāo)簽都一樣，用法也都一樣，就是比 HTML 更嚴(yán)格，比如標(biāo)簽必須都用小寫，標(biāo)簽都必須有閉合標(biāo)簽等。
5. 為什么HTML5 doctype不用引入DTD
HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規(guī)范瀏覽器的行為。
其中，SGML是標(biāo)準(zhǔn)通用標(biāo)記語言,簡單的說，就是比HTML,XML更老的標(biāo)準(zhǔn)，這兩者都是由SGML發(fā)展而來的。
BUT，HTML5不是的。
6. HTML的元素分類
html4將元素主要分為行內(nèi)元素（inline）和塊級元素（block）
區(qū)別：
- 格式上行內(nèi)元素不會以新行還是，塊級元素會重啟一行
- 內(nèi)容上行內(nèi)元素只可以包含行內(nèi)元素及文本，而塊級元素可以包含行內(nèi)元素及塊級元素
- 元素屬性上主要體現(xiàn)在盒模型，行內(nèi)元素設(shè)置width，height無效，margin和padding的上下不會對其他元素產(chǎn)生影響
在實際開發(fā)中，我們還會用到inline-block的屬性，這種對外呈現(xiàn)inline（格式上不會重起一行），屬性上呈現(xiàn)block，可以設(shè)置寬高
常見的塊級元素有：div，p，ul，li...
常見的行內(nèi)元素有：a，b，span，em，sup...
html5的將元素分為元數(shù)據(jù)內(nèi)容（metadata）、流式內(nèi)容（Flow）、章節(jié)內(nèi)容（sectioning）、標(biāo)題內(nèi)容（heading）、短語內(nèi)容（phrasing）、嵌入內(nèi)容（embedded）、交互式內(nèi)容（Interactive）七種
元數(shù)據(jù)內(nèi)容被定義用于設(shè)置其他內(nèi)容的呈現(xiàn)或行為，或設(shè)置與其他文檔的關(guān)系
base link meta noscript script style template title
流式內(nèi)容指可以放在body中，用于組織文檔結(jié)構(gòu)的元素
a abbr address area （如果是 map 元素的后代）article aside audio b bdi bdo blockquote br
button canvas cite code data datalist del details dfn dialog div dl em embed fieldset
figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd label
link （如果 在 body 中允許）main map mark MathML math menu meta （如果 itemprop 屬性存在）
meter nav noscript object ol output p picture pre progress q ruby s samp script section
select slot small span strong sub supSVG svg table template textarea time u ul var video
章節(jié)內(nèi)容指用于定義內(nèi)容區(qū)域的元素
article aside nav section
標(biāo)題內(nèi)容指用于定義章節(jié)標(biāo)題的元素
h1 h2 h3 h4 h5 h6 hgroup
短語內(nèi)容指行內(nèi)形式展示的元素
a abbr area （如果是 map 元素的后代）audio b bdi bdo br button canvas cite code data datalist
del dfn em embed i iframe img input ins kbd label link（如果 在 body 中允許）map mark MathML
math meta （如果 itemprop 屬性存在）meter noscript object output picture progress q ruby s
samp script select slot small span strong sub sup SVG svg template textarea time u var video
嵌入內(nèi)容是指需要引入其他資源的元素
audio canvas embed iframe img MathML math object picture SVG svg video
交互式內(nèi)容是指會和用戶嘗試交互行為的元素
a（如果 href 屬性存在）audio（如果 controls 屬性存在） button details embed iframe
img（如果 usemap 屬性存在）input（如果type屬性存在）label object（如果 usemap 屬性
存在）select textarea video（如果 controls 屬性存在）
他們之間的關(guān)系如下
7. 有關(guān)link
- link定義文檔與外部資源的關(guān)系
- link是空元素，在開始標(biāo)簽中關(guān)閉，沒有結(jié)束標(biāo)簽
- link一般存在于head中，可以出現(xiàn)任意次數(shù)，通常用來加載外部樣式表
8. link和@import的區(qū)別
- @import是css提供的語法規(guī)則，只可以引入樣式表，link是html標(biāo)簽，除了css文件，還可以引入其他文件
- 加載順序不同，link引入的文件會被同時加載，而@import引入的文件會在頁面加載完畢后再進行加載
- 兼容性問題，@import是css2.1的語法，故只可在 IE5+ 才能識別；link 標(biāo)簽作為 HTML 元素，不存在兼容性問題。
- DOM可控性的區(qū)別，可以通過JS操作DOM插入link標(biāo)簽來改變樣式，由于dom是基于文檔的，沒法使用@import的防范插入樣式
9. 瀏覽器
瀏覽器的主要功能是將用戶選擇的 web 資源呈現(xiàn)出來，它需要從服務(wù)器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。用戶用 URI（Uniform Resource Identifier 統(tǒng)一資源標(biāo)識符）來指定所請求資源的位置。
HTML 和 CSS 規(guī)范中規(guī)定了瀏覽器解釋 html 文檔的方式，由 W3C 組織對這些規(guī)范進行維護。
但是瀏覽器廠商紛紛開發(fā)自己的擴展，對規(guī)范的遵循并不完善，這為 web 開發(fā)者帶來了嚴(yán)重的兼容性問題。
簡單來說瀏覽器可以分為兩部分，shell 和 內(nèi)核。
其中 shell 的種類相對比較多，內(nèi)核則比較少。shell 是指瀏覽器的外殼：例如菜單，工具欄等。主要是提供給用戶界面操作，參數(shù)設(shè)置等等。它是調(diào)用內(nèi)核來實現(xiàn)各種功能的。內(nèi)核才是瀏覽器的核心。內(nèi)核是基于標(biāo)記語言顯示內(nèi)容的程序或模塊。
10. 瀏覽器內(nèi)核
分類
瀏覽器內(nèi)核主要分為兩個部分：渲染引擎和JS引擎
渲染引擎的職責(zé)就是渲染，即在窗口中展示請求到的內(nèi)容，默認(rèn)情況下可以展示html、xml、圖片，安裝插件后可以展示其他內(nèi)容，如pdf
JS引擎的職責(zé)就是解析與執(zhí)行JS代碼，實現(xiàn)網(wǎng)頁的動態(tài)效果
最開始渲染引擎和JS引擎并沒有很明確的區(qū)分，后來JS引擎越來越獨立，內(nèi)核就傾向于單指渲染引擎
常見的瀏覽器內(nèi)核有以下幾種：
Trident：這種瀏覽器內(nèi)核是 IE 瀏覽器用的內(nèi)核，因為在早期 IE 占有大量的市場份額，所以這種內(nèi)核比較流行，以前有很多網(wǎng)頁也是根據(jù)這個內(nèi)核的標(biāo)準(zhǔn)來編寫的，但是這個內(nèi)核對真正的網(wǎng)頁標(biāo)準(zhǔn)支持不是很好，和 W3C 標(biāo)準(zhǔn)脫節(jié)比較嚴(yán)重。
Gecko：這是 Firefox 和 Flock 所采用的內(nèi)核，這個內(nèi)核的優(yōu)點是功能強大，可以支持很多復(fù)雜的網(wǎng)頁和瀏覽器擴展接口，但代價是要消耗更多的資源，比如內(nèi)存
Presto：這是Oprea曾經(jīng)采用的內(nèi)核，優(yōu)點是網(wǎng)頁解析速度很快，在解析JS代碼時會比其他內(nèi)核快出2~3倍，但缺點是為了性能，丟掉了一部分網(wǎng)頁兼容性
Webkit：這是sefari采用的內(nèi)核，他的優(yōu)點是·速度也很快，雖不如Presto，但也遠超Gecko和trident，缺點是對網(wǎng)頁代碼的兼容性不高，會使得一些不標(biāo)準(zhǔn)的寫法無法正確顯示
Blink：這是谷歌自研的一個引擎，內(nèi)置于chrome瀏覽器中，但實際可視為是webkit的一個分支
常見瀏覽器所使用的內(nèi)核
IE：Trident內(nèi)核，也成為IE內(nèi)核
Chrome：以前是webkit，現(xiàn)在是blink
Firefox：Gecko
Safari：webkit
Oprea：最初是presto，后來是webkit，現(xiàn)在是blink
360、獵豹：IE+chrome雙內(nèi)核
11. 瀏覽器的渲染原理
首先解析收到的文檔，根據(jù)文檔定義構(gòu)建一棵 DOM 樹，DOM 樹是由 DOM 元素及屬性節(jié)點組成的。
對 CSS 進行解析，生成 CSSOM 規(guī)則樹。
根據(jù) DOM 樹和 CSSOM 規(guī)則樹構(gòu)建渲染樹。渲染樹的節(jié)點被稱為渲染對象，渲染對象是一個包含有顏色和大小等屬性的矩形，渲染對象和 DOM 元素相對應(yīng)，但這種對應(yīng)關(guān)系不是一對一的，不可見的 DOM 元素不會被插入渲染樹。還有一些 DOM 元素對應(yīng)幾個可見對象，它們一般是一些具有復(fù)雜結(jié)構(gòu)的元素，無法用一個矩形來描述。
當(dāng)渲染對象被創(chuàng)建并添加到樹中，它們并沒有位置和大小，所以當(dāng)瀏覽器生成渲染樹以后，就會根據(jù)渲染樹來進行布局（也可以叫做回流）。這一階段瀏覽器要做的事情是要弄清楚各個節(jié)點在頁面中的確切位置和大小。通常這一行為也被稱為“自動重排”。
布局階段結(jié)束后是繪制階段，遍歷渲染樹并調(diào)用渲染對象的 paint 方法將它們的內(nèi)容顯示在屏幕上，繪制使用 UI 基礎(chǔ)組件。
值得注意的是，這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html 都解析完成之后再去構(gòu)建和布局 render 樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。由于JS可以改變CSS屬性和DOM節(jié)點，因此CSS的解析是會阻塞JS的解析，所以CSSSOM規(guī)則樹生成前，是不會執(zhí)行JS的。
12. 渲染過程中遇到JS文件怎么處理
JavaScript 的加載、解析與執(zhí)行會阻塞文檔的解析，也就是說，在構(gòu)建 DOM 時，HTML 解析器若遇到了 JavaScript，那么它會暫停文檔的解析，將控制權(quán)移交給 JavaScript 引擎，等 JavaScript 引擎運行完畢，瀏覽器再從中斷的地方恢復(fù)繼續(xù)解析文檔。
也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件，這也是都建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的原因。當(dāng)然在當(dāng)下，并不是說 script 標(biāo)簽必須放在底部，因為你可以給 script 標(biāo)簽添加 defer 或者 async 屬性。
13. CSS文件如何阻塞文檔解析
理論上，既然樣式表不改變 DOM 樹，也就沒有必要停下文檔的解析等待它們，然而，存在一個問題，JavaScript 腳本執(zhí)行時可能在文檔的解析過程中請求樣式信息，如果樣式還沒有加載和解析，腳本將得到錯誤的值，顯然這將會導(dǎo)致很多問題。
所以如果瀏覽器尚未完成 CSSOM 的下載和構(gòu)建，而我們卻想在此時運行腳本，那么瀏覽器將延遲 JavaScript 腳本執(zhí)行和文檔的解析，直至其完成 CSSOM 的下載和構(gòu)建。也就是說，在這種情況下，瀏覽器會先下載和構(gòu)建 CSSOM，然后再執(zhí)行 JavaScript，最后再繼續(xù)文檔的解析。
14. async 和 defer 的作用是什么？有什么區(qū)別？
腳本沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
defer 屬性表示延遲執(zhí)行引入的 JavaScript，即這段 JavaScript 加載時 HTML 并未停止解析，這兩個過程是并行的。當(dāng)整個 document 解析完畢后再執(zhí)行腳本文件，在 DOMContentLoaded 事件觸發(fā)之前完成。多個腳本按順序執(zhí)行。
async 屬性表示異步執(zhí)行引入的 JavaScript，與 defer 的區(qū)別在于，如果已經(jīng)加載好，就會開始執(zhí)行，也就是說它的執(zhí)行仍然會阻塞文檔的解析，只是它的加載過程不會阻塞。多個腳本的執(zhí)行順序無法保證。
15. 什么是文檔的預(yù)解析
Webkit 和 Firefox 都做了這個優(yōu)化，當(dāng)執(zhí)行 JavaScript 腳本時，另一個線程解析剩下的文檔，并加載后面需要通過網(wǎng)絡(luò)加載的資源。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是，預(yù)解析并不改變 DOM 樹，它將這個工作留給主解析過程，自己只解析外部資源的引用，比如外部腳本、樣式表及圖片。
16. 渲染頁面時常見哪些不良現(xiàn)象
FOUC：主要指的是樣式閃爍的問題，由于瀏覽器渲染機制（比如firefox），在 CSS 加載之前，先呈現(xiàn)了HTML，就會導(dǎo)致展示出無樣式內(nèi)容，然后樣式突然呈現(xiàn)的現(xiàn)象。會出現(xiàn)這個問題的原因主要是 css 加載時間過長，或者 css 被放在了文檔底部。
白屏：有些瀏覽器渲染機制（比如chrome）要先構(gòu)建 DOM 樹和 CSSOM 樹，構(gòu)建完成后再進行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加載完成，瀏覽器遲遲未渲染，從而導(dǎo)致白屏；也可能是把 js 文件放在頭部，腳本的加載會阻塞后面文檔內(nèi)容的解析，從而頁面遲遲未渲染出來，出現(xiàn)白屏問題。
17. 如何優(yōu)化關(guān)鍵渲染路徑
為盡快完成首次渲染，我們需要最大限度減小以下三種可變因素：
（1）關(guān)鍵資源的數(shù)量。
（2）關(guān)鍵路徑長度。
（3）關(guān)鍵字節(jié)的數(shù)量。
關(guān)鍵資源是可能阻止網(wǎng)頁首次渲染的資源。這些資源越少，瀏覽器的工作量就越小，對 CPU 以及其他資源的占用也就越少。
同樣，關(guān)鍵路徑長度受所有關(guān)鍵資源與其字節(jié)大小之間依賴關(guān)系圖的影響：某些資源只能在上一資源處理完畢之后才能開始下載，并且資源越大，下載所需的往返次數(shù)就越多。
最后，瀏覽器需要下載的關(guān)鍵字節(jié)越少，處理內(nèi)容并讓其出現(xiàn)在屏幕上的速度就越快。要減少字節(jié)數(shù)，我們可以減少資源數(shù)（將它們刪除或設(shè)為非關(guān)鍵資源），此外還要壓縮和優(yōu)化各項資源，確保最大限度減小傳送大小。
優(yōu)化關(guān)鍵渲染路徑的常規(guī)步驟如下：
（1）對關(guān)鍵路徑進行分析和特性描述：資源數(shù)、字節(jié)數(shù)、長度。
（2）最大限度減少關(guān)鍵資源的數(shù)量：刪除它們，延遲它們的下載，將它們標(biāo)記為異步等。
（3）優(yōu)化關(guān)鍵字節(jié)數(shù)以縮短下載時間（往返次數(shù)）。
（4）優(yōu)化其余關(guān)鍵資源的加載順序：您需要盡早下載所有關(guān)鍵資產(chǎn)，以縮短關(guān)鍵路徑長度。
18. 重繪與回流
重繪: 當(dāng)渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風(fēng)格，而不會影響布局的操作，比如 background-color，我們將這樣的操作稱為重繪。
回流：當(dāng)渲染樹中的一部分（或全部）因為元素的規(guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建的操作，會影響到布局的操作，這樣的操作我們稱為回流。
常見引起回流屬性和方法：
任何會改變元素幾何信息（元素的位置和尺寸大小）的操作，都會觸發(fā)回流。
（1）添加或者刪除可見的 DOM 元素；
（2）元素尺寸改變——邊距、填充、邊框、寬度和高度
（3）內(nèi)容變化，比如用戶在 input 框中輸入文字
（4）瀏覽器窗口尺寸改變——resize事件發(fā)生時
（5）計算 offsetWidth 和 offsetHeight 屬性
（6）設(shè)置 style 屬性的值
（7）當(dāng)你修改網(wǎng)頁的默認(rèn)字體時。
回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流?；亓魉璧某杀颈戎乩L高的多，改變父節(jié)點里的子節(jié)點很可能會導(dǎo)致父節(jié)點的一系列回流。
常見引起重繪的屬性和方法：
常見引起回流的屬性和方法
如何減少回流
（1）使用 transform 替代 top
（2）不要把節(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量
（3）不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
（4）把 DOM 離線后修改。如：使用 documentFragment 對象在內(nèi)存里操作 DOM
（5）不要一條一條地修改 DOM 的樣式。與其這樣，還不如預(yù)先定義好 css 的 class，然后修改 DOM 的 className
19. 為什么操作 DOM 慢
一些 DOM 的操作或者屬性訪問可能會引起頁面的回流和重繪，從而引起性能上的消耗。
20. DOMContentLoaded 事件和 Load 事件的區(qū)別？
當(dāng)初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表、圖像和子框架的加載完成。
Load 事件是當(dāng)所有資源加載完成后觸發(fā)的。
21. HTML5 有哪些新特性、移除了那些元素
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
新增的有：
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù) webworker, websocket;
新的文檔屬性 document.visibilityState
移除的元素有：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
21. 如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問題？
有成熟的框架可以處理，如html5shiv
22. 對 HTML 語義化的理解？
相關(guān)知識點：
（1） 用正確的標(biāo)簽做正確的事情。
（2） html 語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
（3） 即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的;
（4） 搜索引擎的爬蟲也依賴于 HTML 標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO ;
（5） 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
回答：
我認(rèn)為 html 語義化主要指的是我們應(yīng)該使用合適的標(biāo)簽來劃分網(wǎng)頁內(nèi)容的結(jié)構(gòu)。html 的本質(zhì)作用其實就是定義網(wǎng)頁文檔的結(jié)構(gòu)，一個語義化的文檔，能夠使頁面的結(jié)構(gòu)更加清晰，易于理解。這樣不僅有利于開發(fā)者的維護和理解，同時也能夠使機器對文檔內(nèi)容進行正確的解讀。比如說我們常用的 b 標(biāo)簽和 strong 標(biāo)簽，它們在樣式上都是文字的加粗，但是 strong 標(biāo)簽擁有強調(diào)的語義。對于一般顯示來說，可能我們看上去沒有差異，但是對于機器來說，就會有很大的不同。如果用戶使用的是屏幕閱讀器來訪問網(wǎng)頁的話，使用 strong 標(biāo)簽就會有明顯的語調(diào)上的變化，而 b 標(biāo)簽則沒有。如果是搜索引擎的爬蟲對我們網(wǎng)頁進行分析的話，那么它會依賴于 html 標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重，一個語義化的文檔對爬蟲來說是友好的，是有利于爬蟲對文檔內(nèi)容解讀的，從而有利于我們網(wǎng)站的 SEO 。從 html5 我們可以看出，標(biāo)準(zhǔn)是傾向于以語義化的方式來構(gòu)建網(wǎng)頁的，比如新增了 header 、footer 這些語義標(biāo)簽，刪除了 big 、font 這些沒有語義的標(biāo)簽。
23. b 與 strong 的區(qū)別和 i 與 em 的區(qū)別？
從頁面顯示效果來看，被 <b> 和 <strong> 包圍的文字將會被加粗，而被 <i> 和 <em> 包圍的文字將以斜體的形式呈現(xiàn)。但是 <b> <i> 是自然樣式標(biāo)簽，分別表示無意義的加粗，無意義的斜體，表現(xiàn)樣式為 { font-weight: bolder}，僅僅表示「這里應(yīng)該用粗體顯示」或者「這里應(yīng)該用斜體顯示」，此兩個標(biāo)簽在 HTML4.01 中并不被推薦使用。而 <em> 和 <strong> 是語義樣式標(biāo)簽。 <em> 表示一般的強調(diào)文本，而 <strong> 表示比 <em> 語義更強的強調(diào)文本。使用閱讀設(shè)備閱讀網(wǎng)頁時：<strong> 會重讀，而 <b> 是展示強調(diào)內(nèi)容。
24. 前端需要注意哪些 SEO
（1）合理的 title、description、keywords：搜索對著三項的權(quán)重逐個減小，title 值強調(diào)重點即可，重要關(guān)鍵詞出現(xiàn)不要超
過2次，而且要靠前，不同頁面 title 要有所不同；description 把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不
同頁面 description 有所不同；keywords 列舉出重要關(guān)鍵詞即可。
（2）語義化的 HTML 代碼，符合 W3C 規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁。
（3）重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內(nèi)容肯定被
抓取。
（4）重要內(nèi)容不要用 js 輸出：爬蟲不會執(zhí)行 js 獲取內(nèi)容
（5）少用 iframe：搜索引擎不會抓取 iframe 中的內(nèi)容
（6）非裝飾性圖片必須加 alt
（7）提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)
25. 瀏覽器端的存儲技術(shù)
瀏覽器常見的存儲技術(shù)有 cookie、localStorage 和 sessionStorage
SessionStorage， LocalStorage， Cookie 這三者都可以被用來在瀏覽器端存儲數(shù)據(jù)，而且都是字符串類型的鍵值對。區(qū)別在于前兩者屬于 HTML5 WebStorage，創(chuàng)建它們的目的便于客戶端存儲數(shù)據(jù)。而 cookie 是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。cookie 數(shù)據(jù)始終在同源（協(xié)議、主機、端口相同）的 http 請求中攜帶（即使不需要），會在瀏覽器和服務(wù)器間來回傳遞。
存儲大?。? cookie 數(shù)據(jù)大小不能超過4 k 。
sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大。
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)。
sessionStorage 數(shù)據(jù)在頁面會話結(jié)束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會保持原來的頁面會話。在新標(biāo)簽或窗口打開一個頁面時會在頂級瀏覽上下文中初始化一個新的會話。
cookie 設(shè)置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。
作用域：
sessionStorage 只在當(dāng)前會話中共享。
localStorage 在所有同源窗口中都是共享的。
cookie 在所有同源窗口中都是共享的。
26. iframe 有那些缺點
iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。
主要缺點有：
（1） iframe 會阻塞主頁面的 onload 事件。window 的 onload 事件需要在所有 iframe 加載完畢后（包含里面的元素）才會觸發(fā)。在 Safari 和 Chrome 里，通過 JavaScript 動態(tài)設(shè)置 iframe 的 src 可以避免這種阻塞情況。
（2） 搜索引擎的檢索程序無法解讀這種頁面，不利于網(wǎng)頁的 SEO 。
（3） iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
（4） 瀏覽器的后退按鈕失效。
（5） 小型的移動設(shè)備無法完全顯示框架。
27. Label 的作用是什么？是怎么用的？
label 標(biāo)簽來定義表單與控制之間的關(guān)系，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
28. HTML5 的 form 的自動完成功能是什么？
autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能。默認(rèn)為啟用，設(shè)置為 autocomplete=off 可以關(guān)閉該功能。自動完成允許瀏覽器預(yù)測對字段的輸入。當(dāng)用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項。
autocomplete 屬性適用于 <form>，以及下面的 <input> 類型：text, search, url, telephone, email, password, datepickers, range 以及 color
29. 如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
相關(guān)資料：
（1）使用 WebSocket，通信的標(biāo)簽頁連接同一個服務(wù)器，發(fā)送消息到服務(wù)器后，服務(wù)器推送消息給所有連接的客戶端。
（2）使用 SharedWorker （只在 chrome 瀏覽器實現(xiàn)了），兩個頁面共享同一個線程，通過向線程發(fā)送數(shù)據(jù)和接收數(shù)據(jù)來實現(xiàn)標(biāo)簽頁之間的雙向通行。
（3）可以調(diào)用 localStorage、cookies 等本地存儲方式，localStorge 另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個 storage 事件，我們通過監(jiān)聽 storage 事件，控制它的值來進行頁面信息通信；
（4）如果我們能夠獲得對應(yīng)標(biāo)簽頁的引用，通過 postMessage 方法也是可以實現(xiàn)多個標(biāo)簽頁通信的。
回答：
實現(xiàn)多個標(biāo)簽頁之間的通信，本質(zhì)上都是通過中介者模式來實現(xiàn)的。因為標(biāo)簽頁之間沒有辦法直接通信，因此我們可以找一個中介者，讓標(biāo)簽頁和中介者進行通信，然后讓這個中介者來進行消息的轉(zhuǎn)發(fā)。
第一種實現(xiàn)的方式是使用 websocket 協(xié)議，因為 websocket 協(xié)議可以實現(xiàn)服務(wù)器推送，所以服務(wù)器就可以用來當(dāng)做這個中介者。標(biāo)簽頁通過向服務(wù)器發(fā)送數(shù)據(jù)，然后由服務(wù)器向其他標(biāo)簽頁推送轉(zhuǎn)發(fā)。
第二種是使用 ShareWorker 的方式，shareWorker 會在頁面存在的生命周期內(nèi)創(chuàng)建一個唯一的線程，并且開啟多個頁面也只會使用同一個線程。這個時候共享線程就可以充當(dāng)中介者的角色。標(biāo)簽頁間通過共享一個線程，然后通過這個共享的線程來實現(xiàn)數(shù)據(jù)的交換。
第三種方式是使用 localStorage 的方式，我們可以在一個標(biāo)簽頁對 localStorage 的變化事件進行監(jiān)聽，然后當(dāng)另一個標(biāo)簽頁修改數(shù)據(jù)的時候，我們就可以通過這個監(jiān)聽事件來獲取到數(shù)據(jù)。這個時候 localStorage 對象就是充當(dāng)?shù)闹薪檎叩慕巧?
還有一種方式是使用 postMessage 方法，如果我們能夠獲得對應(yīng)標(biāo)簽頁的引用，我們就可以使用 postMessage 方法，進行通信。
30. 頁面可見性（Page Visibility API） 可以有哪些用途？
這個新的 API 的意義在于，通過監(jiān)聽網(wǎng)頁的可見性，可以預(yù)判網(wǎng)頁的卸載，還可以用來節(jié)省資源，減緩電能的消耗。比如，一旦用戶不看網(wǎng)頁，下面這些網(wǎng)頁行為都是可以暫停的。
（1）對服務(wù)器的輪詢
（2）網(wǎng)頁動畫
（3）正在播放的音頻或視頻
31. 如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
（1）純 html 實現(xiàn)，使用 <area> 來給 <img> 圖像標(biāo)記熱點區(qū)域的方式，<map> 標(biāo)簽用來定義一個客戶端圖像映射，<area> 標(biāo)簽用來定義圖像映射中的區(qū)域，area 元素永遠嵌套在 map 元素內(nèi)部，我們可以將 area 區(qū)域設(shè)置為圓形，從而實現(xiàn)可點擊的圓形區(qū)域。
（2）純 css 實現(xiàn)，使用 border-radius ，當(dāng) border-radius 的長度等于寬高相等的元素值的一半時，即可實現(xiàn)一個圓形的點擊區(qū)域。
（3）純 js 實現(xiàn)，判斷一個點在不在圓上的簡單算法，通過監(jiān)聽文檔的點擊事件，獲取每次點擊時鼠標(biāo)的位置，判斷該位置是否在我們規(guī)定的圓形區(qū)域內(nèi)。
32. 實現(xiàn)不使用 border 畫出 1 px 高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
33. title 與 h1 的區(qū)別？
title 屬性沒有明確意義只表示是個標(biāo)題，h1 則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響。
34. Img 的 title 和 alt 有什么區(qū)別？
title 通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示
alt 是 <img> 的特有屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會重點分析。
35. Canvas 和 SVG 有什么區(qū)別？
Canvas 是一種通過 JavaScript 來繪制 2D 圖形的方法。Canvas 是逐像素來進行渲染的，因此當(dāng)我們對 Canvas 進行縮放時，會出現(xiàn)鋸齒或者失真的情況。
SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。我們可以為某個元素附加 JavaScript 事件監(jiān)聽函數(shù)。并且 SVG 保存的是圖形的繪制方法，因此當(dāng) SVG 圖形縮放時并不會失真。
36. 漸進增強和優(yōu)雅降級的定義
漸進增強：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級：一開始就根據(jù)高版本瀏覽器構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。
37. attribute 和 property 的區(qū)別是什么？
attribute 是 dom 元素在文檔中作為 html 標(biāo)簽擁有的屬性；
property 就是 dom 元素在 js 中作為對象擁有的屬性。
對于 html 的標(biāo)準(zhǔn)屬性來說，attribute 和 property 是同步的，是會自動更新的，
但是對于自定義的屬性來說，他們是不同步的。
38. 對 web 標(biāo)準(zhǔn)、可用性、可訪問性的理解
可用性（Usability）：產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產(chǎn)品的質(zhì)量。可用性好意味著產(chǎn)品質(zhì)量高，是企業(yè)的核心競爭力
可訪問性（Accessibility）：Web 內(nèi)容對于殘障用戶的可閱讀和可理解性
可維護性（Maintainability）：一般包含兩個層次，一是當(dāng)系統(tǒng)出現(xiàn)問題時，快速定位并解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和增強功能。
39. head 標(biāo)簽中必不少的是？
<head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標(biāo)簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定義文檔的標(biāo)題，它是 head 部分中唯一必需的元素。
40. HTML5 新增的表單元素有？
datalist 規(guī)定輸入域的選項列表，通過 option 創(chuàng)建！
keygen 提供一種驗證用戶的可靠方法，密鑰對生成器，私鑰存于客戶端，公鑰發(fā)到服務(wù)器，用于之后驗證客戶端證書！
output 元素用于不同類型的輸出！
<title> 定義文檔的標(biāo)題，它是 head 部分中唯一必需的元素。
41. 前端性能優(yōu)化？
前端性能優(yōu)化主要是為了提高頁面的加載速度，優(yōu)化用戶的訪問體驗。我認(rèn)為可以從這些方面來進行優(yōu)化。
第一個方面是頁面的內(nèi)容方面
（1）通過文件合并、css 雪碧圖、使用 base64 等方式來減少 HTTP 請求數(shù)，避免過多的請求造成等待的情況。
（2）通過 DNS 緩存等機制來減少 DNS 的查詢次數(shù)。
（3）通過設(shè)置緩存策略，對常用不變的資源進行緩存。
（4）使用延遲加載的方式，來減少頁面首屏加載時需要請求的資源。延遲加載的資源當(dāng)用戶需要訪問時，再去請求加載。
（5）通過用戶行為，對某些資源使用預(yù)加載的方式，來提高用戶需要訪問資源時的響應(yīng)速度。
第二個方面是服務(wù)器方面
（1）使用 CDN 服務(wù)，來提高用戶對于資源請求時的響應(yīng)速度。
（2）服務(wù)器端啟用 Gzip、Deflate 等方式對于傳輸?shù)馁Y源進行壓縮，減小文件的體積。
（3）盡可能減小 cookie 的大小，并且通過將靜態(tài)資源分配到其他域名下，來避免對靜態(tài)資源請求時攜帶不必要的 cookie
第三個方面是 CSS 和 JavaScript 方面
（1）把樣式表放在頁面的 head 標(biāo)簽中，減少頁面的首次渲染的時間。
（2）避免使用 @import 標(biāo)簽。
（3）盡量把 js 腳本放在頁面底部或者使用 defer 或 async 屬性，避免腳本的加載和執(zhí)行阻塞頁面的渲染。
（4）通過對 JavaScript 和 CSS 的文件進行壓縮，來減小文件的體積。
42. 掃描二維碼登錄網(wǎng)頁是什么原理，前后兩個事件是如何聯(lián)系的？
核心過程應(yīng)該是：瀏覽器獲得一個臨時 id，通過長連接等待客戶端掃描帶有此 id 的二維碼后，從長連接中獲得客戶端上報給 server的帳號信息進行展示。并在客戶端點擊確認(rèn)后，獲得服務(wù)器授信的令牌，進行隨后的信息交互過程。在超時、網(wǎng)絡(luò)斷開、其他設(shè)備上登錄后，此前獲得的令牌或丟失、或失效，對授權(quán)過程形成有效的安全防護。
我的理解
二維碼登錄網(wǎng)頁的基本原理是，用戶進入登錄網(wǎng)頁后，服務(wù)器生成一個 uid 來標(biāo)識一個用戶。對應(yīng)的二維碼對應(yīng)了一個對應(yīng) uid 的鏈接，任何能夠識別二維碼的應(yīng)用都可以獲得這個鏈接，但是它們沒有辦法和對應(yīng)登錄的服務(wù)器響應(yīng)。比如微信的二維碼登錄，只有用微信識這個二維碼才有效。當(dāng)微信客戶端打開這個鏈接時，對應(yīng)的登錄服務(wù)器就獲得了用戶的相關(guān)信息。這個時候登錄網(wǎng)頁根據(jù)先前的長連接獲取到服務(wù)器傳過來的用戶信息進行顯示。然后提前預(yù)加載一些登錄后可能用到的信息。當(dāng)客戶端點擊確認(rèn)授權(quán)登陸后，服務(wù)器生成一個權(quán)限令牌給網(wǎng)頁，網(wǎng)頁之后使用這個令牌進行信息的交互過程。由于整個授權(quán)的過程都是在手機端進行的，因此能夠很好的防止 PC 上泛濫的病毒。并且在超時、網(wǎng)絡(luò)斷開、其他設(shè)備上登錄后，此前獲得的令牌或丟失、或失效，對授權(quán)過程能夠形成有效的安全防護。
43. Html 規(guī)范中為什么要求引用資源不加協(xié)議頭http或者https？
如果用戶當(dāng)前訪問的頁面是通過 HTTPS 協(xié)議來瀏覽的，那么網(wǎng)頁中的資源也只能通過 HTTPS 協(xié)議來引用，否則瀏覽器會出現(xiàn)警告信息，不同瀏覽器警告信息展現(xiàn)形式不同。為了解決這個問題，我們可以省略 URL 的協(xié)議聲明，省略后瀏覽器照樣可以正常引用相應(yīng)的資源，這項解決方案protocol-relative URL，暫且可譯作協(xié)議相對 URL。
如果使用協(xié)議相對 URL，無論是使用 HTTPS，還是 HTTP 訪問頁面，瀏覽器都會以相同的協(xié)議請求頁面中的資源，避免彈出類似的警告信息，同時還可以節(jié)省5字節(jié)的數(shù)據(jù)量。
