原文地址爲：http://www.gbtags.com/gb/share/9879.htm
原文作者Ella已授權轉載
一、理論知識
1.1、講講輸入完網址按下回車，到看到網頁這個過程中發生了什麼
a. 域名解析
b. 發起TCP的3次握手
c. 建立TCP連接後發起http請求
d. 服務器端響應http請求，瀏覽器得到html代碼
e. 瀏覽器解析html代碼，並請求html代碼中的資源
f. 瀏覽器對頁面進行渲染呈現給用戶
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、你都使用哪些工具來測試代碼的性能？
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. <script>標籤的長時間連接(可跨域)
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緩存
1.33、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。
a. 圖片懶加載，滾動到相應位置才加載圖片。
b. 圖片預加載，如果爲幻燈片、相冊等，將當前展示圖片的前一張和後一張優先下載。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片爲css圖片的話。
d. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
1.34、談談以前端角度出發做好SEO需要考慮什麼？
a. 瞭解搜索引擎如何抓取網頁和如何索引網頁
b. meta標籤優化
c. 關鍵詞分析
d. 付費給搜索引擎
e. 鏈接交換和鏈接廣泛度（Link Popularity）
f. 合理的標籤使用