分享一篇關於前端面試真題的文章

累積了一些高頻面試題，記錄給有需要的同學。此文把麵試題主要是基礎試題，它主要考察前端技基礎是否紮實，是否能夠將前端知識體系串連起來。

Q: 怎麼去設計一個元件封裝

1、元件封裝的目的是為了重複使用，提高開發效率和程式碼品質
2、低耦合，單一職責，可重複使用性，可維護性

Q: js 非同步載入的方式

1、渲染引擎遇到script 標籤會停下來，等到執行完腳本，繼續向下渲染/
2 、defer 是“渲染完再執行”，async 是“下載完就執行”，defer 如果有多個腳本，會按照在頁面中出現的順序加載，多個async 腳本不能保證加載順序
3、加載es6模組的時候設定type=module，非同步載入不會造成阻塞瀏覽器，頁面渲染完再執行，可以同時加上async屬性，非同步執行腳本（利用頂層的this等於undefined這個文法點，可以偵測目前程式碼是否在ES6 模組之中）

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

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

Q: 事件委託，目的，功能，寫法
1、把一個或一組元素的事件委託到它的父層或者更外層元素上
2、優點，減少記憶體消耗，動態綁定事件
3、target 是觸發事件的最具體的元素，currenttarget是綁定事件的元素(在函數中一般等於this )

Q: 執行緒，行程

1、執行緒是最小的執行單元，行程是最小的資源管理單元
2、一個執行緒只能屬於一個行程，而一個行程可以有多個線程，但至少有一個線程

Q: 負載平衡

當系統面臨大量用戶訪問，負載過高的時候，通常會使用增加伺服器數量來進行橫向擴展，使用叢集和負載平衡來提高整個系統的處理能力

Q: 什麼是CDN快取

1、CDN 是一種部署策略，根據不同的地區部署類似nginx 這種服務服務，會快取靜態資源。前端在專案優化的時候，習慣在講台資源上加上一個hash 值，每次更新的時候去改變這個hash，hash 值變化的時候，服務會去重新取資源
2、(CDN)是一個經策略性部署的整體系統，包括分散式儲存、負載平衡、網路請求的重定向和內容管理4個要件

Q: 閉包的寫法，閉包的作用，閉包的缺點

1、使用閉包的目的－隱藏變量，間接存取一個變數,在定義函數的詞法作用域外，呼叫函數
2、閉包的記憶體洩露，是IE的一個bug，閉套件使用完成之後，收回不了閉包的引用，導致記憶體外洩

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

1、瀏覽器的同源策略導致了跨網域
2、用於隔離潛在惡意檔案的重要安全機制
3、jsonp ，讓script 載入第三方資源
4、nginx 反向代理程式（nginx 服務內部設定Access-Control-Allow -Origin *）
5、cors 前後端協作設定請求頭部，Access-Control-Allow-Origin  等頭部資訊

Q: javascript 中常見的記憶體外洩陷阱

1.記憶體外洩會導致一系列問題，例如：運行緩慢，崩潰，高延遲
2、記憶體外洩是指你用不到（存取不到）的變量，依然佔居記憶體空間，不能再一次利用起來
3、意外的全域變量，這些都是不會被回收的變數（除非設定null 或被重新賦值），特別是那些用來臨時儲存大量資訊的變數
4、週期函數一直在運行，處理函數並不會被回收，jq 在移除節點前都會，將事件監聽移除
5、js 程式碼中有對DOM 節點的引用，dom 節點被移除的時候，引用還維持

Q: babel把ES6轉成ES5或ES3之類的原理是什麼

#1、它就是個編譯器，輸入語言是ES6 ，編譯目標語言是ES5
2 、解析：將程式碼字串解析成抽象語法樹
3、變換：對抽象語法樹進行變換運算
4、再建：根據變換後的抽象語法樹再產生程式碼字串

Q: Promise 模擬終止

1、當新物件保持「pending」狀態時，原Promise鏈將會中止執行。
2、return new Promise(()=>{});  // 傳回「pending」狀態的Promise物件

Q: promise 放在try catch裡面有什麼結果
1、Promise 物件的錯誤具有冒泡性質，會一直向後傳遞，直到被捕獲為止，也即是說，錯誤總是會被下一個catch語句捕獲
2、當Promise鏈中拋出一個錯誤時，錯誤訊息沿著連結向後傳遞，直到被捕獲

Q: 網站效能最佳化

##1、 http 請求方面，減少請求數量，請求體積，對應的做法是，對項目資源進行壓縮，控制項目資源的dns 解析在2到4個域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，

2、壓縮資源，提取公共資源壓縮，提取css ，js 公共方法
3、不要縮放圖片，使用雪碧圖，使用字體圖表（阿里向量圖庫）
4、使用CDN，拋開無用的cookie
5、減少重繪重排，CSS屬性讀寫分離，最好不要用js 修改樣式，dom 離線更新，渲染前指定圖片的大小
6、js 程式碼層面的最佳化，減少字串的計算，合理使用閉包，首屏的js 資源載入放在最底部

Q: js 自訂事件實作

1、原生提供了3個方法實作自定義事件

2、createEvent，設定事件類型，是html 事件還是滑鼠事件
3、initEvent  初始化事件，事件名稱，是否允許冒泡，是否阻止自訂事件
4、dispatchEvent  觸發事件

Q: angular 雙向資料綁定與vue資料的雙向資料綁定

1、二者都是MVVM 模式開發的典型代表

2、ngular 是透過髒檢測實現， angular 會將UI 事件，請求事件，settimeout 這類延遲，的物件放入到事件監測的髒佇列，當資料變更的時候，觸發$diget 方法進行資料的更新，視圖的渲染
3、vue 透過資料屬性的資料劫持和發布訂閱的模式實現，大致可以理解成由3個模組組成，observer 完成對資料的劫持，compile 完成對模板片段的渲染，watcher 作為橋樑連接二者，訂閱資料變化及更新視圖

Q: get與post 通訊的區別

1、Get 請求能緩存，Post 不能
2、Post 相對Get 安全一點點，因為Get 請求都包含在URL 裡，會被瀏覽器保存歷史紀錄，Post 不會，但在抓包的情況下都是一樣的。
3、Post 可以透過request body來傳輸比Get 更多的數據，Get 沒有這個技術
4、URL有長度限制，會影響Get 請求，但是這個長度限制是瀏覽器規定的，不是RFC規定的
5、Post 支援更多的編碼型別且不對資料型別限制

Q: 有沒有去研究webpack的一些原理和機制，怎麼實現的

1、解析webpack配置參數，合併從shell傳入和webpack.config.js檔案裡配置的參數，生產最後的設定結果。
2、註冊所有配置的插件，好讓插件監聽webpack建構生命週期的事件節點，以做出對應的反應。
3、從配置的entry入口文件開始解析文件建構AST語法樹，找出每個文件所依賴的文件，遞歸下去。
4、在解析檔案遞歸的過程中根據檔案類型和loader配置找出適當的loader用來轉換檔案。
5、遞歸完後得到每個檔案的最終結果，依照entry配置產生程式碼區塊chunk。
6、輸出所有chunk到檔案系統。

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

1、CommonJs 模組輸出的是一個值的拷貝，ES6模組輸出的是一個值的引用

2、CommonJS 模組是運行時加載，ES6模組是編譯時輸出接口
3、ES6輸入的模組變量，只是一個符號鏈接，所以這個變量是只讀的，對它進行重新賦值就會報錯

Q : 模組載入AMD，CMD，CommonJS Modules/2.0 規格

1、這些規格的目的都是為了JavaScript 的模組化開發，特別是在瀏覽器端的
2、對於依賴的模組，AMD 是提前執行，CMD 是延遲執行
3、CMD 推崇依賴就近，AMD 推崇依賴前置

Q: Node 事件循環，js 事件循環差異

1、Node.js 的事件循環分為6個階段

2、瀏覽器和Node 環境下，microtask 任務佇列的執行時機不同
Node.js中，microtask 在事件循環的各個階段之間執行
瀏覽器端，microtask在事件循環的macrotask 執行完之後執行
3、遞歸的呼叫process.nextTick()會導致I/O starving，官方推薦使用setImmediate()

Q: 淺拷貝和深拷貝的問題

1、深拷貝和淺拷貝是只針對Object和Array這樣的複雜類型的
2、也就是說a和b指向了同一塊內存，所以修改其中任意的值，另一個值都會隨之變化，這就是淺拷貝
3、淺拷貝， 」Object.assign() 方法用於將所有可枚舉的屬性的值從一個或多個來源物件複製到目標物件。它將傳回目標對象
4、深拷貝，JSON.parse()和JSON.stringify()給了我們一個基本的解決方案。但是函數不能被正確處理

以上是分享一篇關於前端面試真題的文章的詳細內容。更多資訊請關注PHP中文網其他相關文章！