中级前端工程师面试 我想问的几个问题

中级前端工程师面试 我想问的几个问题

SimplyYSimplyY
我把我认为的中级前端应该能答的一些较开放的面试题列出来,并且要求回答者必须要答的有深度。(当然基础都得会且扎实,一面就会筛掉基础不好的。我这相当于二面题)

收藏前请先点赞。


问题

  1. 你觉得你最大的优势(可以多个)是什么?你为什么选择前端?
  2. 你碰到过的最难的编程问题,以及怎么解决的?
  3. 前后端分离的原理及意义?
  4. node 异步模型简单概述一下,node 在性能上的优缺点,以及为什么?
  5. koa 和 express 有什么不同?koa 解决了什么问题?有什么意义?koa1 基于 generator 的实现的 同步风格写异步代码 的原理是什么?(对这个问题有兴趣的同学可以看我写的这个 koa 学习心得及核心源码分析 - 知乎专栏
  6. 你对异步模型有哪些理解?
  7. 你对 react 有什么理解?基于 react 的开发模式比起传统 jqurey 开发模式的最大优势(可以有几个)是什么?
  8. 你对页面进行性能优化的思路和思想是什么?
  9. 你写代码有过哪些设计和思想?你怎么看 oop 和函数式?(代码设计的思想可以看我这一篇文章 编程的几个思想 - 知乎专栏

    掌握原理和思想

    大家对于这些问题,其实只要有两三个回答的很出彩、有深度、并且能回答出面试官的进一步的追问就基本能合格了(这个要求真不低,这相当于二面、三面题目,它难倒了90%的过了一面的应届优秀毕业生,bat去年校招总共也就招了一百多个前端,一年全国大学生中基础好的前端至少有1千以上)。

    对于没听说过的问题,假如平常开发用到过,那现在就可以针对的思考学习 原理、思想,用不到的可以暂且先放着(以后如果要用到那就再深入学习吧)

    总之,对于知识不要满足在 知道 这个程度,一定要掌握原理和思想 我的另一篇文章有提到过 编程成长之道--通过思考来升华自己 - 知乎专栏



================= 正文与 ahonn 的回答 的分割线===============


ahonn 的回答


@Ahonn 回答了上面问题中的五个,在他的博客上 答前端面试题 · Ahonn


下面给出他的回答以及我的评分与建议(文章最后给了 网页性能优化的我的一个比较全的回答)。


评分和建议

我最大的优势以及为什么选择前端


  • 我最大的优势是自学能力与理解能力强,并且不给自己套上『我是前端程序员』的枷锁,对于所有技术保持好奇心,不畏惧舒适圈外的事物并敢于尝试。
  • 选择前端的理由是,前端能够迅速的把想法实现,可选技术栈广泛(Web,移动端,桌面客户端),也是前端的优点之一

优势给80分,选择前端的理由 70分。
  • 其实我还想听到 喜欢思考这个优势,,其实可以答自己2到3个优点,当然面试官也会通过你的 项目和后面题目的回答来 判断你说的优势是不是真的。
  • “前端能够迅速的把想法实现”,这个说法可以升华一下的,创造 or 改变世界 or 做产品(这个产品不是指 pm,而是创造优雅、有价值的软件 or 网页or app)的心。
  • 玉伯在我们组做分享的时候提到过选择前端,前端的核心竞争力,详情看看我的文章 SimplyY 的博客:玉伯交流笔记


前后端分离的原理及意义

后端提供数据接口,前端获取数据并呈现。

前后端分离的意义

  • 后端无须套模版,前后端解耦。
  • 提高工作效率,前后端同步开发。


给65分。。答的太浅,
  • 你只是说了纯前端渲染的开发方式,通过 ajax 来向后端交互,但是这样的话首屏性能和 seo 就完全都没了,并且接口层在浏览器端其实会有性能问题(无法缓存等)。
  • 其实前后端分离实际上是有多个阶段的, 图解基于node.js实现前后端分离 // 亚里士朱德的博客
  • 当下处于使用 node 来前后端分离,node 接管了路由、渲染、数据格式转换的任务,我这篇文章提到了一些 浅谈中间层 - 知乎专栏


对 react 的理解与相对于 jQuery 开发的优势

对 React 的理解

  • 通过 Virtual DOM 和 Diff 算法隔离 DOM 操作。
  • 采用单向数据流,数据流动方向单一,可跟踪。
  • 组件化,JSX 自定义标签,便于抽象化。

对比 jQuery 开发的优势

  • 无需直接操作 DOM,事件通过改变 state 间接操作 DOM。

80分。这个问题可以追问不少细节原理的,最后给分,细节原理占比较大。ps,我 jqurey 也不太会233,当然 jq 不是重点。

你对页面进行性能优化的思路和思想是什么?

页面生成过程

  • HTML代码转化为DOM
  • CSS代码转化成CSSOM
  • 结合DOM和CSSOM,生成一棵渲染树
  • 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  • 将布局绘制(paint)在屏幕上
  • 减少 HTTP 请求(合并 CSS/JS,小于 10k 的图片 base64)
  • 减少 DOM 操作(可使用 DocumentFragment)
  • 避免不必要的重绘与重排(重排必定导致重绘)
  • 优化 CSS 选择器(从右向左匹配)
  • CSS/JS minify,减少文件体积
  • 开启 Gzip 压缩
  • 将 CSS 放到顶部,JavaScript 放到尾部(JavaScript 会阻塞页面)
  • 压缩图片以及使用 CSS Sprite
  • 使用 CDN 加速,适当进行文件缓存
  • 合理控制 cookie 大小(每次请求都会包含 cookie)

65分。你只写了具体的常规方法,原理不够,思想几乎看不到。方法是基础,原理和思想是体现深度的地方。我给点提示:

  • 思想: 性能优化先优化性能瓶颈,具体问题具体分析(作性能分析) 等
  • 原理: 你只写了页面生成过程,你知道浏览器访问 url 这个问题的答案其实就是做性能优化的原理之一吗。。
  • 性能优化最关键的点:首屏
  • 用户交互时也会出现性能瓶颈:大量 dom 更新(react性能优势在这,vdom 可以减少不必要的 dom 更新),频繁的页面的重排,动画(动画写的不好性能会很差,比如频繁的页面的重排)。

性能优化资料(下面资料加上上面我说的内容,就是可以给90分的回答)

时间都去哪了-移动Web首屏优化实践(1)-慕课网

主要是上面视频中出现的下面四张图,想知道详细内容用1.5x 速度看视频非常不错。。

渐进式的用户感知时间


网页优化端到端的全链路分析



具体的几个目标


最后才是你说的那些方法

减少 HTTP 请求(合并 CSS/JS,小于 10k 的图片 base64)
减少 DOM 操作(可使用 DocumentFragment)
避免不必要的重绘与重排(重排必定导致重绘)
优化 CSS 选择器(从右向左匹配)
CSS/JS minify,减少文件体积
开启 Gzip 压缩
将 CSS 放到顶部,JavaScript 放到尾部(JavaScript 会阻塞页面)
压缩图片以及使用 CSS Sprite
使用 CDN 加速,适当进行文件缓存
合理控制 cookie 大小(每次请求都会包含 cookie)

其实你说的这些方法,只是前面几张图推出来子集,是被推导出来的东西,并不是核心原理和思想。

「人生第一次被赞赏~」
5 人赞赏
Aploium
张睿
reverland
冯雨
徐驰
文章被以下专栏收录
37 条评论
推荐阅读