文章為本人整理，因各種原因不能保證知識點百分之百正確，如有錯誤，希望不吝賜教，非常感謝。
doctype是什么？標準模式與兼容模式各有什么區(qū)別?
- <!doctype>聲明必須處于HTML文檔的頭部，在標簽之前，HTML5中不區(qū)分大小寫, 它告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。在兼容模式中，頁面以寬松的向后兼容的方式顯示, 模擬老式瀏覽器的行為以防止站點無法工作
行內(nèi)元素、塊級元素、空(void)元素分別是什么？常用的有那些？
行內(nèi)元素：行內(nèi)元素不形成新內(nèi)容塊，即在其左右可以有其他元素，常見的有：a、span、img、b、i、em、strong、label、input、textarea、select、button、sub、sup、q
塊級元素：塊級元素占據(jù)其父元素（容器）橫向的整個內(nèi)容區(qū)域，常見的有：div、ul、ol、li、dl、dt、dd、h1-h6、p、table、form、hr、iframe、pre，html5增加的有：header、nav、section、article、aside、footer、audio、video
空元素：沒有內(nèi)容的 HTML 元素，常見的空元素： br、hr、img 、input 、link 、meta
href和src區(qū)別? title和alt
href: 指定網(wǎng)絡(luò)資源的位置（超文本引用），從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關(guān)系，在 link和a 等元素上使用
src: 屬性僅僅嵌入當前資源到當前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用
title: 既是html標簽，又是html屬性，title作為屬性時，用來為元素提供額外說明信息, 通常當鼠標滑動到元素上的時候顯示
alt: alt是html標簽的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息
iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失; sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，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新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。
也可以直接使用成熟的框架、比如html5shim
HTML5的離線儲存怎么使用，工作原理？
在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、 在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。
如何理解HTML結(jié)構(gòu)的語義化？
HTML結(jié)構(gòu)的語義化是指通過使用包含語義的標簽恰當?shù)乇硎疚臋n結(jié)構(gòu)，語義化的好處：
搜索引擎友好
便于團隊開發(fā)和維護
去掉樣式或樣式丟失后，頁面也能呈現(xiàn)清晰的結(jié)構(gòu)
可以更好的被屏幕閱讀器可以讀出網(wǎng)內(nèi)容
漸進增強和優(yōu)雅降級？
漸進增強：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 ：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容
瀏覽器渲染流程
解析html以構(gòu)建dom樹：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)，瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)
構(gòu)建render樹：DOM和CSSOM合并后生成Render Tree（display：none的東西不在render樹中）
布局render樹：有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關(guān)系，從而去計算出每個節(jié)點在屏幕中的位置
繪制render樹：按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上
reflow（回流）和repaint（重繪）
reflow（回流）：當瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點變化影響了布局，需要倒回去重新渲染
repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變
如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信? (阿里)
WebSocket、SharedWorker，也可以調(diào)用localstorge、cookies等本地存儲方式，監(jiān)聽localstorge的改變來觸發(fā)一個事件，通過這個事件，控制它的值來進行頁面信息通信（注意quirks：Safari 在無痕模式下設(shè)置localstorge值時會拋出 QuotaExceededError 的異常）
webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 編碼發(fā)送 XHR
基于長輪詢的 XHR
為什么利用多個域名來存儲網(wǎng)站資源會更有效？
CDN緩存更方便
突破瀏覽器并發(fā)限制
*節(jié)約cookie帶寬
節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度
防止不必要的安全問題(上傳js竊取主站cookie之類的)
前端優(yōu)化方式有哪些方式？
前端優(yōu)化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優(yōu)化，第二類則是代碼層面的優(yōu)化。
頁面級別的優(yōu)化：
這個就不得不看看雅虎軍規(guī)35條了，中文版的可以看看毫秒必爭，前端網(wǎng)頁性能最佳實踐，主要是對雅虎軍規(guī)35條的實踐和總結(jié)
性能優(yōu)化的原則是：多使用內(nèi)存、緩存或者其他方法減少CPU計算、減少網(wǎng)絡(luò)請求、減少IO
代碼層面的優(yōu)化, 列舉部分：
少用全局變量
用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能
緩存DOM節(jié)點查找的結(jié)果
避免使用CSS表達式
避免全局查詢
避免使用with(with會創(chuàng)建自己的作用域，會增加作用域鏈長度)、eval(容易用錯、性能差、容易引起安全問題)、Function(同樣性能差，和eval一樣，都不利于壓縮工具執(zhí)行壓縮)
多個變量聲明合并
避免圖片和iframe等的空src?？誷rc會重新加載當前頁面，影響速度和效率
盡量避免寫在HTML標簽中寫style屬性
不濫用float, float在渲染時計算量比較大，盡量減少使用
隨著CSS3的普遍，同時需要注意優(yōu)化的點：
盡量使用css3動畫，開啟硬件加速
移動端適當使用touch事件代替click事件
避免使用css3漸變陰影效果
可以用 transform: translateZ(0) 來開啟硬件加速
不濫用web字體, web字體需要下載，解析，重繪當前頁面，盡量減少使用
合理使用requestAnimationFrame動畫代替setTimeout
CSS中的屬性（CSS3 transitions、CSS3 3D transforms、opacity、canvas、webGL、video）會觸發(fā)GPU渲染，要合理使用，過渡使用會引發(fā)手機過耗電增加
以前端角度出發(fā)做好SEO需要考慮什么？
了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁
合理的title, meta標簽優(yōu)化(description, keywords)
重要的html代碼放前面
少用iframe, 搜索引擎不會抓取iframe中的內(nèi)容
圖片加上alt
了解主要的搜索引擎
合理的標簽使用
瀏覽器內(nèi)核和JS引擎
IE -> Edge Trident->EdgeHTML，JS引擎：Edge JScript（IE3.0-IE8.0） / Chakra（IE9+之后）
Chrome webkit->blink，JS引擎：V8
Safari webkit，JS引擎：Nitro
Firefox Gecko，JS引擎：SpiderMonkey
Opera Presto->blink，JS引擎：Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）
XSS 和 CSRF
XSS：跨站腳本攻擊，是一種網(wǎng)站應(yīng)用程序的安全漏洞攻擊，是代碼注入的一種。常見方式是將惡意代碼注入合法代碼里隱藏起來，再誘發(fā)惡意代碼，從而進行各種各樣的非法活動
CSRF：跨站請求偽造，也稱 XSRF，是一種挾制用戶在當前已登錄的Web應(yīng)用程序上執(zhí)行非本意的操作的攻擊方法
XSS利用的是用戶對指定網(wǎng)站的信任，CSRF利用的是網(wǎng)站對用戶網(wǎng)頁瀏覽器的信任
請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大小：
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。
cookie設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
幾種常用的清除浮動方法
- 父級元素定義偽類:after 和 zoom
.clearfloat:after{
content:"";
display:block;
clear:both;
visibility:hidden
height:0
}
.clearfloat{zoom:1}
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6, ie7浮動問題
優(yōu)點：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點：代碼多，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持
- 在結(jié)尾處添加空div標簽clear:both
.clearfloat{clear:both}
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點：簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題
缺點：如果頁面浮動布局多，就要增加很多空div
- 父級div定義height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題
優(yōu)點：簡單，代碼少，容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題
- 父級div定義overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單，代碼少，瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
- 父級div定義overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單，代碼少，瀏覽器支持好
缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。
- 父級div也一起浮動
原理：所有代碼一起浮動，就變成了一個整體
優(yōu)點：沒有優(yōu)點
缺點：會產(chǎn)生新的浮動問題。
