標籤：速度 協助 位置 提交 持久化 視圖 code 相容 安全
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
HTML面試題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
