分享一篇關(guān)于前端面試真題的文章

Q: 怎么去設(shè)計一個組件封裝

1、組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量
2、低耦合，單一職責(zé)，可復(fù)用性，可維護(hù)性

Q: js 異步加載的方式

1、渲染引擎遇到 script 標(biāo)簽會停下來，等到執(zhí)行完腳本，繼續(xù)向下渲染/
2、defer 是“渲染完再執(zhí)行”，async 是“下載完就執(zhí)行”，defer 如果有多個腳本，會按照在頁面中出現(xiàn)的順序加載，多個async 腳本不能保證加載順序
3、加載 es6模塊的時候設(shè)置 type=module，異步加載不會造成阻塞瀏覽器，頁面渲染完再執(zhí)行，可以同時加上async屬性，異步執(zhí)行腳本（利用頂層的this等于undefined這個語法點(diǎn)，可以偵測當(dāng)前代碼是否在 ES6 模塊之中）

Q: css 動畫和 js 動畫的差異
1、代碼復(fù)雜度，js 動畫代碼相對復(fù)雜一些
2、動畫運(yùn)行時，對動畫的控制程度上，js 能夠讓動畫，暫停，取消，終止，css動畫不能添加事件
3、動畫性能看，js 動畫多了一個js 解析的過程，性能不如 css 動畫好

Q: XSS 與 CSRF 兩種跨站攻擊
1、xss 跨站腳本攻擊，主要是前端層面的，用戶在輸入層面插入攻擊腳本，改變頁面的顯示，或則竊取網(wǎng)站 cookie，預(yù)防方法：不相信用戶的所有操作，對用戶輸入進(jìn)行一個轉(zhuǎn)義，不允許 js 對 cookie 的讀寫
2、csrf 跨站請求偽造，以你的名義，發(fā)送惡意請求，通過 cookie 加參數(shù)等形式過濾
3、我們沒法徹底杜絕攻擊，只能提高攻擊門檻

Q: 事件委托，目的，功能，寫法
1、把一個或者一組元素的事件委托到它的父層或者更外層元素上
2、優(yōu)點(diǎn)，減少內(nèi)存消耗，動態(tài)綁定事件
3、target 是觸發(fā)事件的最具體的元素，currenttarget是綁定事件的元素(在函數(shù)中一般等于this)

Q: 線程，進(jìn)程

1、線程是最小的執(zhí)行單元，進(jìn)程是最小的資源管理單元
2、一個線程只能屬于一個進(jìn)程，而一個進(jìn)程可以有多個線程，但至少有一個線程

Q: 負(fù)載均衡

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

Q: 什么是CDN緩存

1、CDN 是一種部署策略，根據(jù)不同的地區(qū)部署類似nginx 這種服務(wù)服務(wù)，會緩存靜態(tài)資源。前端在項目優(yōu)化的時候，習(xí)慣在講臺資源上加上一個 hash 值，每次更新的時候去改變這個 hash，hash 值變化的時候，服務(wù)會去重新取資源
2、(CDN)是一個經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲、負(fù)載均衡、網(wǎng)絡(luò)請求的重定向和內(nèi)容管理4個要件

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

1、使用閉包的目的——隱藏變量，間接訪問一個變量,在定義函數(shù)的詞法作用域外，調(diào)用函數(shù)
2、閉包的內(nèi)存泄露，是IE的一個 bug，閉包使用完成之后，收回不了閉包的引用，導(dǎo)致內(nèi)存泄露

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

1、瀏覽器的同源策略導(dǎo)致了跨域
2、用于隔離潛在惡意文件的重要安全機(jī)制
3、jsonp ，允許 script 加載第三方資源
4、nginx 反向代理（nginx 服務(wù)內(nèi)部配置 Access-Control-Allow-Origin *）
5、cors 前后端協(xié)作設(shè)置請求頭部，Access-Control-Allow-Origin 等頭部信息

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

1、內(nèi)存泄露會導(dǎo)致一系列問題，比如：運(yùn)行緩慢，崩潰，高延遲
2、內(nèi)存泄露是指你用不到（訪問不到）的變量，依然占居著內(nèi)存空間，不能被再次利用起來
3、意外的全局變量，這些都是不會被回收的變量（除非設(shè)置 null 或者被重新賦值），特別是那些用來臨時存儲大量信息的變量
4、周期函數(shù)一直在運(yùn)行，處理函數(shù)并不會被回收，jq 在移除節(jié)點(diǎn)前都會，將事件監(jiān)聽移除
5、js 代碼中有對 DOM 節(jié)點(diǎn)的引用，dom 節(jié)點(diǎn)被移除的時候，引用還維持

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

1、它就是個編譯器，輸入語言是ES6+，編譯目標(biāo)語言是ES5
2、解析：將代碼字符串解析成抽象語法樹
3、變換：對抽象語法樹進(jìn)行變換操作
4、再建：根據(jù)變換后的抽象語法樹再生成代碼字符串

Q: Promise 模擬終止

1、當(dāng)新對象保持“pending”狀態(tài)時，原Promise鏈將會中止執(zhí)行。
2、return new Promise(()=>{}); // 返回“pending”狀態(tài)的Promise對象

Q: promise 放在try catch里面有什么結(jié)果
1、Promise 對象的錯誤具有冒泡性質(zhì)，會一直向后傳遞，直到被捕獲為止，也即是說，錯誤總會被下一個catch語句捕獲
2、當(dāng)Promise鏈中拋出一個錯誤時，錯誤信息沿著鏈路向后傳遞，直至被捕獲

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

1、http 請求方面，減少請求數(shù)量，請求體積，對應(yīng)的做法是，對項目資源進(jìn)行壓縮，控制項目資源的 dns 解析在2到4個域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，
2、壓縮資源，提取公共資源壓縮，提取 css ，js 公共方法
3、不要縮放圖片，使用雪碧圖，使用字體圖表（阿里矢量圖庫）
4、使用 CDN，拋開無用的 cookie
5、減少重繪重排，CSS屬性讀寫分離，最好不要用js 修改樣式，dom 離線更新，渲染前指定圖片的大小
6、js 代碼層面的優(yōu)化，減少對字符串的計算，合理使用閉包，首屏的js 資源加載放在最底部

Q: js 自定義事件實現(xiàn)

1、原生提供了3個方法實現(xiàn)自定義事件
2、createEvent，設(shè)置事件類型，是 html 事件還是 鼠標(biāo)事件
3、initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件
4、dispatchEvent 觸發(fā)事件

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

1、二者都是 MVVM 模式開發(fā)的典型代表
2、ngular 是通過臟檢測實現(xiàn)，angular 會將 UI 事件，請求事件，settimeout 這類延遲，的對象放入到事件監(jiān)測的臟隊列，當(dāng)數(shù)據(jù)變化的時候，觸發(fā) $diget 方法進(jìn)行數(shù)據(jù)的更新，視圖的渲染
3、vue 通過數(shù)據(jù)屬性的數(shù)據(jù)劫持和發(fā)布訂閱的模式實現(xiàn)，大致可以理解成由3個模塊組成，observer 完成對數(shù)據(jù)的劫持，compile 完成對模板片段的渲染，watcher 作為橋梁連接二者，訂閱數(shù)據(jù)變化及更新視圖

Q: get與post 通訊的區(qū)別
1、Get 請求能緩存，Post 不能
2、Post 相對 Get 安全一點(diǎn)點(diǎn)，因為Get 請求都包含在 URL 里，且會被瀏覽器保存歷史紀(jì)錄，Post 不會，但是在抓包的情況下都是一樣的。
3、Post 可以通過 request body來傳輸比 Get 更多的數(shù)據(jù)，Get 沒有這個技術(shù)
4、URL有長度限制，會影響 Get 請求，但是這個長度限制是瀏覽器規(guī)定的，不是 RFC 規(guī)定的
5、Post 支持更多的編碼類型且不對數(shù)據(jù)類型限制

Q: 有沒有去研究webpack的一些原理和機(jī)制，怎么實現(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語法樹，找出每個文件所依賴的文件，遞歸下去。
4、在解析文件遞歸的過程中根據(jù)文件類型和loader配置找出合適的loader用來對文件進(jìn)行轉(zhuǎn)換。
5、遞歸完后得到每個文件的最終結(jié)果，根據(jù)entry配置生成代碼塊chunk。
6、輸出所有chunk到文件系統(tǒng)。

Q: ES6模塊與CommonJS模塊的差異

1、CommonJs 模塊輸出的是一個值的拷貝，ES6模塊輸出的是一個值的引用
2、CommonJS 模塊是運(yùn)行時加載，ES6模塊是編譯時輸出接口
3、ES6輸入的模塊變量，只是一個符號鏈接，所以這個變量是只讀的，對它進(jìn)行重新賦值就會報錯

Q: 模塊加載AMD，CMD，CommonJS Modules/2.0 規(guī)范
1、這些規(guī)范的目的都是為了 JavaScript 的模塊化開發(fā)，特別是在瀏覽器端的
2、對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行
3、CMD 推崇依賴就近，AMD 推崇依賴前置

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

1、Node.js 的事件循環(huán)分為6個階段
2、瀏覽器和Node 環(huán)境下，microtask 任務(wù)隊列的執(zhí)行時機(jī)不同
Node.js中，microtask 在事件循環(huán)的各個階段之間執(zhí)行
瀏覽器端，microtask 在事件循環(huán)的 macrotask 執(zhí)行完之后執(zhí)行
3、遞歸的調(diào)用process.nextTick()會導(dǎo)致I/O starving，官方推薦使用setImmediate()

Q: 淺拷貝和深拷貝的問題
1、深拷貝和淺拷貝是只針對Object和Array這樣的復(fù)雜類型的
2、也就是說a和b指向了同一塊內(nèi)存，所以修改其中任意的值，另一個值都會隨之變化，這就是淺拷貝
3、淺拷貝， ”O(jiān)bject.assign() 方法用于將所有可枚舉的屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象。它將返回目標(biāo)對象
4、深拷貝，JSON.parse()和JSON.stringify()給了我們一個基本的解決辦法。但是函數(shù)不能被正確處理

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com