web前端高頻面試試題含答案_2019升級版【詳細(xì)】

本文是傳智播客根據(jù)多份關(guān)于web前端面試試題抽取的企業(yè)面試時(shí)用到相當(dāng)多的一些試題，僅供參考。

怎么去設(shè)計(jì)一個(gè)組件封裝?

1.組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量

2.低耦合，單一職責(zé)，可復(fù)用性，可維護(hù)性

3.前端組件化設(shè)計(jì)思路

js 異步加載的方式

1.渲染引擎遇到 script 標(biāo)簽會(huì)停下來，等到執(zhí)行完腳本，繼續(xù)向下渲染

2.defer 是“渲染完再執(zhí)行”，async 是“下載完就執(zhí)行”，defer 如果有多個(gè)腳本，會(huì)按照在頁面中出現(xiàn)的順序加載，多個(gè)async 腳本不能保證加載順序

3.加載 es6模塊的時(shí)候設(shè)置 type=module，異步加載不會(huì)造成阻塞瀏覽器，頁面渲染完再執(zhí)行，可以同時(shí)加上async屬性，異步執(zhí)行腳本(利用頂層的this等于undefined這個(gè)語法點(diǎn)，可以偵測當(dāng)前代碼是否在 ES6 模塊之中)

css 動(dòng)畫和 js 動(dòng)畫的差異

1.代碼復(fù)雜度，js 動(dòng)畫代碼相對復(fù)雜一些

2.動(dòng)畫運(yùn)行時(shí)，對動(dòng)畫的控制程度上，js 能夠讓動(dòng)畫，暫停，取消，終止，css動(dòng)畫不能添加事件

3.動(dòng)畫性能看，js 動(dòng)畫多了一個(gè)js 解析的過程，性能不如 css 動(dòng)畫好

XSS 與 CSRF 兩種跨站攻擊

1.xss 跨站腳本攻擊，主要是前端層面的，用戶在輸入層面插入攻擊腳本，改變頁面的顯示，或則竊取網(wǎng)站 cookie，預(yù)防方法：不相信用戶的所有操作，對用戶輸入進(jìn)行一個(gè)轉(zhuǎn)義，不允許 js 對 cookie 的讀寫

2.csrf 跨站請求偽造，以你的名義，發(fā)送惡意請求，通過 cookie 加參數(shù)等形式過濾

3.我們沒法徹底杜絕攻擊，只能提高攻擊門檻

事件委托，目的，功能，寫法

1.把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上

2.優(yōu)點(diǎn)，減少內(nèi)存消耗，動(dòng)態(tài)綁定事件

3.target 是觸發(fā)事件的最具體的元素，currenttarget是綁定事件的元素(在函數(shù)中一般等于this)

4.JavaScript 事件委托詳解

線程，進(jìn)程

1.線程是最小的執(zhí)行單元，進(jìn)程是最小的資源管理單元

2.一個(gè)線程只能屬于一個(gè)進(jìn)程，而一個(gè)進(jìn)程可以有多個(gè)線程，但至少有一個(gè)線程

負(fù)載均衡

1.當(dāng)系統(tǒng)面臨大量用戶訪問，負(fù)載過高的時(shí)候，通常會(huì)使用增加服務(wù)器數(shù)量來進(jìn)行橫向擴(kuò)展，使用集群和負(fù)載均衡提高整個(gè)系統(tǒng)的處理能力

什么是CDN緩存

1.CDN 是一種部署策略，根據(jù)不同的地區(qū)部署類似nginx 這種服務(wù)服務(wù)，會(huì)緩存靜態(tài)資源。前端在項(xiàng)目優(yōu)化的時(shí)候，習(xí)慣在講臺(tái)資源上加上一個(gè) hash 值，每次更新的時(shí)候去改變這個(gè) hash，hash 值變化的時(shí)候，服務(wù)會(huì)去重新取資源

2.(CDN)是一個(gè)經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲(chǔ)、負(fù)載均衡、網(wǎng)絡(luò)請求的重定向和內(nèi)容管理4個(gè)要件

閉包的寫法，閉包的作用，閉包的缺點(diǎn)

1.使用閉包的目的——隱藏變量，間接訪問一個(gè)變量,在定義函數(shù)的詞法作用域外，調(diào)用函數(shù)

2.閉包的內(nèi)存泄露，是IE的一個(gè) bug，閉包使用完成之后，收回不了閉包的引用，導(dǎo)致內(nèi)存泄露

3.閉包造成內(nèi)存泄露的實(shí)驗(yàn)

跨域問題，誰限制的跨域，怎么解決

1.瀏覽器的同源策略導(dǎo)致了跨域

2.用于隔離潛在惡意文件的重要安全機(jī)制

3.[jsonp ，允許 script 加載第三方資源]segmentfault.com/a/11...

4.nginx 反向代理(nginx 服務(wù)內(nèi)部配置 Access-Control-Allow-Origin *)

5.cors 前后端協(xié)作設(shè)置請求頭部，Access-Control-Allow-Origin 等頭部信息

6.iframe 嵌套通訊，postmessage

javascript 中常見的內(nèi)存泄露陷阱

1.內(nèi)存泄露會(huì)導(dǎo)致一系列問題，比如：運(yùn)行緩慢，崩潰，高延遲

2.內(nèi)存泄露是指你用不到(訪問不到)的變量，依然占居著內(nèi)存空間，不能被再次利用起來

3.意外的全局變量，這些都是不會(huì)被回收的變量(除非設(shè)置 null 或者被重新賦值)，特別是那些用來臨時(shí)存儲(chǔ)大量信息的變量

4.周期函數(shù)一直在運(yùn)行，處理函數(shù)并不會(huì)被回收，jq 在移除節(jié)點(diǎn)前都會(huì)，將事件監(jiān)聽移除

5.js 代碼中有對 DOM 節(jié)點(diǎn)的引用，dom 節(jié)點(diǎn)被移除的時(shí)候，引用還維持

6.JavaScript 中 4 種常見的內(nèi)存泄露陷阱

babel把ES6轉(zhuǎn)成ES5或者ES3之類的原理是什么

1.它就是個(gè)編譯器，輸入語言是ES6+，編譯目標(biāo)語言是ES5

2.babel 官方工作原理

3.解析：將代碼字符串解析成抽象語法樹

4.變換：對抽象語法樹進(jìn)行變換操作

5.再建：根據(jù)變換后的抽象語法樹再生成代碼字符串

Promise 模擬終止

1.當(dāng)新對象保持“pending”狀態(tài)時(shí)，原Promise鏈將會(huì)中止執(zhí)行。

2.return new Promise(()=>{}); // 返回“pending”狀態(tài)的Promise對象

3.從如何停掉 Promise 鏈說起(promise內(nèi)存泄漏問題)

promise 放在try catch里面有什么結(jié)果

1.Promise 對象的錯(cuò)誤具有冒泡性質(zhì)，會(huì)一直向后傳遞，直到被捕獲為止，也即是說，錯(cuò)誤總會(huì)被下一個(gè)catch語句捕獲

2.當(dāng)Promise鏈中拋出一個(gè)錯(cuò)誤時(shí)，錯(cuò)誤信息沿著鏈路向后傳遞，直至被捕獲

網(wǎng)站性能優(yōu)化

1.http 請求方面，減少請求數(shù)量，請求體積，對應(yīng)的做法是，對項(xiàng)目資源進(jìn)行壓縮，控制項(xiàng)目資源的 dns 解析在2到4個(gè)域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，

2.壓縮資源，提取公共資源壓縮，提取 css ，js 公共方法

3.不要縮放圖片，使用雪碧圖，使用字體圖表(阿里矢量圖庫)

3.使用 CDN，拋開無用的 cookie

4.減少重繪重排，CSS屬性讀寫分離，最好不要用js 修改樣式，dom 離線更新，渲染前指定圖片的大小

5.js 代碼層面的優(yōu)化，減少對字符串的計(jì)算，合理使用閉包，首屏的js 資源加載放在最底部

js 自定義事件實(shí)現(xiàn)

1.原生提供了3個(gè)方法實(shí)現(xiàn)自定義事件

2.createEvent，設(shè)置事件類型，是 html 事件還是 鼠標(biāo)事件

3.initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件

4.dispatchEvent 觸發(fā)事件

angular 雙向數(shù)據(jù)綁定與vue數(shù)據(jù)的雙向數(shù)據(jù)綁定

1.二者都是 MVVM 模式開發(fā)的典型代表

2.angular 是通過臟檢測實(shí)現(xiàn)，angular 會(huì)將 UI 事件，請求事件，settimeout 這類延遲，的對象放入到事件監(jiān)測的臟隊(duì)列，當(dāng)數(shù)據(jù)變化的時(shí)候，觸發(fā) $diget 方法進(jìn)行數(shù)據(jù)的更新，視圖的渲染

3.vue 通過數(shù)據(jù)屬性的數(shù)據(jù)劫持和發(fā)布訂閱的模式實(shí)現(xiàn)，大致可以理解成由3個(gè)模塊組成，observer 完成對數(shù)據(jù)的劫持，compile 完成對模板片段的渲染，watcher 作為橋梁連接二者，訂閱數(shù)據(jù)變化及更新視圖

get與post 通訊的區(qū)別

1.Get 請求能緩存，Post 不能

2.Post 相對 Get 安全一點(diǎn)點(diǎn)，因?yàn)镚et 請求都包含在 URL 里，且會(huì)被瀏覽器保存歷史紀(jì)錄，Post 不會(huì)，但是在抓包的情況下都是一樣的。

3.Post 可以通過 request body來傳輸比 Get 更多的數(shù)據(jù)，Get 沒有這個(gè)技術(shù)

4.URL有長度限制，會(huì)影響 Get 請求，但是這個(gè)長度限制是瀏覽器規(guī)定的，不是 RFC 規(guī)定的

5.Post 支持更多的編碼類型且不對數(shù)據(jù)類型限制

有沒有去研究webpack的一些原理和機(jī)制，怎么實(shí)現(xiàn)的

1.解析webpack配置參數(shù)，合并從shell傳入和webpack.config.js文件里配置的參數(shù)，生產(chǎn)最后的配置結(jié)果。

2.注冊所有配置的插件，好讓插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點(diǎn)，以做出對應(yīng)的反應(yīng)。

3.從配置的entry入口文件開始解析文件構(gòu)建AST語法樹，找出每個(gè)文件所依賴的文件，遞歸下去。

4.在解析文件遞歸的過程中根據(jù)文件類型和loader配置找出合適的loader用來對文件進(jìn)行轉(zhuǎn)換。

5.遞歸完后得到每個(gè)文件的最終結(jié)果，根據(jù)entry配置生成代碼塊chunk。

6.輸出所有chunk到文件系統(tǒng)。

ES6模塊與CommonJS模塊的差異

1.CommonJs 模塊輸出的是一個(gè)值的拷貝，ES6模塊輸出的是一個(gè)值的引用

2.CommonJS 模塊是運(yùn)行時(shí)加載，ES6模塊是編譯時(shí)輸出接口

3.ES6輸入的模塊變量，只是一個(gè)符號鏈接，所以這個(gè)變量是只讀的，對它進(jìn)行重新賦值就會(huì)報(bào)錯(cuò)

模塊加載AMD，CMD，CommonJS Modules/2.0 規(guī)范

1.這些規(guī)范的目的都是為了 JavaScript 的模塊化開發(fā)，特別是在瀏覽器端的

2.對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行

3.CMD 推崇依賴就近，AMD 推崇依賴前置

Node 事件循環(huán)，js 事件循環(huán)差異

1.Node.js 的事件循環(huán)分為6個(gè)階段

2.瀏覽器和Node 環(huán)境下，microtask 任務(wù)隊(duì)列的執(zhí)行時(shí)機(jī)不同

3.Node.js中，microtask 在事件循環(huán)的各個(gè)階段之間執(zhí)行

4.瀏覽器端，microtask 在事件循環(huán)的 macrotask 執(zhí)行完之后執(zhí)行

5.遞歸的調(diào)用process.nextTick()會(huì)導(dǎo)致I/O starving，官方推薦使用setImmediate()

淺拷貝和深拷貝的問題

1.深拷貝和淺拷貝是只針對Object和Array這樣的復(fù)雜類型的

2.也就是說a和b指向了同一塊內(nèi)存，所以修改其中任意的值，另一個(gè)值都會(huì)隨之變化，這就是淺拷貝

3.淺拷貝， ”Object.assign() 方法用于將所有可枚舉的屬性的值從一個(gè)或多個(gè)源對象復(fù)制到目標(biāo)對象。它將返回目標(biāo)對象

4.深拷貝，JSON.parse()和JSON.stringify()給了我們一個(gè)基本的解決辦法。但是函數(shù)不能被正確處理

開放性問題

開放性問題主要是考察候選人業(yè)務(wù)積累，是否有自己的思考，思考問題的方式，沒有標(biāo)準(zhǔn)答案。不過有些問題挺刁鉆的，哈哈哈哈，比如：" 你見過的相當(dāng)好的代碼是什么? "總之提前準(zhǔn)備下沒錯(cuò)。

1.先自我介紹一下，說一下項(xiàng)目的技術(shù)棧，以及項(xiàng)目中遇到的一些問題

2.從整體中，看你對項(xiàng)目的認(rèn)識(shí)，框架的認(rèn)識(shí)和自己思考

3.項(xiàng)目中有沒有遇到什么難點(diǎn)，怎么解決

4.如果你在創(chuàng)業(yè)公司你怎么從0開始做(選擇什么框架，選擇什么構(gòu)建工具)

5.說一下你項(xiàng)目中用到的技術(shù)棧，以及覺得得意和出色的點(diǎn)，以及讓你頭疼的點(diǎn)，怎么解決的

6.一個(gè)業(yè)務(wù)場景，面對產(chǎn)品不斷迭代，以及需求的變動(dòng)該怎么應(yīng)對，具體技術(shù)方案實(shí)現(xiàn)

7.你的學(xué)習(xí)來源是什么

8.你覺得哪個(gè)框架比較好，好在哪里

9.你覺得最難得技術(shù)難點(diǎn)是什么

10.你見過的相當(dāng)好的代碼是什么

2019新鮮出爐整理部分

新鮮出爐：整理部分沒有標(biāo)注答案，如果有什么問題不清楚，歡迎通過網(wǎng)站在線聯(lián)系傳智播客老師，獲得老師的幫助。

CSS篇 

1. CSS 盒子模型，絕對定位和相對定位

2. 清除浮動(dòng)，什么時(shí)候需要清除浮動(dòng)，清除浮動(dòng)都有哪些方法

3. 如何保持浮層水平垂直居中

4. position 和 display 的取值和各自的意思和用法

5. 樣式的層級關(guān)系，選擇器優(yōu)先級，樣式?jīng)_突，以及抽離樣式模塊怎么寫，說出思路，有無實(shí)踐經(jīng)驗(yàn)

6. css3動(dòng)畫效果屬性，canvas、svg的區(qū)別，CSS3中新增偽類舉例

7. px和em和rem的區(qū)別，CSS中l(wèi)ink 和@import的區(qū)別是?

5. 了解過flex嗎?

JavaScript 篇 

JavaScript 基礎(chǔ)

1. JavaScript 里有哪些數(shù)據(jù)類型，解釋清楚 null 和 undefined，解釋清楚原始數(shù)據(jù)類型和引用數(shù)據(jù)類型。比如講一下 1 和 Number(1)的區(qū)別

2. 將一下 prototype 是什么東西，原型鏈的理解，什么時(shí)候用 prototype

3. 函數(shù)里的this什么含義，什么情況下，怎么用。

4. apply和 call 什么含義，什么區(qū)別?什么時(shí)候用。(我有篇文章 重點(diǎn)分析過)

5. 數(shù)組和對象有哪些原生方法，列舉一下，分別是什么含義，比如連接兩個(gè)數(shù)組用哪個(gè)方法，刪除數(shù)組的指定項(xiàng)和重新組裝數(shù)組(操作數(shù)據(jù)的重點(diǎn))。

6. 怎樣避免全局變量污染?ES5嚴(yán)格模式的作用，ES6箭頭函數(shù)和ES5普通函數(shù)一樣嗎?

JavaScript 的面向?qū)ο?/strong>

1. JS 模塊包裝格式都用過哪些，CommonJS、AMD、CMD。定義一個(gè)JS 模塊代碼，那么精簡的格式是怎樣的。

2. JS 怎么實(shí)現(xiàn)一個(gè)類。怎么實(shí)例化這個(gè)類。

3. 理解閉包嗎?請講一講閉包在實(shí)際開發(fā)中的作用;閉包建議頻繁使用嗎?

4. 說一下了解的js 設(shè)計(jì)模式，解釋一下單例、工廠、觀察者。

5. ajax 跨域有哪些方法，jsonp 的原理是什么，如果頁面編碼和被請求的資源編碼不一致如何處理?

開源工具 

1)是否了解開源的架構(gòu)工具 bower、npm、yeoman、gulp、webpack，有無用過，有無寫過，一個(gè) npm 的包里的 package.json 具備的必要的字段都有哪些(名稱、版本號，依賴)

2)github常用不常用，關(guān)注過哪些項(xiàng)目

3)會(huì)不會(huì)用 ps 扣圖，png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。如何優(yōu)化圖像、圖像格式的區(qū)別

4)說一下你常用的命令行工具

5)會(huì)不會(huì)用git，說上來幾個(gè)命令，說一下git和svn的區(qū)別，有沒有用git解決過沖突

計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ) 

1)說一下HTTP 協(xié)議頭字段說上來幾個(gè)，是否盡可能詳細(xì)的掌握HTTP協(xié)議。一次完整的HTTP事務(wù)是怎樣的一個(gè)過程?

2)cookies 是干嘛的，服務(wù)器和瀏覽器之間的 cookies 是怎么傳的，httponly 的 cookies 和可讀寫的 cookie 有什么區(qū)別，有無長度限制

請描述一下cookies，sessionStorage和localStorage的區(qū)別

3)從敲入 URL 到渲染完成的整個(gè)過程，包括 DOM 構(gòu)建的過程，說的約詳細(xì)越好。

4)是否了解Web注入攻擊，說下原理，頗為常見的兩種攻擊(XSS 和 CSRF)了解到什么程度。

5)是否了解公鑰加密和私鑰加密。如何確保表單提交里的密碼字段不被泄露。驗(yàn)證碼是干嘛的，是為了解決什么安全問題。

6)編碼常識(shí)：文件編碼、URL 編碼、Unicode編碼 什么含義。一個(gè)gbk編碼的頁面如何正確引

前端框架 

1) 對 MVC、MVVM的理解

2) vue、angularjs等 相對于 jQuery在開發(fā)上有什么優(yōu)點(diǎn)?

3)前后分離的思想了解嗎?

4)你上一個(gè)項(xiàng)目都用到了那些方法優(yōu)化js的性能?

5)angular的生命周期?

6)說一下你對vue和vuex的使用方法，vue的組件復(fù)用機(jī)制

考察學(xué)習(xí)能力和方法

1)你每天必須登錄的網(wǎng)站(前端技術(shù)相關(guān))是什么?

2)前端技術(shù)方面看過哪些書，有無筆記，都有哪些收獲。

3)收藏了哪些代碼片段?有想過開源自己的代碼嘛?

4)怎么理解前端技術(shù)的大趨勢?自己再做哪方面的知識(shí)儲(chǔ)備?

5)是否了解或精通其他(后端)的編程語言?

6)做項(xiàng)目有沒有遇到哪些印象深刻的技術(shù)攻關(guān)，具體遇到什么問題，怎么找答案的，后來怎么解的。

7)對以后自己的前端職業(yè)路線，怎么規(guī)劃?

猜你喜歡：

Web前端開發(fā)面試題及參考答案
70道web前端開發(fā)面試題（2018版含答案）
傳智播客整理的2018web前端開發(fā)面試試題（含答案）
2018web前端面試題附答案
web前端面試試題（html）（附答案）
傳智播客整理的web前端JavaScript面試試題（附答案）
web前端面試題（匯總）
Web前端入門教程：html+css+JavaScript下載