前言：
想成功就業(yè)web前端工程師寝凌，想要能高薪就業(yè)，那么除了好的web前端技能以外孝赫，還得有好的面試技巧较木，如果提前就了解更多企業(yè)的面試要求及面試題目，那么可以讓我們的面試成功的幾率大大的提高青柄，今天就給大家分享5道經(jīng)典的web前端面試題伐债，相信可以祝大家一臂之力。
1致开、BFC
(1) w3c規(guī)范中的BFC定義：
浮動(dòng)元素和絕對(duì)定位元素峰锁，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子双戳，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）虹蒋。
在BFC中，盒子從頂端開(kāi)始垂直地一個(gè)接一個(gè)地排列飒货，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的魄衅。在一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊膏斤。
在BFC中徐绑，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來(lái)說(shuō)，則觸碰到右邊緣）莫辨。
(2) BFC的通俗理解：
首先BFC是一個(gè)名詞，是一個(gè)獨(dú)立的布局環(huán)境毅访，我們可以理解為一個(gè)箱子（實(shí)際上是看不見(jiàn)摸不著的）沮榜，箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響喻粹。）并且在一個(gè)BFC中蟆融，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
2守呜、前端工程化
場(chǎng)景：你是第一天來(lái)公司上班的型酥，項(xiàng)目代碼托管在GitLab，項(xiàng)目地址：git@lab.com:org/project.git,現(xiàn)在有一處代碼需要你修改查乒。請(qǐng)下完成此項(xiàng)任務(wù)中弥喉，與git/gitlab相關(guān)的操作步驟。
順便給大家推薦一個(gè)裙玛迄，它的前面是 537由境，中間是631，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)虏杰，互相幫助讥蟆。群里每天晚上都有大神免費(fèi)直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦纺阔。
第一步：$> ssh-keygen -t rss -Czhangsan@abc.com
第二步：拷貝公鑰到gitlab
第三步：
$> git config —global user.name zhangsan
$> git config —global user.emailzhangsan@abc.com
第四步：$> git clone git@lab.com:org/project.git
第五步：$> git checkout -b project-{{20170227:0}}-zhangsan-bugfix
第六步：修改代碼
第七步：git status
第八步：git add .
第九不：git commit -am ‘bugfix’
第八步：git push --set-upstream origin project-{{20170227:0}}-zhangsan-bugfix
3瘸彤、CSS，JS代碼壓縮笛钝，以及代碼CDN托管质况，圖片整合。
（1）CSS,JS 代碼壓縮：
可以應(yīng)用gulp的gulp-uglify婆翔，gulp-minify-css模塊完成拯杠；可以應(yīng)用webpack的 UglifyJsPlugin壓縮插件完成。
（2）CDN：
順便給大家推薦一個(gè)裙啃奴，它的前面是 537潭陪，中間是631，最后就是 707最蕾。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)依溯，互相幫助。群里每天晚上都有大神免費(fèi)直播上課瘟则，如果不是想學(xué)習(xí)的小伙伴就不要加啦黎炉。
內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)是一個(gè)經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲(chǔ)醋拧、負(fù)載均衡慷嗜、網(wǎng)絡(luò)請(qǐng)求的重定向和內(nèi)容管理4個(gè)要件。主要特點(diǎn)有：本地Cache加速丹壕，鏡像服務(wù)庆械，遠(yuǎn)程加速，帶寬優(yōu)化菌赖。關(guān)鍵技術(shù)有：內(nèi)容發(fā)布缭乘，內(nèi)容路由，內(nèi)容交換琉用，性能管理堕绩。CDN網(wǎng)站加速適合以咨詢(xún)?yōu)橹鞯木W(wǎng)站。CDN是對(duì)域名加速不是對(duì)網(wǎng)站服務(wù)器加速邑时。CDN和鏡像站比較不需要訪客手動(dòng)選擇要訪問(wèn)的鏡像站奴紧。CDN使用后網(wǎng)站無(wú)需任何修改即可使用CDN獲得加速效果。如果通過(guò)CDN后看到的網(wǎng)頁(yè)還是舊網(wǎng)頁(yè)刁愿，可以通過(guò)URL推送服務(wù)解決绰寞，新增的網(wǎng)頁(yè)和圖片不需要URL推送。使用動(dòng)態(tài)網(wǎng)頁(yè)可以不緩存即時(shí)性要求很高的網(wǎng)頁(yè)和圖片。CDN可以通過(guò)git或SVN來(lái)管理滤钱。
（3）圖片整合
減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)觉壶。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過(guò)CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS來(lái)定位件缸。缺點(diǎn)是可維護(hù)性差铜靶。可以使用百度的fis/webpack來(lái)自動(dòng)化管理sprite他炊。
4争剿、如何利用webpack把代碼上傳服務(wù)器以及轉(zhuǎn)碼測(cè)試？
（1）代碼上傳：
可以使用sftp-webpack-plugin痊末，但是會(huì)把子文件夾給提取出來(lái)蚕苇，不優(yōu)雅≡涞可以使用gulp+webpack來(lái)實(shí)現(xiàn)涩笤。
（2）轉(zhuǎn)碼測(cè)試
webpack應(yīng)用babel來(lái)對(duì)ES6轉(zhuǎn)碼，開(kāi)啟devtool: “source-map" 來(lái)進(jìn)行瀏覽器測(cè)試盒件。應(yīng)用karma或mocha來(lái)做單元測(cè)試蹬碧。
5、項(xiàng)目上線流程是怎樣的炒刁？
（1）流程建議
- 模擬線上的開(kāi)發(fā)環(huán)境
本地反向代理線上真實(shí)環(huán)境開(kāi)發(fā)即可恩沽。（apache，nginx翔始，nodejs均可實(shí)現(xiàn)）
- 模擬線上的測(cè)試環(huán)境
模擬線上的測(cè)試環(huán)境罗心，其實(shí)是需要一臺(tái)有真實(shí)數(shù)據(jù)的測(cè)試機(jī)，建議沒(méi)條件搭daily的城瞎，就直接用線上數(shù)據(jù)測(cè)好了协屡，只不過(guò)程序部分走你們的測(cè)試環(huán)境而已，有條件搭daily最好全谤。
順便給大家推薦一個(gè)裙，它的前面是 537爷贫，中間是631认然，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)漫萄，互相幫助卷员。群里每天晚上都有大神免費(fèi)直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦腾务。
- 可連調(diào)的測(cè)試環(huán)境
可連調(diào)的測(cè)試環(huán)境毕骡，分為2種。一種是開(kāi)發(fā)測(cè)試都在一個(gè)局域網(wǎng)段，直接綁hosts即可未巫，不在一個(gè)網(wǎng)段窿撬，就每人分配一臺(tái)虛擬的測(cè)試機(jī)，放在大家都可以訪問(wèn)到的公司內(nèi)網(wǎng)叙凡，代碼直接往上布即可劈伴。
- 自動(dòng)化的上線系統(tǒng)
自動(dòng)化的上線系統(tǒng)，可以采用Jenkins握爷。如果沒(méi)有跛璧，可以自行搭建一個(gè)簡(jiǎn)易的上線系統(tǒng)，原理是每次上線時(shí)都抽取最新的trunk或master新啼，做一個(gè)tag追城，再打一個(gè)時(shí)間戳的標(biāo)記，然后分發(fā)到cdn就行了燥撞。界面里就2個(gè)功能座柱，打tag，回滾到某tag叨吮，部署辆布。
- 適合前后端的開(kāi)發(fā)流程
開(kāi)發(fā)流程依據(jù)公司所用到的工具，構(gòu)建茶鉴，框架锋玲。原則就是分散獨(dú)立開(kāi)發(fā)，互相不干擾涵叮，連調(diào)時(shí)有hosts可綁即可惭蹂。
（2）簡(jiǎn)單的可操作流程
- 代碼通過(guò)git管理，新需求創(chuàng)建新分支割粮，分支開(kāi)發(fā)盾碗，主干發(fā)布
- 上線走簡(jiǎn)易上線系統(tǒng)，參見(jiàn)上一節(jié)
- 通過(guò)gulp+webpack連到發(fā)布系統(tǒng)舀瓢，一鍵集成廷雅，本地只關(guān)心原碼開(kāi)發(fā)
- 本地環(huán)境通過(guò)webpack反向代理的server
- 搭建基于linux的本地測(cè)試機(jī)，自動(dòng)完成build+push功能
以上是一些面試中出現(xiàn)頻臨比較高的京髓，大家可以多了解航缀，最后祝大家早日學(xué)有所成，拿到滿(mǎn)意offer堰怨，快速升職加薪芥玉，走上人生巔峰。
