[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 ```