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

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

2. 低耦合摇锋，單一職責(zé)驾霜，可復(fù)用性耕餐，可維護性

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

js 異步加載的方式

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

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

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

css 動畫和 js 動畫的差異

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

2. 動畫運行時垒棋，對動畫的控制程度上卒煞，js 能夠讓動畫，暫停叼架，取消畔裕，終止，css動畫不能添加事件

3. 動畫性能看乖订，js 動畫多了一個js 解析的過程扮饶，性能不如 css 動畫好

XSS 與 CSRF 兩種跨站攻擊

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

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

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

事件委托寨蹋，目的松蒜，功能，寫法

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

2. 優(yōu)點钥庇，減少內(nèi)存消耗牍鞠，動態(tài)綁定事件

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

4. JavaScript 事件委托詳解

線程评姨，進程

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

2. 一個線程只能屬于一個進程，而一個進程可以有多個線程吐句，但至少有一個線程

負載均衡

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

2. 服務(wù)器集群負載均衡原理攀芯？

什么是CDN緩存

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

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

3. CDN_百度百科

閉包的寫法禽翼，閉包的作用肥败，閉包的缺點

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

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

3. 「每日一題」JS 中的閉包是什么？

4. 閉包造成內(nèi)存泄露的實驗

跨域問題刊头，誰限制的跨域黍瞧，怎么解決

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

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

3. [jsonp ，允許 script 加載第三方資源]https://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)存泄露會導(dǎo)致一系列問題，比如：運行緩慢穿肄，崩潰年局，高延遲

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

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

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

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

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

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

1. 它就是個編譯器顶吮，輸入語言是ES6+粪薛，編譯目標語言是ES5

2. babel 官方工作原理

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

4. 變換：對抽象語法樹進行變換操作

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

Promise 模擬終止

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

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

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

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

1. Promise 對象的錯誤具有冒泡性質(zhì)违寿，會一直向后傳遞湃交，直到被捕獲為止，也即是說藤巢，錯誤總會被下一個catch語句捕獲

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

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

1. http 請求方面菌瘪，減少請求數(shù)量，請求體積阱当，對應(yīng)的做法是俏扩，對項目資源進行壓縮，控制項目資源的 dns 解析在2到4個域名弊添，提取公告的樣式录淡，公共的組件，雪碧圖油坝，緩存資源嫉戚，

2. 壓縮資源，提取公共資源壓縮澈圈，提取 css 彬檀，js 公共方法

3. 不要縮放圖片，使用雪碧圖瞬女，使用字體圖表（阿里矢量圖庫）

4. 使用 CDN窍帝，拋開無用的 cookie

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

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

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

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

2. createEvent，設(shè)置事件類型飞苇，是 html 事件還是 鼠標事件

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

4. dispatchEvent 觸發(fā)事件

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

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

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

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

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

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

2. Post 相對 Get 安全一點點，因為Get 請求都包含在 URL 里冷溶，且會被瀏覽器保存歷史紀錄渐白，Post 不會，但是在抓包的情況下都是一樣的逞频。

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

4. URL有長度限制，會影響 Get 請求苗胀，但是這個長度限制是瀏覽器規(guī)定的襟诸，不是 RFC 規(guī)定的

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

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

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

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

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

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

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

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

ES6模塊與CommonJS模塊的差異

1. CommonJs 模塊輸出的是一個值的拷貝玷坠，ES6模塊輸出的是一個值的引用

2. CommonJS 模塊是運行時加載蜗搔，ES6模塊是編譯時輸出接口

3. ES6輸入的模塊變量，只是一個符號鏈接八堡，所以這個變量是只讀的樟凄，對它進行重新賦值就會報錯

模塊加載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個階段

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

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

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

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

淺拷貝和深拷貝的問題

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

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

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

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

開放性問題

開放性問題主要是考察候選人業(yè)務(wù)積累苇倡，是否有自己的思考富纸，思考問題的方式，沒有標準答案旨椒。不過有些問題挺刁的晓褪，哈哈哈哈，比如：" 你見過的最好的代碼是什么综慎？ "總之提前準備下沒錯涣仿。

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

2. 從整體中好港，看你對項目的認識愉镰，框架的認識和自己思考

3. 項目中有沒有遇到什么難點，怎么解決

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

5. 說一下你項目中用到的技術(shù)棧丈探，以及覺得得意和出色的點，以及讓你頭疼的點拔莱，怎么解決的

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

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

8. 你覺得哪個框架比較好讼渊，好在哪里

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

10. 你見過的最好的代碼是什么