一面： 观察者与访问者模式的区别： 访问者是主动的，观察者是被动的，但是它们的处理过程都类似责任链模式，都是可以保证顺序性执 观察者模式 定义：对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 业务场景：一个微信公众号服务，不定时发布一些消息，关注公众号就可以收到推送消息，取消关注就收不到推送消息。 访问者模式 定义：封装一些作用于某种数据结构中的各元素的操作，它可以在不改变数据结构的前提下定义作用于这些元素的新的操作。 宏任务和微任务种类： 宏任务：

微任务：

MessageChannel 是什么？ Channel Messaging API的MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。 MessageChannel.port1 只读，返回channel的port1。 MessageChannel.port2 只读，返回channel的port2。 构造函数MessageChannel()返回一个带有两个MessagePort属性的MessageChannel新对象。 参考解析 http 与 https 区别 https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。 http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。 http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。 证书是如何加密的，用了什么算法，如何确保安全性 我们把证书原本的内容生成一份“签名”，比对证书内容和签名是否一致就能判别是否被篡改。这就是数字证书的“防伪技术”，这里的“签名”就叫数字签名。图中左侧是数字签名的制作过程，右侧是验证过程：

图片: https://as.smvm.cn/docs/assets/paste_error_placeholder-b6c71c3140.png?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE2NzU5OTI5MTAsImZpbGVHVUlEIjoiTkprYkVvYVlOUlVaelJxUiIsImlhdCI6MTY3NTk5MjYxMCwiaXNzIjoidXBsb2FkZXJfYWNjZXNzX3Jlc291cmNlIiwidXNlcklkIjoyMjI2ODE0OX0.BI4CH8rEsxorwQk2XIP1xQn9vfqD4TGaC25L0bfr14c 数字签名的制作过程： CA机构拥有非对称加密的私钥和公钥。 CA机构对证书明文数据T进行hash。 对hash后的值用私钥加密，得到数字签名S。 明文和数字签名共同组成了数字证书，这样一份数字证书就可以颁发给网站了。 浏览器验证过程： 拿到证书，得到明文T，签名S。 用CA机构的公钥对S解密，得到S’。 用证书里指明的hash算法对明文T进行hash得到T’。 显然通过以上步骤，T’应当等于S‘，除非明文或签名被篡改。所以此时比较S’是否等于T’，等于则表明证书可信。 有方法可以破解 https？ 请看参考解析 301 和 302 除了临时重定向外还有什么本质区别 301是永久跳转，会做缓存优化，下次再打跳转前的地址就会直接把URL改成跳转后的地址 302是临时跳转 307 和刚刚的 301 和 302 有啥区别 307 临时重定向响应状态码，表示请求的资源暂时地被移动到了响应的 状态码 307 与 之间的唯一区别在于，当发送重定向请求的时候，307 状态码可以确保请求方法和消息主体不会发生变化。如果使用 302 响应状态码，一些旧客户端会错误地将请求方法转换为 ：也就是说，在 Web 中，如果使用了 GET 以外的请求方法，且返回了 302 状态码，则重定向后的请求方法是不可预测的；但如果使用 307 状态码，之后的请求方法就是可预测的。对于 GET 请求来说，两种情况没有区别。 307 会出现在什么场景中？ 更新页面上的内容 迁移到不同的内容管理系统 (CMS) 切换域名 由于维护而暂时关闭您的网站 关键是仅在您知道移动是暂时的才使用307重定向。否则，您最好使用301或308重定向，这样您的SEO中的链接权重就会从旧URL传递到新URL。 为什么有同源机制?同源机制的触发条件是什么？ 为什么有同源机制? 1.为了防止恶意网页可以获取其他网站的本地数据。 2.为了防止恶意网站iframe其他网站的时候，获取数据。 3.为了防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据 浏览器遵循同源政策(scheme(协议)、host(主机)和port(端口)都相同则为同源)。非同源站点有这样一些限制: 不能读取和修改对方的 DOM 不读访问对方的 Cookie、IndexDB 和 LocalStorage 限制 XMLHttpRequest 请求。(后面的话题着重围绕这个) 当浏览器向目标 URI 发 Ajax 请求时，只要当前 URL 和目标 URL 不同源，则产生跨域，被称为跨域请求。 简单请求默认允许修改报文的哪些部分 浏览器根据请求方法和请求头的特定字段，将请求做了一下分类，具体来说规则是这样，凡是满足下面条件的属于简单请求: 请求方法为 GET、POST 或者 HEAD 请求头的取值范围: Accept、Accept-Language、Content-Language、Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain) 浏览器画了这样一个圈，在这个圈里面的就是简单请求, 圈外面的就是非简单请求，然后针对这两种不同的请求进行不同的处理。 简单请求发出去之前，浏览器做了什么？ 它会自动在请求头当中，添加一个Origin字段，用来说明请求来自哪个源。服务器拿到请求之后，在回应时对应地添加Access-Control-Allow-Origin字段，如果Origin不在这个字段的范围中，那么浏览器就会将响应拦截。 因此，Access-Control-Allow-Origin字段是服务器用来决定浏览器是否拦截这个响应，这是必需的字段。与此同时，其它一些可选的功能性的字段，用来描述如果不会拦截，这些字段将会发挥各自的作用。 Access-Control-Allow-Credentials。这个字段是一个布尔值，表示是否允许发送 Cookie，对于跨域请求，浏览器对这个字段默认值设为 false，而如果需要拿到浏览器的 Cookie，需要添加这个响应头并设为true, 并且在前端也需要设置withCredentials属性: let xhr = new XMLHttpRequest(); xhr.withCredentials = true; Access-Control-Expose-Headers。这个字段是给 XMLHttpRequest 对象赋能，让它不仅可以拿到基本的 6 个响应头字段（包括Cache-Control、Content-Language、Content-Type、Expires、Last-Modified和Pragma）, 还能拿到这个字段声明的响应头字段。比如这样设置: Access-Control-Expose-Headers: aaa 那么在前端可以通过 XMLHttpRequest.getResponseHeader('aaa') 拿到 aaa 这个字段的值。 带 cookie 修改 cookie 还是简单请求吗？ 首先答案是：不再是简单请求了 为什么不再是简单请求了，可以先看一下简单请求的满足条件。 图片: https://uploader.shimo.im/f/C7ggicCN8Rwa5I2O.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE2NzU5OTI5MTAsImZpbGVHVUlEIjoiTkprYkVvYVlOUlVaelJxUiIsImlhdCI6MTY3NTk5MjYxMCwiaXNzIjoidXBsb2FkZXJfYWNjZXNzX3Jlc291cmNlIiwidXNlcklkIjoyMjI2ODE0OX0.BI4CH8rEsxorwQk2XIP1xQn9vfqD4TGaC25L0bfr14c

需要传递cookie的话，request headers里面就会出现cookie这个字段，不符合简单请求的第二个限制条件。 说说所有你知道的跨域实现方式 请看参考解析 说说 jsonp 的实现 参考同上 说说如何扩展简单跨域 不知道··· 说说复杂跨域和简单跨域的区别 阮一峰对于跨域的解释 这里的问题应该是问的是简单请求和复杂请求的区别是什么？文章中解释的很清楚跨域的出现过程，简单请求和复杂请求的最大区别就在于发送请求之前是否要发送一次OPTION请求。 至于什么复杂跨域和简单跨域这个问题，我觉得是题目出错了，跨域就跨域了还复杂和简单就很离谱。 同源策略如果是二级域名会不会影响 会产生跨域 react class 与 hook 区别 官方文档原话：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 js 各种判断类型的所有方式，综合考 请看参考解析 instanceof 的缺点 用instanceof检测的时候,只要当前的这个类在实例的原型链上(可以通过原型链__proto__找到它),检测出来的结果都是true，不够准确 基本数据类型的值是不能用instanceof来检测的 console.log(1 instanceof Number);//->false ts 的优缺点 TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 使用TS的优点： 增强代码的可读性和可维护性，强类型的系统相当于最好的文档，在编译时即可发现大部分的错误，增强编辑器的功能。 强大的类型系统，包括泛型 TypeScript代码可以按照ES5和ES6标准进行编译，以支持最新的浏览器。 支持静态类型 有活跃的社区，大多数的第三方库都可提供给 ts 的类型定义文件，完全支持 es6 规范 使用 TS 的缺点： 增加学习成本，需要理解接口（Interfaces）和泛型（Generics），类（class），枚举类型（Enums） 短期增加开发成本，增加类型定义，但减少维护成本 ts 集成到构建流程需要一定的工作量 和有些库结合时不是很完美 你平时如何使用 ts？ 这种问题我觉得主观性太大，个人根据实际情况回答即可。 你怎么看 ts 的泛型？ 泛型的本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和方法的创建中，分别成为泛型类，泛型接口、泛型函数 TypeScript 中不建议使用 any 类型，不能保证类型安全，调试时缺乏完整的信息。 TypeScript可以使用泛型来创建可重用的组件。支持当前数据类型，同时也能支持未来的数据类型。扩展灵活。可以在编译时发现你的类型错误，从而保证了类型安全。 使用泛型可以创建泛型函数、泛型接口，泛型类 使用 ts 如何只继承一部分元素 类：子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承 我记得ts可以使用 keyof 来实现继承接口的一部分元素内容 let const var 的区别 Var存在变量提升机制，使用var关键字声明的变量，都会被提升到该作用域的最顶部 let声明和var声明用法是一样，都是定义变量，使用let声明的变量没有var那样的变量提升，块级作用域，let声明的变量只在当前作用域中有效，禁止重复声明。 const声明指的是常量，常量就是一旦定义完就不能修改的值。块级作用域，常量定义必须初始化值，如果不初始化值就会报错 虽然const变量不能修改指针，但是可以修改值，比如我们定义一个对象，我们就可以修改对象里的属性值，但是不可以重写整个对象 const person = { name: "蛙人", age: 23 } person.age = 18 // 没问题 person = {} // 报错 不能修改对象指针 var、let、const最大区别： var在全局作用域声明的变量有一种行为会挂载在window对象上，它会创建一个新的全局变量作为全局对象的属性，这种行为说不定会覆盖到window对象上的某个属性，而let const声明的变量则不会有这一行为。来看下面例子。 var value1 = "张三" let value2 = "李四" const value3 = "王五" console.log(window.value1) // 张三 console.log(window.value2) // undefined console.log(window.value3) // undefined 注意暂时性死区只有在同一个作用域才会产生，具体看下面两段代码 console.log(typeof value) //报错 let value = "蛙人"

console.log(typeof value) // "undefined" if (true) { let value = "蛙人" } 说说 var 和 const 的特殊情况 var 和块级作用域的函数同名会触发浏览器的行为不统一，const 声明失败会触发永久性死区 二面 monorepo + sudmodule 如何绑定私有 gitlab 与 github 的关联 为什么要用 monorepo 架构？ 你认为的 monorepo 在你的项目中的优势是啥？ 看你使用过 qiankun 你认为微前端到底是为了解决什么问题而生，用在你这的场景合适吗？ 你是因为什么场景需要解决微应用 css 污染和挂载问题？（扯到 shadow dom ） 参考解析 问 shadow dom 的浏览器事件的冒泡机制 参考解析 你认为微前端的未来是什么样的？ 主观题，不放置答案了。 如果让你优化现有的架构模式，你会怎么做？ 三面 三面实际难度很高，重点深挖项目，此处不包含项目问题。 你认为自己最大的优势是什么？并举例证明自己的观点。 webpack 中 loader 在哪个 hook 触发的？ webpack 调用loader 的时机在触发compilation 的buildModule 钩子之后 loader 实际上是怎么 run 的？ 请看参考解析 loader 和 plugin 本质区别是啥？ 文档原文：While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程。本质是一个nodejs 函数模块， 传入resource file 或者sourceMap json 结果，读取文件，将文件处理为String 或者 Buffer 格式，然后传给compiler 或者下一个loader。 plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。本质是能够参与到compilation process的自定义函数，通过hook到每一个编译（compiler）中，触发关键事件或处理。 plugin 可以干涉 webpack hook 中的 run 这个钩子吗？ 不可以干涉

你写了什么 webpack plugin，说说为什么要写。 聊跨段引擎实现 聊我未来的规范和想法