前端面試之Html篇

時間 2019-12-05

標籤前端面試 html 欄目快樂工作简体版

原文原文鏈接

1 . doctype(文檔類型) 的做用是什麼？ ☆javascript

對文檔進行有效性驗證:css

它告訴用戶代理和校驗器這個文檔是按照什麼DTD 寫的。這個動做是被動的，
每次頁面加載時，瀏覽器並不會下載DTD 並檢查合法性，只有當手動校驗頁面時才啓用。

決定瀏覽器的呈現模式: 對於實際操做，通知瀏覽器讀取文檔時用哪一種解析算法。html

若是沒有寫，則瀏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響HTML 排版佈局。

瀏覽器有三種方式解析HTML文檔。前端
- 非怪異（標準）模式java
- 怪異模式web
- 部分怪異（近乎標準）模式面試

2 . HTML 和 XHTML 有什麼區別？？若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎？算法

答：xhtml 語法要求嚴格，一旦遇到錯誤，馬上中止解析，並顯示錯誤信息。數據庫
若是頁面使用'application/xhtml+xml',一些老的瀏覽器會不兼容。

XHTML 元素必須被正確地嵌套。segmentfault
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)？