想成功就業web前端工程師，想要能高薪就業，那麼除了好的web前端技能以外，還得有好的面試技巧，如果提前就瞭解更多企業的面試要求及面試題目，那麼可以讓我們的面試成功的機率大大的提高，今天就給大家分享5道經典的web前端面試題，相信可以祝大家一臂之力。

1、BFC

(1) w3c規範中的BFC定義：

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容建立新的BFC（塊級格式上下文）。

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。

在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。

(2) BFC的通俗理解：

首先BFC是一個名詞，是一個獨立的佈局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子裡面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的佈局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。

詳細參見：

 http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

https://www.zhihu.com/question/28433480

 2、前端工程化

場景：你是第一天來公司上班的，專案程式碼託管在GitLab，專案地址：[email protected]:org/project.git,現在有一處程式碼需要你修改。請下完成此項任務中，與git/gitlab相關的操作步驟。

第一步：$> ssh-keygen -t rss -C [email protected]

第二步：拷貝公鑰到gitlab

第三步：

$> git config —global user.name zhangsan

$> git config —global user.email [email protected]

第四步：$> git clone [email protected]:org/project.git

第五步：$> git checkout -b project-20170227-zhangsan-bugfix

第六步：修改程式碼

第七步：git status

第八步：git add .

第九不：git commit -am ‘bugfix’

第八步：git push --set-upstream origin project-20170227-zhangsan-bugfix

 3、CSS，JS程式碼壓縮，以及程式碼CDN託管，圖片整合。

（1）CSS,JS 程式碼壓縮：

可以應用gulp的gulp-uglify，gulp-minify-css模組完成；可以應用webpack的 UglifyJsPlugin壓縮外掛完成。

（2）CDN：

內容分發網路(CDN)是一個經策略性部署的整體系統，包括分散式儲存、負載均衡、網路請求的重定向和內容管理4個要件。主要特點有：本地Cache加速，映象服務，遠端加速，頻寬優化。關鍵技術有：內容釋出，內容路由，內容交換，效能管理。CDN網站加速適合以諮詢為主的網站。CDN是對域名加速不是對網站伺服器加速。CDN和映象站比較不需要訪客手動選擇要訪問的映象站。CDN使用後網站無需任何修改即可使用CDN獲得加速效果。如果通過CDN後看到的網頁還是舊網頁，可以通過URL推送服務解決，新增的網頁和圖片不需要URL推送。使用動態網頁可以不快取即時性要求很高的網頁和圖片。CDN可以通過git或SVN來管理。

（3）圖片整合

減少網站載入時間的最有效的方式之一就是減少網站的HTTP請求數。實現這一目標的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然後再用CSS來定位。缺點是可維護性差。可以使用百度的fis/webpack來自動化管理sprite。

4、如何利用webpack把程式碼上傳伺服器以及轉碼測試？

（1）程式碼上傳：

可以使用sftp-webpack-plugin，但是會把子資料夾給提取出來，不優雅。可以使用gulp+webpack來實現。

（2）轉碼測試

webpack應用babel來對ES6轉碼，開啟devtool: “source-map" 來進行瀏覽器測試。應用karma或mocha來做單元測試。

5、專案上線流程是怎樣的？

（1）流程建議

- 模擬線上的開發環境

本地反向代理線上真實環境開發即可。（apache，nginx，nodejs均可實現）

- 模擬線上的測試環境

模擬線上的測試環境，其實是需要一臺有真實資料的測試機，建議沒條件搭daily的，就直接用線上資料測好了，只不過程式部分走你們的測試環境而已，有條件搭daily最好。

- 可連調的測試環境

可連調的測試環境，分為2種。一種是開發測試都在一個區域網段，直接綁hosts即可，不在一個網段，就每人分配一臺虛擬的測試機，放在大家都可以訪問到的公司內網，程式碼直接往上布即可。

- 自動化的上線系統

自動化的上線系統，可以採用Jenkins。如果沒有，可以自行搭建一個簡易的上線系統，原理是每次上線時都抽取最新的trunk或master，做一個tag，再打一個時間戳的標記，然後分發到cdn就行了。介面裡就2個功能，打tag，回滾到某tag，部署。

- 適合前後端的開發流程

開發流程依據公司所用到的工具，構建，框架。原則就是分散獨立開發，互相不干擾，連調時有hosts可綁即可。

（2）簡單的可操作流程

- 程式碼通過git管理，新需求建立新分支，分支開發，主幹釋出

- 上線走簡易上線系統，參見上一節

- 通過gulp+webpack連到釋出系統，一鍵整合，本地只關心原碼開發

- 本地環境通過webpack反向代理的server

- 搭建基於linux的本地測試機，自動完成build+push功能

 以上是一些面試中出現頻臨比較高的，大家可以多瞭解，如果想獲取更多的web前端面試題，可以留言小編，免費分享給大家。