面经详情

前言：面试虽然通过了，但是说好的周一能给到offer，后来说老板开会，说周二上午，结果继续拖，所以总感觉让人怪怪的，然后用特殊的关键词百度了这家公司，结果让我很不安，总感觉快不敢去了。 面试经过是微软内部工作人员通过Microsoft teams远程视频面试的（说实话也看不到他们的环境，真假现在心里真犯嘀咕），下面是面试的过程(面试过程还行，感觉不错，就是百度之后，现在心里不踏实)：最近经历了苏州园区微软中国的一次面试，一共两轮，两个面试官轮流进行面试，两个面试官都很友好，问的问题我答不出来，就会换个简单的，如果答错了，会一步一步耐心的引导，直到你的答案正确为止，这是我从踏入社会以来最最喜欢的一次面试。 详述一下我的面试过程，第一个面试官主要负责面试算法，第一个问题是二叉树遍历，我不会，就提了最简单的冒泡排序，我由于紧张外加好久没写遍历算法了，冒泡排序都写错了，在面试官的耐心引导写出来了，再接着的是现场写代码，根据给的图片完成一个简单响应式页面：左边表格，右边2张竖着排列的卡片，要求在浏览器缩放到一定尺寸时变成1排，即两张卡片到表格下方；这个我自然很容易的写出来了，flex布局实现； 再接着问怎么把一个div居中定位，我的说法是position的绝对和相对定位，然后left:50%; transform:translate(-50%,0);还有flex布局的justfy-content:center;（面试结束后我百度了这个，结果是div设置好宽高后，margin:0 auto 就能实现水平居中了，如果要实现垂直居中，那需要设置好html,body宽高都100%，margin和padding都是0，然后加上position: relative;top: 50%;transform: translate(0%,-50%);```js水平和垂直居中一个div的css实现方案 html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .box{ width:200px; height: 200px; background: red; margin: 0 auto; position: relative; top: 50%; transform: translate(0%,-50%); }```然后有完了null和undefined的区别，还问了 foreach 和 map 的区别。 接下来是第二个面试官，主要面试写代码，在前面的面试官的那个布局基础上，表格上面加个输入框，加上对表格的过滤功能，即使用filter进行动态过滤表格数据，并再右侧的一张卡片中加上checkbox组，checbox组的勾选项要和表格中当前的过滤数据对应上，即我的表格里有一个地址栏，如果我过滤地址栏的几行数据，那么右侧的复选框组也要对应勾上这些选项，这个我也做出来了，主要就是要求用跟表格同一个数据源来同步两个组件的内容；然后又问了一个开放性问题：一个内部搜索引擎要实现这么一个需求，搜索页的快照数据要能记录下用户点击链接的顺序、次数等操作数据，并且进入链接页面后要记录下用户实际的浏览时间，因为用户可能会一下子以新页签的形式打开很多个页签，但是每次只可能浏览一个页面，那么怎么才能记录下这个用户真实浏览一个页面的时长呢？ 前面一个记录用户的点击连接的顺序和次数比较容易，就是记录下连接信息的id，后面一个记录用户浏览页面时长，我一开始卡在了怎么才能知道用户在浏览页面，面试官看出了我的疑问，就告诉了我DOM的一个基础知识，dom里有一个基础属性叫做hiden，hiden=false的时候，就是浏览器页面的页签置顶的时候，也就是说用户正在浏览这个页面，于是我就给出了方案，监听dom的hiden属性，每次这个hiden属性为false的时候，用一个数组（数组中是json对象成员）记录下这个开始浏览的时间戳，当这个hiden=false是记录下结束时间错，在用户没有关闭这个页面的情况下，这个数组遍历一直会如此累加json对象成员，直到用户关闭页面，那么就可以计算出这个数组中所有json对象的开始和结束时间戳差值的求和，这就是一个用户真实浏览一个页面的时长了，面试官说我这个达到点上了，他们现在就是用这种方案去实现的）。