前端面試題目蒐集

最近讀到一本與前端面試有關的書《前端程序員面試筆試寶典》，裏面的內容不少都是高頻的面試題，在此推薦給各位網友。

1、理論知識

1.一、前端 MV*框架的意義

早期前端都是比較簡單，基本以頁面爲工做單元，內容以瀏覽型爲主，也偶爾有簡單的表單操做，基本不太須要框架。

隨着 AJAX 的出現，Web2.0的興起，人們能夠在頁面上能夠作比較複雜的事情了，而後前端框架才真正出現了。

若是是頁面型產品，多數確實不太須要它，由於頁面中的 JavaScript代碼，處理交互的絕對遠遠超過處理模型的，可是若是是應用軟件類產品，這就太須要了。

長期作某個行業軟件的公司，通常都會沉澱下來一些業務組件，主要體如今數據模型、業務規則和業務流程，這些組件基本都存在於後端，在前端不多有相應的組織。

從協做關係上講，不少前端開發團隊每一個成員的職責不是很清晰，有了前端的 MV框架，這個情況會大有改觀。

之因此感覺不到 MV*框架的重要性，是由於Model部分代碼較少，View的相對多一些。若是主要在操做View和Controller，那固然 jQuery 這類庫比較好用了。

參考《前端 MV*框架的意義》

 

1.二、請簡述盒模型

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.三、請你談談Cookie的弊端

a. 每一個特定的域名下最多生成的cookie個數有限制

b. IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

c. cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節

d. 安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。

 

1.四、瀏覽器本地存儲

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬，是會話級別的存儲。

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

 

1.五、web storage和cookie的區別

a. Cookie的大小是受限的

b. 每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬

c. cookie還須要指定做用域，不能夠跨域調用

d. Web Storage擁有setItem,getItem等方法，cookie須要前端開發者本身封裝setCookie，getCookie

e. Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生

f. IE七、IE6中的UserData經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage

 

1.六、對BFC規範的理解

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定位的一個概念。

BFC是頁面CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。

BFC的一個最重要的效果是，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

利用BFC能夠閉合浮動，防止與浮動元素重疊。

參考《Learning BFC》

 

1.七、線程與進程的區別

a. 一個程序至少有一個進程，一個進程至少有一個線程

b. 線程的劃分尺度小於進程，使得多線程程序的併發性高

c. 進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率

d. 每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制

e. 多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配

 

1.八、你都使用哪些工具來測試代碼的性能？

JSPerf, Dromaeo

 

1.九、你遇到過比較難的技術問題是？你是如何解決的？

 

1.十、常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

 

1.十一、列舉IE與其餘瀏覽器不同的特性？

a. IE的排版引擎是Trident （又稱爲MSHTML）

b. Trident內核曾經幾乎與W3C標準脫節（2005年）

c. Trident內核的大量 Bug等安全性問題沒有獲得及時解決

d. JS方面，有不少獨立的方法，例如綁定事件的attachEvent、建立事件的createEventObject等

e. CSS方面，也有本身獨有的處理方式，例如設置透明，低版本IE中使用濾鏡的方式

參考《Trident（排版引擎）》

 

1.十二、什麼叫優雅降級和漸進加強？

漸進加強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給

b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

參考《優雅降級和漸進加強的區別》

 

1.1三、WEB應用從服務器主動推送Data到客戶端有那些方式？

a. html5 websoket

b. WebSocket 經過 Flash

c. XHR長時間鏈接

d. XHR Multipart Streaming

e. 不可見的Iframe

f. <script>標籤的長時間鏈接(可跨域)

 

1.1四、對前端界面工程師這個職位是怎麼樣理解的？

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 作好的頁面結構，頁面重構和用戶體驗；

e. 處理hack，兼容、寫出優美的代碼格式；

f. 針對服務器的優化、擁抱最新前端技術。

 

1.1五、你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

 

1.1六、你的優勢是什麼？缺點是什麼？

 

1.1七、如何管理前端團隊?

 

1.1八、最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

 

1.1九、平時如何管理你的項目？

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.2一、Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash：
a. Flash適合處理多媒體、矢量圖形、訪問機器

b. 對CSS、處理文本上不足，不容易被搜索

Ajax：

a. Ajax對CSS、文本支持很好，支持搜索

b. 多媒體、矢量圖形、機器訪問不足

共同點：

a. 與服務器的無刷新傳遞消息

b. 能夠檢測用戶離線和在線狀態

c. 操做DOM

 

1.2二、請解釋一下 JavaScript 的同源策略

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

 

1.2三、AMD和CMD 規範的區別？

AMD 提早執行依賴 - 儘早執行，requireJS 是它的實現

CMD 按需執行依賴 - 懶執行，seaJS 是它的實現

參考《SeaJS與RequireJS最大的區別》、《與 RequireJS 的異同》

 

1.2四、網站重構的理解

重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。

a. 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

b. 對於移動平臺的優化，針對於SEO進行優化

c. 減小代碼間的耦合，讓代碼保持彈性

d. 壓縮或合併JS、CSS、image等前端資源

 

1.2五、瀏覽器的內核分別是什麼?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

 

1.2六、前端頁面有哪三層構成，分別是什麼？做用是什麼？

a. 結構層：由 HTML 或 XHTML 之類的標記語言負責建立，僅負責語義的表達。解決了頁面「內容是什麼」的問題。

b. 表示層：由CSS負責建立，解決了頁面「如何顯示內容」的問題。

c. 行爲層：由腳本負責。解決了頁面上「內容應該如何對事件做出反應」的問題。

 

1.2七、知道的網頁製做會用到的圖片格式有哪些？

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成爲下一代動態圖標準。

 

2、HTML

2.一、<img>標籤上title屬性與alt屬性的區別是什麼？

alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。

這包括那些使用原本就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性爲設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

 

2.二、分別寫出如下幾個HTML標籤：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標籤列表》

 

2.三、請寫出至少5個html5新增的標籤，並說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航連接的章節

header：定義頁面或章節的頭部。它常常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它常常包含版權信息、法律信息連接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——若是被刪除，剩下的內容仍然很合理。

參考《HTML5 標籤列表》

 

2.四、請說說你對標籤語義化的理解？

a. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

b. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

c. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

 

2.五、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運做模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

 

2.六、你知道多少種Doctype文檔類型？

標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

 

2.七、HTML與XHTML——兩者有什麼區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標籤名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差別》

 

2.八、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；

 

2.九、iframe的優缺點？

優勢：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通訊

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 沒法被一些搜索引擎索引到

c. 影響瀏覽器中的並行資源下載，iframe和父頁面不能共享下載

d. script腳本標籤寫在了iframe以前，iframe中的資源會被阻塞

參考《iframe的一些記錄》《實踐一下前端性能分析》

 

2.十、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.十一、請闡述table的缺點

a. 太深的嵌套，好比table>tr>td>h3，會致使搜索引擎讀取困難，並且，最直接的損失就是大大增長了冗餘代碼量。

b. 靈活性差，好比要將tr設置border等屬性，是不行的，得經過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來佈局時，頻繁使用他們會形成整個文檔順序混亂。

e. table須要屢次計算才能肯定好其在渲染樹中節點的屬性，一般要花3倍於同等元素的時間。

f. 不夠語義

參考《爲何說table表格佈局很差？》

 

2.十二、簡述一下src與href的區別

src用於替換當前元素；href用於在當前文檔和引用資源之間確立聯繫。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接

 

3、CSS

3.一、談談你對CSS佈局的理解

 

3.二、請列舉幾種能夠清除浮動的方法（至少兩種）

浮動會漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。正是這種特性，致使框內部因爲不存在其餘普通流元素了，表現出高度爲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.三、請列舉幾種隱藏元素的方法

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.四、如何讓一段文本中的全部英文單詞的首字母大寫

text-transform：

none| capitalize(將每一個單詞的第一個字母轉換成大寫) | uppercase(將每一個單詞轉換成大寫 ) | lowercase(將每一個單詞轉換成小寫 )

 

3.五、請簡述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.六、請簡述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.七、CSS僞類與CSS僞對象的區別

CSS 引入僞類和僞元素的概念是爲了描述一些現有CSS沒法描述的東西

根本區別在於：它們是否創造了新的元素（抽象）

僞類：一開始用來表示一些元素的動態狀態，隨後CSS2標準擴展了其概念範圍，使其成爲了全部邏輯上存在但在文檔樹中卻無須標識的「幽靈」分類

僞對象：表明了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中

參考《CSS僞類與CSS僞元素的區別及由來》

 

3.八、請簡述CSS的權重規則

一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/僞類選擇器+10，一個元素名/僞對象選擇器+1。

關係選擇器將拆分爲兩個選擇器再計算。參考《CSS權重》

 

3.九、請寫出多種等高佈局

a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像

b. 給容器div使用單獨的背景色（固定佈局）（流體佈局）：用<div>元素中的最大高度撐大其餘的<div>容器高度

c. 建立帶邊框的兩列等高佈局：用border-left來作，只能使用兩列。

d. 使用正padding和負margin對衝實現多列布局方法：在全部列中使用正的上、下padding和負的上、下margin，並在全部列外面加上一個容器，設置overflow:hiden把溢出背景切掉

e. 使用邊框和定位模擬列等高：但不能使用在多列

f. 模仿表格佈局等高列效果：兼容性很差，在ie6-7沒法正常運行

 

3.十、在CSS樣式中常使用px、em，各有什麼優劣，在表現上有什麼區別？

px是相對長度單位，相對於顯示器屏幕分辨率而言的。

em是相對長度單位，相對於當前對象內文本的字體尺寸。

px定義的字體，沒法用瀏覽器字體放大功能。

em的值並非固定的，會繼承父級元素的字體大小，1 ÷ 父元素的font-size × 須要轉換的像素值 = em值。

 

3.十一、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.十二、position的absolute與fixed共同點與不一樣點

相同：

a. 改變行內元素的呈現方式，display被置爲block

b. 讓元素脫離普通流，不佔據空間

c. 默認會覆蓋到非定位元素上

區別：

absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。

當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

 

3.1三、position的值， relative和absolute分別是相對於誰進行定位的？

absolute：生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位

fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。 （IE6不支持）

relative：生成相對定位的元素，相對於其在普通流中的位置進行定位

static：默認值。沒有定位，元素出如今正常的流中

 

3.1四、CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），變形（transform）

增長了更多的CSS選擇器  多背景 rgba，在CSS3中惟一引入的僞元素是::selection，媒體查詢，多欄佈局

參考《CSS3中的動畫效果記錄》、《CSS3中border-radius、box-shadow與gradient那點事兒》

 

3.1五、爲何要初始化CSS樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

 

3.1六、解釋下 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.1七、解釋下浮動和它的工做原理？

a. 浮動元素脫離文檔流，不佔據空間（引發「高度塌陷」現象）

b. 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

 

3.1八、浮動元素引發的問題

a. 父元素的高度沒法被撐開，影響與父元素同級的元素

b. 與浮動元素同級的非浮動元素會跟隨其後

c. 若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

 

3.1九、什麼是 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.2一、:link、:visited、:hover、:active的執行順序是怎麼樣的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來歸納

 

3.2二、常常遇到的瀏覽器兼容性有哪些？如何解決？

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.2三、有哪項方式能夠對一個DOM設置它的CSS樣式？

a. 外部樣式表：經過<link>標籤引入一個外部css文件

b. 內部樣式表：將css代碼放在 <style> 標籤內部

c. 內聯樣式：將css樣式直接定義在 HTML 元素內部

 

3.2四、什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

a. 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

b. 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

c. 兩個外邊距一正一負時，摺疊結果是二者的相加的和。

 

3.2五、rgba()和opacity的透明效果有什麼不一樣？

a. opacity做用於元素，以及元素內的全部內容的透明度，rgba()只做用於元素的顏色或其背景色。

b. 設置rgba透明的元素的子元素不會繼承透明效果！

 

3.2六、css屬性content有什麼做用？有什麼應用？

css的content屬性專門應用在 before/after 僞元素上，用於來插入生成內容。

能夠配合自定義字體顯示特殊符號。

 

4、JavaScript

4.一、請解釋一下什麼是閉包

當函數能夠記住並訪問所在的做用域時，就產生了閉包，即便函數是在當前做用域以外執行。閉包有以下特性：

a. JavaScript容許你使用在當前函數之外定義的變量

b. 即便外部函數已經返回，當前函數仍然能夠引用在外部函數所定義的變量

c. 閉包能夠更新外部變量的值

d. 用閉包模擬私有方法

因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題。

在定時器、事件監聽器、Ajax請求、跨窗口通訊、Web Workers或者任何其餘的異步（或者同步）任務中，只要使用了回調函數，實際上就是在使用閉包！

參考《做用域、提高與閉包》《做用域、提高與閉包》

 

4.二、call 和 apply 的區別是什麼？

call 和 apply 就是爲了改變函數體內部 this 的指向。

區別是從第二個參數起，call 須要把參數按順序傳遞進去，而 apply 則是把參數放在數組裏。

當參數明確時用call與apply都行, 當參數不明確時可用apply給合arguments

 

4.三、如何使用原生 Javascript 代碼深度克隆一個對象（注意區分對象類型）

在網上找了個函數，用遞歸的方式作複製。傳入的參數必須得是Array或Object。

而且用到了JSON.stringify和JSON.parse。查看在線代碼。參考《JavaScript中的對象克隆》

 

4.四、 jQuery中 $(′.class′)和$('div.class') 哪一個效率更高？

jQuery內部使用Sizzle引擎，處理各類選擇器。Sizzle引擎的選擇順序是從右到左，因此這條語句是先選.class，

第二個會直接過濾出div標籤，而第一個就不會過濾了，將全部相關標籤都列出。參考《jQuery最佳實踐》

 

4.五、實現輸出document對象中全部成員的名稱和類型

用一個for in方式循環document，而後在將內容console出來，

就是看到篇文章還會判斷document.hasOwnProperty，而後再作打印，我測試了下這樣的話打印不出來。

查看在線代碼。參考《JavaScript要點歸檔：DOM》

 

4.六、得到一個DOM元素的絕對位置

offsetTop：返回當前元素相對於其 offsetParent 元素的頂部的距離

offsetLeft：返回當前元素相對於其 offsetParent 元素的左邊的距離

getBoundingClientRect()：返回值是一個DOMRect對象，它包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，屬性單位爲像素

參考《JavaScript中尺寸、座標》，查看在線代碼。

 

4.七、如何利用JS生成一個table？

首先是用createElement建立一個table，再用setAttribute設置table的屬性，

而後用for循環設置tr和td的內容，用appendChild拼接內容，設置td的時候還用到innerHTML和style.padding。

查看在線代碼。參考《JavaScript要點歸檔：DOM表格》《JavaScript要點歸檔：DOM》

 

4.八、實現預加載一張圖片，加載完成後顯示在網頁中並設定其高度爲50px，寬度爲50px

先new Image()獲取一個圖片對象，而後在圖片對象的onload中設置寬度和高度。查看在線代碼。

 

4.九、假設有一個4行tr的table，將table裏面tr順序顛倒

先是經過table.tBodies[0].rows獲取到當前tbody中的行，接下來是兩種方法處理。獲取到的行沒有reverse這個方法。

第一種是將這些行push到另一個數組中

第二種是用Array.prototype.slice.call()將那些行變成數組，

接着用reverse倒敘，table再appendChild。查看在線代碼。

這裏我有個疑問，就是在appendChild的時候，並非在最後把列加上，而是作了替換操做？

 

4.十、模擬一個HashTable類，一個類上註冊四個方法：包含有add、remove、contains、length方法

先是在構造函數中定義一個數組，而後用push模擬add，splice模擬remove。

四個方法都放在了prototype上面。查看在線代碼。

 

4.十一、Ajax讀取一個XML文檔並進行解析的實例

a. 初始化一個HTTP請求，IE以ActiveX對象引入。 後來標準瀏覽器提供了XMLHttpRequest類，它支持ActiveX對象所提供的方法和屬性

b. 發送請求，能夠調用HTTP請求類的open()和send()方法

c. 處理服務器的響應，經過http_request.onreadystatechange = nameOfTheFunction。來指定函數

參考《AJAX》《開始AJAX》，查看在線代碼。

 

4.十二、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.1三、JS模塊的封裝方法，好比怎樣實現私有變量，不能直接賦值，只能經過公有方法

a. 經過json生成對象的原始模式，多寫幾個就會很是麻煩，也不能反映出它們是同一個原型對象的實例

b. 原始模式的改進，能夠寫一個函數，解決代碼重複的問題。一樣不能反映出它們是同一個原型對象的實例

c. 構造函數模式，就是一個普通函數，不過內部使用了this變量，可是存在一個浪費內存的問題。

d. Prototype模式，每個構造函數都有一個prototype屬性，指向另外一個對象。這個對象的全部屬性和方法，都會被構造函數的實例繼承，能夠把那些不變的屬性和方法，直接定義在prototype對象上。Prototype模式的驗證方法：isPrototypeOf()、hasOwnProperty()和in運算符。

參考《封裝》，查看在線代碼。

 

4.1四、對this指針的理解，能夠列舉幾種使用狀況？

this其實是在函數被調用時發生的綁定，它指向什麼徹底取決於函數在哪裏被調用。

this指的是：調用函數的那個對象。

a. 純粹的函數調用，屬於全局性調用，所以this就表明全局對象Global。

b. 做爲對象方法的調用，這時this就指這個上級對象。

c. 做爲構造函數調用，就是經過這個函數new一個新對象（object）。這時，this就指這個新對象。

d. apply與call的調用，它們的做用是改變函數的調用對象，它的第一個參數就表示改變後的調用這個函數的對象。

參考《Javascript的this用法》《this》，查看在線代碼。

 

4.1五、在JavaScript中，經常使用的綁定事件的方法有哪些？

a. 在DOM元素中直接綁定，DOM元素，能夠理解爲HTML標籤，onXXX="JavaScript Code"，查看事件列表。

b. 在JavaScript代碼中綁定，elementObject.onXXX=function(){}，通稱爲DOM0事件系統。

c. 綁定事件監聽函數，標準瀏覽器使用 addEventListener() ，IE11如下版本attachEvent() 來綁定事件監聽函數，通稱爲DOM2事件系統。

參考《JavaScript綁定事件的方法》《JavaScript中事件處理》

 

4.1六、解釋下javascript的冒泡和捕獲

<div id="click1">
  <div id="click2">
     <div id="click3">事件</div>
  </div>
</div>

a. Netscape主張元素1的事件首先發生，這種事件發生順序被稱爲捕獲型

b. 微軟則保持元素3具備優先權，這種事件順序被稱爲冒泡型

c. W3C選擇了一個擇中的方案。任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段

事件監聽函數addEventListener()的第三個參數就是控制方法是捕獲仍是冒泡

參考《事件》、《javascript的冒泡和捕獲》，查看在線代碼。

 

4.1七、jQuery的特色

a. 一款輕量級的js庫

b. 豐富快速的DOM選擇器

c. 鏈式表達式

d. 事件、樣式、動畫等特效支持

e. Ajax操做封裝，支持跨域

f. 跨瀏覽器兼容

g. 插件擴展開發

參考《JQuery特色、優缺點及其經常使用操做》

 

4.1八、Ajax有哪些好處和弊端？

優勢：

a. 無刷新更新數據

b. 異步與服務器通訊

c. 前端和後端負載平衡

d. 基於標準被普遍支持

e. 界面與應用分離

缺點：

a. AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞

b. AJAX的安全問題

c. 對搜索引擎支持較弱

d. 違背URL和資源定位的初衷

參考《AJAX工做原理及其優缺點》

 

4.1九、null和undefined的區別？

null：

a. null是一個表示"無"的對象，轉爲數值時爲0

b. null表示"沒有對象"，即該處不該該有值。

undefined：

a. undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

b. undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。

參考《undefined與null的區別》

 

4.20、new操做符具體幹了什麼呢?

a. 一個新對象被建立。它繼承自函數原型

b. 構造函數被執行。執行的時候，相應的傳參會被傳入

c. 上下文(this)會被指定爲這個新實例

d. 若是構造函數返回了一個「對象」，那麼這個對象會取代整個new出來的結果

參考《new運算符》

 

4.2一、js延遲加載的方式有哪些？

a. 將script節點放置在最後</body>以前

b. 使用script標籤的defer和async屬性，defer屬性爲延遲加載，是在頁面渲染完成以後再進行加載的，而async屬性則是和文檔並行加載

c. 經過監聽onload事件，動態添加script節點

d. 經過ajax下載js腳本，動態添加script節點

參考《javascript延遲加載方式》

 

4.2二、如何解決跨域問題?

a. JSONP（JSON with Padding），填充式JSON

b. iframe跨域

c. HTML5的window.postMessage方法跨域

d. 經過設置img的src屬性，進行跨域請求

e. 跨域資源共享（CORS），服務器設置Access-Control-Allow-OriginHTTP響應頭以後，瀏覽器將會容許跨域請求

 

4.2三、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.2四、哪些操做會形成內存泄漏？

a. 當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會做出恰當處理，此時要先手工移除事件，否則會存在內存泄露。

b. 在IE中，若是循環引用中的任何對象是 DOM 節點或者 ActiveX 對象，垃圾收集系統則不會處理。

c. 閉包能夠維持函數內局部變量，使其得不到釋放。

d. 在銷燬對象的時候，要遍歷屬性中屬性，依次刪除，不然會泄漏。

參考《js內存泄漏的幾種狀況》、《JavaScript內存分析》

 

4.2五、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.2六、如何判斷當前腳本運行在瀏覽器仍是node環境中？

經過判斷Global對象是否爲window，若是是window，當前腳本運行在瀏覽器中

 

4.2七、什麼是 "use strict"

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）

設立"嚴格模式"的目的，主要有如下幾個：

a. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

b. 消除代碼運行的一些不安全之處，保證代碼運行的安全；

c. 提升編譯器效率，增長運行速度；

d. 爲將來新版本的Javascript作好鋪墊。

注：通過測試IE6,7,8,9均不支持嚴格模式

參考《Javascript 嚴格模式詳解》

 

4.2八、eval是作什麼的？

eval()函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

eval()是一個頂級函數而且跟任何對象無關。

若是字符串表示了一個表達式，eval()會對錶達式求值。若是參數表示了一個或多個JavaScript聲明， 那麼eval()會執行聲明。

 

4.2九、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.3一、JQuery與jQuery UI 有啥區別？

jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

 

4.3二、jQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

jQuery給咱們帶來了一個簡潔方便的編碼模型(1>建立jQuery對象;2>直接使用jQuery對象的屬性/方法/事件),

一個強悍的dom元素查找器($)，插件式編程接口(jQuery.fn)，以及插件初始化的」配置」對象思想

參考《jQuery工做原理解析以及源代碼示例》《jQuery系列分析》

 

4.3三、jQuery 中如何將數組轉化爲json字符串

在jQuery1.8.3中有個方法「parseJSON」，在這個方法中會作從string轉換爲json。

若是當前瀏覽器支持window.JSON，那就直接調用這個對象中的方法。

若是沒有就使用( new Function( "return " + data ) )();執行代碼返回。

eval和new Function是有區別的。

 

4.3四、請寫出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.3五、請說明下下面代碼的執行過程

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.3六、輸出今天的日期，以YYYY-MM-DD的方式，好比今天是2014年9月26日，則輸出2014-09-26

參考《JavaScript Date 對象》《日月如梭，玩轉JavaScript日期》

 

4.3七、Javascript中callee和caller的做用？

arguments.callee屬性包含當前正在執行的函數。

Function.caller返回一個對函數的引用，該函數調用了當前函數。

 

4.3八、函數柯里化（Currying）如何理解？

柯里化：把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，而且返回接受餘下的參數並且返回結果的新函數的技術。

柯里化其實自己是固定一個能夠預期的參數，並返回一個特定的函數，處理批特定的需求。這增長了函數的適用性，但同時也下降了函數的適用範圍。

參考《前端開發者進階之函數柯里化Currying》

 

4.3九、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.4一、請解釋一下JavaScript中的做用域和做用域鏈

變量的做用域（scope）：程序源代碼中定義這個變量的區域。

做用域鏈：是一個對象列表或鏈表，這組對象定義了這段代碼「做用域中」的變量。查找變量會從第一個對象開始查找，有則用，無則查找鏈上的下一個對象。

參考《JavaScript權威指南》

 

5、網絡與優化

5.一、講講輸入完網址按下回車，到看到網頁這個過程當中發生了什麼

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

參考《輸入URL到展示頁面的全過程》

 

5.二、談談你對前端性能優化的理解

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.三、請說出三種減小頁面加載時間的方法

a. 儘可能減小頁面中重複的HTTP請求數量

b. 服務器開啓gzip壓縮

c. css樣式的定義放置在文件頭部

d. Javascript腳本放在文件末尾

e. 壓縮合並Javascript、CSS代碼

f. 使用多域名負載網頁內的多個文件、圖片

參考《減低頁面加載時間的方法》

 

5.四、請介紹下cache-control

每一個資源均可以經過 Cache-Control HTTP 頭來定義本身的緩存策略

Cache-Control 指令控制誰在什麼條件下能夠緩存響應以及能夠緩存多久

Cache-Control 頭在 HTTP/1.1 規範中定義，取代了以前用來定義響應緩存策略的頭（例如 Expires）。

 

5.五、一次js請求通常狀況下有哪些地方會有緩存處理？

a. 瀏覽器端存儲

b. 瀏覽器端文件緩存

c. HTTP緩存304

d. 服務器端文件類型緩存

e. 表現層&DOM緩存

參考《一次HTTP請求中有哪些地方能夠緩存》

 

5.六、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

a. 圖片懶加載，滾動到相應位置才加載圖片。

b. 圖片預加載，若是爲幻燈片、相冊等，將當前展現圖片的前一張和後一張優先下載。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，若是圖片爲css圖片的話。

d. 若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

 

5.七、談談之前端角度出發作好SEO須要考慮什麼？

a. 瞭解搜索引擎如何抓取網頁和如何索引網頁

b. meta標籤優化

c. 關鍵詞分析

d. 付費給搜索引擎

e. 連接交換和連接普遍度（Link Popularity）

f. 合理的標籤使用

 

5.八、HTTP2.0有哪些提高？

a. HTTP 2.0中的二進制分幀層突破了限制：客戶端和服務器能夠把HTTP消息分解爲互不依賴的幀，而後亂序發送，最後再在另外一端把它們從新組合起來。

b. 把HTTP消息分解爲不少獨立的幀以後，就能夠經過優化這些幀的交錯和傳輸順序，進一步提高性能。

c. HTTP 2.0經過讓全部數據流共用同一個鏈接，能夠更有效地使用TCP鏈接。

d. 服務器除了對最初請求的響應外，服務器還能夠額外向客戶端推送資源，而無需客戶端明確地請求。

e. HTTP 2.0會壓縮首部元數據，針對以前的數據只編碼發送差別數據。

 

5.九、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.十、URI和URL

URI（Uniform Resource Identifier）：統一資源標識符。

URL（Uniform Resoure Locator）：統一資源定位符，通俗的說法是網址。

URI表示某一互聯網資源，而URL表示資源地點，因此URL是URI的子集。

 

參考資料：

【答阿里寒冬面試題】呵呵，大神的面試題就是好！

作幾道前端面試題休息休息吧

來看一點CSS相關的吧

前端面試題第二彈襲來，接招！

阿里巴巴校招筆試題整理（HTML+CSS篇）

最全前端面試問題及答案總結

2014年最新前端開發面試題

2014PPTV-題解

一些前端開發的筆試題及答案【編程題】

常見前端面試題之HTML/CSS部分

BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇

BAT及各大互聯網公司2014前端筆試面試題--JavaScript篇【編程題】

10道javascript筆試題【編程題】