前端技术开放式面试

zhouzhou525
145 阅读12分钟

谈谈你对重构的理解

  • 网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化， 在扩展的同时保持一致的UI

  • 对于传统的网站来说重构通常是：

    • 表格(table)布局改为DIV+CSS
    • 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
    • 对于移动平台的优化
    • 针对于SEO进行优化

什么样的前端代码是好的

  • 高复用低耦合，这样文件小，好维护，而且好扩展。
  • 具有可用性、健壮性、可靠性、宽容性等特点
  • 遵循设计模式的六大原则

对前端工程师这个职位是怎么样理解的？它的前景会怎么样

  • 前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近

    • 实现界面交互
    • 提升用户体验
    • 基于NodeJS，可跨平台开发

  • 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

  • 与团队成员，UI设计，产品经理的沟通；

  • 做好的页面结构，页面重构和用户体验；

你觉得前端工程的价值体现在哪

  • 为简化用户使用提供技术支持（交互部分）
  • 为多个浏览器兼容性提供支持
  • 为提高用户浏览速度（浏览器性能）提供支持
  • 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  • 为展示数据提供支持（数据接口）

平时如何管理你的项目

  • 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
  • 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
  • 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
  • 页面进行标注（例如 页面 模块 开始和结束）；
  • CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
  • JS 分文件夹存放 命名以该JS功能为准的英文翻译。
  • 图片采用整合的 images.png png8 格式文件使用 - 尽量整合在一起使用方便将来的管理
  • 规定全局样式、公共脚本
  • 严格要求代码注释(html/js/css)
  • 严格要求静态资源存放路径
  • Git 提交必须填写说明

组件封装

目的：为了重用，提高开发效率和代码质量 注意：低耦合，单一职责，可复用性，可维护性 常用操作

  • 分析布局
  • 初步开发
  • 化繁为简
  • 组件抽象

Web 前端开发的注意事项

  • 特别设置 meta 标签 viewport
  • 百分比布局宽度，结合 box-sizing: border-box;
  • 使用 rem 作为计算单位。rem 只参照跟节点 html 的字体大小计算
  • 使用 css3 新特性。弹性盒模型、多列布局、媒体查询等
  • 多机型、多尺寸、多系统覆盖测试

在设计 Web APP 时，应当遵循以下几点

  • 简化不重要的动画/动效/图形文字样式
  • 少用手势，避免与浏览器手势冲突
  • 减少页面内容，页面跳转次数，尽量在当前页面显示
  • 增强 Loading 趣味性，增强页面主次关系

你怎么看待 Web App/hybrid App/Native App？（移动端前端 和 Web 前端区别？）

  • Web App(HTML5)：采用HTML5生存在浏览器中的应用，不需要下载安装

    • 优点：开发成本低，迭代更新容易，不需用户升级，跨多个平台和终端
    • 缺点：消息推送不够及时，支持图形和动画效果较差，功能使用限制（相机、GPS等）

  • Hybrid App(混合开发)：UI WebView，需要下载安装

    • 优点：接近 Native App 的体验，部分支持离线功能
    • 缺点：性能速度较慢，未知的部署时间，受限于技术尚不成熟

  • Native App(原生开发)：依托于操作系统，有很强的交互，需要用户下载安装使用

    • 优点：用户体验完美，支持离线工作，可访问本地资源（通讯录，相册）
    • 缺点：开发成本高（多系统），开发成本高（版本更新），需要应用商店的审核

页面重构怎么操作

网站重构：不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

  • 页面重构可以考虑的方面：

    • 升级第三方依赖
    • 使用HTML5、CSS3、ES6 新特性
    • 加入响应式布局
    • 统一代码风格规范
    • 减少代码间的耦合
    • 压缩/合并静态资源
    • 程序的性能优化
    • 采用CDN来加速资源加载
    • 对于JS DOM的优化
    • HTTP服务器的文件缓存

回想下你遇见过最难打交道的同事，你是如何跟他沟通的**

  • 一般来说，工作中总会遇见一两个自己不喜欢的人，这种情况应该尽量避免冲突，从自己做起慢慢让对方感觉到自己的合作精神。
  • 所以，遇见难打交道的同事，不要急于上报领导，应该自己主动多做一些事情，比如规划好工作安排，让他选择自己做的事情，有了结论记得发邮件确认下来，这样你们的领导和其他成员都会了解到工作的安排，在鞭笞对方的同时，也做到了职责明确。在项目当中，多主动检查项目进展，提前发现逾期的问题。
  • 重点是突出：自己主动沟通解决问题的意识，而不是遇见问题就找领导。

当你被分配一个几乎不可能完成的任务时，你会怎么做

这种情况下，一般通过下面方式来解决：

  1. 自己先查找资料，寻找解决方案，评估自己需要怎样的资源来完成，需要多长时间
  2. 能不能借助周围同事来解决问题
  3. 拿着分析结果跟上级反馈，寻求帮助或者资源

突出的软技能：分析和解决问题，沟通寻求帮助。

业余时间都做什么？除了写码之外还有什么爱好

这类问题也是面试官的高频问题，「一个人的业余时间决定了他的未来」，如果回答周末都在追剧打游戏之类的，未免显得太不上进。

一般来说，推荐下面的回答：

周末一般会有三种状态：

  • 和朋友一起去做做运动，也会聚会聊天，探讨下新技术之类的；
  • 也会看一些书籍充充电，比如我最近看的 xx，有什么的想法；
  • 有时候会闷在家用最近比较火的技术做个小项目或者实现个小功能之类的。

如何介绍项目及应对项目细节追问

一个标准的面试流程中，肯定会在一面二面中问到你具体做过的项目，然后追问项目的细节。这类问题往往会通过下面形式来提问：

  1. 发现你简历的一个项目，直接让你介绍下这个项目
  2. 让你回忆下你做过的项目中，最值得分享（最大型/最困难/最能体现技术能力/最难忘）的
  3. 如果让你设计 xx 系统/项目，你会怎么着手干

这类跟项目相关的综合性问题，既能体现候选人的技术水平、业务水平和架构能力，也能够辨别候选人是不是真的做过项目，还能够发现候选人的一些软技能。

下面分享下，遇见这类问题应该怎样回答。

按照第 1 小节说的，简历当中的项目，你要精挑细选，既要体现技术难度，又要想好细节。具体要介绍一个项目（包括梳理一个项目），可以按照下面几个阶段来做。

1. 介绍项目背景

这个项目为什么做，当初大的环境背景是什么？还是为了解决一个什么问题而设立的项目？背景是很重要的，如果不了解背景，一上来就听一个结论性的项目，面试官可能对于项目的技术选型、技术难度会有理解偏差，甚至怀疑是否真的有过这样的项目。

比如一上来就说：我们的项目采用了「backbone」来做框架，然后。。。而「backbone」已经是三四年前比较新鲜的技术，现在会有更好的选择方案，如果不介绍项目的时间背景，面试官肯定一脸懵逼。

2. 承担角色

项目涉及的人员角色有哪些，自己在其中扮演的角色是什么？

》 这里候选往往人会自己给自己挖坑，比如把自己在项目中起到的作用夸大等。一般来说，面试官细节追问的时候，如果候选人能够把细节或者技术方案等讲明白、讲清楚，不管他是真的做过还是跟别人做过，或者自己认真思考过，都能体现候选人的技术水平和技术视野。前提还是在你能够兜得住的可控范围之内做适当的「美化」。

3. 最终的结果和收益

》 项目介绍过程中，应该介绍项目最终的结果和收益，比如项目最后经过多久的开发上线了，上线后的数据是怎样的，是否达到预期，还是带来了新的问题，遇见了问题自己后续又是怎样补救的。

4. 有始有终：项目总结和反思

有总结和反思，才会有进步。 项目做完了往往会有一些心得和体会，这时候应该跟面试官说出来。在梳理项目的总结和反思时，可以按照下面的列表来梳理：

  • 收获有哪些？
  • 是否有做得不足的地方，怎么改进？
  • 是否具有可迁移性？

比如，之前详细介绍了某个项目，这个项目当时看来没有什么问题，但是现在有更好的解决方案了，候选人就应该在这里提出来：现在看来，这个项目还有 xx 的问题，我可以通过 xx 的方式来解决。

再比如：做这个项目的时候，你做得比较出彩的地方，可以迁移到其他项目中直接使用，小到代码片段，大到解决方案，总会有你值得总结和梳理的地方。

介绍完项目总结这部分，也可以引导面试官往自己擅长的领域思考。比如上面提到项目中的问题，可以往你擅长的方面引导，即使面试官没有问到，你也介绍到了。

按照上面的四段体介绍项目，会让面试官感觉候选人有清晰的思路，对整个项目也有理解和想法，还能够总结反思项目的收益和问题，可谓「一箭三雕」。

没有做过大型项目怎么办

  • 对于刚刚找工作的应届生，或者面试官让你进行一个大型项目的设计，候选人可能没有类似的经验。这时候不要用「我不会、没做过」一句话就带过。
  • 如果是实在没有项目可以说，那么可以提自己日常做的练手项目，或者看到一个解决方案的文章/书，提到的某个项目，抒发下自己的想法。

如果是对于面试官提出来需要你设计的项目/系统，可以按照下面几步思考：

  1. 有没有遇见过类似的项目
  2. 有没有读过类似解决方案的文章
  3. 项目能不能拆解，拆解过程中能不能发现自己做过的项目可以用
  4. 项目解决的问题是什么，这类问题有没有更好的解决方案

总之，切记不要一句「不知道、没做过」就放弃，每一次提问都是自己表现的机会。

项目细节和技术点的追问

介绍项目的过程中，面试官可能会追问技术细节，所以我们在准备面试的时候，应该尽量把技术细节梳理清楚，技术细节包括：

  1. 技术选型方案：当时做技术选型所面临的状况
  2. 技术解决方案：最终确定某种技术方案的原因，比如：选择用 Vue 而没有用 React 是为什么？
  3. 项目数据和收益
  4. 项目中最难的地方
  5. 遇见的坑：如使用某种框架遇见哪些坑

一般来说，做技术选型的时候需要考虑下面几个因素：

  1. 时代：现在比较火的技术是什么，为什么火起来，解决了什么问题，能否用到我的项目中？
  2. 团队：个人或者团队对某种技术的熟悉程度是怎样的，学习成本又是怎样的？
  3. 业务需求：需求是怎样的，能否套用现在的成熟解决方案/库来快速解决？
  4. 维护成本：一个解决方案的是否再能够 cover 住的范围之内？

在项目中遇见的数据和收益应该做好跟踪，保证数据的真实性和可信性。另外，遇见的坑可能是面试官问得比较多的，尤其现在比较火的一些技术（Vue、React、webpack），一般团队都在使用，所以一定要提前准备下。

avatar
文章
阅读
粉丝