前端面試題目蒐集——理論知識篇

一、理論知識

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

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連線後發起http請求

d. 伺服器端響應http請求，瀏覽器得到html程式碼

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

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

參考《一次完整的HTTP事務是怎樣一個過程》

1.2、談談你對前端效能優化的理解

a. 請求數量：合併指令碼和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求頻寬：開啟GZip，精簡JavaScript，移除重複指令碼，影像優化，將icon做成字型

c. 快取利用：使用CDN，使用外部JavaScript和CSS，新增Expires頭，減少DNS查詢，配置ETag，使AjaX可快取

d. 頁面結構：將樣式表放在頂部，將指令碼放在底部，儘早重新整理文件的輸出

e. 程式碼校驗：避免CSS表示式，避免重定向

參考《前端工程與效能優化》

1.3、前端 MV*框架的意義

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

隨著 AJAX 的出現，Web2.0的興起，人們可以在頁面上可以做比較複雜的事情了，然後前端框架才真正出現了。

如果是頁面型產品，多數確實不太需要它，因為頁面中的 JavaScript程式碼，處理互動的絕對遠遠超過處理模型的，但是如果是應用軟體類產品，這就太需要了。

長期做某個行業軟體的公司，一般都會沉澱下來一些業務元件，主要體現在資料模型、業務規則和業務流程，這些元件基本都存在於後端，在前端很少有相應的組織。

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

之所以感受不到 MV*框架的重要性，是因為Model部分程式碼較少，View的相對多一些。如果主要在操作View和Controller，那當然 jQuery 這類庫比較好用了。

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

1.4、請簡述盒模型

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

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

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

c. cookie的最大大約為4096位元組，為了相容性，一般不能超過4095位元組

d. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。

1.6、瀏覽器本地儲存

在HTML5中提供了sessionStorage和localStorage。

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

localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。

1.7、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.8、對BFC規範的理解

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

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

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

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

參考《Learning BFC》

1.9、執行緒與程式的區別

a. 一個程式至少有一個程式，一個程式至少有一個執行緒

b. 執行緒的劃分尺度小於程式，使得多執行緒程式的併發性高

c. 程式在執行過程中擁有獨立的記憶體單元，而多個執行緒共享記憶體，從而極大地提高了程式的執行效率

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

e. 多執行緒的意義在於一個應用程式中，有多個執行部分可以同時執行。但作業系統並沒有將多個執行緒看做多個獨立的應用，來實現程式的排程和管理以及資源分配

1.10、請說出三種減少頁面載入時間的方法

a. 儘量減少頁面中重複的HTTP請求數量

b. 伺服器開啟gzip壓縮

c. css樣式的定義放置在檔案頭部

d. Javascript指令碼放在檔案末尾

e. 壓縮合並Javascript、CSS程式碼

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

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

1.11、你都使用哪些工具來測試程式碼的效能？

JSPerf, Dromaeo

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

1.13、常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？

1.14、列舉IE與其他瀏覽器不一樣的特性？

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

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

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

d. JS方面，有很多獨立的方法，例如繫結事件的attachEvent、建立事件的createEventObject等

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

參考《Trident（排版引擎）》

1.15、什麼叫優雅降級和漸進增強？

漸進增強 progressive enhancement：

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

優雅降級 graceful degradation：

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

區別：

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

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要

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

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

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

a. html5 websoket

b. WebSocket 通過 Flash

c. XHR長時間連線

d. XHR Multipart Streaming

e. 不可見的Iframe

f. 標籤的長時間連線(可跨域)

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

a. 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

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

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

d. 做好的頁面結構，頁面重構和使用者體驗；

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

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

1.18、你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？

1.19、你的優點是什麼？缺點是什麼？

1.20、如何管理前端團隊?

1.21、最近在學什麼？能談談你未來3，5年給自己的規劃嗎？

1.22、平時如何管理你的專案？

a. 先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等；

b. 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

c. 標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）；

d. 頁面進行標註（例如 頁面 模組 開始和結束）；

e. CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）；

f. JS 分資料夾存放 命名以該JS功能為準的英文翻譯。

g. 圖片採用整合的 images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理

1.23、說說最近最流行的一些東西吧？常去哪些網站？

CSDN、SegmentFault、php.net、MDN、css參考手冊、iconfont、underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

1.24、Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash：

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

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

Ajax：

a. Ajax對CSS、文字支援很好，支援搜尋

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

共同點：

a. 與伺服器的無重新整理傳遞訊息

b. 可以檢測使用者離線和線上狀態

c. 操作DOM

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

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

指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。

1.26、AMD和CMD 規範的區別？

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

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

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

1.27、網站重構的理解

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

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

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

c. 減少程式碼間的耦合，讓程式碼保持彈性

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

1.28、瀏覽器的核心分別是什麼?

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

1.29、請介紹下cache-control

每個資源都可以通過 Cache-Control HTTP 頭來定義自己的快取策略

Cache-Control 指令控制誰在什麼條件下可以快取響應以及可以快取多久

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

1.30、前端頁面有哪三層構成，分別是什麼？作用是什麼？

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

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

c. 行為層：由指令碼負責。解決了頁面上“內容應該如何對事件作出反應”的問題。

1.31、知道的網頁製作會用到的圖片格式有哪些？

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

1.32、一次js請求一般情況下有哪些地方會有快取處理？

a. 瀏覽器端儲存

b. 瀏覽器端檔案快取

c. HTTP快取304

d. 伺服器端檔案型別快取

e. 表現層&DOM快取

參考《一次HTTP請求中有哪些地方可以快取》

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

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

b. 圖片預載入，如果為幻燈片、相簿等，將當前展示圖片的前一張和後一張優先下載。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。

d. 如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。

1.34、談談以前端角度出發做好SEO需要考慮什麼？

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

b. meta標籤優化

c. 關鍵詞分析

d. 付費給搜尋引擎

e. 連結交換和連結廣泛度（Link Popularity）

f. 合理的標籤使用

原文連結：http://www.gbtags.com/gb/share/9879.htm