1 . doctype(文檔類型) 的作用是什么焚鹊？
對(duì)文檔進(jìn)行有效性驗(yàn)證:
它告訴用戶代理和校驗(yàn)器這個(gè)文檔是按照什么DTD 寫的。這個(gè)動(dòng)作是被動(dòng)的蜂桶，
每次頁(yè)面加載時(shí)晓避，瀏覽器并不會(huì)下載DTD 并檢查合法性，只有當(dāng)手動(dòng)校驗(yàn)頁(yè)面時(shí)才啟用乙帮。決定瀏覽器的呈現(xiàn)模式: 對(duì)于實(shí)際操作杜漠，通知瀏覽器讀取文檔時(shí)用哪種解析算法。
如果沒有寫察净，則瀏覽器則根據(jù)自身的規(guī)則對(duì)代碼進(jìn)行解析衣盾，可能會(huì)嚴(yán)重影響HTML 排版布局椭岩。-
瀏覽器有三種方式解析HTML文檔。
- 非怪異（標(biāo)準(zhǔn)）模式
- 怪異模式
- 部分怪異（近乎標(biāo)準(zhǔn)）模式
2 . HTML 和 XHTML 有什么區(qū)別？走搁？ 如果頁(yè)面使用 'application/xhtml+xml' 會(huì)有什么問(wèn)題嗎？
答：xhtml 語(yǔ)法要求嚴(yán)格两残，一旦遇到錯(cuò)誤劣纲，立刻停止解析，并顯示錯(cuò)誤信息筑悴。
如果頁(yè)面使用'application/xhtml+xml',一些老的瀏覽器會(huì)不兼容们拙。
- XHTML 元素必須被正確地嵌套。
- XHTML 元素必須被關(guān)閉阁吝。
- 標(biāo)簽名必須用小寫字母砚婆。
- XHTML 文檔必須擁有根元素。
- 所有屬性都必須使用雙引號(hào)
3 . 如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言突勇，你會(huì)怎么做装盯？在設(shè)計(jì)和開發(fā)多語(yǔ)言網(wǎng)站時(shí)坷虑，有哪些問(wèn)題你必須要考慮？
答：編碼使用UTF-8验夯，空間域名需要支持多瀏覽地址,準(zhǔn)備多套模板猖吴。
在設(shè)計(jì)和開發(fā)多語(yǔ)言網(wǎng)站時(shí)，需要考慮:
- 應(yīng)用字符集的選擇
- 語(yǔ)言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)
- 數(shù)據(jù)庫(kù)驅(qū)動(dòng)型網(wǎng)站
- css 盒子會(huì)因?yàn)閮?nèi)容尺寸不一樣出現(xiàn)不對(duì)齊偏移
4 . 使用 data- 屬性的好處是什么挥转？
答：data-為前端開發(fā)者提供自定義屬性海蔽，這些屬性集可以通過(guò)對(duì)象的dataset屬性獲取，
不支持該屬性的瀏覽器可以通過(guò)getAttribute方法獲取:
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10
需要注意的是绑谣，data-之后的以連字符分割的多個(gè)單詞組成的屬性党窜，獲取的時(shí)候使用駝峰風(fēng)格。
并不是所有的瀏覽器都支持.dataset屬性借宵，測(cè)試的瀏覽器中只有Chrome 和Opera 支持幌衣。
5 . 請(qǐng)描述 cookies、sessionStorage 和 localStorage 的區(qū)別壤玫。 ☆ ☆ ☆
答 sessionStorage豁护、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù) 有了本地?cái)?shù)據(jù)欲间，
就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞楚里。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可用于web請(qǐng)求之間保存數(shù)據(jù)猎贴。
cookies會(huì)發(fā)送到服務(wù)器端班缎。其余兩個(gè)不會(huì)。Cookie每個(gè)域名存儲(chǔ)量比較兴省（各瀏覽器不同达址，大致4K）所有域名的存儲(chǔ)量有限制（各瀏覽器不同，大致4K）有個(gè)數(shù)限制（各瀏覽器不同）
會(huì)隨請(qǐng)求發(fā)送到服務(wù)器LocalStorage 永久存儲(chǔ) 單個(gè)域名存儲(chǔ)量比較大（推薦5MB趁耗，各瀏覽器不同）總體數(shù)量無(wú)限制
SessionStorage 只在 Session 內(nèi)有效 存儲(chǔ)量更大（推薦沒有限制沉唠，但是實(shí)際上各瀏覽器也不同）
sessionStorage 的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念苛败。
sessionStorage 是在同源的同窗口（或tab）中右冻，始終存在的數(shù)據(jù)。
也就是說(shuō)只要這個(gè)瀏覽器窗口沒有關(guān)閉著拭，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在牍帚。
關(guān)閉窗口后儡遮，sessionStorage 即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口暗赶，即使是同一頁(yè)面鄙币，sessionStorage 對(duì)象也是不同的
6 . 請(qǐng)解釋 <script>肃叶、<script async> 和 <script defer> 的區(qū)別。
答：
script
當(dāng)解析器遇到 script 標(biāo)簽時(shí)十嘿，文檔的解析將停止因惭，并立即下載并執(zhí)行腳本，腳本執(zhí)行完畢后將繼續(xù)解析文檔绩衷。defer script
當(dāng)解析器遇到 script 標(biāo)簽時(shí)蹦魔，文檔的解析不會(huì)停止，其他線程將下載腳本咳燕，待到文檔解析完成勿决，腳本才會(huì)執(zhí)行。-
async script
當(dāng)解析器遇到 script 標(biāo)簽時(shí)招盲，文檔的解析不會(huì)停止低缩，其他線程將下載腳本，腳本下載完成后開始執(zhí)行腳本曹货，腳本執(zhí)行的過(guò)程中文檔將停止解析咆繁，直到腳本執(zhí)行完畢。如果腳本不依賴于任何腳本顶籽，并不被任何腳本依賴玩般，那么則使用 defer。
如果腳本是模塊化的蜕衡，不依賴于任何腳本壤短，那么則使用 async。defer 的腳本是按照聲明順序執(zhí)行的慨仿。而 async 的腳本不同久脯，只要腳本下載完成，將會(huì)立即執(zhí)行镰吆，未必會(huì)按照聲明順序執(zhí)行帘撰。
7 . 為什么通常推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 之前万皿？你知道有哪些例外嗎摧找？
答：
瀏覽器從上到下依次解析html文檔。將 css 文件放到頭部牢硅， css 文件可以先加載蹬耘。
避免先加載 body 內(nèi)容，導(dǎo)致頁(yè)面一開始樣式錯(cuò)亂减余，然后閃爍综苔。將 javascript 文件放到底部是因?yàn)椋?若將 javascript 文件放到 head 里面，就意味著必須等到所有的 javascript 代碼都被 下載、解析和執(zhí)行完成
之后才開始呈現(xiàn)頁(yè)面內(nèi)容如筛。這樣就會(huì)造成呈現(xiàn)頁(yè)面時(shí)出現(xiàn)明顯的延遲堡牡，窗口一片空白。
為避免這樣的問(wèn)題一般將全部 javascript 文件放到 body 元素中頁(yè)面內(nèi)容的后面杨刨。
頁(yè)面加載的問(wèn)題晤柄，先把頁(yè)面加載出來(lái)，然后再去加載效果妖胀，提高用戶體驗(yàn)度
8 . 什么是漸進(jìn)式渲染 (progressive rendering)芥颈？
答：對(duì)渲染進(jìn)行分割 從具體的使用的場(chǎng)景, 不同的 Level 實(shí)際上對(duì)應(yīng)不同的頁(yè)面內(nèi)容,論壇是一個(gè)比較清晰的例子, 想象一個(gè)論壇:
網(wǎng)頁(yè)的靜態(tài)部分, HTML 固定的內(nèi)容, 比如導(dǎo)航欄和底部
- 頁(yè)面首屏的內(nèi)容, 比如一個(gè)論壇的話題
- 頁(yè)面首屏看不到的內(nèi)容, 比如話題下面多少回復(fù)
- 切換路由才會(huì)顯示的頁(yè)面, 比如導(dǎo)航的另一個(gè)頁(yè)面
- 對(duì)于這樣的情況, 顯然有若干種可行的渲染分割的方案
全在客戶端渲染
- 1, 2, 3 在服務(wù)端渲染, 4 等到用戶點(diǎn)擊從瀏覽器抓
- 1, 2 在服務(wù)器渲染, 評(píng)論由客戶端加載
- 只有 1 在服務(wù)端渲染, 動(dòng)態(tài)的數(shù)據(jù)全部由客戶端抓取.
而這些方案對(duì)于服務(wù)端來(lái)說(shuō), 性能的開銷各不相同, 形成一個(gè)梯度,
而最后一種情況, 服務(wù)端預(yù)編譯頁(yè)面就好了, 幾乎沒有渲染負(fù)擔(dān).
根據(jù)實(shí)際的場(chǎng)景, 可以有更多 Level 可以設(shè)計(jì).. 只是沒這么簡(jiǎn)單罷了.
9 . 是否了解其他基于HTML的模板引擎？
答： 現(xiàn)在市場(chǎng)比較火的是jade吧 有興趣可以移步
10 . H5有哪些新特性做粤？
答：drag & drop 浇借、 pattern 、 datalist 怕品、 download 妇垢、 prefetch 和 dns-perfetch
及布局屬性 section 、 article肉康、 nav等
記状彻馈：很多面試者僅僅只列舉新標(biāo)簽
