1.你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?
所謂的“瀏覽器內核”無非指的是一個瀏覽器最核心的部分-“Rendering Engine”，直譯叫做“渲染引擎”，我們也常稱為“排版引擎”、“解釋引擎”。這個引擎的作用是幫助瀏覽器來渲染網頁內容，將頁面內容和排版代碼轉換為用戶所見的視圖。
但我們常常把所說的“瀏覽器內核”，包含了javascript引擎，例如Webkit，它由渲染引擎WebCore和javascript引擎JSCore組成。
下面我們看看各個瀏覽器使用的內核：
（1）.IE：IE瀏覽器誕生於1994年，當時微軟為了抗衡網景瀏覽器，和Spyglass合作，並根據源代碼實現了自己的IE內核Trident。每一次新的IE發布，也標志着Trident內核版本號的提升。
（2）.Safari：Safari所用瀏覽器內核是大名鼎鼎的Webkit。Webkit前身是KDE小組的KHTML引擎，可以說Webkit是KHTML的一個開源分之。Webkit可以說是蘋果公司給開源世界的一大貢獻，基於此開源引擎，衍生了很多Webkit分之，若Chrome瀏覽器引擎。
（3）.Chrome：從08年開始，google建立了chromium引擎，它是webkit的一個分之。但卻把webkit代碼梳理得可讀性非常高，以前可能需要一天進行編譯的代碼，現在只需要兩三個小時就能搞定。但從2013年開始，chrome放棄chromium引擎而使用最新的Blink引擎（基於Webkit2-蘋果公司在2010年退出的新Webkit引擎）。
（4）.Opera：Opera瀏覽器是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽器。是誇平台瀏覽器可以在Windows、Mac、linux三個操作系統平台上運行。為了減少研發成本，Opera在2013年2月宣布放棄Presto引擎，轉而跟隨Chrome使用Webkit分之的Chromium引擎作為自家瀏覽器核心引擎。在Chrome與2013年推出Blink引擎后，Opera也緊跟其腳步表示將轉而使用Blink作為瀏覽器核心引擎。
（5）.Firefox：Mozilla Firefox是一個開源網頁瀏覽器。Firefox使用的是Gecko內核。Gecko是網景公司開發的引擎，但后來網景公司解散。Mozilla基金會繼續推動着Gecko的發展。時至今日，Gecko任繼續由Mozilla的雇員和義工所維護和發展。
2.每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
<!DOCTYPE>聲明處於<html>標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規范。在制作網頁時都需要定義文檔類型。即doctype。如果不聲明網頁的文檔類型，瀏覽器在解析時會以怪異模式解析網頁代碼，不同瀏覽器下，怪異模式解析的網頁效果差別很大，會造成布局排版的錯位，因此，在寫html代碼前有必要寫明文檔類型。
常用的DOCKTYPE聲明包括：
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.Quirks模式是什么？它和Standards模式有什么區別
從IE6開始，引入了Standards標准模式，瀏覽器嘗試給符合標准的文檔在規范上的正確處理達到在指定瀏覽器中的程序。
在IE6之前CSS還不夠成熟，所有IE5等之前瀏覽器對CSS支持很差，IE6將對CSS提供更好的支持，然而很多頁面時基於舊的布局方式寫的，而如果IE6支持CSS則將令這些頁面顯示不正常，如果在即保證不破壞現有頁面，也提供新的渲染機制?
遇到這種問題的一個常見做法就是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果不為真時就使用舊功能。IE6也是類型這樣做的，它將DTD當成這個“參數”，因為以前的頁面大家都不會寫DTD，所以IE6就假定如果寫了DTD就采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪異模式）。
區別：
總體會有布局、樣式解析和腳本執行三個方面區別。
盒模型：在W3C標准中，如果設置一個元素寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包括碰padding和border。
設置行內元素高度：在standards模式下，給span元素設置width和height都不會生效，而在quirks模式下，則會生效。
4.div+css的布局較table布局有什么優點？
改版更方便，只需要改CSS文件。頁面加載速度更快、結構化清晰、頁面顯示簡潔。表現與結構相分離。易於優化（SEO）搜索引擎更友好，排名更容易靠前。
5.a：img的alt與title有何異同？b：strong與em的異同？
a:
含義不同，alt是當前圖片不存在時的替代文字。而tittle是對圖片的描述與進一步說明；
在瀏覽器中表現不同，在firefox和ie8中，當鼠標經過圖片時title值會顯示，而alt值不會顯示；只有在ie6中，當鼠標經過圖片時title和alt值都會顯示；
對於網站seo優化來說，title與alt還有最重要一點：搜索引擎對圖片意思的判斷，主要靠alt屬性。所有在圖片alt屬性中以簡要文字說明，同時包含關鍵詞，也是頁面優化的一部分。
b:
strong粗體強調標簽，強調，表示內容的重要性；
em斜體強調標簽，更強烈強調，表示內容的強調點；
6.你能描述一下漸進增強和優雅降級之間的不同嗎?
漸進增強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級（graceful degradation）:一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往后看；而漸進增強則意味着超前看，同時保證其根基處於安全地帶。
優雅降級觀點
認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作拿牌在開發周期的最后階段，並把測試對象限定在主流瀏覽器（如IE、Mozilla等）的前一個版本。在這種規范下，舊版瀏覽器被認為僅能提供“簡陋卻無妨（poor,but passable）”的瀏覽體驗。你可以做一些小的調整來適應某個特定瀏覽器。但由於他們並非我們關注重點，所以除了修復較大的錯誤之外，其他的差異將被直接忽略。
漸進增強觀點
認為應關注內容本身。內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都設計到內容。這使得漸進增強稱為一種更合理的設計范例。這也是它立即被Yahoo!所采納並用以構建其“分級式瀏覽器支持”策略的原因所在。
7.為什么利用多個域名來存儲網站資源會更有效？
CDN緩存更方便。靜態內容和動態內容分服務器存放，使用不同的服務器處理請求。處理動態內容的不處理靜態內容。提高效率。
突破瀏覽器並發限制。節約主域名的鏈接數，從而提升客戶端網絡帶寬的利用率，優化頁面響應。因為老的瀏覽器（IE6是典型），針對同一個域名值允許同時保持兩個HTTP鏈接。將圖片等資源請求分配到其他域名商，避免大圖片之類的並不一定重要的內容阻塞主域名上的其他資源鏈接。
節約cookie帶寬。例如twitter的主戰twitter.com每次訪問，都會帶上自己的cookie，挺大的。加入圖片也放在主域名下，那么每次訪問圖片時，請求頭也會攜帶cookie，而圖片是不需要知道用戶的cookie的，所有者部分帶寬白白浪費了。
節約主域名的鏈接數，優化頁面響應速度。
防止不必要的安全問題。對於UGC（user generated content）的內容和主站隔離，防止安全問題（上傳js竊取主站cookie之類的）。正是這個原因要求用戶內容的域名必須不是自己主站的子域名，而是一個完全獨立的第三方域名。
9.請描述一下cookies，sessionStorage和localStorage的區別？
sessionStorage用於本地存儲一個回話（session）中的數據，這個數據只有在同一個回話中的頁面才能訪問並且當回話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是回話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是用於不會過期的。
web storage和cookie區別
web storage的概念和cookie相似，區別是它是為了更大容器存儲設計的。Cookie大小是受限的，並且每次你請求一個新頁面的時候Cookie都會被發送過去，這無形浪費了帶寬，另外cookie還需要還指定作用域，不可以跨域調用。
Cookie的作用是用於與服務器進行交互，作為http規划的一部分而存在，而web storage僅僅是為了在本地存儲數據而生。
10.簡述一下src與href的區別
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯系。
src是souce的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src="base.js"></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源加載、編譯、執行完畢，圖片和框架元素也如此，類似於將所有指向資源嵌入到當前標簽內。這也是為什么獎js腳本放到底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href="common.css" rel="stylesheet"/>
那么瀏覽器會識別該css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css。而不使用@import方式。
11.在css/js代碼上線之后開發人員經常會優化性能，從用戶刷新網頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
dns緩存：如果你在短時間內多次訪問了某個網址，DNS都要多次解析並返回給你的話，DNS就重復工作了。於是操作系統聰明地設計了一個本地“DNS緩存”，當你第一次訪問a.com，DNS返回了正確的IP之后，系統就會將這個結果臨時存儲起來，這就是DNS緩存。並且它會為緩存設定一個失效時間，在失效時間內再次訪問某個網站時，系統就會直接從你電腦本地的DNS緩存把結果交換給你，而不必再詢問DNS服務器。
cdn緩存：CDN是Content Delivery Network簡稱，即“內容分發網絡”的意思。一般我們所說的CDN加速，一般是指網站加速或者用戶下載資源加速。
CDN可以理解為分布在每個縣城的火車票代售點，用戶在瀏覽網站的時候，CDN會選擇一個離用戶最近的CDN邊緣節點來響應用戶的請求，這樣海南移動用戶請求就不會千里迢迢跑到北京電信機房的服務器上了。
CDN有事很明顯，CDN節點解決了跨運營商和跨地域訪問的問題，訪問延時大大降低；另外一方面，大部分請求在CDN邊緣節點王城，CDN起到了分流作用，減輕了源站的負載。
瀏覽器緩存：瀏覽器在用戶資源磁盤上，對最新請求過的文檔進行了存儲。但是當網站發生了更新的時候（如替換css、js以及圖片文件），瀏覽器本地保存着舊版本的而文件，從而導致無法預料后果。
服務器緩存：將需要頻繁訪問的web頁面和對象保存在離用戶更近的系統中，當再次訪問這些對象的時候加快了速度。
12.個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗
圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於后者，優先加載。什么是圖片懶加載？
對於圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不加載，等到滾動到可視區域后再去加載。這樣子對於頁面加載性能會有很大的提升，也提高了用戶體驗。
如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。
如果圖片為css圖片，可以使用CSSsprinte，SVGsprite,Iconfont、Base64等技術。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
如果圖片展示區域小於圖片的真實大小，則應在服務端根據業務需要先進行圖片壓縮，圖片壓縮后大小與展示一致。
13.你如何理解HTML結構的語義化？
去掉或丟失樣式的時候，能讓頁面呈現清晰的結構：html本身是沒有表現的，我們看到例如<h1>是粗體、<strong>是加粗的。不要認為這是htl的表現，這些其實html默認的css樣式起的作用。瀏覽器都有默認樣式，默認樣式的目的也是為了更好的表達html的語義。
搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重。過去你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”，但現在它們實際上是極其寶貴的用戶。沒有它們的話，搜索引擎將無法索引你的網站，然后一般用戶很難過來訪問。
你的頁面對爬蟲容易理解非常重要，因為爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記。SEO主要還是靠你網站的內容和外部鏈接的。
14.談談以前端角度出發做好SEO需要考慮什么？
了解搜索引擎如何抓取網頁和如何索引網頁。你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區別，搜索機器人（SE robot或叫web crawler）如何工作，搜索引擎如何對搜索結果進行排序等等。
Meta標簽優化。主要包括主題（Title）、網站描述（Description）、關鍵詞（Keywords）。還有一些其他隱藏文字，比如Author（作者）、Category（目錄）、Language(編碼語種)等。
如何選擇關鍵詞並在網頁中放置關鍵詞。搜索就得用關鍵詞，關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般5個左右），然后針對這些關鍵詞進行優化，包括關鍵詞密度（Density）、相關度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎。雖然搜索引擎有很多，但是對網站流量起決定作用的就那么幾個。比如英文的主要有Google、Yahoo、Bing等；中文的有百度、搜狗、有道等。不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。還要了解各搜索引擎門戶和搜索引擎之間的關系，比如AOL網頁搜索用的是Google搜索技術，MSN用的是Bing的技術。
搜索引擎登錄。網站做完了以后，別躺在那里等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交到搜索引擎。
鏈接交換和鏈接廣泛度（Link Popularity）。網頁內容都是以超文本（Hypertext）的方式來相互鏈接的，網站之間也是如此。除了搜索引擎以外，人們也每天通過不同網站之間的鏈接來Surfing（“沖浪”）。其他網站到你的網站的鏈接越多，你也就會獲得更多的訪問量。更重要的是，你的網站外部連接數越多，會被搜索引擎認為它的重要性越大，從而給你更高排名。
html和css面試：http://www.jb51.net/css/238279.html
javascript面試：http://www.jb51.net/article/56847.htm