常見的10道Web前端面試題及答案分享！

　　Web前端經典面試題有哪些？Web前端在近幾年是越來越火熱了，很多人看到了前端的待遇好，更看到了前端行業的發展前景，所以紛紛投入到學習前端技術學習中來。下面小千給大家總結整理一些Web前端經典面試題，助力大家找到更好的工作。

　　1、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。

　　2、如何利用Webpack把程式碼上傳伺服器以及轉碼測試?

　　(1)程式碼上傳：

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

　　(2)轉碼測試

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

　　3、專案上線流程是怎樣的?

　　(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功能

　　4、工程化怎麼管理的?

　　gulp和Webpack

　　5、git常用命令

　　Workspace：工作區

　　Index / Stage：暫存區

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

　　Remote：遠端倉庫

　　6、Webpack 和 gulp對比

　　Gulp 就是為了規範前端開發流程，實現前後端分離、模組化開發、版本控制、檔案合併與壓縮、mock資料等功能的一個前端自動化構建工具。說的形象點，“Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上我們可以對產品進行管理。” 另外，Gulp是透過task對整個開發過程進行構建。

　　Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。透過 loader的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、AMD 模組、ES6 模組、CSS、圖片、JSON、Coffeescript、LESS 等。

　　Gulp和Webpack功能實現對比：從基本概念、啟動本地Server、sass/less預編譯、模組化開發、檔案合併與壓縮、mock資料、版本控制、元件控制八個方面對Gulp和Webpack進行對比。

　　7、Webpack打包檔案太大怎麼辦?

　　Webpack 把我們所有的檔案都打包成一個 JS 檔案，這樣即使你是小專案，打包後的檔案也會非常大。可以從去除不必要的外掛，提取第三方庫，程式碼壓縮，程式碼分割，設定快取幾個方面著手最佳化。

　　8、不想讓別人盜用你的圖片，訪問你的伺服器資源該怎麼處理?

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

　　(1)設定Referer：適合不想寫程式碼的使用者，也適合喜歡開發的使用者

　　(2)簽名URL：適合喜歡開發的使用者

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

　　css精靈，用於一些小的圖示不是特別多，一個的體積也稍大，比如大於10K(這個沒有嚴格的界定)。

　　base64，用於小圖示體積較小(相對於css精靈)，多少都無所謂。字型圖示，用於一些別人做好的圖示庫(也有少數自己去做的)用起來比較方便，他的圖示只能用於單色，圖示用只能於一種顏色。

　　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標籤

　　以前十道題為Web前端較長出現的面試題。大家可以收藏學習一下，對於面試Web前端的小夥伴可以多留意，希望對大家有一定的幫助。

　　本文來自千鋒教育，轉載請註明出處。