H5的新特性有哪些
1.畫布(Canvas) API
2.地理(Geolocation) API
3.音頻阳惹、視頻API(audio,video)
4.localStorage和sessionStorage
5.webworker, websocket
6.header,nav,footer,aside,article,section 語義化標簽
web worker是運行在瀏覽器后臺的js程序，他不影響主程序的運行翻斟，是另開的一個js線程，可以用這個線程執(zhí)行復雜的數(shù)據(jù)操作，然后把操作結(jié)果通過postMessage傳遞給主線程，這樣在進行復雜且耗時的操作時就不會阻塞主線程了萍膛。
瀏覽器渲染原理解析
1、首先渲染引擎下載HTML嚷堡，解析生成DOM Tree
2卦羡、遇到css標簽或JS腳本標簽就新起線程去下載他們，并繼續(xù)構(gòu)建DOM麦到。（其中css是異步下載同步執(zhí)行）瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構(gòu)建 Rendering Tree
3、 通過 CSS Rule Tree 匹配 DOM Tree 進行定位坐標和大小欠肾，這個過程稱為 Flow 或 Layout 瓶颠。
4、最終通過調(diào)用Native GUI 的 API 繪制網(wǎng)頁畫面的過程稱為 Paint 刺桃。
當用戶在瀏覽網(wǎng)頁時進行交互或通過 js 腳本改變頁面結(jié)構(gòu)時粹淋，以上的部分操作有可能重復運行，此過程稱為 Repaint 或 Reflow瑟慈。 重排是指dom樹發(fā)生結(jié)構(gòu)變化后桃移，需要重新構(gòu)建dom結(jié)構(gòu)。 重繪是指dom節(jié)點樣式改變葛碧，重新繪制借杰。 重排一定會帶來重繪，重繪不一定有重排进泼。
如何減少瀏覽器重排：將需要多次重排的元素蔗衡，position屬性設為absolute或fixed，這樣此元素就脫離了文檔流乳绕，它的變化不會影響到其他元素绞惦。
iframe有那些缺點？
- iframe會阻塞主頁面的Onload事件洋措；
- 搜索引擎的檢索程序無法解讀這種頁面济蝉，不利于SEO;
- iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制菠发，所以會影響頁面的并行加載王滤。
- 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe雷酪，最好是通過javascript
- 動態(tài)給iframe添加src屬性值淑仆，這樣可以繞開以上兩個問題。
Label的作用是什么哥力？是怎么用的蔗怠？
label標簽來定義表單控制間的關系,當用戶選擇該標簽時墩弯，瀏覽器會自動將焦點轉(zhuǎn)到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
HTML5的form如何關閉自動完成功能寞射？
給不想要提示的 form 或某個 input 設置為 autocomplete=off渔工。
如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信? (阿里)
- WebSocket、SharedWorker桥温；
- 也可以調(diào)用localstorge引矩、cookies等本地存儲方式；
localstorge另一個瀏覽上下文里被添加侵浸、修改或刪除時旺韭，它都會觸發(fā)一個事件，
我們通過監(jiān)聽事件掏觉，控制它的值來進行頁面信息通信区端；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；
頁面可見性（Page Visibility API） 可以有哪些用途澳腹？
1 .通過 visibilityState 的值檢測頁面當前是否可見织盼，以及打開網(wǎng)頁的時間等;
- 在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放酱塔；
實現(xiàn)不使用 border 畫出1px高的線沥邻，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
title與h1的區(qū)別羊娃、b與strong的區(qū)別唐全、i與em的區(qū)別？
title屬性沒有明確意義只表示是個標題迁沫，H1則表示層次明確的標題芦瘾，對頁面信息的抓取也有很大的影響；
strong是標明重點內(nèi)容集畅，有語氣加強的含義近弟，使用閱讀設備閱讀網(wǎng)絡時：<strong>會重讀，而<B>是展示強調(diào)內(nèi)容挺智。
i內(nèi)容展示為斜體祷愉，me表示強調(diào)的文本；
Physical Style Elements -- 自然樣式標簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標簽
strong, em, ins, del, code
應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽赦颇。
你做的頁面在哪些流覽器測試過二鳄？這些瀏覽器的內(nèi)核分別是什么?
Trident內(nèi)核:IE系列
Gecko內(nèi)核:Firefox
Webkit內(nèi)核:Safari
Blink內(nèi)核：是基于Webkit內(nèi)核的子項目,使用的瀏覽器有：
Chrome/opera等除IE、Firefox媒怯、Safari之外的幾乎所有瀏覽器
幾乎所有國產(chǎn)雙內(nèi)核瀏覽器（Trident/Blink）如360订讼、獵豹、qq扇苞、百度等
每個HTML文件里開頭都有個很重要的東西欺殿，Doctype寄纵，知道這是干什么的嗎？
文檔聲明脖苏。
<!DOCTYPE> 聲明位于文檔中的最前面的位置程拭，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范棍潘。（重點：告訴瀏覽器按照何種規(guī)范解析頁面）
IE下如不書寫文檔聲明會使用怪異模式解析網(wǎng)頁導致一系列CSS兼容性問題恃鞋。
div+css的布局較table布局有什么優(yōu)點？
正常場景一般都適用div+CSS布局亦歉，
優(yōu)點：
1. 結(jié)構(gòu)與樣式分離
2. 代碼語義性好
3. 更符合HTML標準規(guī)范
4. SEO友好
Table布局的適用場景：
某種原因不方便加載外部CSS的場景恤浪，例如郵件正文，此時用table布局可以在無css情況下保持頁面布局正常肴楷。
img的alt與title有何異同资锰？ strong與em的異同？
a:alt(alt text):為不能顯示圖像阶祭、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字直秆。替換文字的語言由lang屬性指定濒募。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性為設置該屬性的元素提供建議性的信息。
em:表現(xiàn)為斜體圾结，語義表示強調(diào)
strong:表現(xiàn)為粗體瑰剃，語義為強烈語氣，強調(diào)程度超過em
簡述一下src與href的區(qū)別
src用于替換當前元素筝野，href用于在當前文檔和引用資源之間確立聯(lián)系晌姚。
src是source的縮寫，指向外部資源的位置歇竟，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置挥唠；在請求src資源時會將其指向的資源下載并應用到文檔內(nèi)，例如js腳本焕议，img圖片和frame等元素宝磨。
<script src =”js.js”></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理盅安，直到將該資源加載唤锉、編譯、執(zhí)行完畢别瞭，圖片和框架等元素也如此窿祥，類似于將所指向資源嵌入當前標簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部蝙寨。
href是Hypertext Reference的縮寫晒衩，指向網(wǎng)絡資源所在位置嗤瞎，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href=”common.css” rel=”stylesheet”/>
那么瀏覽器會識別該文檔為css文件浸遗，就會并行下載資源并且不會停止對當前文檔的處理猫胁。這也是為什么建議使用link方式來加載css，而不是使用@import方式跛锌。
知道的網(wǎng)頁制作會用到的圖片格式有哪些弃秆？
png-8，png-24髓帽，jpeg菠赚，gif，svg郑藏。
但是上面的那些都不是面試官想要的最后答案衡查。面試官希望聽到是Webp。（是否有關注新技術(shù)必盖，新鮮事物）
科普一下Webp：WebP格式拌牲，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3歌粥，并能節(jié)省大量的服務器帶寬資源和數(shù)據(jù)空間塌忽。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。
在質(zhì)量相同的情況下失驶，WebP格式圖像的體積要比JPEG格式圖像小40%
在css/js代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能土居，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會有緩存處理嬉探？
dns緩存擦耀，cdn緩存，瀏覽器緩存涩堤，服務器緩存眷蜓。
一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢胎围，你有哪些方法優(yōu)化這些圖片的加載账磺，給用戶更好的體驗。
圖片懶加載痊远，在頁面上的未可視區(qū)域可以添加一個滾動條事件垮抗，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者碧聪，優(yōu)先加載冒版。
如果為幻燈片、相冊等逞姿，可以使用圖片預加載技術(shù)辞嗡，將當前展示圖片的前一張和后一張優(yōu)先下載捆等。
如果圖片為css圖片，可以使用CSSsprite续室，SVGsprite栋烤，Iconfont、Base64等技術(shù)挺狰。
如果圖片過大明郭，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖丰泊，以提高用戶體驗薯定。
如果圖片展示區(qū)域小于圖片的真實大小，則因在服務器端根據(jù)業(yè)務需要先行進行圖片壓縮瞳购，圖片壓縮后大小與展示一致话侄。
你如何理解HTML結(jié)構(gòu)的語義化？
HTML結(jié)構(gòu)語義化：
更符合W3C統(tǒng)一的規(guī)范標準学赛，是技術(shù)趨勢年堆。
沒有樣式時瀏覽器的默認樣式也能讓頁面結(jié)構(gòu)很清晰。
對功能障礙用戶友好盏浇。屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標記來“讀”你的網(wǎng)頁嘀韧。
對其他非主流終端設備友好。例如機頂盒缠捌、PDA、各種移動終端译蒂。
對SEO友好曼月。
談談以前端角度出發(fā)做好SEO需要考慮什么？
搜索引擎主要以:
外鏈數(shù)量和質(zhì)量
網(wǎng)頁內(nèi)容和結(jié)構(gòu)
來決定某關鍵字下的網(wǎng)頁搜索排名柔昼。
前端應該注意網(wǎng)頁結(jié)構(gòu)和內(nèi)容方面的情況：
Meta標簽優(yōu)化
主要包括主題（Title)哑芹，網(wǎng)站描述(Description)。還有一些其它的隱藏文字比如Author（作者）捕透，Category（目錄）聪姿，Language（編碼語種）等。
符合W3C規(guī)范的語義性標簽的使用乙嘀。
如何選取關鍵詞并在網(wǎng)頁中放置關鍵詞
搜索就得用關鍵詞末购。關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網(wǎng)站確定主關鍵詞（一般在5個上下）虎谢，然后針對這些關鍵詞進行優(yōu)化盟榴，包括關鍵詞密度（Density），相關度（Relavancy）婴噩，突出性（Prominency）等等擎场。
html5有哪些新特性羽德、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題迅办？如何區(qū)分 HTML 和 HTML5宅静？
新特性：
- 拖拽釋放(Drag and drop) API
- 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）
- 音頻、視頻API(audio,video)
- 畫布(Canvas) API
- 地理(Geolocation) API
- 本地離線存儲 localStorage 長期存儲數(shù)據(jù)站欺，瀏覽器關閉后數(shù)據(jù)不丟失姨夹；
- sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除
- 表單控件，calendar镊绪、date匀伏、time、email蝴韭、url够颠、search
- 新的技術(shù)webworker, websocket, Geolocation
移除的元素： - 純表現(xiàn)的元素：basefont，big榄鉴，center履磨，font, s，strike庆尘，tt剃诅，u；
- 對可用性產(chǎn)生負面影響的元素：frame驶忌，frameset矛辕，noframes；
支持HTML5新標簽： - IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標簽付魔，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽聊品，瀏覽器支持新標簽后，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架几苍、使用最多的是html5shim框架）：
如何區(qū)分：
DOCTYPE聲明新增的結(jié)構(gòu)元素翻屈、功能元素
HTML5 Canvas 元素有什么用？
Canvas 元素用于在網(wǎng)頁上繪制圖形妻坝，該元素標簽強大之處在于可以直接在 HTML 上進行圖形操作伸眶。
如何在 HTML5 頁面中嵌入音頻?
HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP3刽宪、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
如何在 HTML5 頁面中嵌入視頻厘贼？
和音頻一樣，HTML5 定義了嵌入視頻的標準方法圣拄，支持的格式包括：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
