Web前端在近幾年是越來越火熱了，很多人看到了前端的高薪資捅儒，更看到了前端行業(yè)的發(fā)展前景墨坚，所以紛紛投入到學(xué)習(xí)前端技術(shù)學(xué)習(xí)中來。下面給大家總結(jié)整理2019年Web前端經(jīng)典面試題凤类，助力大家找到更好的工作穗泵，走向高薪前端之路。
1踱蠢、CSS火欧，JS代碼壓縮，以及代碼CDN托管茎截，圖片整合苇侵。
(1)CSS,JS 代碼壓縮：
可以應(yīng)用gulp的gulp-uglify，gulp-minify-css模塊完成;可以應(yīng)用Webpack的 UglifyJsPlugin壓縮插件完成企锌。
(2)CDN：
內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)是一個(gè)經(jīng)策略性部署的整體系統(tǒng)榆浓，包括分布式存儲(chǔ)、負(fù)載均衡撕攒、網(wǎng)絡(luò)請求的重定向和內(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)站加速適合以咨詢?yōu)橹鞯木W(wǎng)站嘿期。CDN是對域名加速不是對網(wǎng)站服務(wù)器加速品擎。CDN和鏡像站比較不需要訪客手動(dòng)選擇要訪問的鏡像站。CDN使用后網(wǎng)站無需任何修改即可使用CDN獲得加速效果备徐。如果通過CDN后看到的網(wǎng)頁還是舊網(wǎng)頁萄传，可以通過URL推送服務(wù)解決，新增的網(wǎng)頁和圖片不需要URL推送蜜猾。使用動(dòng)態(tài)網(wǎng)頁可以不緩存即時(shí)性要求很高的網(wǎng)頁和圖片秀菱。CDN可以通過git或SVN來管理。
(3)圖片整合
減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請求數(shù)瓣铣。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中答朋，然后再用CSS來定位贷揽。缺點(diǎn)是可維護(hù)性差棠笑。可以使用百度的fis/Webpack來自動(dòng)化管理sprite禽绪。
2蓖救、如何利用Webpack把代碼上傳服務(wù)器以及轉(zhuǎn)碼測試?
(1)代碼上傳：
可以使用sftp-Webpack-plugin，但是會(huì)把子文件夾給提取出來印屁，不優(yōu)雅循捺。可以使用gulp+Webpack來實(shí)現(xiàn)雄人。
(2)轉(zhuǎn)碼測試
Webpack應(yīng)用babel來對ES6轉(zhuǎn)碼从橘，開啟devtool: “source-map" 來進(jìn)行瀏覽器測試。應(yīng)用karma或mocha來做單元測試础钠。
3恰力、項(xiàng)目上線流程是怎樣的?
(1)流程建議
- 模擬線上的開發(fā)環(huán)境
本地反向代理線上真實(shí)環(huán)境開發(fā)即可。(apache旗吁，nginx踩萎，nodejs均可實(shí)現(xiàn))
- 模擬線上的測試環(huán)境
模擬線上的測試環(huán)境，其實(shí)是需要一臺(tái)有真實(shí)數(shù)據(jù)的測試機(jī)很钓，建議沒條件搭daily的香府，就直接用線上數(shù)據(jù)測好了董栽，只不過程序部分走你們的測試環(huán)境而已，有條件搭daily最好企孩。
- 可連調(diào)的測試環(huán)境
可連調(diào)的測試環(huán)境锭碳，分為2種。一種是開發(fā)測試都在一個(gè)局域網(wǎng)段勿璃，直接綁hosts即可工禾，不在一個(gè)網(wǎng)段，就每人分配一臺(tái)虛擬的測試機(jī)蝗柔，放在大家都可以訪問到的公司內(nèi)網(wǎng)闻葵，代碼直接往上布即可。
- 自動(dòng)化的上線系統(tǒng)
自動(dòng)化的上線系統(tǒng)癣丧，可以采用Jenkins槽畔。如果沒有，可以自行搭建一個(gè)簡易的上線系統(tǒng)胁编，原理是每次上線時(shí)都抽取最新的trunk或master厢钧，做一個(gè)tag，再打一個(gè)時(shí)間戳的標(biāo)記嬉橙，然后分發(fā)到cdn就行了早直。界面里就2個(gè)功能，打tag市框，回滾到某tag霞扬，部署。
- 適合前后端的開發(fā)流程
開發(fā)流程依據(jù)公司所用到的工具枫振，構(gòu)建喻圃，框架。原則就是分散獨(dú)立開發(fā)粪滤，互相不干擾斧拍，連調(diào)時(shí)有hosts可綁即可。
(2)簡單的可操作流程
- 代碼通過git管理杖小，新需求創(chuàng)建新分支肆汹，分支開發(fā)，主干發(fā)布
- 上線走簡易上線系統(tǒng)予权，參見上一節(jié)
- 通過gulp+Webpack連到發(fā)布系統(tǒng)昂勉，一鍵集成，本地只關(guān)心原碼開發(fā)
- 本地環(huán)境通過Webpack反向代理的server
- 搭建基于linux的本地測試機(jī)伟件，自動(dòng)完成build+push功能
順便給大家推薦一個(gè)裙硼啤，它的前面是 537，中間是631，最后就是 707谴返。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)煞肾，互相幫助。群里每天晚上都有大神免費(fèi)直播上課嗓袱，如果不是想學(xué)習(xí)的小伙伴就不要加啦籍救。
4、工程化怎么管理的?
gulp和Webpack
5渠抹、git常用命令
Workspace：工作區(qū)
Index / Stage：暫存區(qū)
Repository：倉庫區(qū)(或本地倉庫)
Remote：遠(yuǎn)程倉庫
6蝙昙、Webpack 和 gulp對比
Gulp 就是為了規(guī)范前端開發(fā)流程，實(shí)現(xiàn)前后端分離梧却、模塊化開發(fā)奇颠、版本控制、文件合并與壓縮放航、mock數(shù)據(jù)等功能的一個(gè)前端自動(dòng)化構(gòu)建工具烈拒。說的形象點(diǎn)，“Gulp就像是一個(gè)產(chǎn)品的流水線广鳍，整個(gè)產(chǎn)品從無到有荆几，都要受流水線的控制，在流水線上我們可以對產(chǎn)品進(jìn)行管理赊时《种” 另外，Gulp是通過task對整個(gè)開發(fā)過程進(jìn)行構(gòu)建祖秒。
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具诞吱。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔狈涮，等到實(shí)際需要的時(shí)候再異步加載狐胎。通過 loader的轉(zhuǎn)換鸭栖，任何形式的資源都可以視作模塊歌馍，比如 CommonJs 模塊、AMD 模塊晕鹊、ES6 模塊松却、CSS、圖片溅话、JSON晓锻、Coffeescript、LESS 等飞几。
Gulp和Webpack功能實(shí)現(xiàn)對比：從基本概念砚哆、啟動(dòng)本地Server、sass/less預(yù)編譯屑墨、模塊化開發(fā)躁锁、文件合并與壓縮纷铣、mock數(shù)據(jù)、版本控制战转、組件控制八個(gè)方面對Gulp和Webpack進(jìn)行對比搜立。
7、Webpack打包文件太大怎么辦?
Webpack 把我們所有的文件都打包成一個(gè) JS 文件槐秧，這樣即使你是小項(xiàng)目啄踊，打包后的文件也會(huì)非常大〉蟊辏可以從去除不必要的插件颠通，提取第三方庫，代碼壓縮膀懈，代碼分割蒜哀，設(shè)置緩存幾個(gè)方面著手優(yōu)化。
8吏砂、不想讓別人盜用你的圖片撵儿，訪問你的服務(wù)器資源該怎么處理?
目前常用的防盜鏈方法主要有兩種：
(1)設(shè)置Referer：適合不想寫代碼的用戶，也適合喜歡開發(fā)的用戶
(2)簽名URL：適合喜歡開發(fā)的用戶
9狐血、精靈圖和base64如何選擇?
css精靈淀歇，用于一些小的圖標(biāo)不是特別多，一個(gè)的體積也稍大匈织，比如大于10K(這個(gè)沒有嚴(yán)格的界定)浪默。
base64，用于小圖標(biāo)體積較小(相對于css精靈)缀匕，多少都無所謂纳决。字體圖標(biāo)，用于一些別人做好的圖標(biāo)庫(也有少數(shù)自己去做的)用起來比較方便乡小，他的圖標(biāo)只能用于單色阔加，圖標(biāo)用只能于一種顏色。
10满钟、Webpack怎么引入第三方的庫?
拿jQuery為例：
entry: {
page: 'path/to/page.js',
jquery: 'node_modules/jquery/dist/jquery.min.js'
}
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['jquery', 'page'] // 按照先后順序插入script標(biāo)簽
})
十道題為Web前端較長出現(xiàn)的面試題胜榔。大家可以收藏學(xué)習(xí)一下，對于面試Web前端的小伙伴可以多留意湃番，希望對大家有一定的幫助夭织。
