[toc] #### 1.講一下微前端在項目中是怎么實現的 我們整體是基于qiankun方案，然后結合我們項目進行的一個拆分改造，一個是項目結構，一個是項目之間的傳參 首先是項目結構，我們通過設置一個主項目，在主項目中進行登錄操作，獲取用戶的角色，權限等信息，渲染出菜單，同時，在主項目中還會設置子項目的entry和activeRules，在主項目切換菜單的同時，會監聽路由的變化，匹配需要加載的子項目，然后渲染到對應的container上。 第二個是項目之間的傳參，這里面我們主要做了三種方式， + 一個是通過項目掛載的時候，可以通過props，將主項目的store和router傳遞給子項目，qiankun會把它掛載子項目的實例上。 + 第二種就是在主項目通過一個initGlobalState的api，聲明全局變量，子項目中有三個鉤子函數，bootstrap，mount, destroyed，我們在mount中通過一個onGlobalStateChange方法，監聽全局變量的變化 + 第三種就是通過localStorage的方式，比如我們全局的用戶信息，還有一些狀態字典表，就是放在緩存里的 + #### 2.微前端的原理是什么 微前端的原理，在qiankun中，子項目是不需要引入任何依賴的，只需要將打包里面output設置成umd的格式，umd會兼容common.js，es6，amd的引用規范。 主項目監聽路由的變化，如果是hash模式就通過hashchange，history模式就是popState監聽路由的變化，獲取對應的entry入口 主項目通過entry入口，獲取index.html的html，js和css文件，其中js有兩種，一種是script標簽包裹的可執行代碼，這里會通過eval來執行，還有一種是script標簽src引用的資源，這里會通過fetch方法獲取js的內容 #### 3.微前端中遇到了哪些坑 #### 4.項目中用了哪些性能優化 1.網絡優化 + 減少不必要的http請求 + 將小圖片轉成base64格式，比如webpack里面設置url-loader設置文件的limit大小，小于這個大小的會被轉化成base64 + 使用gzip壓縮，這個需要在服務端進行nginx配置 ```js Content-Encoding: gzip ``` + 使用http緩存，強緩存，協商緩存 ``` Cache-Control:max-age: 秒 expires：時間 ``` ```js eTag last-modified: 最后修改時間 ``` + 采用cdn內容分發網絡 + 采用link標簽采用preload和prefetch，webpack中可以配置，preload預加載，prefetch是空閑時間加載 2.渲染優化 + 減少重繪和重排，修改dom的樣式不要一條一條修改，一次性集中修改，直接操作dom可以考慮采用dom碎片，或者虛擬dom方式，最后再插到頁面 + 采用webWorker的方式，因為js是單線程的，他在執行的過程中會阻塞dom的渲染，可以將一部分計算交給webWorker去操作，然后通過posterMessage進行通信 + 資源的懶加載，圖片懶加載 + 防抖和節流 + v-if和v-for過濾 + v-show和v-if + v-for添加key 3.資源的壓縮 + 通過webpack去壓縮，js，css，提取css #### 5.vue的響應式原理 在new 一個vue組件的時候，主要有編譯compiler和observer數據觀測兩個過程 首先是在observer環節，主要通過一個Object.definePerperty去監聽對象上的屬性值，如果是key對應的值還是對象，那么就會進行遞歸劫持，他會劫持這個對象的get和set，當編譯環節觸發的時候，會讀取到這個v-model指令或者插值表達式{{}}，這個時候會在這里創建一個wacher對象，里面存在一個callback方法將dom上的值更新成對象中的值。 同時這里有一個發布訂閱的設計模式，每次watcher創建的時候，會將這些觀察者收集起來，等到data中的值修改時，會觸發set方法，這個時候會通知Dep類，執行dep.notify方法，執行這些watcher上的update方法，更新視圖變化 #### 6.輸入url到出現頁面經歷了哪些過程 + 網絡請求 + 瀏覽器渲染 #### 7. tcp的三次握手和四次揮手 1.三次握手 + 客戶端向服務端發送一個握手的請求 ```js syn同步位=1，隨機seq=1報文段序號 ``` + 服務端收到握手請求后進行確認 ```js syn=1, 發送確認位ACK=1，以及ack=x+1，表示確認收到了，期望收到x+1的報文段 以及自己的seq=y，隨機 ``` + 客戶端收到服務端的確認后 ```js syn=0，表示握手成功 發送 ACK=1, ack=y+1 發送自身的seq=x+1 ``` 2.四次揮手 + 客戶端向服務端發送斷開請求 ```js fin=1，表示結束 seq=x，隨機序號 ``` + 服務端收到后先發送數據 ``` ACK=1, ack=x+1,seq=y ``` + 服務端再發送一條表示結束連接 ```js fin=1, ACK=1, ack=x+1, seq=u ``` + 客戶端收到結束確認 ``` ACK=1, seq=w, ack=x+1 ```