CVTE（广州视源）前端三年社招面经，6、7月份本3最新前端社招面经

一面（视频）

没有及时记录问的问题，我尽量去回忆一些吧，好些记不清了，反正主要看面试官面试时临时想问些啥问题就问些什么吧，还是需要不断拓展自己的知识点吧，这样才能问有所答。
一面大概30多分钟问了如下问题：

1. 在浏览器上输入URL到看到页面经历了哪些过程？（内容太多不想打字，网上有自己看）
2. 说一下浏览器事件循环机制？（内容太多不想打字，网上有自己看）
3. 微任务、宏任务有哪些？（微：Promise.then, mutationObserve,Process.nextTick(node.js独有)，宏：script,setTimeout,setInterval,setImmediate(node.js独有), I/O操作，UI渲染）
4. 说下对弹性布局的理解？（就是flex布局，flex父容器中的子元素通过flex-grow，flex-shink，flex-basis属性可以随着父容器宽度大小自适应，也就是能够实现兼容不同分辨率屏幕）
5. 解释下flex：1？（flex-grow，flex-shink，flex-basis 缩写）
6. 父容器flex布局，有三个子元素，设置flex: 0 0 auto；显示效果什么样？（不显示，子元素宽度都为0）
7. 实现三栏布局有哪些方式？（flex，float，定位，网格……）
8. 使用flex布局使元素垂直居中？（align-items：center）
9. 说下BFC，解决了什么问题以及怎么触发BFC？（不想打字，自己搜学习）
10. Promise几种状态及如何更改？（pending,fullfilled,rejected; resolve(),reject()）
11. Promise解决了什么问题？（回调地狱）
12. 怎么将多个异步操作进行按顺序执行的同步化？（Promise链式调用，或async和await结合使用）
13. 怎么中断Promise执行？（可以通过内部抛出错误：throw new Error(‘’)）
14. webpack打包流程？（自己搜学习）
15. ……

其它问题记不清了，一面问的都是些基础，二面有些难度，问了很多底层原理。

二面（视频）

因为个人技术栈是vue、uniapp，react只临时看过基础文档，做过两个月的react项目业务模块开发，三年主要做的都是vue项目，所以一面二面面试官都没问react框架，而且面试的公司做的项目好像都是react，因为vue框架知识一点都没问我，最后反问面试官，有问贵公司的项目用的是什么框架，说都是用react，soga！
二面大概60分钟问了如下问题：

1. 聊了下react项目，用的是类组件还是函数组件写的。（介绍了下项目，回答了面试官的问题，有说react会些基础知识，然后面试官说就不问我react相关问题啦）
2. 主要问了很多项目中的一些技术实现，像项目中的登录模块怎么处理的，具体流程，还有token存在哪里，为什么不存在cookie
3. 搭建项目时做了哪些配置，说了下具体配置，webpack配置介绍的多，然后有问我loader和plugin区别？
4. 问我loader加载资源的原理了解过吗？（没了解，emm……）
5. 问我gzip压缩原理了解吗（没了解，emm……）
6. 让我介绍下项目里面axios二次封装做的哪些东东以及为什么这样做？
7. js发送请求和浏览器发送请求是同一个线程吗？（我讲了下自己的理解，不知道对不对：无论axios还是ajax等接口请求底层都是对XMLhttpRequest对象的封装，这个对象是浏览器都自带的用来发送请求，所以是同一个线程。）
8. 怎么中断发送出去的axios请求？（没遇到这种场景也没去了解，然后说不清楚………此处我想抽死自己）
9. 个人简历有说封装过组件，那你封装过哪些复杂度高的组件？（说了一个商品列表排序、布局切换、商品上划加载更多的组件，面试官说这有难度吗？emm……我说确实没什么复杂度，然后相视一笑…………）
10. 你前面有说配置sourceMap在生产环境不去生成，那你怎么在线上网站出问题时去调试找出代码中的错误呢？（我们项目配置的有生产环境，可以看生产数据，所以有问题可以本地调试，但面试官不满意我这种做法，他说有些隐私数据本地没法看也就没法进入对应页面调试，我想反驳他，但是又没敢说，因为我做了这么多项目，既然本地配置了生产环境，所以生产环境接口数据都是有权限看的，不管隐不隐私的，不知道他为什么这么想，可能是他也没做过我这种本地配置生产环境进行调试，所以对我这种方法不了解）
11. 然后问我有没有其他方法调试生产环境？（我说浏览器控制台有个add source map功能也可以自己添加源码映射文件去看源码调试，比较复杂，具体方法记不清了。）
12. 有没有做过网站的性能监控，或者说监控网站的报错？（没有，没了解过emm……）
13. ……
14. 其它问题记不清了，然后给了我一个链接，让我在线编程……emm，慌得一批，第一次遇到手敲代码的公司（主要还是自己不喜欢跳槽，没什么面试经历），而且别人一直看着，屏幕共享，给我15分钟时间来做，当时紧张的要命，所以你懂的，这道编程题也没做出来……编程题如下：

所有任务同时执行；有依赖需要相继执行；给出最后执行时间，例如下面这些任务执行总时间为 7，补全getTime函数
(注：虽然所有任务都是同时执行，但有限制，有些任务是得dependency依赖的任务完成后才能执行。)

const tasks = [
    {
        name: "task2",
        time: 2,
        dependency: ""
    },
    {
        name: "task3",
        time: 3,
        dependency: "task1"
    },
    {
        name: "task4",
        time: 3,
        dependency: "task3"
    },
    {
        name: "task5",
        time: 4,
        dependency: "task2"
    },
    {
        name: "task1",
        time: 1,
        dependency: ""
    }
]
// 需要完成
function getTime(tasks) {
    const time = 0
    return time
}

const time = getTime(tasks)

原题是ts写的，没学过ts，搞得我有点不知所措，因为一些语法没见过，这道题被我转成js啦，下面是我面试完后自己花了半个小时解决的……请原谅我思维过于迟钝，对于我来说问题都能解决，就是效率太低。当时也有和面试官说过大致思路，需要递归才能解决，就是短时间代码写不出来。
下面是我的一种解答方法:

function getTime(tasks) {
	const tL = []
    const getTime = name => {
        let totalT = 0
        tasks.some(item => {
            if(item.name === name) {
                totalT += item.time
                if(item.dependency) {
                    totalT += getTime(item.dependency)
                }
                return true
            }
        })
        return totalT
    }
    tasks.forEach(item => tL.push(getTime(item.name)))
    return Math.max(...tL)
}
// 经过验证，输出结果是7，没有问题。

面试总结：路漫漫其修远兮，吾将上下而求索！加油！