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()給了我們一個基本的解決辦法。但是函數不能被正確處理

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