本文小編為大家詳細(xì)介紹“經(jīng)典的Web前端面試題有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“經(jīng)典的Web前端面試題有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(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ì)把子文件夾給提取出來(lái)，不優(yōu)雅。可以使用gulp+webpack來(lái)實(shí)現(xiàn)。
(2)轉(zhuǎn)碼測(cè)試：webpack應(yīng)用babel來(lái)對(duì)ES6轉(zhuǎn)碼，開(kāi)啟devtool: “source-map" 來(lái)進(jìn)行瀏覽器測(cè)試。應(yīng)用karma或mocha來(lái)做單元測(cè)試。
3、項(xiàng)目上線流程是怎樣的?
(1)流程建議
- 模擬線上的開(kāi)發(fā)環(huán)境。本地反向代理線上真實(shí)環(huán)境開(kāi)發(fā)即可。(apache，nginx，nodejs均可實(shí)現(xiàn))。
- 模擬線上的測(cè)試環(huán)境。模擬線上的測(cè)試環(huán)境，其實(shí)是需要一臺(tái)有真實(shí)數(shù)據(jù)的測(cè)試機(jī)，建議沒(méi)條件搭daily的，就直接用線上數(shù)據(jù)測(cè)好了，只不過(guò)程序部分走你們的測(cè)試環(huán)境而已，有條件搭daily最好。
- 可連調(diào)的測(cè)試環(huán)境?？蛇B調(diào)的測(cè)試環(huán)境，分為2種。一種是開(kāi)發(fā)測(cè)試都在一個(gè)局域網(wǎng)段，直接綁hosts即可，不在一個(gè)網(wǎng)段，就每人分配一臺(tái)虛擬的測(cè)試機(jī)，放在大家都可以訪問(wèn)到的公司內(nèi)網(wǎng)，代碼直接往上布即可。
- 自動(dòng)化的上線系統(tǒng)。自動(dòng)化的上線系統(tǒng)，可以采用Jenkins。如果沒(méi)有，可以自行搭建一個(gè)簡(jiǎn)易的上線系統(tǒng)，原理是每次上線時(shí)都抽取最新的trunk或master，做一個(gè)tag，再打一個(gè)時(shí)間戳的標(biāo)記，然后分發(fā)到cdn就行了。界面里就2個(gè)功能，打tag，回滾到某tag，部署。
- 適合前后端的開(kāi)發(fā)流程。開(kāi)發(fā)流程依據(jù)公司所用到的工具，構(gòu)建，框架。原則就是分散獨(dú)立開(kāi)發(fā)，互相不干擾，連調(diào)時(shí)有hosts可綁即可。
(2)簡(jiǎn)單的可操作流程
- 代碼通過(guò)git管理，新需求創(chuàng)建新分支，分支開(kāi)發(fā)，主干發(fā)布
- 上線走簡(jiǎn)易上線系統(tǒng)，參見(jiàn)上一節(jié)
- 通過(guò)gulp+webpack連到發(fā)布系統(tǒng)，一鍵集成，本地只關(guān)心原碼開(kāi)發(fā)
- 本地環(huán)境通過(guò)webpack反向代理的server
- 搭建基于linux的本地測(cè)試機(jī)，自動(dòng)完成build+push功能
4、git常用命令
Workspace：工作區(qū)
Index / Stage：暫存區(qū)
Repository：倉(cāng)庫(kù)區(qū)(或本地倉(cāng)庫(kù))
Remote：遠(yuǎn)程倉(cāng)庫(kù)
5、webpack 和 gulp對(duì)比
Gulp 就是為了規(guī)范前端開(kāi)發(fā)流程，實(shí)現(xiàn)前后端分離、模塊化開(kāi)發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等功能的一個(gè)前端自動(dòng)化構(gòu)建工具。說(shuō)的形象點(diǎn)，“Gulp就像是一個(gè)產(chǎn)品的流水線，整個(gè)產(chǎn)品從無(wú)到有，都要受流水線的控制，在流水線上我們可以對(duì)產(chǎn)品進(jìn)行管理。” 另外，Gulp是通過(guò)task對(duì)整個(gè)開(kāi)發(fā)過(guò)程進(jìn)行構(gòu)建。
Webpack 是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過(guò) loader的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。
Gulp和Webpack功能實(shí)現(xiàn)對(duì)比：從基本概念、啟動(dòng)本地Server、sass/less預(yù)編譯、模塊化開(kāi)發(fā)、文件合并與壓縮、mock數(shù)據(jù)、版本控制、組件控制八個(gè)方面對(duì)Gulp和Webpack進(jìn)行對(duì)比。
6、webpack打包文件太大怎么辦?
webpack 把我們所有的文件都打包成一個(gè) JS 文件，這樣即使你是小項(xiàng)目，打包后的文件也會(huì)非常大?？梢詮娜コ槐匾牟寮?，提取第三方庫(kù)，代碼壓縮，代碼分割，設(shè)置緩存幾個(gè)方面著手優(yōu)化。
7、不想讓別人盜用你的圖片，訪問(wèn)你的服務(wù)器資源該怎么處理?
目前常用的防盜鏈方法主要有兩種：
(1)設(shè)置Referer：適合不想寫(xiě)代碼的用戶，也適合喜歡開(kāi)發(fā)的用戶
(2)簽名URL：適合喜歡開(kāi)發(fā)的用戶
8、精靈圖和base64如何選擇?
css精靈，用于一些小的圖標(biāo)不是特別多，一個(gè)的體積也稍大，比如大于10K(這個(gè)沒(méi)有嚴(yán)格的界定)。
base64，用于小圖標(biāo)體積較小(相對(duì)于css精靈)，多少都無(wú)所謂。字體圖標(biāo)，用于一些別人做好的圖標(biāo)庫(kù)(也有少數(shù)自己去做的)用起來(lái)比較方便，他的圖標(biāo)只能用于單色，圖標(biāo)用只能于一種顏色。
9、webpack怎么引入第三方的庫(kù)?
拿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í)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
