58同城前端社招面经

58前端社招一二面面经

图片[1]-58同城前端社招面经 - 程序员知识精选-程序员知识精选

第一轮,是个很nice的女面试官(她下来接我,我一开始还觉得58的hr真好看呐),好像是她把我
简历捡起来的(感谢~)
主要问了下面一些问题
1.基础css题,实现 导航栏 + 侧边栏 + 内容栏,其中侧边栏固定宽度,内容栏中有一个水平垂
直居中的div;写出你认为可以的解决方案,以及每种解决方案带来的问题,以及兼容性
两栏布局,使用float,双⻜翼和圣杯;侧边栏使用absolute或者float,内容栏使用margin-
left;使用BFC不与float box 重叠的原理实现自适应,侧边栏float,内容栏使用 overflow:
hidden触发BFC;使用flex(固比定律,一个固定宽度,一个自动占余下的宽度);使用table;使
用grid(固定宽度+auto);
2.事件带理,通用写法
1 function on(parent, className, eventName, cb) {
2
3 parent.addEventListener(eventName, function (evt) {

(^4) var target = evt.target;
(^5) var currentTarget;
(^6) while (target) {
if (target.tagName === 'BODY') break; // 找到body还没找到(说明点击的位
置已经是目标元素的父级了)
7
(^8) if (target.getAttribute('class') === className) {
9 currentTarget = target;
10 break;
11 } else {
(^12) target = target.parentNode;
(^13) }
(^14) }
15
(^16) if (currentTarget) {
17 cb.apply(currentTarget);
18 }
19 });
20
(^21) }

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

1 sceneL = new THREE.Scene();

(^2) sceneL.background = new THREE.Color(0xfffeee);
(^3) sceneR = new THREE.Scene();
(^4) sceneR.background = new THREE.Color(0x000fff);
5
6 renderer.setScissorTest( true );
7

1.空间中有一些点,camera一直在转动(简化为y轴方向转动),投影到屏幕,距离屏幕中心最
近的点是空间中的哪个点
这个一点思路都没有
1.同一尺寸的物体,在不同设备的屏幕总是能居中完整显示,通过算法计算出不同设备上
camera的位置
这个大概讲了一些思路
11.除了加载obj,而是直接使用three.js搭建过什么模型吗
12.three.js 优化
13.问你一个简单的吧,点击事件拾取目标点的时候,是如何把界面二维坐标转化成三维坐标
的
unprojectVector
然后和我聊了聊,之前干建筑师的时候,主要干哪些事情(是的,转行前我是一个一级未注册的
建筑师。。。),为什么转行啊,然后对未来有什么规划啊; 有没有接触过后端?nodejs,这个
也是js啊,其他语言呢?能不能接受进来后写点后端。。。,可以
说我和他们这里很合适(后面发现不是这样的,因为被发了好人卡,凉了。。。),但是因为我
之前base比较低,会顾虑到进来可能会被应届生倒挂,存在不稳定因素(跳槽), 希望我能年终
涨完薪再过来,但是我裸辞了啊。。。;我是工作一年转行的,然后在中科院信工所呆了一年又
跳槽,相当于一年跳一次。。。hr可能会比较关注这个吧。。。然后又提了下,58校招待遇比
社招好,啥的
然后问我手上有没有offer啊,然后还要面哪几家啊。。。
第二轮,是个很帅的男面试官,是第一轮面试官的领导
1.公司做 3D 为什么用 three 而不是其他(发现关于这类技术选型的问题,面试官都比较关注,
另一家也问了。。。)
可能是因为 three 是基于webgl的封装,性能比较好吧,瞎说的。。。我才接触了几个月,根
本没关注过这些
2.项目中遇到的难点,以及如何解决的,二维变三维的过程中的技术难点

8 renderer.setScissor( 0, 0, window.innerWidth / 2 , window.innerHeight );
9 renderer.render( sceneL, camera );
10
renderer.setScissor( window.innerWidth / 2 , 0, window.innerWidth,
window.innerHeight );

11

(^12) renderer.render( sceneR, camera );

。。。此处,瞎掰了半个小时左右吧

3.在白纸上画了一条抛物线,两个坐标点,叫我写一个实现抛物线的函数

blabla,你思路是对的,手写出来...
1 var canvas = document.getElementById('canvas');

(^2) if (canvas.getContext) {
(^3) // 获取 2d 绘图环境
(^4) var context = canvas.getContext('2d');
5
(^6) // 配置颜色等画图参数
7 context.stokeStyle = '#ff0000';
8 context.lineWidth = 2;
9
(^10) function getCoordinate_y (x) {
(^11) return 0.01 x x;
(^12) }
13
(^14) var startP = {
(^15) x: 0,
16 y: 0
17 };
18 var endP = {
(^19) x: 100,
(^20) y: 100
(^21) }
(^22) function move (startP, endP, delay) {
(^23) var increment_x = (endP.x - startP.x) / delay; // 每ms的增量
24 var movePoint = {
25 x: startP.x,
26 y: startP.y
(^27) };
28
(^29) function render () {
(^30) if (movePoint.x >= endP.x) {
(^31) return;
(^32) }
33
34 // 初始位置
35 var p1 = {
(^36) x: movePoint.x,
(^37) y: movePoint.y
(^38) };
39
(^40) // 移动距离
41 movePoint.x += increment_x * 1000 / 60;
42 movePoint.y = getCoordinate_y(movePoint.x);

1.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谈价的资格...告诉我,给了

43
44 // 结束位置

(^45) var p2 = {
(^46) x: movePoint.x,
(^47) y: movePoint.y
(^48) };
(^49) console.log(movePoint.y);
50
51 drawLine(context, p1, p2);
52
(^53) requestAnimationFrame(render);
(^54) }
55
(^56) function drawLine (ctx, startP, endP) {
(^57) ctx.moveTo(startP.x, startP.y);
(^58) ctx.lineTo(endP.x, endP.y);
59 ctx.stroke();
60 }
61
(^62) render();
(^63) }
64
(^65) move(startP, endP, 3000);
(^66) }

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
程序员吾非同的头像-程序员知识精选

昵称

取消
昵称表情代码图片