1.前端性能優化
a.請求數量：合並腳本和樣式表，CSS Sprites;
b.請求帶寬：精簡壓縮JavaScript文件，移出重復腳本，圖片優化；
c.使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存；
d. 頁面結構：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出；
e. 代碼校驗：避免CSS表達式，避免重定向
2.在瀏覽器中輸入一個網址之后瀏覽器都做了什么？
① 瀏覽器查找該域名的 IP 地址
② 瀏覽器根據解析得到的IP地址向 web 服務器發送一個 HTTP 請求
③ 服務器收到請求並進行處理
④ 服務器返回一個響應
⑤ 瀏覽器對該響應進行解碼，渲染顯示
⑥ 頁面顯示完成后，瀏覽器發送異步請求。
3.簡述盒模型
文檔中的每個元素被描繪為矩形盒子。
盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。
4.瀏覽器本地存儲
在HTML5中提供了sessionStorage和localStorage.
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀，是會話級別的存儲。
localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
5.減少頁面加載時間的方法
a. 盡量減少頁面中重復的HTTP請求數量
b. 服務器開啟gzip壓縮
c. css樣式的定義放置在文件頭部
d. Javascript腳本放在文件末尾
e. 壓縮合並Javascript、CSS代碼
f. 使用多域名負載網頁內的多個文件、圖片
6.瀏覽器的內核有哪些？
IE瀏覽器的內核Trident，
Mozilla的Gecko，
Chrome的Blink（WebKit的分支），
Opera內核原為Presto，現為Blink；
7.前端的三層結構和作用
a. 結構層：由 HTML 或 XHTML 之類的標記語言負責創建，僅負責語義的表達。解決了頁面“內容是什么”的問題。
b. 表示層：由CSS負責創建，解決了頁面“如何顯示內容”的問題。
c. 行為層：由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。
8.一個頁面有大量的圖片，如何提高加載速度，提高用戶體驗。
a. 圖片懶加載，滾動到相應位置才加載圖片。
b. 圖片預加載，如果為幻燈片、相冊等，將當前展示圖片的前一張和后一張優先下載。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。
d. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的縮略圖，以提高用戶體驗。
9.從前端角度做好SEO
// SEO全稱：Search English Optimization，搜索引擎優化。自從有了搜索引擎，SEO便誕生了。
// 存在的意義：為了提升網頁在搜索引擎自然搜索結果中的收錄數量以及排序位置而做的優化行為。簡言之，就是希望百度等搜索引擎能多多我們收錄精心制作后的網站，並且在別人訪問時網站能排在前面。
a.網站結構布局優化；
b.代碼優化，如：
<title>標題：只強調重點即可，盡量把重要的關鍵詞放在前面，關鍵詞不要重復出現，盡量做到每個頁面的<title>標題中不要設置相同的內容。
<meta keywords>標簽：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。
<meta description>標簽：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。
<body>中的標簽：盡量讓代碼語義化，在適當的位置使用適當的標簽，用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6 是用於標題類的，<nav>標簽是用來設置頁面主導航的等。
<a>標簽：頁內鏈接，要加 “title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網站的，則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬，因為一旦“蜘蛛”爬了外部鏈接之后，就不會再回來了。
10.<img>標簽上title屬性與alt屬性的區別
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。
11.標簽語義化的理解
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。
12.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是以該瀏覽器支持的最高標准運行。
在混雜模式中頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
13.Doctype文檔類型
標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標准）模式（也就是嚴格呈現模式）用於呈現遵循最新標准的網頁，
Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用於呈現為傳統瀏覽器而設計的網頁。
14.HTML與XHTML的區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
15.html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
16.iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
17.簡述一下src與href的區別
src用於替換當前元素；href用於在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
18.DOM操作 - 添加、移除、移動、復制、創建和查找節點
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
getElementById() //通過元素Id，唯一性