H5的新特性有哪些
1.畫布(Canvas) API
2.地理(Geolocation) API
3.音頻、視頻API(audio,video)
4.localStorage和sessionStorage
5.webworker, websocket
6.header,nav,footer,aside,article,section 語義化標(biāo)簽
web worker是運(yùn)行在瀏覽器后臺(tái)的js程序，他不影響主程序的運(yùn)行，是另開的一個(gè)js線程，可以用這個(gè)線程執(zhí)行復(fù)雜的數(shù)據(jù)操作，然后把操作結(jié)果通過postMessage傳遞給主線程，這樣在進(jìn)行復(fù)雜且耗時(shí)的操作時(shí)就不會(huì)阻塞主線程了。
瀏覽器渲染原理解析
1、首先渲染引擎下載HTML，解析生成DOM Tree
2、遇到css標(biāo)簽或JS腳本標(biāo)簽就新起線程去下載他們，并繼續(xù)構(gòu)建DOM。（其中css是異步下載同步執(zhí)行）瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構(gòu)建 Rendering Tree
3、 通過 CSS Rule Tree 匹配 DOM Tree 進(jìn)行定位坐標(biāo)和大小，這個(gè)過程稱為 Flow 或 Layout 。
4、最終通過調(diào)用Native GUI 的 API 繪制網(wǎng)頁畫面的過程稱為 Paint 。
當(dāng)用戶在瀏覽網(wǎng)頁時(shí)進(jìn)行交互或通過 js 腳本改變頁面結(jié)構(gòu)時(shí)，以上的部分操作有可能重復(fù)運(yùn)行，此過程稱為 Repaint 或 Reflow。 重排是指dom樹發(fā)生結(jié)構(gòu)變化后，需要重新構(gòu)建dom結(jié)構(gòu)。 重繪是指dom節(jié)點(diǎn)樣式改變，重新繪制。 重排一定會(huì)帶來重繪，重繪不一定有重排。
如何減少瀏覽器重排：將需要多次重排的元素，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。
iframe有那些缺點(diǎn)？
- iframe會(huì)阻塞主頁面的Onload事件；
- 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
- iframe和主頁面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁面的并行加載。
- 使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過javascript
- 動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個(gè)問題。
Label的作用是什么？是怎么用的？
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
HTML5的form如何關(guān)閉自動(dòng)完成功能？
給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off。
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信? (阿里)
- WebSocket、SharedWorker；
- 也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式；
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，
我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；
注意quirks：Safari 在無痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常；
頁面可見性（Page Visibility API） 可以有哪些用途？
1 .通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時(shí)間等;
- 在頁面被切換到其他后臺(tái)進(jìn)程的時(shí)候，自動(dòng)暫停音樂或視頻的播放；
實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：<strong>會(huì)重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體，me表示強(qiáng)調(diào)的文本；
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽。
你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?
Trident內(nèi)核:IE系列
Gecko內(nèi)核:Firefox
Webkit內(nèi)核:Safari
Blink內(nèi)核：是基于Webkit內(nèi)核的子項(xiàng)目,使用的瀏覽器有：
Chrome/opera等除IE、Firefox、Safari之外的幾乎所有瀏覽器
幾乎所有國產(chǎn)雙內(nèi)核瀏覽器（Trident/Blink）如360、獵豹、qq、百度等
每個(gè)HTML文件里開頭都有個(gè)很重要的東西，Doctype，知道這是干什么的嗎？
文檔聲明。
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。（重點(diǎn)：告訴瀏覽器按照何種規(guī)范解析頁面）
IE下如不書寫文檔聲明會(huì)使用怪異模式解析網(wǎng)頁導(dǎo)致一系列CSS兼容性問題。
div+css的布局較table布局有什么優(yōu)點(diǎn)？
正常場景一般都適用div+CSS布局，
優(yōu)點(diǎn)：
1. 結(jié)構(gòu)與樣式分離
2. 代碼語義性好
3. 更符合HTML標(biāo)準(zhǔn)規(guī)范
4. SEO友好
Table布局的適用場景：
某種原因不方便加載外部CSS的場景，例如郵件正文，此時(shí)用table布局可以在無css情況下保持頁面布局正常。
img的alt與title有何異同？ strong與em的異同？
a:alt(alt text):為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會(huì)在沒有title時(shí)把a(bǔ)lt當(dāng)成 tool tip顯示)
title(tool tip):該屬性為設(shè)置該屬性的元素提供建議性的信息。
em:表現(xiàn)為斜體，語義表示強(qiáng)調(diào)
strong:表現(xiàn)為粗體，語義為強(qiáng)烈語氣，強(qiáng)調(diào)程度超過em
簡述一下src與href的區(qū)別
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。
<script src =”js.js”></script>
當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們?cè)谖臋n中添加
<link href=”common.css” rel=”stylesheet”/>
那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最后答案。面試官希望聽到是Webp。（是否有關(guān)注新技術(shù)，新鮮事物）
科普一下Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。
在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%
在css/js代碼上線之后開發(fā)人員經(jīng)常會(huì)優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請(qǐng)求一般情況下有哪些地方會(huì)有緩存處理？
dns緩存，cdn緩存，瀏覽器緩存，服務(wù)器緩存。
一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗(yàn)。
圖片懶加載，在頁面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
如果為幻燈片、相冊(cè)等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗(yàn)。
如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。
你如何理解HTML結(jié)構(gòu)的語義化？
HTML結(jié)構(gòu)語義化：
更符合W3C統(tǒng)一的規(guī)范標(biāo)準(zhǔn)，是技術(shù)趨勢。
沒有樣式時(shí)瀏覽器的默認(rèn)樣式也能讓頁面結(jié)構(gòu)很清晰。
對(duì)功能障礙用戶友好。屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。
對(duì)其他非主流終端設(shè)備友好。例如機(jī)頂盒、PDA、各種移動(dòng)終端。
對(duì)SEO友好。
談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么？
搜索引擎主要以:
外鏈數(shù)量和質(zhì)量
網(wǎng)頁內(nèi)容和結(jié)構(gòu)
來決定某關(guān)鍵字下的網(wǎng)頁搜索排名。
前端應(yīng)該注意網(wǎng)頁結(jié)構(gòu)和內(nèi)容方面的情況：
Meta標(biāo)簽優(yōu)化
主要包括主題（Title)，網(wǎng)站描述(Description)。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。
符合W3C規(guī)范的語義性標(biāo)簽的使用。
如何選取關(guān)鍵詞并在網(wǎng)頁中放置關(guān)鍵詞
搜索就得用關(guān)鍵詞。關(guān)鍵詞分析和選擇是SEO最重要的工作之一。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下），然后針對(duì)這些關(guān)鍵詞進(jìn)行優(yōu)化，包括關(guān)鍵詞密度（Density），相關(guān)度（Relavancy），突出性（Prominency）等等。
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
新特性：
- 拖拽釋放(Drag and drop) API
- 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
- 音頻、視頻API(audio,video)
- 畫布(Canvas) API
- 地理(Geolocation) API
- 本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
- 表單控件，calendar、date、time、email、url、search
- 新的技術(shù)webworker, websocket, Geolocation
移除的元素： - 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽： - IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
如何區(qū)分：
DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素
HTML5 Canvas 元素有什么用？
Canvas 元素用于在網(wǎng)頁上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在 HTML 上進(jìn)行圖形操作。
如何在 HTML5 頁面中嵌入音頻?
HTML 5 包含嵌入音頻文件的標(biāo)準(zhǔn)方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
如何在 HTML5 頁面中嵌入視頻？
和音頻一樣，HTML5 定義了嵌入視頻的標(biāo)準(zhǔn)方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
HTML5 引入什么新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl
