2020初级前端面试题-附加

478 阅读12分钟

二面和一面不同,涉及的点比较多,主要包括:技术面、项目经理面、hr面。有些知名互联网公司会将其分为三面、四面,但考虑到大部分互联网公司最多二面,我就将部分重要内容整合在一起。

二面问题的范围比较宽广,不需要你像一面那样回答特别详细,但你一定都要有涉猎过。一般好的面试官都会按照你简历中提到过的点进行询问,所以自己简历中涉及到的知识点一定要用心准备。当然,如果面试官问不按套路出牌,问到你从来都没有涉及过的领域,切忌不懂装懂。直接说自己没有了解过,问面试官有推荐的资料学习吗即可。

项目经理

可能是项目经理也可能是技术总监,但关注的都是你的学习能力,及项目把控能力,不会像一面那样问些细碎的知识点

1. 最近项目中遇到什么问题,及解决方案?

面试前自己一定要准备一波,不然面试的时候自己大脑中会一片空白。如果觉得自己解决的问题都没什么技术含量,那可以说项目中其他同事解决的问题,或者是自己在网上看到的问题。但前提是自己一定要搞明白,以后自己遇到了也能解决。

关于移动端开发中遇到的坑

  • 滚动穿透问题
    滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容。
    解决方案:position: fixed
body.modal-open {

    position: fixed;

    width: 100%;

}

这种方式同样当弹出层弹出时滚动条会丢失,所以还需要使用js来保存滚动条的位置,在关闭弹出层时将滚动位置还原;

var ModalHelper = (function(bodyCls) {

  var scrollTop; // 在闭包中定义一个用来保存滚动位置的变量

  return {

    afterOpen: function() { //弹出之后记录保存滚动位置,并且给body添加.modal-open

      scrollTop = document.scrollingElement.scrollTop;

      document.body.classList.add(bodyCls);

      document.body.style.top = -scrollTop + 'px';

    },

    beforeClose: function() { //关闭时将.modal-open移除并还原之前保存滚动位置

      document.body.classList.remove(bodyCls);

      document.scrollingElement.scrollTop = scrollTop;

    }

  };

})('modal-open');
  • 移动端输入框被键盘挡住问题
    在做一个类似聊天窗口的界面,测试的时候发现在部分安卓机中输入框被完全遮挡住,踩这个坑时在网上找了好多资料,好像都没有一套完整的解决办法,先看其中一种解决办法,可以解决绝大数安卓机上面的问题:
if(/Android/.test(navigator.appVersion)) {

   window.addEventListener("resize", function() {

     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {

       document.activeElement.scrollIntoView();

     }

  })

}

即在安卓机中通过监听当窗口resize时,判断当前获得焦点的元素是否为输入框,再调用该元素的scrollIntoView(),即将该元素展示在当前窗口的可视区域。由于只有scrollIntoView被各浏览器均支持,所以这个方法最为常用。 使用这段代码之后,在微信或者其他浏览器测试时有效果,但因为是需要内嵌在自家APP上,使用这段代码一直没有解决输入框被挡住的问题,最后测试才发现,APP内置浏览器在聚焦输入框弹出键盘根本没有触发窗口的resize事件。

另一种方法:
通过获取输入框焦点将输入框定位到窗口略高于输入框的位置,在失去焦点键盘弹回时再恢复到底部,于是通过这种方式处理,暂时比较暴力的解决了在安卓上该APP上输入框被挡住的问题,这种方法显然是不完美的,比如由于无法监听resize事件,而且使用的键盘高度不固定,所以只能大概的将高度设置保持在屏幕一半偏上一点。保证绝大数情况下输入框在键盘之上显示。

  • 移动端触摸滑动总是不顺畅
    只需要给需要滑动的盒子加上 -webkit-overflow-scrolling: touch; 样式即可

  • 移动端100~300ms的点击事件延迟问题
    由于移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击。
    现有的解决方案:FastClick
    FastClickFT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。

2. 最近有学习什么新技术?

此题主要是想考查你平时爱不爱学习,对新技术有没有一定的敏感度。不用你有多深的领悟了解即可,但千万不能说没有。如果真的没有,就自己了解一下

3. 平时自己逛什么社区?

主要是想了解你平时都是通过哪些途径学习,哪些娱乐社区就别说了,说一些前端方面的社区,像掘金等

4. 你对加班怎么看?

说自己真实看法就好了,如果你说自己绝对不能加班,那就是你自己不想要这个offer

如果是工作需要我会义不容辞加班,我现在单身,没有任何家庭负担,可以全身心的投入工作。但同 时,我也会提高工作效率,减少不必要的加班

5. 你还有什么想要了解的吗?

别问工资、五险一金啥的,这是项目经理不是hr,问一些技术团队方面的问题,这对于你以后的工作很重要

咱们公司晋升机制是什么样的?

框架方面

只是部分的问题,希望大家能由点及面好好准备自己框架方面的知识。我建议大家准备一门框架就可以了,大体都相同,精通一门就好了。别vue、react 都是半桶水,还是要深入的去了解。

1. 单页面应用和多页面应用的优缺点?

单页应用

优点:页面切换快

因为页面每次切换跳转时,并不需要做html文件的请求,这样就减少了http发送

缺点:首屏时间慢,SEO差

因为首屏时需要请求html,同时还要发送js请求,两次请求回来了,首屏才会展示出来。相对于多页应用,首屏时间慢。

SEO效果差,因为搜索引擎只认识html里的内容,不认识js的内容,而单页应用的内容都是靠js渲染生成出来的,搜索引擎不识别这部分内容

多页应用

优点:首屏时间快

因为当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。

搜索引擎优化效果好

搜索引擎在做网页排名的时候,要根据网页内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在Html中,所以这种多页应用,seo排名效果好。

缺点:页面切换慢

因为每次跳转都需要发出一个http请求,如果网络比较慢,在页面之间来回跳转时,就会发现明显的卡顿。

2. 如何解决单页及多页面各自缺点的问题

服务端渲染

3. 说一下vue对应的生命周期?

activated和deactivated

4. vue懒加载

3种方式:vue异步组件、es6提案的import()、webpack的require.ensure()

5. 说一下自己对vdom的了解?

传送门:前端学习,五分钟带你看懂Virtual DOM及diff算法在vue中的应用

6. mvvm的双向绑定原理?

理解即可,不用死记硬背

mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

为什么要监听getter呢?因为没有getter的属性,说明页面中没有用到,就没有必要监听其setter

几个要点:

1、实现一个数据监听器 Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器 Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

3、实现一个 Watcher,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

实现简单的双向绑定,大家可以阅读下这篇文章,这应该是最详细的响应式系统讲解了,有时间还是建议能自己敲一遍

7. vue-router的路由模式?

hash、history

路由原理的深度剖析,大家有时间可以阅读下这篇文章,深度剖析:前端路由原理

8. 说一下redux?

理解即可,不用死记硬背。面试时详细的说一下自己的使用流程,至于细节方面,面试官还会深度的拷问

redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,主要包括三个核心方法,action,store,reducer

关于 Store:

  • 整个应用只有一个唯一的 Store
  • Store 对应的状态树(State),由调用一个 reducer 函数(root reducer)生成
  • 状态树上的每个字段都可以进一步由不同的 reducer 函数生成
  • Store 包含了几个方法比如 dispatch, getState 来处理数据流
  • Store 的状态树只能由 dispatch(action) 来触发更改

Redux 的数据流:

  • action 是一个包含 { type, payload } 的对象
  • reducer 函数通过 store.dispatch(action) 触发
  • reducer 函数接受 (state, action) 两个参数,返回一个新的 state
  • reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新状态树

所以对于整个应用来说,一个 Store 就对应一个 UI 快照,服务器端渲染就简化成了在服务器端初始化 Store,将 Store 传入应用的根组件,针对根组件调用 renderToString 就将整个应用输出成包含了初始化数据的 HTML。

9. 说几个自己常用的vuex的api?

store.registerModule('c',{}) //注册一个模块

store.unregisterModule('c') //解绑一个模块

store.subscribe() //订阅,每次mutations被调用,这个api都会被调用

store.subscribeAction() //监听actions

store.watch() //每次state改变之后都会调用

10. 谈谈vue和react?

这题没有对错,说出自己的见解就行,但不能空有见解,还要有理论进行支撑

两者的本质区别

  1. vue - 本质是 MVVM 框架,由 MVC 发展而来
  2. React - 本质是前端组件化框架,由后端组件化发展而来
  3. vue - 使用模板(最初由 angular 提出)
  4. React - 使用 JSX(jsx不是react独有的,已经成了一种标准)
  5. React 本身就是组件化,没有组件化就不是 React
  6. vue 也支持组件化,不过是在 MVVM 上的扩展

两者共同点

  • 都支持组件化
  • 都是数据驱动视图

自己的一些看法 ​

  1. 模板语法上,我更加倾向于 JSX,因为它更接近js 语法(列如vue的循环用的是新指令v-for,而react用的是js中的map()函数)
  2. 模板分离上,我更加倾向于 vue(数据和视图分离的更彻底)
  3. 组件化上,我更加倾向于 React ,做的彻底
  4. 国内使用,首推 vue 。文档更易读、易学、社区够大 。 如果团队水平较高,推荐使用 React 。组件化和 JSX 大型项目用react,小型项目用Vue

数据结构和算法

至于数据结构和算法方面各个公司考查的方式完全不同,之前有给大家写过一篇好书推荐的文章,里面有一本数据结构和算法的书真的不错,有时间可以买来看看。如果时间不允许,大家只要认真准备这几点就好了

快速排序、选择排序、希尔排序、冒泡排序、波兰式和逆波兰式

HR

大部同学都不太重视hr的面试,虽然说只要技术官和项目经理过了,一般offer就到手了,但hr是有一票否决权的,大家还是要稍微准备下,死在这就太冤了。。。

请自我介绍一下你自己

我个人比较喜欢参加一些团体活动,曾经组织团队参加过“互联网+大学生创新创业项目”,有幸被选为小组长,很好地组织过团队。
我还比较喜欢写博客,喜欢对喜欢对学过的知识点进行总结,简历上有我的一个博客地址。同时我也比较喜欢逛技术社区,喜欢去了解和探索新技术。

1. 为什么想要换工作?

换工作无非于那三个原因,钱给的不够、在公司处的不开心、在公司没有上升空间。只要大家的原因积极正向一点别说公司的坏话就好了,其它自由发挥。记住千万别说公司坏话,即使前公司很操蛋

2. 对薪水自己有怎样的期待?

自己给出一范围,别把话说太死,不同公司可以上下调整的

3. 对未来有一个怎样的规划?

别说的太空,主要从两个方面出发,一个实近期规划,还有一个是长远规划

4. 你还有什么想要了解的吗?

现在可以了解自己的工资、待遇、公司环境等,这里就别端着了,有什么想了解的尽管问

咱们公司晋升机制是什么样的?


参考文档:zhuanlan.zhihu.com/p/85030402