Web前端常見面試題和答案

　　這篇文章給大家分享的是有關(guān)Web前端常見面試題和答案。小編覺得挺實用的，因此分享給大家學(xué)習(xí)。如下資料是關(guān)于Web前端面試題和答案的內(nèi)容。

　　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)是一個經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲、負(fù)載均衡、網(wǎng)絡(luò)請求的重定向和內(nèi)容管理4個要件。主要特點有：本地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和鏡像站比較不需要訪客手動選擇要訪問的鏡像站。CDN使用后網(wǎng)站無需任何修改即可使用CDN獲得加速效果。如果通過CDN后看到的網(wǎng)頁還是舊網(wǎng)頁，可以通過URL推送服務(wù)解決，新增的網(wǎng)頁和圖片不需要URL推送。使用動態(tài)網(wǎng)頁可以不緩存即時性要求很高的網(wǎng)頁和圖片。CDN可以通過git或SVN來管理。

　　(3)圖片整合

　　減少網(wǎng)站加載時間的最有效的方式之一就是減少網(wǎng)站的HTTP請求數(shù)。實現(xiàn)這一目標(biāo)的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然后再用CSS來定位。缺點是可維護性差?？梢允褂冒俣鹊膄is/Webpack來自動化管理sprite。

　　2、如何利用Webpack把代碼上傳服務(wù)器以及轉(zhuǎn)碼測試?

　　(1)代碼上傳：

　　可以使用sftp-Webpack-plugin，但是會把子文件夾給提取出來，不優(yōu)雅。可以使用gulp+Webpack來實現(xiàn)。

　　(2)轉(zhuǎn)碼測試

　　Webpack應(yīng)用babel來對ES6轉(zhuǎn)碼，開啟devtool: “source-map" 來進行瀏覽器測試。應(yīng)用karma或mocha來做單元測試。

　　3、項目上線流程是怎樣的?

　　(1)流程建議

　　- 模擬線上的開發(fā)環(huán)境

　　本地反向代理線上真實環(huán)境開發(fā)即可。(apache，nginx，nodejs均可實現(xiàn))

　　- 模擬線上的測試環(huán)境

　　模擬線上的測試環(huán)境，其實是需要一臺有真實數(shù)據(jù)的測試機，建議沒條件搭daily的，就直接用線上數(shù)據(jù)測好了，只不過程序部分走你們的測試環(huán)境而已，有條件搭daily最好。

　　- 可連調(diào)的測試環(huán)境

　　可連調(diào)的測試環(huán)境，分為2種。一種是開發(fā)測試都在一個局域網(wǎng)段，直接綁hosts即可，不在一個網(wǎng)段，就每人分配一臺虛擬的測試機，放在大家都可以訪問到的公司內(nèi)網(wǎng)，代碼直接往上布即可。

　　- 自動化的上線系統(tǒng)

　　自動化的上線系統(tǒng)，可以采用Jenkins。如果沒有，可以自行搭建一個簡易的上線系統(tǒng)，原理是每次上線時都抽取最新的trunk或master，做一個tag，再打一個時間戳的標(biāo)記，然后分發(fā)到cdn就行了。界面里就2個功能，打tag，回滾到某tag，部署。

　　- 適合前后端的開發(fā)流程

　　開發(fā)流程依據(jù)公司所用到的工具，構(gòu)建，框架。原則就是分散獨立開發(fā)，互相不干擾，連調(diào)時有hosts可綁即可。

　　(2)簡單的可操作流程

　　- 代碼通過git管理，新需求創(chuàng)建新分支，分支開發(fā)，主干發(fā)布

　　- 上線走簡易上線系統(tǒng)，參見上一節(jié)

　　- 通過gulp+Webpack連到發(fā)布系統(tǒng)，一鍵集成，本地只關(guān)心原碼開發(fā)

　　- 本地環(huán)境通過Webpack反向代理的server

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

　　4、工程化怎么管理的?

　　gulp和Webpack

　　5、git常用命令

　　Workspace：工作區(qū)

　　Index / Stage：暫存區(qū)

　　Repository：倉庫區(qū)(或本地倉庫)

　　Remote：遠(yuǎn)程倉庫

　　6、Webpack 和 gulp對比

　　Gulp 就是為了規(guī)范前端開發(fā)流程，實現(xiàn)前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等功能的一個前端自動化構(gòu)建工具。說的形象點，“Gulp就像是一個產(chǎn)品的流水線，整個產(chǎn)品從無到有，都要受流水線的控制，在流水線上我們可以對產(chǎn)品進行管理?！?另外，Gulp是通過task對整個開發(fā)過程進行構(gòu)建。

　　Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

　　Gulp和Webpack功能實現(xiàn)對比：從基本概念、啟動本地Server、sass/less預(yù)編譯、模塊化開發(fā)、文件合并與壓縮、mock數(shù)據(jù)、版本控制、組件控制八個方面對Gulp和Webpack進行對比。

　　7、Webpack打包文件太大怎么辦?

　　Webpack 把我們所有的文件都打包成一個 JS 文件，這樣即使你是小項目，打包后的文件也會非常大。可以從去除不必要的插件，提取第三方庫，代碼壓縮，代碼分割，設(shè)置緩存幾個方面著手優(yōu)化。

　　8、不想讓別人盜用你的圖片，訪問你的服務(wù)器資源該怎么處理?

　　目前常用的防盜鏈方法主要有兩種：

　　(1)設(shè)置Referer：適合不想寫代碼的用戶，也適合喜歡開發(fā)的用戶

　　(2)簽名URL：適合喜歡開發(fā)的用戶

　　9、精靈圖和base64如何選擇?

　　css精靈，用于一些小的圖標(biāo)不是特別多，一個的體積也稍大，比如大于10K(這個沒有嚴(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)簽

　　})

　　關(guān)于Web前端面試題和答案就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。