前端面試題目蒐集
一、理論知識
1.1、前端 MV*框架的意義
早期前端都是比較簡單，基本以頁面為工作單元，內容以瀏覽型為主，也偶爾有簡單的表單操作，基本不太需要框架。
隨著 AJAX 的出現，Web2.0的興起，人們可以在頁面上可以做比較複雜的事情了，然後前端框架才真正出現了。
如果是頁面型產品，多數確實不太需要它，因為頁面中的 JavaScript程式碼，處理互動的絕對遠遠超過處理模型的，但是如果是應用軟體類產品，這就太需要了。
長期做某個行業軟體的公司，一般都會沉澱下來一些業務元件，主要體現在資料模型、業務規則和業務流程，這些元件基本都存在於後端，在前端很少有相應的組織。
從協作關係上講，很多前端開發團隊每個成員的職責不是很清晰，有了前端的 MV框架，這個狀況會大有改觀。
之所以感受不到 MV*框架的重要性，是因為Model部分程式碼較少，View的相對多一些。如果主要在操作View和Controller，那當然 jQuery 這類庫比較好用了。
參考《前端 MV*框架的意義》
1.2、請簡述盒模型
IE6盒子模型與W3C盒子模型。
文件中的每個元素被描繪為矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。
CSS3中有個box-sizing屬性可以控制盒子的計算方式，
content-box：padding和border不被包含在定義的width和height之內。物件的實際寬度等於設定的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定義的width和height之內。物件的實際寬度就等於設定的width值。（IE6盒子模型）
參考《盒模型》
1.3、請你談談Cookie的弊端
a. 每個特定的域名下最多生成的cookie個數有限制
b. IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie
c. cookie的最大大約為4096位元組，為了相容性，一般不能超過4095位元組
d. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。
1.4、瀏覽器本地儲存
在HTML5中提供了sessionStorage和localStorage。
sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬，是會話級別的儲存。
localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
1.5、web storage和cookie的區別
a. Cookie的大小是受限的
b. 每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬
c. cookie還需要指定作用域，不可以跨域呼叫
d. Web Storage擁有setItem,getItem等方法，cookie需要前端開發者自己封裝setCookie，getCookie
e. Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“儲存”資料而生
f. IE7、IE6中的UserData通過簡單的程式碼封裝可以統一到所有的瀏覽器都支援web storage
1.6、對BFC規範的理解
BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定位的一個概念。
BFC是頁面CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。
BFC的一個最重要的效果是，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
利用BFC可以閉合浮動，防止與浮動元素重疊。
參考《Learning BFC》
1.7、執行緒與程式的區別
a. 一個程式至少有一個程式，一個程式至少有一個執行緒
b. 執行緒的劃分尺度小於程式，使得多執行緒程式的併發性高
c. 程式在執行過程中擁有獨立的記憶體單元，而多個執行緒共享記憶體，從而極大地提高了程式的執行效率
d. 每個獨立的執行緒有一個程式執行的入口、順序執行序列和程式的出口。但是執行緒不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個執行緒執行控制
e. 多執行緒的意義在於一個應用程式中，有多個執行部分可以同時執行。但作業系統並沒有將多個執行緒看做多個獨立的應用，來實現程式的排程和管理以及資源分配
1.8、你都使用哪些工具來測試程式碼的效能？
1.9、你遇到過比較難的技術問題是？你是如何解決的？
1.10、常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？
1.11、列舉IE與其他瀏覽器不一樣的特性？
a. IE的排版引擎是Trident （又稱為MSHTML）
b. Trident核心曾經幾乎與W3C標準脫節（2005年）
c. Trident核心的大量 Bug等安全性問題沒有得到及時解決
d. JS方面，有很多獨立的方法，例如繫結事件的attachEvent、建立事件的createEventObject等
e. CSS方面，也有自己獨有的處理方式，例如設定透明，低版本IE中使用濾鏡的方式
參考《Trident（排版引擎）》
1.12、什麼叫優雅降級和漸進增強？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給
b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶
參考《優雅降級和漸進增強的區別》
1.13、WEB應用從伺服器主動推送Data到客戶端有那些方式？
a. html5 websoket
b. WebSocket 通過 Flash
c. XHR長時間連線
d. XHR Multipart Streaming
e. 不可見的Iframe
f. <script>標籤的長時間連線(可跨域)
1.14、對前端介面工程師這個職位是怎麼樣理解的？
a. 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好
b. 參與專案，快速高質量完成實現效果圖，精確到1px；
c. 與團隊成員，UI設計，產品經理的溝通；
d. 做好的頁面結構，頁面重構和使用者體驗；
e. 處理hack，相容、寫出優美的程式碼格式；
f. 針對伺服器的優化、擁抱最新前端技術。
1.15、你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？
1.16、你的優點是什麼？缺點是什麼？
1.17、如何管理前端團隊?
1.18、最近在學什麼？能談談你未來3，5年給自己的規劃嗎？
1.19、平時如何管理你的專案？
a. 先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等；
b. 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
c. 標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）；
d. 頁面進行標註（例如 頁面 模組 開始和結束）；
e. CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）；
f. JS 分資料夾存放 命名以該JS功能為準的英文翻譯。
g. 圖片採用整合的 images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理
1.20、說說最近最流行的一些東西吧？常去哪些網站？
CSDN、SegmentFault、php.net、MDN、css參考手冊、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
1.21、Flash、Ajax各自的優缺點，在使用中如何取捨？
Flash：
a. Flash適合處理多媒體、向量圖形、訪問機器
b. 對CSS、處理文字上不足，不容易被搜尋
Ajax：
a. Ajax對CSS、文字支援很好，支援搜尋
b. 多媒體、向量圖形、機器訪問不足
共同點：
a. 與伺服器的無重新整理傳遞訊息
b. 可以檢測使用者離線和線上狀態
c. 操作DOM
1.22、請解釋一下 JavaScript 的同源策略
同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議。
指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。
1.23、AMD和CMD 規範的區別？
AMD 提前執行依賴 – 儘早執行，requireJS 是它的實現
CMD 按需執行依賴 – 懶執行，seaJS 是它的實現
參考《SeaJS與RequireJS最大的區別》、《與 RequireJS 的異同》
1.24、網站重構的理解
重構：在不改變外部行為的前提下，簡化結構、新增可讀性，而在網站前端保持一致的行為。
a. 使網站前端相容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
b. 對於移動平臺的優化，針對於SEO進行優化
c. 減少程式碼間的耦合，讓程式碼保持彈性
d. 壓縮或合併JS、CSS、image等前端資源
1.25、瀏覽器的核心分別是什麼?
IE瀏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera核心原為Presto，現為Blink；
1.26、前端頁面有哪三層構成，分別是什麼？作用是什麼？
a. 結構層：由 HTML 或 XHTML 之類的標記語言負責建立，僅負責語義的表達。解決了頁面“內容是什麼”的問題。
b. 表示層：由CSS負責建立，解決了頁面“如何顯示內容”的問題。
c. 行為層：由指令碼負責。解決了頁面上“內容應該如何對事件作出反應”的問題。
1.27、知道的網頁製作會用到的圖片格式有哪些？
png-8，png-24，jpeg，gif，svg
Webp：谷歌（google）開發的一種旨在加快圖片載入速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的伺服器頻寬資源和資料空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
Apng：全稱是“Animated Portable Network Graphics”, 是PNG的點陣圖動畫擴充套件，可以實現png格式的動態圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支援，直到日前得到 iOS safari 8的支援，有望代替GIF成為下一代動態圖示準。
二、HTML
2.1、<img>標籤上title屬性與alt屬性的區別是什麼？
alt屬性是為了給那些不能看到你文件中影像的瀏覽者提供文字說明的。且長度必須少於100個英文字元或者使用者必須保證替換文字儘可能的短。
這包括那些使用本來就不支援影像顯示或者影像顯示被關閉的瀏覽器的使用者，視覺障礙的使用者和使用螢幕閱讀器的使用者等。
title屬性為設定該屬性的元素提供建議性的資訊。使用title屬性提供非本質的額外資訊。參考《alt和title屬性的區別及應用》
2.2、分別寫出以下幾個HTML標籤：文字加粗、下標、居中、字型
下標：<sub>
居中：<center>
字型：<font>、<basefont>、參考《HTML標籤列表》
2.3、請寫出至少5個html5新增的標籤，並說明其語義和應用場景
section：定義文件中的一個章節
nav：定義只包含導航連結的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標籤列表》
2.4、請說說你對標籤語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
c. 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
2.5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文件。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支援的最高標準執行。
在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
2.6、你知道多少種Doctype文件型別？
標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。
HTML 4.01 規定了三種文件型別：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，
Quirks（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。
2.7、HTML與XHTML——二者有什麼區別
a. XHTML 元素必須被正確地巢狀。
b. XHTML 元素必須被關閉。
c. 標籤名必須用小寫字母。
d. XHTML 文件必須擁有根元素。
2.8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關於影像，位置，儲存，多工等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標籤（header,nav,footer,aside,article,section）
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失
h. sessionStorage 的資料在頁面會話結束時會被清除
i. 表單控制元件，calendar、date、time、email、url、search
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
2.9、iframe的優缺點？
優點：
a. 解決載入緩慢的第三方內容如圖示和廣告等的載入問題
b. iframe無重新整理檔案上傳
c. iframe跨域通訊
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜尋引擎索引到
c. 影響瀏覽器中的並行資源下載，iframe和父頁面不能共享下載
d. script指令碼標籤寫在了iframe之前，iframe中的資源會被阻塞
參考《iframe的一些記錄》《實踐一下前端效能分析》
2.10、Quirks模式是什麼？它和Standards模式有什麼區別？
在寫程式時我們也會經常遇到這樣的問題，如何保證原來的介面不變，又提供更強大的功能，尤其是新功能不相容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將採用對CSS支援更好的佈局，而如果沒有，則採用相容之前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有佈局、樣式解析和指令碼執行三個方面的區別。
a. 盒模型：在W3C標準中，如果設定一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設定行內元素的高寬：在Standards模式下，給<span>等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設定百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設定百分比的高度，子元素設定一個百分比的高度是無效的用
d. 設定水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
2.11、請闡述table的缺點
a. 太深的巢狀，比如table>tr>td>h3，會導致搜尋引擎讀取困難，而且，最直接的損失就是大大增加了冗餘程式碼量。
b. 靈活性差，比如要將tr設定border等屬性，是不行的，得通過td
c. 程式碼臃腫，當在table中套用table的時候，閱讀程式碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來佈局時，頻繁使用他們會造成整個文件順序混亂。
e. table需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。
f. 不夠語義
參考《為什麼說table表格佈局不好？》
2.12、簡述一下src與href的區別
src用於替換當前元素；href用於在當前文件和引用資源之間確立聯絡。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置
href是Hypertext Reference的縮寫，指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結
三、CSS
3.1、談談你對CSS佈局的理解
3.2、請列舉幾種可以清除浮動的方法（至少兩種）
浮動會漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。正是這種特性，導致框內部由於不存在其他普通流元素了，表現出高度為0（高度塌陷）。
a. 新增額外標籤，例如<div style=”clear:both”></div>
b. 使用br標籤和其自身的html屬性，例如<br clear=”all” />
c. 父元素設定 overflow：hidden；在IE6中還需要觸發hasLayout，例如zoom：1；
d. 父元素設定 overflow：auto 屬性；同樣IE6需要觸發hasLayout
e. 父元素也設定浮動
f. 父元素設定display:table
g. 使用:after 偽元素；由於IE6-7不支援:after，使用 zoom:1觸發 hasLayout。
在CSS2.1裡面有一個很重要的概念，那就是 Block formatting contexts （塊級格式化上下文），簡稱 BFC。
建立了BFC的元素就是一個獨立的盒子，裡面的子元素不會在佈局上影響外面的元素，同時BFC仍然屬於文件中的普通流。
IE6-7的顯示引擎使用的是一個稱為佈局（layout）的內部概念。
參考《那些年我們一起清除過的浮動》
3.3、請列舉幾種隱藏元素的方法
a. visibility: hidden；這個屬性只是簡單的隱藏某個元素，但是元素佔用的空間任然存在。
b. opacity: 0；一個CSS3屬性，設定0可以使一個元素完全透明，製作出和visibility一樣的效果。與visibility相比，它可以被transition和animate
c. position: absolute；使元素脫離文件流，處於普通文件之上，給它設定一個很大的left負值定位，使元素定位在可見區域之外。
d. display: none；元素會變得不可見，並且不會再佔用文件的空間。
e. transform: scale(0)；將一個元素設定為無限小，這個元素將不可見。這個元素原來所在的位置將被保留。
f. HTML5 hidden attribute；hidden屬性的效果和display:none;相同，這個屬性用於記錄一個元素的狀態
g. height: 0; overflow: hidden；將元素在垂直方向上收縮為0,使元素消失。只要元素沒有可見的邊框，該技術就可以正常工作。
h. filter: blur(0)；將一個元素的模糊度設定為0，從而使這個元素“消失”在頁面中。
參考《使用CSS隱藏HTML元素的4種常用方法》《通過HTML和CSS隱藏和顯示元素的4種方法》
3.4、如何讓一段文字中的所有英文單詞的首字母大寫
none| capitalize(將每個單詞的第一個字母轉換成大寫) | uppercase(將每個單詞轉換成大寫 ) | lowercase(將每個單詞轉換成小寫 )
3.5、請簡述CSS樣式表繼承
CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：參考《CSS樣式表繼承詳解》
文字相關：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color
列表相關：list-style-image，list-style-position，list-style-type， list-style
3.6、請簡述CSS的選擇器
元素選擇器：* 、E、 E#id、 E.class
關係選擇器：E、F、E>F、E+F、E~F
屬性選擇器：E[att]、E[att=”val”]、E[att~=”val”]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]、E[att|=”val”]
偽類選擇器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
偽物件選擇器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
參考《選擇符列表》
3.7、CSS偽類與CSS偽物件的區別
CSS 引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西
根本區別在於：它們是否創造了新的元素（抽象）
偽類：一開始用來表示一些元素的動態狀態，隨後CSS2標準擴充套件了其概念範圍，使其成為了所有邏輯上存在但在文件樹中卻無須標識的“幽靈”分類
偽物件：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文件樹中
3.8、請簡述CSS的權重規則
一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/偽類選擇器+10，一個元素名/偽物件選擇器+1。
關係選擇器將拆分為兩個選擇器再計算。參考《CSS權重》
3.9、請寫出多種等高佈局
a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像
b. 給容器div使用單獨的背景色（固定佈局）（流體佈局）：用<div>元素中的最大高度撐大其他的<div>容器高度
c. 建立帶邊框的兩列等高佈局：用border-left來做，只能使用兩列。
d. 使用正padding和負margin對衝實現多列布局方法：在所有列中使用正的上、下padding和負的上、下margin，並在所有列外面加上一個容器，設定overflow:hiden把溢位背景切掉
e. 使用邊框和定位模擬列等高：但不能使用在多列
f. 模仿表格佈局等高列效果：相容性不好，在ie6-7無法正常執行
3.10、在CSS樣式中常使用px、em，各有什麼優劣，在表現上有什麼區別？
px是相對長度單位，相對於顯示器螢幕解析度而言的。
em是相對長度單位，相對於當前物件內文字的字型尺寸。
px定義的字型，無法用瀏覽器字型放大功能。
em的值並不是固定的，會繼承父級元素的字型大小，1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值。
3.11、CSS中 link 和@import 的區別是什麼？
a. link屬於HTML標籤，而@import是CSS提供的，且只能載入 CSS
b. 頁面被載入時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入
c. import只在IE5以上才能識別，而link是HTML標籤，無相容問題
d. link方式的樣式的權重 高於@import的權重
e. 當使用 Javascript 控制 DOM 去改變樣式的時候，只能使用 link 方式，因為 @import 眼裡只有 CSS ，不是 DOM 可以控制
3.12、position的absolute與fixed共同點與不同點
相同：
a. 改變行內元素的呈現方式，display被置為block
b. 讓元素脫離普通流，不佔據空間
c. 預設會覆蓋到非定位元素上
區別：
absolute的”根元素“是可以設定的，而fixed的”根元素“固定為瀏覽器視窗。
當你滾動網頁，fixed元素與瀏覽器視窗之間的距離是不變的。
3.13、position的值， relative和absolute分別是相對於誰進行定位的？
absolute：生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。 （IE6不支援）
relative：生成相對定位的元素，相對於其在普通流中的位置進行定位
static：預設值。沒有定位，元素出現在正常的流中
3.14、CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），變形（transform）
增加了更多的CSS選擇器 多背景 rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄佈局
參考《CSS3中的動畫效果記錄》、《CSS3中border-radius、box-shadow與gradient那點事兒》
3.15、為什麼要初始化CSS樣式？
因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
3.16、解釋下 CSS sprites原理，優缺點
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，
background-position可以用數字精確的定位出背景圖片的位置。
優點：
a. 減少網頁的http請求
b. 減少圖片的位元組
c. 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名
d. 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。
缺點：
a. 在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂
b. CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置
c. 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片
3.17、解釋下浮動和它的工作原理？
a. 浮動元素脫離文件流，不佔據空間（引起“高度塌陷”現象）
b. 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
3.18、浮動元素引起的問題
a. 父元素的高度無法被撐開，影響與父元素同級的元素
b. 與浮動元素同級的非浮動元素會跟隨其後
c. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
3.19、什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
如果使用import方法對CSS進行匯入，會導致某些頁面在Windows下的IE出現一些奇怪的現象：
以無樣式顯示頁面內容的瞬間閃爍，這種現象稱之為文件樣式短暫失效(Flash of Unstyled Content)，簡稱為FOUC。
原理：當樣式表晚於結構性html載入，當載入到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析後，將重新渲染頁面，也就出現了短暫的花屏現象。
解決方法：使用LINK標籤將樣式表放在文件HEAD中。
3.20、line-height三種賦值方式有何區別？（帶單位、純數字、百分比）
帶單位：px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高
純數字：把比例傳遞給後代，例如父級行高為1.5，子元素字型為18px，則子元素行高為1.5*18=27px
百分比：將計算後的值傳遞給後代
參考《line-height的理解》、《淺析line-height和vertical》，檢視線上原始碼。
3.21、:link、:visited、:hover、:active的執行順序是怎麼樣的？
L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來概括
3.22、經常遇到的瀏覽器相容性有哪些？如何解決？
a. 瀏覽器預設的margin和padding不同
b. IE6雙邊距bug
c. 在ie6，ie7中元素高度超出自己設定高度。原因是IE8以前的瀏覽器中會給元素設定預設的行高的高度導致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6
f. input邊框問題，去掉input邊框一般用border:none;就可以，但由於IE6在解析input樣式時的BUG(優先順序問題)，在IE6下無效
3.23、有哪項方式可以對一個DOM設定它的CSS樣式？
a. 外部樣式表：通過<link>標籤引入一個外部css檔案
b. 內部樣式表：將css程式碼放在 <style> 標籤內部
c. 內聯樣式：將css樣式直接定義在 HTML 元素內部
3.24、什麼是外邊距重疊？重疊的結果是什麼？
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
摺疊結果遵循下列計算規則：
a. 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
b. 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
c. 兩個外邊距一正一負時，摺疊結果是兩者的相加的和。
3.25、rgba()和opacity的透明效果有什麼不同？
a. opacity作用於元素，以及元素內的所有內容的透明度，rgba()只作用於元素的顏色或其背景色。
b. 設定rgba透明的元素的子元素不會繼承透明效果！
3.26、css屬性content有什麼作用？有什麼應用？
css的content屬性專門應用在 before/after 偽元素上，用於來插入生成內容。
可以配合自定義字型顯示特殊符號。
四、JavaScript
4.1、請解釋一下什麼是閉包
當函式可以記住並訪問所在的作用域時，就產生了閉包，即使函式是在當前作用域之外執行。閉包有如下特性：
a. JavaScript允許你使用在當前函式以外定義的變數
b. 即使外部函式已經返回，當前函式仍然可以引用在外部函式所定義的變數
c. 閉包可以更新外部變數的值
d. 用閉包模擬私有方法
由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題。
在定時器、事件監聽器、Ajax請求、跨視窗通訊、Web Workers或者任何其他的非同步（或者同步）任務中，只要使用了回撥函式，實際上就是在使用閉包！
4.2、call 和 apply 的區別是什麼？
call 和 apply 就是為了改變函式體內部 this 的指向。
區別是從第二個引數起，call 需要把引數按順序傳遞進去，而 apply 則是把引數放在陣列裡。
當引數明確時用call與apply都行, 當引數不明確時可用apply給合arguments
4.3、如何使用原生 Javascript 程式碼深度克隆一個物件（注意區分物件型別）
在網上找了個函式，用遞迴的方式做複製。傳入的引數必須得是Array或Object。
並且用到了JSON.stringify和JSON.parse。檢視線上程式碼。參考《JavaScript中的物件克隆》
4.4、 jQuery中 $(′.class′)和$(`div.class`) 哪個效率更高？
jQuery內部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語句是先選.class，
第二個會直接過濾出div標籤，而第一個就不會過濾了，將所有相關標籤都列出。參考《jQuery最佳實踐》
4.5、實現輸出document物件中所有成員的名稱和型別
用一個for in方式迴圈document，然後在將內容console出來，
就是看到篇文章還會判斷document.hasOwnProperty，然後再做列印，我測試了下這樣的話列印不出來。
檢視線上程式碼。參考《JavaScript要點歸檔：DOM》
4.6、獲得一個DOM元素的絕對位置
offsetTop：返回當前元素相對於其 offsetParent 元素的頂部的距離
offsetLeft：返回當前元素相對於其 offsetParent 元素的左邊的距離
getBoundingClientRect()：返回值是一個DOMRect物件，它包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，屬性單位為畫素
參考《JavaScript中尺寸、座標》，檢視線上程式碼。
4.7、如何利用JS生成一個table？
首先是用createElement建立一個table，再用setAttribute設定table的屬性，
然後用for迴圈設定tr和td的內容，用appendChild拼接內容，設定td的時候還用到innerHTML和style.padding。
檢視線上程式碼。參考《JavaScript要點歸檔：DOM表格》《JavaScript要點歸檔：DOM》
4.8、實現預載入一張圖片，載入完成後顯示在網頁中並設定其高度為50px，寬度為50px
先new Image()獲取一個圖片物件，然後在圖片物件的onload中設定寬度和高度。檢視線上程式碼。
4.9、假設有一個4行tr的table，將table裡面tr順序顛倒
先是通過table.tBodies[0].rows獲取到當前tbody中的行，接下來是兩種方法處理。獲取到的行沒有reverse這個方法。
第一種是將這些行push到另外一個陣列中
第二種是用Array.prototype.slice.call()將那些行變成陣列，
接著用reverse倒敘，table再appendChild。檢視線上程式碼。
這裡我有個疑問，就是在appendChild的時候，並不是在最後把列加上，而是做了替換操作？
4.10、模擬一個HashTable類，一個類上註冊四個方法：包含有add、remove、contains、length方法
先是在建構函式中定義一個陣列，然後用push模擬add，splice模擬remove。
4.11、Ajax讀取一個XML文件並進行解析的例項
a. 初始化一個HTTP請求，IE以ActiveX物件引入。 後來標準瀏覽器提供了XMLHttpRequest類，它支援ActiveX物件所提供的方法和屬性
b. 傳送請求，可以呼叫HTTP請求類的open()和send()方法
c. 處理伺服器的響應，通過http_request.onreadystatechange = nameOfTheFunction。來指定函式
4.12、JS如何實現物件導向和繼承機制？
建立物件方法：
a. 利用json建立物件
b. 使用JavaScript中的Object型別
c. 通過建立函式來生成物件
繼承機制：
a. 建構函式繫結，使用call或apply方法，將父物件的建構函式繫結在子物件上
b. prototype模式，繼承new函式的模式
c. 直接繼承函式的prototype屬性，對b的一種改進
d. 利用空物件作為中介
e. 在ECMAScript5中定義了一個新方法Object.create()，用於建立一個新方法
f. 拷貝繼承，把父物件的所有屬性和方法，拷貝進子物件，實現繼承。參考《JavaScript中的物件克隆》
參考《Javascript繼承機制的設計思想》《建構函式的繼承》，檢視線上程式碼。
4.13、JS模組的封裝方法，比如怎樣實現私有變數，不能直接賦值，只能通過公有方法
a. 通過json生成物件的原始模式，多寫幾個就會非常麻煩，也不能反映出它們是同一個原型物件的例項
b. 原始模式的改進，可以寫一個函式，解決程式碼重複的問題。同樣不能反映出它們是同一個原型物件的例項
c. 建構函式模式，就是一個普通函式，不過內部使用了this變數，但是存在一個浪費記憶體的問題。
d. Prototype模式，每一個建構函式都有一個prototype屬性，指向另一個物件。這個物件的所有屬性和方法，都會被建構函式的例項繼承，可以把那些不變的屬性和方法，直接定義在prototype物件上。Prototype模式的驗證方法：isPrototypeOf()、hasOwnProperty()和in運算子。
4.14、對this指標的理解，可以列舉幾種使用情況？
this實際上是在函式被呼叫時發生的繫結，它指向什麼完全取決於函式在哪裡被呼叫。
this指的是：呼叫函式的那個物件。
a. 純粹的函式呼叫，屬於全域性性呼叫，因此this就代表全域性物件Global。
b. 作為物件方法的呼叫，這時this就指這個上級物件。
c. 作為建構函式呼叫，就是通過這個函式new一個新物件（object）。這時，this就指這個新物件。
d. apply與call的呼叫，它們的作用是改變函式的呼叫物件，它的第一個引數就表示改變後的呼叫這個函式的物件。
參考《Javascript的this用法》《this》，檢視線上程式碼。
4.15、在JavaScript中，常用的繫結事件的方法有哪些？
a. 在DOM元素中直接繫結，DOM元素，可以理解為HTML標籤，onXXX=”JavaScript Code”，檢視事件列表。
b. 在JavaScript程式碼中繫結，elementObject.onXXX=function(){}，通稱為DOM0事件系統。
c. 繫結事件監聽函式，標準瀏覽器使用 addEventListener() ，IE11以下版本attachEvent() 來繫結事件監聽函式，通稱為DOM2事件系統。
參考《JavaScript繫結事件的方法》《JavaScript中事件處理》
4.16、解釋下javascript的冒泡和捕獲
<div id="click1"> <div id="click2"> <div id="click3">事件</div> </div> </div>
a. Netscape主張元素1的事件首先發生，這種事件發生順序被稱為捕獲型
b. 微軟則保持元素3具有優先權，這種事件順序被稱為冒泡型
c. W3C選擇了一個擇中的方案。任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段
事件監聽函式addEventListener()的第三個引數就是控制方法是捕獲還是冒泡
參考《事件》、《javascript的冒泡和捕獲》，檢視線上程式碼。
4.17、jQuery的特點
a. 一款輕量級的js庫
b. 豐富快速的DOM選擇器
c. 鏈式表示式
d. 事件、樣式、動畫等特效支援
e. Ajax操作封裝，支援跨域
f. 跨瀏覽器相容
g. 外掛擴充套件開發
4.18、Ajax有哪些好處和弊端？
優點：
a. 無重新整理更新資料
b. 非同步與伺服器通訊
c. 前端和後端負載平衡
d. 基於標準被廣泛支援
e. 介面與應用分離
缺點：
a. AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞
b. AJAX的安全問題
c. 對搜尋引擎支援較弱
d. 違背URL和資源定位的初衷
參考《AJAX工作原理及其優缺點》
4.19、null和undefined的區別？
null：
a. null是一個表示”無”的物件，轉為數值時為0
b. null表示”沒有物件”，即該處不應該有值。
undefined：
a. undefined是一個表示”無”的原始值，轉為數值時為NaN。
b. undefined表示”缺少值”，就是此處應該有一個值，但是還沒有定義。
4.20、new操作符具體幹了什麼呢?
a. 一個新物件被建立。它繼承自函式原型
b. 建構函式被執行。執行的時候，相應的傳參會被傳入
c. 上下文(this)會被指定為這個新例項
d. 如果建構函式返回了一個“物件”，那麼這個物件會取代整個new出來的結果
參考《new運算子》
4.21、js延遲載入的方式有哪些？
a. 將script節點放置在最後</body>之前
b. 使用script標籤的defer和async屬性，defer屬性為延遲載入，是在頁面渲染完成之後再進行載入的，而async屬性則是和文件並行載入
c. 通過監聽onload事件，動態新增script節點
d. 通過ajax下載js指令碼，動態新增script節點
參考《javascript延遲載入方式》
4.22、如何解決跨域問題?
a. JSONP（JSON with Padding），填充式JSON
b. iframe跨域
c. HTML5的window.postMessage方法跨域
d. 通過設定img的src屬性，進行跨域請求
e. 跨域資源共享（CORS），伺服器設定Access-Control-Allow-OriginHTTP響應頭之後，瀏覽器將會允許跨域請求
4.23、documen.write和 innerHTML的區別
write：
a. 改變 HTML 輸出流
b. 當在文件載入之後使用 document.write()，這會覆蓋該文件。例如onload事件中
c. 輸入css的style標籤能改變樣式，例如document.write(“<style>b{color:red;font-weight:bold;}</style>“);
innerHTML：
a. 改變 HTML 內容
b. 輸入css的style標籤不能改變樣式。也是能改變樣式的
參考《JavaScript HTML DOM – 改變 HTML》
4.24、哪些操作會造成記憶體洩漏？
a. 當頁面中元素被移除或替換時，若元素繫結的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在記憶體洩露。
b. 在IE中，如果迴圈引用中的任何物件是 DOM 節點或者 ActiveX 物件，垃圾收集系統則不會處理。
c. 閉包可以維持函式內區域性變數，使其得不到釋放。
d. 在銷燬物件的時候，要遍歷屬性中屬性，依次刪除，否則會洩漏。
參考《js記憶體洩漏的幾種情況》、《JavaScript記憶體分析》
4.25、JavaScript中的變數宣告提升？
函式宣告和變數宣告總是被JavaScript直譯器隱式地提升到包含他們的作用域的最頂端。
function優先宣告於var。
函式表示式中只會提升名稱，函式體只有在執行到賦值語句時才會被賦值。
function foo() { bar(); var x = 1; } function foo() {//等同於 var x; bar(); x = 1; } function test() { foo(); // TypeError "foo is not a function" bar(); // "this will run!" var foo = function () { }// 函式表示式被賦值給變數`foo` function bar() { }// 名為`bar`的函式宣告 }
4.26、如何判斷當前指令碼執行在瀏覽器還是node環境中？
通過判斷Global物件是否為window，如果是window，當前指令碼執行在瀏覽器中
4.27、什麼是 “use strict”
ECMAscript 5新增了第二種執行模式：”嚴格模式”（strict mode）
設立”嚴格模式”的目的，主要有以下幾個：
a. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
b. 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
c. 提高編譯器效率，增加執行速度；
d. 為未來新版本的Javascript做好鋪墊。
注：經過測試IE6,7,8,9均不支援嚴格模式
4.28、eval是做什麼的？
eval()函式可計算某個字串，並執行其中的的 JavaScript 程式碼。
eval()是一個頂級函式並且跟任何物件無關。
如果字串表示了一個表示式，eval()會對錶達式求值。如果參數列示了一個或多個JavaScript宣告， 那麼eval()會執行宣告。
4.29、JavaScript原型，原型鏈 ?
原型：
a. 原型是一個物件，其他物件可以通過它實現屬性繼承。
b. 一個物件的真正原型是被物件內部的[[Prototype]]屬性(property)所持有。瀏覽器支援非標準的訪問器__proto__。
c. 在javascript中，一個物件就是任何無序鍵值對的集合，如果它不是一個主資料型別(undefined，null，boolean，number，string)，那它就是一個物件。
原型鏈：
a. 因為每個物件和原型都有一個原型(注:原型也是一個物件)，物件的原型指向物件的父，而父的原型又指向父的父，我們把這種通過原型層層連線起來的關係稱為原型鏈。
b. 這條鏈的末端一般總是預設的物件原型。
a.__proto__ = b; b.__proto__ = c; c.__proto__ = {}; //default object {}.__proto__.__proto__; //null
參考《理解JavaScript原型》《原型》
4.30、畫出此物件的記憶體圖
4.31、JQuery與jQuery UI 有啥區別？
jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件繫結等等。
jQuery UI則是在jQuery的基礎上，利用jQuery的擴充套件性，設計的外掛。提供了一些常用的介面元素，諸如對話方塊、拖動行為、改變大小行為等等
4.32、jQuery的原始碼看過嗎？能不能簡單說一下它的實現原理？
jQuery給我們帶來了一個簡潔方便的編碼模型(1>建立jQuery物件;2>直接使用jQuery物件的屬性/方法/事件),
一個強悍的dom元素查詢器($)，外掛式程式設計介面(jQuery.fn)，以及外掛初始化的”配置”物件思想
參考《jQuery工作原理解析以及原始碼示例》《jQuery系列分析》
4.33、jQuery 中如何將陣列轉化為json字串
在jQuery1.8.3中有個方法“parseJSON”，在這個方法中會做從string轉換為json。
如果當前瀏覽器支援window.JSON，那就直接呼叫這個物件中的方法。
如果沒有就使用( new Function( “return ” + data ) )();執行程式碼返回。
4.34、請寫出console.log中的內容
1 var msg = `hello`;//頂級作用域window下有個變數msg 2 function great(name, attr) { 3 var name = `david`; 4 var greating = msg + name + `!`; 5 var msg = `你好`; 6 for (var i = 0; i < 10; i++) { 7 var next = msg + `你的id是` + i * 2 + i; 8 } 9 console.log(arguments[0]); 10 console.log(arguments[1]); 11 console.log(greating); 12 console.log(next); 13 } 14 great(`Tom`)
a. arguments[0]被覆蓋了
b. msg出現了宣告提升，可以檢視4.25的例子
c. next中出現了隱式的型別轉換
4.35、請說明下下面程式碼的執行過程
1 var t=true; 2 window.setTimeout(function(){ 3 t=false; 4 },1000); 5 while(t){ 6 console.log(1); 7 } 8 alert(`end`);
a. JavaScript引擎是單執行緒執行的，瀏覽器無論在什麼時候都只且只有一個執行緒在執行JavaScript程式
b. setTimeout是非同步執行緒，需要等待js引擎處理完同步程式碼（while語句）之後才會執行，while語句直接是個死迴圈，js引擎沒有空閒，不會執行下面的alert，也不會插入setTimeout。我在chrome中執行線上程式碼，最後瀏覽器是終止死迴圈執行alert。
c. JavaScript的工作機制是：當執行緒中沒有執行任何同步程式碼的前提下才會執行非同步程式碼，setTimeout是非同步程式碼，所以setTimeout只能等js空閒才會執行，但死迴圈是永遠不會空閒的，所以setTimeout也永遠不會執行。
4.36、輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26
參考《JavaScript Date 物件》《日月如梭，玩轉JavaScript日期》
4.37、Javascript中callee和caller的作用？
arguments.callee屬性包含當前正在執行的函式。
Function.caller返回一個對函式的引用，該函式呼叫了當前函式。
4.38、函式柯里化（Currying）如何理解？
柯里化：把接受多個引數的函式變換成接受一個單一引數（最初函式的第一個引數）的函式，並且返回接受餘下的引數而且返回結果的新函式的技術。
柯里化其實本身是固定一個可以預期的引數，並返回一個特定的函式，處理批特定的需求。這增加了函式的適用性，但同時也降低了函式的適用範圍。
4.39、JS非同步程式設計方式有幾種？
a. 回撥函式
b. 事件監聽
c. 釋出訂閱
d. promise
參考《非同步程式設計的4種方法》
4.40、請說說在JavaScript引用型別和值型別的理解
值型別：儲存在棧（stack）中的簡單資料段，也就是說，它們的值直接儲存在變數訪問的位置。即Undefined、Null、Boolean、Number 和 String。
引用型別：儲存在堆（heap）中的物件，也就是說，儲存在變數處的值是一個指標（point），指向儲存物件的記憶體處。即物件、陣列
參考《ECMAScript 原始值和引用值》，檢視線上程式碼。下面有道題目可以研究下，具體流程參考《理解js引用型別指標的工作方式》
var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined console.log(b.x);// --> [object Object]
4.41、請解釋一下JavaScript中的作用域和作用域鏈
變數的作用域（scope）：程式原始碼中定義這個變數的區域。
作用域鏈：是一個物件列表或連結串列，這組物件定義了這段程式碼“作用域中”的變數。查詢變數會從第一個物件開始查詢，有則用，無則查詢鏈上的下一個物件。
參考《JavaScript權威指南》
五、網路與優化
5.1、講講輸入完網址按下回車，到看到網頁這個過程中發生了什麼
a. 域名解析
b. 發起TCP的3次握手
c. 建立TCP連線後發起http請求
d. 伺服器端響應http請求，瀏覽器得到html程式碼
e. 瀏覽器解析html程式碼，並請求html程式碼中的資源
f. 瀏覽器對頁面進行渲染呈現給使用者
參考《輸入URL到展現頁面的全過程》
5.2、談談你對前端效能優化的理解
a. 請求優化：
合併JS和CSS，減少DNS查詢次數，避免重定向，使用GET完成AJAX請求，減小請求中的Cookie，快取資源，使用CDN，開啟GZip，壓縮HTML頁面，開啟長連線，避免行內指令碼阻塞並行下載，少用iframe（阻塞onload事件，影響並行下載）。
b. CSS優化：
樣式表置於頁面頂部，避免使用CSS表示式，使用外部JS和CSS，壓縮JS和CSS，避免濾鏡。
c. JavaScript優化：
指令碼置於頁面底部，減少DOM訪問，減少重繪和重排，儘量使用區域性變數，使用定時器分割大型任務，用合適的正則操作字串，惰性模式減少分支，事件委託，第三方程式碼非同步載入，節流與去抖動，使用localStorage替代cookie。
d. 圖片優化：
內聯圖使用Data:URL，壓縮圖片或使用WebP格式，固定圖片尺寸，圖片預載入，圖片延遲載入，使用字型向量圖示，Sprites圖片。
參考《前端網路、JavaScript優化以及開發小技巧》《實踐一下前端效能分析》《JavaScript效能優化 DOM程式設計》
5.3、請說出三種減少頁面載入時間的方法
a. 儘量減少頁面中重複的HTTP請求數量
b. 伺服器開啟gzip壓縮
c. css樣式的定義放置在檔案頭部
d. Javascript指令碼放在檔案末尾
e. 壓縮合並Javascript、CSS程式碼
f. 使用多域名負載網頁內的多個檔案、圖片
參考《減低頁面載入時間的方法》
5.4、請介紹下cache-control
每個資源都可以通過 Cache-Control HTTP 頭來定義自己的快取策略
Cache-Control 指令控制誰在什麼條件下可以快取響應以及可以快取多久
Cache-Control 頭在 HTTP/1.1 規範中定義，取代了之前用來定義響應快取策略的頭（例如 Expires）。
5.5、一次js請求一般情況下有哪些地方會有快取處理？
a. 瀏覽器端儲存
b. 瀏覽器端檔案快取
c. HTTP快取304
d. 伺服器端檔案型別快取
e. 表現層&DOM快取
5.6、一個頁面上有大量的圖片（大型電商網站），載入很慢，你有哪些方法優化這些圖片的載入，給使用者更好的體驗。
a. 圖片懶載入，滾動到相應位置才載入圖片。
b. 圖片預載入，如果為幻燈片、相簿等，將當前展示圖片的前一張和後一張優先下載。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。
d. 如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。
5.7、談談以前端角度出發做好SEO需要考慮什麼？
a. 瞭解搜尋引擎如何抓取網頁和如何索引網頁
b. meta標籤優化
c. 關鍵詞分析
d. 付費給搜尋引擎
e. 連結交換和連結廣泛度（Link Popularity）
f. 合理的標籤使用
5.8、HTTP2.0有哪些提升？
a. HTTP 2.0中的二進位制分幀層突破了限制：客戶端和伺服器可以把HTTP訊息分解為互不依賴的幀，然後亂序傳送，最後再在另一端把它們重新組合起來。
b. 把HTTP訊息分解為很多獨立的幀之後，就可以通過優化這些幀的交錯和傳輸順序，進一步提升效能。
c. HTTP 2.0通過讓所有資料流共用同一個連線，可以更有效地使用TCP連線。
d. 伺服器除了對最初請求的響應外，伺服器還可以額外向客戶端推送資源，而無需客戶端明確地請求。
e. HTTP 2.0會壓縮首部後設資料，針對之前的資料只編碼傳送差異資料。
5.9、TCP與UDP的區別
a. UDP 協議的頭長度不到TCP頭的一半，所以同樣大小的包裡UDP攜帶的淨資料比TCP包多。
b. TCP會發響應，UDP不會。並且UDP沒有Seq和Ack等概念，省去了建立連線的開銷，DNS解析就使用UDP協議。TCP有3次握手4次揮手。
c. UDP不能分割報文段（MSS），超過MTU的時候，傳送方的網路層負責分片，接收方收到分片後再組裝起來，這個過程會消耗資源，降低效能。
d. UDP沒有重傳機制，丟包的時候就不能按需傳送。TCP有超時重傳、快速重傳和SACK。
5.10、URI和URL
URI（Uniform Resource Identifier）：統一資源識別符號。
URL（Uniform Resoure Locator）：統一資源定位符，通俗的說法是網址。
URI表示某一網際網路資源，而URL表示資源地點，所以URL是URI的子集。
參考資料：
BAT及各大網際網路公司2014前端筆試面試題–Html,Css篇
BAT及各大網際網路公司2014前端筆試面試題–JavaScript篇【程式設計題】
本文轉自 咖啡機（K.F.J） 部落格園部落格，原文連結：http://www.cnblogs.com/strick/p/4968200.html，如需轉載請自行聯絡原作者
相關文章
- 前端面試題目蒐集——理論知識篇前端面試題
- 前端面試題目前端面試題
- Web前端面試題目彙總Web前端面試題
- 蒐集到10個最難的面試題面試題
- Web前端面試題目及答案彙總Web前端面試題
- 面試題目面試題
- 前端面試經典題目合集（HTML+CSS）前端面試HTMLCSS
- 2019年前端面試題目總結前端面試題
- 整理下《前端江湖面試》對自己有益的題目。前端面試
- TX 面試題目面試題
- JavaScript面試題目，JavaScript面試題
- 面試題目收集面試題
- DBA 面試題目面試題
- 面試題目(zt)面試題
- ABAP面試題目面試題
- 【面試】前端面試題前端面試題
- 前端面試的一些題目(持續更新中)前端面試
- 前端面試經典題目彙總（持續更新中）前端面試
- 2016年Web前端面試題目彙總Web前端面試題
- iPhone 常用面試題目iPhone面試題
- python面試題目Python面試題
- 前端面試送命題：面試題篇前端面試題
- 2019 攜程前端面試遇到的題目分享前端面試
- 前端面試題前端面試題
- 面試分享：2018阿里巴巴前端面試總結(題目+答案)面試阿里前端
- 變態的面試題目面試題
- 求職遇到的面試題目求職面試題
- js閉包面試題目JS面試題
- mysql面試常見題目MySql面試
- Oracle面試題目及解答Oracle面試題
- 前端面試知識點目錄整理前端面試
- 前端常見面試題前端面試題
- 前端面試題一前端面試題
- 前端面試題整理前端面試題
- 前端開發面試題前端面試題
- 前端面試題小集前端面試題
- 2018阿里巴巴前端面試總結（題目+答案）阿里前端面試
- 2018頭條春招前端實習生面試題目總結前端面試題