經(jīng)典的Web前端面試題有哪些

本文小編為大家詳細(xì)介紹“經(jīng)典的Web前端面試題有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“經(jīng)典的Web前端面試題有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

　　1、CSS，JS代碼壓縮

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

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

　　(1)代碼上傳：可以使用sftp-webpack-plugin，但是會(huì)把子文件夾給提取出來，不優(yōu)雅?？梢允褂?span lang="EN-US">gulp+webpack來實(shí)現(xiàn)。

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

　　3、項(xiàng)目上線流程是怎樣的?

　　(1)流程建議

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

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

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

　　- 自動(dòng)化的上線系統(tǒng)。自動(dòng)化的上線系統(tǒng)，可以采用Jenkins。如果沒有，可以自行搭建一個(gè)簡(jiǎn)易的上線系統(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)簡(jiǎn)單的可操作流程

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

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

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

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

　　- 搭建基于linux的本地測(cè)試機(jī)，自動(dòng)完成build+push功能

　　4、git常用命令

　　Workspace：工作區(qū)

　　Index / Stage：暫存區(qū)

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

　　Remote：遠(yuǎn)程倉庫

　　5、webpack 和 gulp對(duì)比

　　Gulp 就是為了規(guī)范前端開發(fā)流程，實(shí)現(xiàn)前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等功能的一個(gè)前端自動(dòng)化構(gòu)建工具。說的形象點(diǎn)，“Gulp就像是一個(gè)產(chǎn)品的流水線，整個(gè)產(chǎn)品從無到有，都要受流水線的控制，在流水線上我們可以對(duì)產(chǎn)品進(jìn)行管理。” 另外，Gulp是通過task對(duì)整個(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)對(duì)比：從基本概念、啟動(dòng)本地Server、sass/less預(yù)編譯、模塊化開發(fā)、文件合并與壓縮、mock數(shù)據(jù)、版本控制、組件控制八個(gè)方面對(duì)Gulp和Webpack進(jìn)行對(duì)比。

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

　　webpack 把我們所有的文件都打包成一個(gè) JS 文件，這樣即使你是小項(xiàng)目，打包后的文件也會(huì)非常大?？梢詮娜コ槐匾牟寮崛〉谌綆?，代碼壓縮，代碼分割，設(shè)置緩存幾個(gè)方面著手優(yōu)化。

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

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

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

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

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

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

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

　　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標(biāo)簽

　　})

讀到這里，這篇“經(jīng)典的Web前端面試題有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。