2017前端面試題之Html篇（1）
1 . doctype(文檔類型) 的作用是什麽？
-
對文檔進行有效性驗證:
它告訴用戶代理和校驗器這個文檔是按照什麽DTD 寫的。這個動作是被動的，
每次頁面加載時，瀏覽器並不會下載DTD 並檢查合法性，只有當手動校驗頁面時才啟用。 -
決定瀏覽器的呈現模式: 對於實際操作，通知瀏覽器讀取文檔時用哪種解析算法。
如果沒有寫，則瀏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響HTML 排版布局。 -
瀏覽器有三種方式解析HTML文檔。
- 非怪異（標準）模式
- 怪異模式
- 部分怪異（近乎標準）模式
2 . HTML 和 XHTML 有什麽區別？？ 如果頁面使用 ‘application/xhtml+xml‘ 會有什麽問題嗎？
答：xhtml 語法要求嚴格，一旦遇到錯誤，立刻停止解析，並顯示錯誤信息。
如果頁面使用‘application/xhtml+xml‘,一些老的瀏覽器會不兼容。
- XHTML 元素必須被正確地嵌套。
- XHTML 元素必須被關閉。
- 標簽名必須用小寫字母。
- XHTML 文檔必須擁有根元素。
- 所有屬性都必須使用雙引號
3 . 如果網頁內容需要支持多語言，你會怎麽做？在設計和開發多語言網站時，有哪些問題你必須要考慮？
答：編碼使用UTF-8，空間域名需要支持多瀏覽地址,準備多套模板。
在設計和開發多語言網站時，需要考慮:- 應用字符集的選擇
- 語言書寫習慣&導航結構
- 數據庫驅動型網站
- css 盒子會因為內容尺寸不一樣出現不對齊偏移
4 . 使用 data- 屬性的好處是什麽？
答：data-為前端開發者提供自定義屬性，這些屬性集可以通過對象的dataset屬性獲取，
不支持該屬性的瀏覽器可以通過getAttribute方法獲取:
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10 需要註意的是，data-之後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峰風格。
並不是所有的瀏覽器都支持.dataset屬性，測試的瀏覽器中只有Chrome 和Opera 支持。
5 . 請描述 cookies、sessionStorage 和 localStorage 的區別。 ☆ ☆ ☆
答 sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據 有了本地數據，
就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可用於web請求之間保存數據。
-
cookies會發送到服務器端。其余兩個不會。Cookie每個域名存儲量比較小（各瀏覽器不同，大致4K）所有域名的存儲量有限制（各瀏覽器不同，大致4K）有個數限制（各瀏覽器不同）
會隨請求發送到服務器 -
LocalStorage 永久存儲 單個域名存儲量比較大（推薦5MB，各瀏覽器不同）總體數量無限制
-
SessionStorage 只在 Session 內有效 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
sessionStorage 的概念很特別，引入了一個“瀏覽器窗口”的概念。
sessionStorage 是在同源的同窗口（或tab）中，始終存在的數據。
也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。
關閉窗口後，sessionStorage 即被銷毀。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage 對象也是不同的
6 . 請解釋 <script>、<script async> 和 <script defer> 的區別。
答：
-
script
當解析器遇到 script 標簽時，文檔的解析將停止，並立即下載並執行腳本，腳本執行完畢後將繼續解析文檔。 -
defer script
當解析器遇到 script 標簽時，文檔的解析不會停止，其他線程將下載腳本，待到文檔解析完成，腳本才會執行。 -
async script
當解析器遇到 script 標簽時，文檔的解析不會停止，其他線程將下載腳本，腳本下載完成後開始執行腳本，腳本執行的過程中文檔將停止解析，直到腳本執行完畢。如果腳本不依賴於任何腳本，並不被任何腳本依賴，那麽則使用 defer。
如果腳本是模塊化的，不依賴於任何腳本，那麽則使用 async。defer 的腳本是按照聲明順序執行的。而 async 的腳本不同，只要腳本下載完成，將會立即執行，未必會按照聲明順序執行。
7 . 為什麽通常推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 之前？你知道有哪些例外嗎？
答：
瀏覽器從上到下依次解析html文檔。將 css 文件放到頭部， css 文件可以先加載。
避免先加載 body 內容，導致頁面一開始樣式錯亂，然後閃爍。將 javascript 文件放到底部是因為：
若將 javascript 文件放到 head 裏面，就意味著必須等到所有的 javascript 代碼都被 下載、解析和執行完成
之後才開始呈現頁面內容。這樣就會造成呈現頁面時出現明顯的延遲，窗口一片空白。
為避免這樣的問題一般將全部 javascript 文件放到 body 元素中頁面內容的後面。
頁面加載的問題，先把頁面加載出來，然後再去加載效果，提高用戶體驗度8 . 什麽是漸進式渲染 (progressive rendering)？
答：對渲染進行分割 從具體的使用的場景, 不同的 Level 實際上對應不同的頁面內容,論壇是一個比較清晰的例子, 想象一個論壇:
網頁的靜態部分, HTML 固定的內容, 比如導航欄和底部
- 頁面首屏的內容, 比如一個論壇的話題
- 頁面首屏看不到的內容, 比如話題下面多少回復
- 切換路由才會顯示的頁面, 比如導航的另一個頁面
- 對於這樣的情況, 顯然有若幹種可行的渲染分割的方案
全在客戶端渲染
- 1, 2, 3 在服務端渲染, 4 等到用戶點擊從瀏覽器抓
- 1, 2 在服務器渲染, 評論由客戶端加載
- 只有 1 在服務端渲染, 動態的數據全部由客戶端抓取.
而這些方案對於服務端來說, 性能的開銷各不相同, 形成一個梯度,
而最後一種情況, 服務端預編譯頁面就好了, 幾乎沒有渲染負擔.
根據實際的場景, 可以有更多 Level 可以設計.. 只是沒這麽簡單罷了.
9 . 是否了解其他基於HTML的模板引擎？
答： 現在市場比較火的是jade吧 有興趣可以移步
jade-源於 Node.js 的 HTML 模板引擎
10 . H5有哪些新特性？
答：drag & drop 、 pattern 、 datalist 、 download 、 prefetch 和 dns-perfetch
及布局屬性 section 、 article、 nav等
記住：很多面試者僅僅只列舉新標簽
作者：歲寒3友
鏈接：http://www.jianshu.com/p/9e00f7ca28ab
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
2017前端面試題之Html篇（1）