新鮮出爐的8月前端面試題

前言

最近參加了幾場面試，積累了一些高頻面試題，我把面試題分爲兩類，一種是基礎試題: 主要考察前端技基礎是否紮實，是否可以將前端知識體系串聯。一種是開放式問題: 考察業務積累，是否有本身的思考，思考問題的方式，這類問題沒有標準答案。

基礎題

題目的答案提供了一個思考的方向，答案不必定正確全面，有錯誤的地方歡迎你們請在評論中指出，共同進步。

怎麼去設計一個組件封裝

1. 組件封裝的目的是爲了重用，提升開發效率和代碼質量
2. 低耦合，單一職責，可複用性，可維護性
3. 前端組件化設計思路

js 異步加載的方式

1. 渲染引擎遇到 script 標籤會停下來，等到執行完腳本，繼續向下渲染
2. defer 是「渲染完再執行」，async 是「下載完就執行」，defer 若是有多個腳本，會按照在頁面中出現的順序加載，多個async 腳本不能保證加載順序
3. 加載 es6模塊的時候設置 type=module，異步加載不會形成阻塞瀏覽器，頁面渲染完再執行，能夠同時加上async屬性，異步執行腳本（利用頂層的this等於undefined這個語法點，能夠偵測當前代碼是否在 ES6 模塊之中）

css 動畫和 js 動畫的差別

1. 代碼複雜度，js 動畫代碼相對複雜一些
2. 動畫運行時，對動畫的控制程度上，js 可以讓動畫，暫停，取消，終止，css動畫不能添加事件
3. 動畫性能看，js 動畫多了一個js 解析的過程，性能不如 css 動畫好

XSS 與 CSRF 兩種跨站攻擊

1. xss 跨站腳本攻擊，主要是前端層面的，用戶在輸入層面插入攻擊腳本，改變頁面的顯示，或則竊取網站 cookie，預防方法：不相信用戶的全部操做，對用戶輸入進行一個轉義，不容許 js 對 cookie 的讀寫
2. csrf 跨站請求僞造，以你的名義，發送惡意請求，經過 cookie 加參數等形式過濾
3. 咱們無法完全杜絕攻擊，只能提升攻擊門檻

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

1. 把一個或者一組元素的事件委託到它的父層或者更外層元素上
2. 優勢，減小內存消耗，動態綁定事件
3. target 是觸發事件的最具體的元素，currenttarget是綁定事件的元素(在函數中通常等於this)
4. JavaScript 事件委託詳解

線程，進程

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

負載均衡

1. 當系統面臨大量用戶訪問，負載太高的時候，一般會使用增長服務器數量來進行橫向擴展，使用集羣和負載均衡提升整個系統的處理能力
2. 服務器集羣負載均衡原理？

什麼是CDN緩存

1. CDN 是一種部署策略，根據不一樣的地區部署相似nginx 這種服務服務，會緩存靜態資源。前端在項目優化的時候，習慣在講臺資源上加上一個 hash 值，每次更新的時候去改變這個 hash，hash 值變化的時候，服務會去從新取資源
2. (CDN)是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件
3. CDN_百度百科

閉包的寫法，閉包的做用，閉包的缺點

1. 使用閉包的目的——隱藏變量，間接訪問一個變量,在定義函數的詞法做用域外，調用函數
2. 閉包的內存泄露，是IE的一個 bug，閉包使用完成以後，收回不了閉包的引用，致使內存泄露
3. 「每日一題」JS 中的閉包是什麼？
4. 閉包形成內存泄露的實驗

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

1. 瀏覽器的同源策略致使了跨域
2. 用於隔離潛在惡意文件的重要安全機制
3. [jsonp ，容許 script 加載第三方資源]https://segmentfault.com/a/11...
4. nginx 反向代理（nginx 服務內部配置 Access-Control-Allow-Origin *）
5. cors 先後端協做設置請求頭部，Access-Control-Allow-Origin 等頭部信息
6. iframe 嵌套通信，postmessage

javascript 中常見的內存泄露陷阱

1. 內存泄露會致使一系列問題，好比：運行緩慢，崩潰，高延遲
2. 內存泄露是指你用不到（訪問不到）的變量，依然佔居着內存空間，不能被再次利用起來
3. 意外的全局變量，這些都是不會被回收的變量（除非設置 null 或者被從新賦值），特別是那些用來臨時存儲大量信息的變量
4. 周期函數一直在運行，處理函數並不會被回收，jq 在移除節點前都會，將事件監聽移除
5. js 代碼中有對 DOM 節點的引用，dom 節點被移除的時候，引用還維持
6. JavaScript 中 4 種常見的內存泄露陷阱

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

1. 它就是個編譯器，輸入語言是ES6+，編譯目標語言是ES5
2. babel 官方工做原理
3. 解析：將代碼字符串解析成抽象語法樹
4. 變換：對抽象語法樹進行變換操做
5. 再建：根據變換後的抽象語法樹再生成代碼字符串

Promise 模擬終止

1. 當新對象保持「pending」狀態時，原Promise鏈將會停止執行。
2. return new Promise(()=>{}); // 返回「pending」狀態的Promise對象
3. 從如何停掉 Promise 鏈提及(promise內存泄漏問題)

promise 放在try catch裏面有什麼結果

1. Promise 對象的錯誤具備冒泡性質，會一直向後傳遞，直到被捕獲爲止，也便是說，錯誤總會被下一個catch語句捕獲
2. 當Promise鏈中拋出一個錯誤時，錯誤信息沿着鏈路向後傳遞，直至被捕獲

網站性能優化

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

js 自定義事件實現

1. 原生提供了3個方法實現自定義事件
2. createEvent，設置事件類型，是 html 事件仍是 鼠標事件
3. initEvent 初始化事件，事件名稱，是否容許冒泡，是否阻止自定義事件
4. dispatchEvent 觸發事件

angular 雙向數據綁定與vue數據的雙向數據綁定

1. 兩者都是 MVVM 模式開發的典型表明
2. angular 是經過髒檢測實現，angular 會將 UI 事件，請求事件，settimeout 這類延遲，的對象放入到事件監測的髒隊列，當數據變化的時候，觸發 $diget 方法進行數據的更新，視圖的渲染
3. vue 經過數據屬性的數據劫持和發佈訂閱的模式實現，大體能夠理解成由3個模塊組成，observer 完成對數據的劫持，compile 完成對模板片斷的渲染，watcher 做爲橋樑鏈接兩者，訂閱數據變化及更新視圖

get與post 通信的區別

1. Get 請求能緩存，Post 不能
2. Post 相對 Get 安全一點點，由於Get 請求都包含在 URL 裏，且會被瀏覽器保存歷史紀錄，Post 不會，可是在抓包的狀況下都是同樣的。
3. Post 能夠經過 request body來傳輸比 Get 更多的數據，Get 沒有這個技術
4. URL有長度限制，會影響 Get 請求，可是這個長度限制是瀏覽器規定的，不是 RFC 規定的
5. Post 支持更多的編碼類型且不對數據類型限制

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

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

ES6模塊與CommonJS模塊的差別

1. CommonJs 模塊輸出的是一個值的拷貝，ES6模塊輸出的是一個值的引用
2. CommonJS 模塊是運行時加載，ES6模塊是編譯時輸出接口
3. ES6輸入的模塊變量，只是一個符號連接，因此這個變量是隻讀的，對它進行從新賦值就會報錯

模塊加載AMD，CMD，CommonJS Modules/2.0 規範

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

Node 事件循環，js 事件循環差別

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

2. 瀏覽器和Node 環境下，microtask 任務隊列的執行時機不一樣

   • Node.js中，microtask 在事件循環的各個階段之間執行
   • 瀏覽器端，microtask 在事件循環的 macrotask 執行完以後執行
3. 遞歸的調用process.nextTick()會致使I/O starving，官方推薦使用setImmediate()

淺拷貝和深拷貝的問題

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

開放性問題

開放性問題主要是考察候選人業務積累，是否有本身的思考，思考問題的方式，沒有標準答案。不過有些問題挺刁的，哈哈哈哈，好比：" 你見過的最好的代碼是什麼？ "總之提早準備下沒錯。

1. 先自我介紹一下，說一下項目的技術棧，以及項目中遇到的一些問題
2. 從總體中，看你對項目的認識，框架的認識和本身思考
3. 項目中有沒有遇到什麼難點，怎麼解決
4. 若是你在創業公司你怎麼從0開始作（選擇什麼框架，選擇什麼構建工具）
5. 說一下你項目中用到的技術棧，以及以爲得意和出色的點，以及讓你頭疼的點，怎麼解決的
6. 一個業務場景，面對產品不斷迭代，以及需求的變更該怎麼應對，具體技術方案實現
7. 你的學習來源是什麼
8. 你以爲哪一個框架比較好，好在哪裏
9. 你以爲最可貴技術難點是什麼
10. 你見過的最好的代碼是什麼

😊往期的讀書筆記

爲了系統的串聯前端知識，我平時喜歡用思惟導圖來記錄讀書筆記，我在 github 建了倉庫放這些思惟導圖的原件，和讀書筆記。若是你也喜歡用思惟導圖的方式來記錄讀書筆記，也歡迎和我一同維護這個倉庫，歡迎留言或則微信（646321933）與我交流

精讀《你不知道的 javascript（上卷）》

精讀《你不知道的javascript》中卷

精讀《深刻淺出Node.js》

javascript 垃圾回收算法

精讀《圖解HTTP》

思惟導圖下載地址