想成功就業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://×××w.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
https://×××w.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前端面試題，可以留言小編，免費分享給大家。