58前端社招一二面面经
转行工作一年，裸辞的寒冬中菜鸟，第一次在牛客写面经，瑟瑟发抖。。。之前转行也看了牛客的面经，因此来回馈一波吧(不知道有没有帮助。。。)
概述：上周五面试，一共面了3个小时左右，两轮技术面(从两点到五点，我午饭还没吃。。。)
第一轮，是个很nice的女面试官(她下来接我，我一开始还觉得58的hr真好看呐)，好像是她把我简历捡起来的(感谢~)
主要问了下面一些问题
1.基础css题，实现 导航栏 + 侧边栏 + 内容栏，其中侧边栏固定宽度，内容栏中有一个水平垂直居中的div；写出你认为可以的解决方案，以及每种解决方案带来的问题，以及兼容性
两栏布局，使用float，双飞翼和圣杯；侧边栏使用absolute或者float，内容栏使用margin-left；使用BFC不与float box 重叠的原理实现自适应，侧边栏float，内容栏使用 overflow: hidden触发BFC；使用flex(固比定律，一个固定宽度，一个自动占余下的宽度)；使用table；使用grid(固定宽度+auto)；
2.事件带理，通用写法
function on(parent, className, eventName, cb) {
parent.addEventListener(eventName, function (evt) {
var target = evt.target;
var currentTarget;
while (target) {
if (target.tagName === 'BODY') break; // 找到body还没找到(说明点击的位置已经是目标元素的父级了)
if (target.getAttribute('class') === className) {
currentTarget = target;
break;
} else {
target = target.parentNode;
}
}
if (currentTarget) {
cb.apply(currentTarget);
}
});
}
3.vue生命周期 blabla。。。
4.vue状态管理vuex
现代前端框架主要解决的是 事件 -> 状态 -> UI 将传统前端在两个过程的代码剥离出来，变得更加容易维护；声明式渲染解决了 状态与UI 同步的这个过程，从而使我们不需要因为状态发生改变去写大量的命令式改变 dom 的代码；而状态管理类库，解决的主要问题是 将事件源映射到状态变化这个过程从视图组件中剥离出来， 组织好这一部分的代码，在组件外部进行状态的管理，具体表现就是一个全局的数据中心 store 配置，每个组件进行更新的时候就通知数据中心，数据中心改变后，再去触发每个调用它的组件进行更新(这种更新是响应式的)；几个核心概念就是 mutations 里的方法可以直接 mutate store 中的状态，并且mutation过程必须同步的，需要通过commit去触发；而actions则允许异步的操作，通过commit去触发mutation，达到间接修改 store 的目的，action本身需要通过 disptch去触发。
5.vue如何如何实现响应式
属性带理vm.xxx -> options.data.xxx，编译阶段收集依赖 + 观察者模式 + Object.defineProperty的getter中添加观察者，setter发布更新；vue2.x的虚拟dom，通过与上一次缓存的虚拟dom进行 diff 差异对比，最小化更新(一个组件一个观察者，比vue1.x的粒度粗一些，节省了性能)
// ...
后面几个是和我的工作经历比较相关的
6.使用 three.js 搭建场景，主要需要用到哪些
scene，camera，renderer三个部分
通过渲染器 renderer联系 scene和camera， renderer.render(scene, camera)
7.实现通过一个render渲染多个不同场景(类似监控)
我说，我只实现过多个render多个场景， 或者一个render 两个camera实现小视图，但没有说做到一个render渲染多个场景的
后来回去查了下，好像其实用到的api也都差不多... // renderer.setScissor
sceneL = new THREE.Scene(); sceneL.background = new THREE.Color(0xfffeee); sceneR = new THREE.Scene(); sceneR.background = new THREE.Color(0x000fff); renderer.setScissorTest( true ); renderer.setScissor( 0, 0, window.innerWidth / 2 , window.innerHeight ); renderer.render( sceneL, camera ); renderer.setScissor( window.innerWidth / 2 , 0, window.innerWidth, window.innerHeight ); renderer.render( sceneR, camera );8.空间中有一些点，camera一直在转动(简化为y轴方向转动)，投影到屏幕，距离屏幕中心最近的点是空间中的哪个点
这个一点思路都没有
9.同一尺寸的物体，在不同设备的屏幕总是能居中完整显示，通过算法计算出不同设备上camera的位置
这个大概讲了一些思路
11.除了加载obj，而是直接使用three.js搭建过什么模型吗
12.three.js 优化
13.问你一个简单的吧，点击事件拾取目标点的时候，是如何把界面二维坐标转化成三维坐标的
unprojectVector
然后和我聊了聊，之前干建筑师的时候，主要干哪些事情(是的，转行前我是一个一级未注册的建筑师。。。)，为什么转行啊，然后对未来有什么规划啊；有没有接触过后端？nodejs，这个也是js啊，其他语言呢？能不能接受进来后写点后端。。。，可以
说我和他们这里很合适(后面发现不是这样的，因为被发了好人卡，凉了。。。)，但是因为我之前base比较低，会顾虑到进来可能会被应届生倒挂，存在不稳定因素(跳槽)，希望我能年终涨完薪再过来，但是我裸辞了啊。。。；我是工作一年转行的，然后在中科院信工所呆了一年又跳槽，相当于一年跳一次。。。hr可能会比较关注这个吧。。。然后又提了下，58校招待遇比社招好，啥的
然后问我手上有没有offer啊，然后还要面哪几家啊。。。
第二轮，是个很帅的男面试官，是第一轮面试官的领导
1.公司做 3D 为什么用 three 而不是其他(发现关于这类技术选型的问题，面试官都比较关注，另一家也问了。。。)
可能是因为 three 是基于webgl的封装，性能比较好吧，瞎说的。。。我才接触了几个月，根本没关注过这些
2.项目中遇到的难点，以及如何解决的，二维变三维的过程中的技术难点
。。。此处，瞎掰了半个小时左右吧
3.在白纸上画了一条抛物线，两个坐标点，叫我写一个实现抛物线的函数
blabla，你思路是对的，手写出来...
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
// 获取 2d 绘图环境
var context = canvas.getContext('2d');
// 配置颜色等画图参数
context.stokeStyle = '#ff0000';
context.lineWidth = 2;
function getCoordinate_y (x) {
return 0.01 * x * x;
}
var startP = {
x: 0,
y: 0
};
var endP = {
x: 100,
y: 100
}
function move (startP, endP, delay) {
var increment_x = (endP.x - startP.x) / delay; // 每ms的增量
var movePoint = {
x: startP.x,
y: startP.y
};
function render () {
if (movePoint.x >= endP.x) {
return;
}
// 初始位置
var p1 = {
x: movePoint.x,
y: movePoint.y
};
// 移动距离
movePoint.x += increment_x * 1000 / 60;
movePoint.y = getCoordinate_y(movePoint.x);
// 结束位置
var p2 = {
x: movePoint.x,
y: movePoint.y
};
console.log(movePoint.y);
drawLine(context, p1, p2);
requestAnimationFrame(render);
}
function drawLine (ctx, startP, endP) {
ctx.moveTo(startP.x, startP.y);
ctx.lineTo(endP.x, endP.y);
ctx.stroke();
}
render();
}
move(startP, endP, 3000);
} 4.css画线 border，竖线呢？还是border；那斜线呢，我说有一个transfore skew 属性，然后canvas，svg啥的都可以画。。。然后他补充transfore rotate
5.场景中有个小车，通过键盘实现小车移动
思路，改变车的坐标；通过 tween.js做动画效果，然后我又解释了下 tween.js ，然后面试官说知道知道，然后问我如何监听键盘，keyCode。。。
记得的就是这些吧
然后聊了聊，为什么转行啊，住的离58近不近啊？我说现在在xxx，然后面试官的反映是，啊，这么远？。。。问了有没有收到offer，有，xxx，期望的薪资啊，我说了xxx，然后问我那边给了多少啊，自己的想法啊等等
然后有什么要问他的，问了他们如何实现 vr 的，贴图还是模型。
面完第二轮后，第一面的女面试官来找我了。和我聊了聊，有哪些想问的；我问了下前端工程化，然后 code review，
告诉我大老板周五出去开会了，不能给我接着面了。。。又聊了许多，反正给我的感觉是挺想要我的，叫我后面其他家的面试尽量拿一个高的offer，可以拿来和hr谈价的资格...告诉我，给了我一个比实际高一些的面试评级(为了好向hr要价，因为我现在的工资实在太低了，不涨个50%都不好意思说出来的那种。。。)
最后，走的时候，告诉我下周(就是这周...)会约交叉技术面试，叫我好好准备，拿一个好的技术评级
这几天抱着期待的心情问了为啥这边还没有安排交叉面试(另一家已经催入职了。。)，然后就被发了好人卡，总之意思就是，她觉得我背景ok，也很有潜力和学习的能力，很希望招我进去，但是由于实践项目经验的欠缺，和老板谈了之后，不好发offer(发高了对其他同事不公平，发普通offer又。。。)，所以即使她想招我进去，也困难重重，会遇到hr的挑战，老板那里不好处理
但最后总结下来，就是技术太菜，招我进去，会冒一定的风险，要是我不能胜任，她那边也不好办吧。。。反正这些是我听了之后的想法，总之，还是需要加强自身技术的锻炼，打铁还需自身硬，只有技术过硬，才不会让面试官左右为难...也会对这些offer更加云淡风轻
另外，还有就是可能，临近年底了，他们肯定是想等过完年再看看合适的候选人吧，毕竟像我这种年前裸辞跳槽的还是少见。。。倒是另一家公司挺有诚意，面完之后就说了offer意向，然后又帮我多申请了点薪资。。。
https://m.nowcoder.com/discuss/311389
投递小红书等公司9个岗位 >