70场面试，复盘我遇到的有趣问题（八）

停更了几天，这几天开始准备做实验忙毕业的事，很焦虑。今天把灵犀互娱二面剩下的问题解决一下，顺便再看几个顺丰二面的问题。

1.（灵犀互娱二面）如果要实现一个css引擎（选择器，添加样式等），是否有思路

这个问题当时一听到再结合前面的难度，整个大脑都有点麻了。当时就很磕巴的回答了要解析模板，获取绑定的节点或类等等，然后用将选择器的属性用js添加到节点上。但实际上，这个也是整个渲染引擎的原理。原理很多，贴一个大佬手把手实现浏览器引擎的帖子，细节部分大家可以看看（https://zhuanlan.zhihu.com/p/106850611）

这是一个开放性问题，面试官也知道作为应届生你基本不可能知道这个东西的原理，主要是是考你思考的能力和思路。那么在面试问到这个问题的时候要怎么回答呢，我自认为很难回答全面，但是也不至于没话可说。下面从应对的思路讲一下我的想法。

首先CSS引擎应该要识别多种选择器类型，那么首先就需要有一个解析器去把他解析成一个方便转换的对象。这个解析器需要去识别每个选择器是什么类别，比如是类选择器还是ID选择器，所以这个对象中需要有一个selectors属性来存放这些选择器（选择器名和选择器类型）。其次，CSS可能有多个选择器选择了同一个元素，怎么确定最后的样式？对，层叠，所以CSS引擎需要支持层叠，并且需要能够计算选择器的权重（复习一下这俩知识点！！！）。然后计算出来之后，这些样式的键值对也要被放进那个对象中，所以这个对象中另外一个属性就是declarations，转为{name: 'xxx', valuie: "xxx"}的形式。最后就通过JS的选择元素方法，为所有的符合的元素添加上样式。

这就是最简单的一个思路，当然还有选择器的链式调用，嵌套关系等等，大家如果想到也可以丰富自己的回答。重点不是多全面，重点是，遇到这种完全没见过的题，但是开放问题的时候，一定要多想，不能完全没话说哇。

2.(顺丰二面)子应用接入如何解决跨域的问题

这个问题是只微前端开发时主子应用不同域的情况。在我实习的时候，主子应用是同域的，所以没遇到过这个问题。下来之后查了一下解决办法：

如果是本地开发，跨域的解决方案：

如果是线上，也就是生产环境的跨域问题，可以在Nginx中进行配置，在子应用上添加nginx服务，配置nginx跨域，这样主应用就可以跨域访问子应用了。

配置方法：

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

其实重点就是CORS处理跨域，设置请求头Access-Control-Allow-Origin，允许子应用接受所有跨域请求。至于为什么这么配置：https://segmentfault.com/a/1190000012550346

3.（顺丰二面）微前端怎么加载第三方资源

当时没理解他的意思，现在想了下，应该是微前端如何去加载子应用的资源，找到的资料大多以qiankun为例。

①HTML解析

首先，当我们配置子应用的 entry 后，qiankun 会去通过 fetch 获取到子应用的 html 字符串（这就是为什么需要子应用资源允许跨域）。拿到 html 字符串后，会调用processTpl方法通过一大堆正则去匹配获取 html 中对应的 js（内联、外联）、css（内联、外联）、注释、入口脚本 entry 等等。processTpl 方法会返回我们加载子应用所需要的四个组成部分：