1. 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?(筆試)
Firefox：gecko內核
Safari:webkit內核 (蘋果瀏覽器)
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
2. 每個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
3. div+css的佈局較table佈局有什麼優點？
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（seo）搜索引擎更友好，排名更容易靠前。
Seo：Search Engine Optimization的縮寫， 翻譯成中文就是“搜索引擎優化"
就是通過一定的方法在網站內外發布文章、交換連接等，最終達到某個關鍵詞在搜索引擎上獲得好的排名。
4. img的alt與title有何異同？ strong與em的異同？
alt 是圖片加載失敗時，顯示在網頁上的替代文字；
title 是鼠標放上面時顯示的文字。
strong:粗體強調標籤，強調，表示內容的重要性
em:斜體強調標籤，更強烈強調，表示內容的強調點
5. 你能描述一下漸進增強和優雅降級之間的不同嗎?
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
“優雅降級”觀點
“優雅降級”觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲“過時”或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認爲僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認爲應關注於內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成爲一種更爲合理的設計範例。這也是它立即被 Yahoo! 所採納並用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
6. 爲什麼利用多個域名來存儲網站資源會更有效？
CDN緩存更方便 cnd：服務器
突破瀏覽器併發限制
節約cookie帶寬
節約主域名的連接數，優化頁面響應速度
防止不必要的安全問題
Cookie是在你瀏覽網頁的時候，網站服務器放在客戶端（Client End，就是你的電腦）裏面的一個小小的TXT文件。這個文件裏面存儲了一些與你訪問的這個網站有關的一些東西，當你下一次訪問這個網站的時候，Cookie就會記住你上次訪問時候的一些狀態或者設置，讓服務器針對性的發送頁面的相關內容。Cookie裏面包含的信息並沒有一個標準的格式，各個網站服務器的規範都可能不同，但一般會包括：所訪問網站的域名（domain name），訪問開始的時間，訪問者的IP地址等客戶端信息，訪問者關於這個網站的一些設置等等。
7. 請談一下你對網頁標準和標準制定機構重要性的理解。
網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因爲濫用代碼導致各種BUG、安全問題，最終提高網站易用性。
8. 請描述一下cookies，sessionStorage和localStorage的區別？
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地“存儲”數據而生。
9. 簡述一下src與href的區別。
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src =”js.js”></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是爲什麼將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href=”common.css” rel=”stylesheet”/>
那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是爲什麼建議使用link方式來加載css，而不是使用@import方式。
10. 知道的網頁製作會用到的圖片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最後答案。面試官希望聽到是Webp。（是否有關注新技術，新鮮事物）
科普一下Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
在質量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%
