本文小編為大家詳細介紹“經典的Web前端面試題有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“經典的Web前端面試題有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創新互聯建站是一家集網站建設,城關企業網站建設,城關品牌網站建設,網站定制,城關網站建設報價,網絡營銷,網絡優化,城關網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

　1、CSS，JS代碼壓縮

可以應用gulp的gulp-uglify，gulp-minify-css模塊完成;可以應用webpack的 UglifyJsPlugin壓縮插件完成。

　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、git常用命令

Workspace：工作區

Index / Stage：暫存區

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

Remote：遠程倉庫

5、webpack和 gulp對比

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

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

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

6、webpack打包文件太大怎么辦?

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

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

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

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

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

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

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

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

9、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前端面試題有哪些
分享鏈接：http://www.yijiale78.com/article14/gddjge.html

成都網站建設公司_創新互聯，為您提供網站設計公司、企業網站制作、企業建站、外貿建站、定制網站、網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯