2019 面试实战 - 第一回合

时间 2019-11-08

原文原文链接

Create by jsliang on 2019-2-27 18:51:26
Recently revised in 2019-3-3 14:42:54php

Hello 小伙伴们，若是以为本文还不错，记得给 jsliang 的文档库点个 star ，大家的 star 是我学习折腾的动力！GitHub 地址css

【2019-08-16】Hello 小伙伴们，因为 jsliang 对文档库进行了重构，这篇文章的一些连接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请须要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。html

并非只有特定的季节才能跑路，只由于人跑得多了，这条路就定下来了。前端

金三银四跑路季，jsliang 也去尝试了一波，而后写下这篇文章。vue

接下来还会有第二回合以及最后的面试题总结，小伙伴们能够关注我掘金和 GitHub 哈~ios

一目录

不折腾的前端，和咸鱼有什么区别git

目录
一目录
二前言
三早上 10:00
3.1 Job Description
3.2 一面技术 - 前端架构师
3.3 二面技术 - 技术负责人
3.4 三面我的 - 人事小姐姐
3.5 四面我的 - 项目负责人
四下午 16:00
4.1 Job Description
4.2 技术一面 - 笔试题考查
4.3 技术二面 - 前端小姐姐
4.4 总体三面 - 项目负责人
五总结

二前言

返回目录程序员

请时刻准备好本身的简历，无论是互联网经济不佳面临裁人，仍是由于公司内部斗争严重想换份工做，仍是由于厌倦了目前的一切……只有随时更新本身，把本身的简历准备好，你才知道哪一刻跑路是最佳选择。github

时间：2019-2-27
地点：广州
年限：一年工做经验
薪酬要求：9K - 15K
场次：上午一场，下午一场
感想：很是疲惫，可是感受颇有动力，“没有一家解决不了的，若是有，那就再跑一家！”

三早上 10:00

返回目录web

公司规模：员工 5000 +
行业：电商
面试前：怕广州 3 号线塞车，又以为这份工做应该不错，因而 7 点就出门，8 点到了这个公司附近，溜达了一圈，感受附近饭馆比较多，而且离地铁站 5 分钟左右，仍是挺不错的。溜达到 9:20，上楼跟前台小姐姐打招呼后，拿到了两份表：一份我的信息表，一个性格测试表（可能大点的公司都考虑你的性格，毕竟团队开发），印象深入的是性格测试表还有错别字：“坚决” 写成了 “鉴定”。~~可能我精神比较集中，一会儿就看到了，可是 offer 没下来，就没敢跟人事小姐姐吐槽了，省得给人坏印象。~~
准备完毕：交表，等待面试。

3.1 Job Description

返回目录

薪酬：10K - 15K

岗位职责：
一、独立完成公司中后台项目的前端开发
二、与后端开发一块儿，肯定接口协议
三、独立完成接口文档的编写并组织评审
四、深刻解析代码, 提高代码执行效率, 增强代码兼容性
五、对用户交互有深入理解，能帮助产品优化交互体验

任职要求：
一、有2年以上前端开发经验
二、对各类Web前端技术（JavaScript，CSS，语义化标签等等）有深入理解；
三、熟悉服务器端Web应用结构，有服务器端脚本语言经验更佳
四、熟悉WEB应用的MVC，MVVM结构
五、英文4级以上

应具有的知识与技能：
一、精通HTML五、CSS3等网页制做技术，熟悉页面架构和Flex布局；
二、精通JavaScript、Ajax等Web开发技术
三、熟练使用ES6,有Reactjs的使用经验；
四、熟练使用Git,Webpack等工具；
五、熟悉W3C标准，对表现与数据分离、Web语义化等有较为深入的理解；
六、思路清晰，具有良好的沟通能力和团队协做精神，善于学习、总结，乐于分享。
复制代码

3.2 一面技术 - 前端架构师

返回目录

对话内容以下：

面试官：“你好，我是 ***。”
我：“你好。”
面试官：（翻简历）
面试官：“挺不错的嘛，还有个高 star 的项目？”
面试官：（打开手机）
面试官：“帐号多少，我能看看么？”
我：“好的，帐号 LiangJunrong，你能够去瞅瞅，那个项目主要是我用来写我我的的前端知识体系的。”
面试官：“那你是如何让更多人知道你的？”
我：“我在掘金上有发表文章，而后若是以为掘金上本身写的某篇文章还过得去的时候，也会在微信、QQ 上发下掘金的连接。”
面试官：“能介绍下这里面，你以为最有印象的东西吗？”
我：“最有印象么？”
我：（思考）
我：“这里面最有印象的，一个是微信小程序，关于通信录的作法。是我在 2018 年 10 月份的时候，驻点电信写微信小程序，其中有个联系人模块，由于微信小程序我是边看文档边查阅资料写的，因此那个联系人模块是彻底没有其余插件，本身写的。工做上的功能实现是领导满意的，可是下班之余，以为修改和新增能够更进一步优化①，因而想了下，可使用二分法来实现修改、新增后跳转到相应的位置。怎么说呢？就是你已经写好了列表后，按②……”

①：关于修改、新增的操做，小伙伴能够打开本身的爪机，试试修改、新增完以后，是否是页面要滚动到操做以后的位置，而后想一想若是是本身，会如何实现。

②：关于微信通信录的作法，可参考文章【微信小程序之奇技淫巧】，里面全程分析了简单作法和优化观点。

……该部分中 jsliang 和面试官还有一些探讨，太长了这里忽略不提……
面试官：“能介绍下这个侧边栏实现吗？”
我：“假设我须要跳转到 D 桶（前面面试官讲了下分桶），那么，我首先须要知道 A 桶、B 桶、C 桶各有多少条，而后将条数 * 每条高度，以及字母 A、B、C 的高度，最后想加起来得到须要滚动到的位置。而且我作了兼容，在 IPhone 六、IPhone X 上都能确却滚动到具体位置。③”

③：须要清楚的是，在 WXSS 中，你写的是 100rpx，在 IPhone 六、IPhone X 上表现的高度是不一致的，须要根据获取的设备比，从而获取到实际每条的高度。

面试官：“你是小程序作的比较多么？”
我：“小程序的话，我作了 2 个月。而后 Vue 的话，我是毕业设计的时候，用了 Vue + Node + MongoDB。而后在 11 月份的时候，用了 Vue + ECharts 作了报表，展现电信的运营数据。”
面试官：“你能介绍下关于 React 的经验么？”
我：（慌）（强行镇定）React 是那时候在公司总部，须要开发新项目，前端大哥说能够考虑换成 React 开发。可是作到一半的时候，我就被调到电信驻点去了，因此 React 和 Angular 都是看了一点，想实现的时候，中断了。”
面试官：“那你是说单单使用过微信小程序和 Vue 么？”
我：“（慌）额(⊙o⊙)…我使用过 Vue、微信小程序、jQuery。④”

④：这个公司 JD 要求须要 React，而且平常开发也是使用 React 的。

面试官：“那你就是没实际工做用过 React。”
我：“对，是的。”
面试官：“那你介绍下对 Vue 的了解，并使用 Vue 作的事情吧。”
我：“我的感受的话，在目前前端上，模块化、组件化比较多，有一些东西，例如：头部组件。当咱们使用比较多的时候，咱们就要抽离出来，组件化它。而后在须要使用的时候，去使用它。而后在 Vue 的使用上，感受就是拼积木，把你须要的东西拼接起来。而后在 Vue 中，主要三大块：Vue、VueCli、VueRouter、Vuex 数据状态管理。噢，四大块了。”
面试官：“那你能介绍下 Vuex 吗？”
我：“很差意思，Vuex 介绍不了，毕竟如今最多就是写小程序，虽然以前有使用过，可是代码这些东西，您也知道，过久不使用都会忘了。”
面试官：“嗯，那好，你说使用微信小程序比较多，那你能讲讲热更新部分么？”
我：“很差意思，没了解过。”
面试官：“就是说，我小程序上出了很是严重的 bug，可是你知道，提交给微信审核，须要时间，那么我能不能在不提交审核的状况下进行更新。”
我：（思考）“enm...”
面试官：“那么假如就是这种状况了，你有什么想法吗？或者说依你对小程序的理解，尝试解决下这个 bug？”
我：（思考）（自言自语）很差意思真不知道。
面试官：（换话题）“对 ECharts 有什么介绍么？”
我：（微笑）“ECharts 这个的话，感受就是很是好玩。固然，在数据操做的时候，你要注意一下。”
面试官：“好比？”
我：“好比说有一次在调取接口，作数据循环输出的时候，由于没注意，直接致使整个浏览器崩溃。”
面试官：“由于渲染次数太多了。”
我：“是的。”
面试官：（翻简历）（打开手机）
面试官：“能介绍你这个刮刮奖么？我以为挺有意思的。⑤”

⑤：【幸运刮刮乐】 —— jsliang 屏蔽敏感部分，发来玩玩的手机页面。

我：“刮刮奖的话，是一次活动制做，而后我找了一个 Canvas 画图的插件作的。”
面试官：“那如今有个问题：我是如何知道它何时展开。”
我：“这个是经过面积计算它来展开的。”
面试官：“你是以为如何实现的呢？”
我：“enm...不太状况。”
面试官：“当初使用的时候，没有看它源码么？”
我：“没有。”
面试官：“你以为它是如何计算它刮开的面积？”
我：（尴尬）“计算刮开的面积……”
面试官：“你看，这样这样计算……”（提示）（教导）
……中间省略吧，太丑了……
面试官：“当初你应该看下它源码实现，由于这是个很经典的话题。”
我：“是的，当初我应该本身用原生 JS 去试试，而不是直接拿来用。或者拿来用的时候，去瞅瞅它的实现。”
面试官：（翻简历）
面试官：“我以为你仍是挺好的，简历上贴了这么多页面。”
我：“是，由于我我的比较喜欢折腾，而后将本身折腾的东西，经过部署服务器让你们也能看看。还有就是作些统计，好比这些页面里面都嵌入了百度统计代码，而后能够查看下都有哪些用户会点击。”
面试官：“那你平时是怎么使用这些数据呢？”
我：“enm...没想过。”
面试官：“就比如说，你经过查看这些数据，发现有些数据是 A 平台过去的，有些数据是 B 平台上去的，而后发现大部分是 A 平台的……”
我：“噢噢，是的，若是大部分是 A 平台的，我能够在 A 平台编写更多文章，而后看下是哪一个话题比较多，从而知道该哪一个部分投放精力。”
我：“这个还真没有想法，不过经你一说，发觉这个仍是不错的，运营方面还真没想到。”
面试官：“是的，你知道怎么获取数据，那么这些数据的使用技巧你也能够去折腾下。毕竟像某个渠道的转化率比较高，你就能够投放该渠道……”
我：“是的是的，这个不错。”
面试官：“嗯，其实你这个也像运营了，毕竟你经过多个渠道去推广本身。”
面试官：“好的，我大体了解了。而后你知道咱们这边主要作啥么？”
我：“不太清楚。”
面试官：“是这样的，咱们主要使用 React 作后台管理系统。”
我：“enm...我以为当你业务写到必定程度的时候，你会发现技术有不少是雷同的，在这些技术上能够作到灵活切换。若是是使用 React，我是能够接受的。”
面试官：“好的好的，那你先在这等会，我去跟上面沟通下。”
我：“好的，谢谢~”

总结：

首先，这么详细的对话，固然不是我记忆力好，隔了四天还能记得，而是我当初录了音，今儿整理出来的。（不知道这个录音属不属于禁忌，可是我的以为，每一次面试就是扩展你的知识面，毕竟面试官能给你带来你不知道的新鲜观点和知识层面）

而后，听到其中一些点，如今也感受到尴尬，同时感受那时候应该能够作到更好发挥。

最后，就是这个面试官给人的感受仍是挺好的，至少当某些问题 jsliang 不会的时候，他还会给你讲讲他的观点，而不是直接跳过，让你感到心堵，从而给你更多的压力。

3.3 二面技术 - 技术负责人

返回目录

通过一段时间的等待，迎来第二面面试官：

面试官：“我好，我叫 **”
我：“你好。”
面试官：（翻简历）
面试官：嗯，挺能折腾的嘛小伙子，喜欢写文章是吧？不过你的定位仍是小了。来，咱们都是程序员，平常接触最多的就是电脑，那么，你知道系统 32 位和 64 位的区别吗？”
我：“（触不及防）“enm...很差意思不记得了。①”

①：讲真我不是电脑发烧友，当初购买本身手提的时候，也是看到哪一个参数不懂就去查哪一个，大学时代为了把妹精通各类系统重装啥的……别逗了！怎么可能在我身上发生！因此我真不知道，我就是这么菜。

面试官：“你看，是吧~为何 64 位系统会跑得比 32 位系统快呢？首先咱们应该知道计算机系统是由 0101 组成的，而后……②”

②：扯不下去了，跟这位面试官的对话我并无录音，如今就依稀记得一下关键点，因此记录的是关键部分。若是小伙伴以为本身知道这些知识点最好，若是小伙伴以为本身不懂，记得先 mark 到手机记事本啥的，能够去了解了解。

我：“嗯嗯，好的，学到了，我文章又来了个能够折腾的点。”
面试官：“好，既然说到这个存储，那么关于图片，你了解哪些形式，你以为哪一种场合用哪一种？它们优劣如何？而后这些图片的应用场景能说说不？”
我：“jpg、png、gif，嗯，大体这三种。而后 gif 支持动画、png 拥有透明背景、jpg 应用比较普遍。一般状况下大小来讲，gif 最大，再来是 png，最后是 jpg。”
面试官：“那你知道为何这三者会存在这种差异么？”
我：（懵逼）“不清楚……”
面试官：“由于计算机对它们的压缩算法不一样，还有，你有没考虑过矢量图。”
我：“噢噢，很差意思，刚才忘记说到这个，图片还能够按矢量图和位图来划分，矢量图的话，例如 svg，它不会由于你图片在不一样场景的放大缩小而变得模糊。”
面试官：“嗯，你看，图片使用是否是咱们工做中要面对的一个话题，这样你是否是应该能够根据这话题写一篇文章了（笑）。”
我：（感兴趣）“是的，我回头就去写一篇关于图片的文章。③”

③：这个真的不是要忽悠面试官，文章我已经开好坑了：【2019 面试准备 - 图片】，写完这篇文章，下一篇就写完这个。

面试官：“很好，咱们继续下一个话题，在电商中，商品排放老是有必定道理的。如今我有两种关于商品的排序方式，分别存放在 A 页面与 B 页面中。而后，在只有前端的状况下，如何让 50% 的用户访问到 A 页面，50% 的用户访问到 B 页面。”
我：“enm...不能使用后端，或者 Nginx 负载均衡轮询？”
面试官：“不行。”
我：（深思）（自言自语）“enm...不清楚。”
面试官：“其实你刚才也提到过使用随机数的设想（自言自语中提到了），那么，咱们如何让页面访问的几率为 1/2 呢？咱们可不能够将这个数尽量放大，而后再划分？”
我：（恍然）“嗯，能够将它们 %2，这样，咱们就只有两种状况，一个是 0，一个是 1。由于随机范围足够大了，因此用户访问的几率也分为一半一半了。”
面试官：“很好，既然你知道 50% 和 50% 是这样子搞了，那么，你能不能作到 25% 与 75% 的划分？”
我：（笨地捉急）
面试官：“不要急，你想一想，当咱们 %2 的时候，会获取到两种状况，那么，一个数 %3，会有几种状况？是的，三种，0 1 2，仍是经过取余，因此，咱们只须要将一个尽量大的范围的数，将它 %4，这样就有 0 1 2 3 四种状况，咱们是否是就能够划分 25% 和 75%了。”
我：（再度恍然）
面试官：“那你知道取余在工做中的用法吧？”
我：“不清楚……”
面试官：“你能够了解下视频缓存，咱们能不能不能由于视频有多大，咱们就开多大位置给它？不能是吧，那么，咱们就要在一个位置，将它存下来……④”

④：因为没有录音佐证个人记忆是否真实，因此这里进行对话省略，省得看文章的小伙伴对面试官有误解，以为面试官其实也不懂。按照我面试以后的想法，其实就是开辟一段内存，而后浏览器接受服务器传过来的数据，在内存中，进行 %n 的形式来存储数据（n 为开辟的内存大小），接着当咱们须要读取视频数据的时候，咱们只须要经过先进先出的形式，将最新存进内存的数据读取出来，这样就作到了视频的还原。

我：“是的，学到了！”
……记忆回放到这里，其余都是不太深入的问题了……
面试官：“整体来讲仍是不错的，行，你等会，我叫人事过来跟你谈谈。”
我：“好的，谢谢！”

总结：

首先，一开始我觉得面试官开头，也是“面试造火箭，工做拧螺丝”，可是后面说到图片以及图片排序方式，我以为这个也是挺正常的，毕竟是电商企业。

而后，关于我的知识体系，当时跟面试官说了句：“如今程序员，一流通数学，二流通算法。我是比较想多点学习算法的。”（其实这话是恰好那天票圈在说程序员等级制，我固然是不入流啦！）当时面试官还给了下确定。

最后，以为仍是心态放好来，毕竟若是好多问题你都不会，你应该想一想能不能扯开到你熟悉的领域，由于你表现很差，心态又很差，面试官确定印象极差。

3.4 三面我的 - 人事小姐姐

返回目录

通过一段时间的等待，迎来了一开始的人事小姐姐：

人事小姐姐；（笑）“刚才聊得怎么样？”
我：“第一面还不错，第二面有点小紧张。”
人事小姐姐：“有点小紧张？”
我：“对！”
人事小姐姐：“而后对咱这边的项目及一些状况，有些了解没？”
我：“不太清楚。①”

①：看过前面的小伙伴应该知道，一面面试官最后提到了，是的，我那 7 秒钟鱼的记忆！

人事小姐姐：“咱们公司是个跨境电商，而后人数的话……（介绍公司一些状况，这里很少累述）”
人事小姐姐：“介绍就到这里，而后你还有什么问题想要跟我咨询下的？”
我：（瞎扯些话题）
人事小姐姐：“嗯，你这里写最迟要 4月1日入职是吧？”
我：“是的，由于你也知道，通常合同都会签个离职一个月进行交接的，签合同的时候，标明正常离职须要 30 天，你也清楚，规矩仍是不能说坏就坏的……②”

②：关于入职时间，是个很使人烦恼的问题。若是你跟公司关系很好，能够申请快速办理离职手续，那就很是好；若是你跟公司关系很差，又有点钱，那么能够看看合同上写了什么，我这边合同上写的就是赔付一个月工资，不过这么作感受不稳当；因此仍是老老实实报个最妥当的时间吧，毕竟若是招聘你的公司真心想要你，确定会为你考虑下，要否则那些但愿你快速入职的，还真很差说。

人事小姐姐：“关于薪酬这块……③”

③：薪酬这个省略不能说了，毕竟收到了 offer。

人事小姐姐：“而后你还有其余问题想确认或者了解吗？”
我：“加班换调休仍是薪酬仍是其余……”
……省略中间内容……
人事小姐姐：“好的，由于咱们这边进行项目制，因此我叫项目负责人过来跟你聊聊最终项目以及薪酬方面的事。”
我：“好的，谢谢！”

总结：

首先，应该提提个人大忌，就是主动给本身降了薪资，由于人事小姐姐还没提到这个，可是我由于通过前两面，感受本身表现有点糟，因此给本身给本身降了薪资，只表示我想进来。（还能安慰本身的是，这家公司真的比原先的大好多，平台大了薪资没要到一开始提的，尚能接受）

而后，若是到了人事面，你最好咨询下：

薪酬：最重要的吧，毕竟你跳槽的第一目的应该就是拿更高的工资……
加班：换调休仍是薪酬，何时开始算加班等……
工做时间：早上几点到晚上几点，一周几天……
社保和五险一金：若是你以前有工做的，记得问清楚这个交接问题，中间需不须要本身续……
调薪机制：一年调几回，根据什么判断（我如今的公司根据 PPT 判断的！）……
请假：请假工资怎么算……

最后，态度和蔼点，我感受前面两面，我心态有点差了，可是毕竟还要继续，因此尽可能展示最好的给每个面试官。

3.5 四面我的 - 项目负责人

返回目录

通过一段时间的等待，迎来了最终的项目负责人：

项目负责人：“先介绍下本身吧，我的以及工做经历。”
我：“我的的话，18 年 5 月开始正式实习，到 8 月的时候，感受我的的前端知识体系比较乱，因此开始写个人文档库；而后 9 月到 10 月的时候，驻点电信作微信小程序，由于没经验，因此是边学边作；而后 11 月的时候，用 ECharts 作了数据报表；而后 12 月的时候，作了 Node 的项目；而后就到了如今。①”

①：我的比较喜欢用而后来链接话题，可能感受能比较清晰表达个人逻辑吧！

项目负责人：“是毕业以后就在这个公司了是吧？”
我：“是的。”
项目负责人：“你离开平台是由于过小了？”
我：“是的，由于我以为平台过小，我的提高有限，就比如如今一些简历上的，不少都是我本身折腾的。②”

②：关于离职缘由，钱固然是个缘由，可是你不能这么说，要否则你面试的公司会以为你市侩。固然，我这里说平台小也是个缘由，由于以前公司，无论是总部，仍是驻点电信，都是一我的开发项目，这样子你代码写起来是随意了，可是总想和别人合做的，毕竟大的项目，都不是一人搞定的。

项目负责人：“那么，这里提到的提高，大可能是我的方面的提高，例如更高的技术之类的。可是，在工做中，咱们要尽量的协调业务、支撑业务的，因此你这么看这个？”
我：“由于业务这东西的话，一开始可能这里作一下，那里作一下。可是，等你作到很熟练的时候，你会发现有些地方是有共同性的，因此咱们能够抽取出来，而后在出来新需求的时候，若是有这个，咱们就能够快速应用。因此说，业务和技术不能彻底分开，由于业务好多东西须要技术支撑，而后技术上你的研究，最终仍是能够应用到业务上的。③”

③：这个问题的回答，须要感谢下 @邵威儒 大佬，由于他平时写公司业务的时候，就是很是勤快，而后一些经常使用的，他会封装成组件，来了新的需求就复制粘贴拼接下就 OK 了，给我很是大的震撼。例如：n 个设计稿，公司排期一个月，他一周就解决了。

项目负责人：“在你接触代码这么久的时间中，你有没有感受给你比较深入印象的事情。”
我：“我的感受就是有些地方仍是须要提高本身。例如：算法。就比如第一位面试官跟我说的微信小程序的通信录，就用到二分法。”
……继续扯了些其余杂七杂八话题……
项目负责人：“好的，你稍等下。”（离开）
我：“好的！”
……一段时间后……
项目负责人：“刚才跟你一面、二面面试官聊了一下，综合评估了下，你这边仍是比较 OK 的，你最先何时入职。”
我：“4 月 1 日，你也知道，合同都会签的。”
项目负责人：“好的，这段时间我会让人事持续跟你沟通，offer 的话问题不大，而后薪资……（省略）具体事情我再让人事跟你沟通。最后你还有什么问题么？”
……中间继续扯了一些其余的……
我：“好的，就这些了，没了。”
项目负责人：“”

总结：

首先，到这里感受整我的都很放松了，毕竟在人事面的时候知道这是最后一面了，也很累，毕竟坐了很久。

而后，若是能接触到项目负责人，最好多接触下，多聊聊，毕竟不出意外，这就是你的直系领导了。换工做的话，虽然平台也很重要，可是领导也是个很是重要的部分，像 jsliang 公司的领导层就比较乱，因此感受仍是但愿有个好领导的。

最后，但愿小伙伴们最好都能走到面试最后咯~上午的面试就到此了，当场允诺发 offer 仍是不多见的。

四下午 16:00

返回目录

公司规模：20 - 99人
行业：游戏
面试前：地处科大科技园那边，提早了一个钟到，不想提早上去（jsliang 以为有时候提早上去，万一前面面试的还没搞完，会尴尬，通常都是提早半个钟到），无聊，就坐马路前看看车水马龙。

4.1 Job Description

返回目录

薪酬：10K - 20K

岗位职责：
1. 负责web前端开发框架的搭建；
2. 负责web前端研发（包括PC和Mobile）；

能力要求：
1. 扎实的html,js,css知识；
2. 熟悉vue等前端开发框架；
3. 熟悉bootstrap或elementui等前端UI库；
4. 熟悉响应式网页开发；
5. 能编写可维护性高的前端代码；
7. 2年以上专业岗位工做经验，有相关做品可展现优先。
复制代码

4.2 技术一面 - 笔试题考查

返回目录

描述一下渐进加强和优雅降级。
CSS 中可让文字垂直和水平方向上重叠的两个属性是什么？
如何解决使用 inline-block 引发的空白间隙的问题？
使用 CSS 建立一个三角形（一个箭头向右的三角图标）。
使用 CSS 实现三个 div 等比排列在一行，两列宽度固定中间自适应。
有一个长度为 100 的数组，请求出该数组的前 10 个元素之和。
写一个程序打印 1 到 100 这些数字，遇到数字为 3 的倍数，打印 “A” 替代该数字；遇到 5 的倍数，用 “B” 代替；遇到便是 3 的倍数又是 5 的倍数，打印 “AB”。
跨域通讯有哪些方案，各有什么不一样？
哪些常见操做会形成内存泄漏？
主流前端框架如 Angular/React/Vue 等之间有哪些差别及特色，选取一个描述其组件生命周期。

这里 jsliang 仍是冒着被寄刀片的危险，不给答案了！毕竟给了答案，小伙伴可能不会更深层次地了解这个问题。

4.3 技术二面 - 前端小姐姐

返回目录

提交完笔试题答案后，来了位前端小姐姐，开始面试：

前端小姐姐：“你好，你先来个自我介绍吧~”
我：“你好，我叫梁峻荣，前端网名 jsliang，平常活跃于 GitHub 和掘金。而后我的比较喜欢折腾，在去年 8 月的时候开始写本身文档库，在 9 月和 10 月作太小程序，11 月的时候作了 ECharts 报表，12 月的时候作了个原生 Node 仿企业网站，而后就到了如今。”
前端小姐姐：“你挑一个你的工做项目来说讲。”
我：“那我讲讲微信小程序吧①，当时大概 20 来张 PSD，就说了下小程序是作什么的，而后我就边看官方文档边写小程序了。大概一个半月后，期间修修改改，就把小程序搞出来了。其中最有挑战的就是联系人模块，就像咱们手机的联系人，在新增和修改的时候，用到了二分法。”

①：是否是感受跟上一家公司的面试过程好像，是的就是这么难受，毕竟经历的真很少！

前端小姐姐：“你工做主要用到的技术栈有哪些？”
我：“首先，刚才说了有微信小程序；而后，由于平常驻点于电信，因此 jQuery、H5 仍是要懂的；最后，就是用 Vue 写的报表，以及最近要写的管理平台。”
前端小姐姐：“ECharts 报表的话，你是直接使用 API 的吗？有进行更改吗？”
我：“没有。”
前端小姐姐：“能讲讲可视化拖拽页面吗？”
我：“就是使用 jQueryUI 的 API，进行拖拽生成新的 div 块，而后运营能够配置这个 div 块的数据，最后将这些数据，生成到一个新的 HTML 页面上。”
前端小姐姐：“这个也是使用 jQueryUI 的 API，没有根据实际开发，对它 API 进行一些修改吗？”
我：（尴尬）“没有。”
前端小姐姐：“那你有本身开发的东西吗？”
我：“8 月份的时候，有本身折腾过 Webpack，而后本身搞了一份 Webpack 多页面配置，结合 VS Code 的 Live Share 和本地局域网进行小组开发。”
前端小姐姐：“讲下 CSS 选择器的优先级吧。”
我：“首先，就是 !important 这个；而后就是行内样式；再到 #id，再到 .class，再到标签，再到通配符 *，最后还有一些，不记得了。
前端小姐姐：“嗯，好的，能讲讲 postion 定位吗？”
我：“首先，position 定位的话，默认是 static。而后，若是 position: fixed 的时候，就是相对于根元素进行定位。而后，若是是 position: absolute 的时候，根据前面那个进行了 position: relative 的标记，进行相对定位。而后，positon: relative，我经常使用的就是将它做为 positon: relative 的定位做用。”
前端小姐姐：“这四种脱离文档流的有哪些，不脱离的有哪些？”
我：“absolute 和 fixed 脱离了文档流，而 static 和 relative 没有脱离文档流。”
前端小姐姐：“H5 和 CSS3 用得多么？”
我：“H5 用来写活动页，CSS3 的话，不是不少。”
前端小姐姐：“那你讲讲 CSS3 属性你用哪些比较多？”
我：“rgba、圆角、渐变等……”
前端小姐姐：“渐变的话，假若有一个长方体，上面一种颜色，下面一种颜色，你会怎么作？”
我：“很差意思，由于通常都是作右边和下边的渐变，写得也是比较少，因此不清楚。②”

②：不是不清楚，是真不清楚，若是按钮有渐变，我确定直接裁剪，用背景图来实现这个按钮！

前端小姐姐：“好的，动画有使用过么？”
我：“抱歉，没用过，毕竟业务逻辑比较简单，不过以前大三的时候，学过一段时间 CSS3，可是由于不经常使用，忘了。”
前端小姐姐：“那 H5 的呢？”
我：“H5 的话，好比 <audio>、<video>、<canvas>，<canvas> 的话也是简单了解，好比刮奖游戏，用到了蒙层，就是用 <canvas> 写的。”
前端小姐姐：“知道 H5 有个可拖拽属性吗？”
我：（胡言乱语）
前端小姐姐：“就是将一个东西，从一个位置拖拽到另外一个位置。”
我：“没有。”
前端小姐姐：“好的，了解过缓存这些吗？”
我：“cookies、session、LocalStorage、SessionStorage。”
前端小姐姐：“什么场景使用那些技术？”
我：“cookies 的话，在跟后端交互，例如登陆啥的，比较经常使用③。而后 SessionStorage，它会在浏览器关闭的时候清空掉。最后 LocalStorage，它会在浏览器进行长期存储。“

③：cookies 我还真忘了，毕竟平常都用了 storage，因此想知道的小伙伴能够百度/Google/必应一下，别听我瞎扯。

前端小姐姐：“那 LocalStorage 会根据时间清空吗？仍是会一直存在浏览器上？”
我：“LocalStorage 是不会主动删除的，可是咱们能够设置它的过时时间。”
前端小姐姐：“而后，enm...能讲下什么是闭包吗？”
我：“简单来讲，假若有两个函数 A 和 B，而后 B 函数在 A 函数内，同时 B 能使用函数 A 的变量，那么咱们称函数 B 为闭包。④举个简单的，网上经常使用的例子：for 循环中定义了定时器 setTimeout，里面就涉及闭包了。”

④：关于对话中的一些知识点，最终将会整理成一篇文章，最近还没完成，可是大体有了 1400 多行的文章了：【jsliang 的 2019 面试准备】，刚兴趣的小伙伴能够关注我 GitHub 或者掘金帐号，会持续更新哈~

前端小姐姐：“那为何使用闭包呢？”
我：“其实，工做中我我的不太喜欢闭包，也不推荐闭包，由于它能把人整懵逼了。同时，如今 ES6 的块级定义也有利于减小闭包产生。因此，能不写闭包，就不写闭包。”
前端小姐姐：“那你不使用闭包的缘由是什么？”
我：“1. 代码很差维护，无论是你本身，仍是你的接手人。2. 闭包会产生内部变量，浏览器不会销毁，从而卡内存。”
前端小姐姐：“你使用 ES6 语法比较多吗？”
我：“学过，可是使用很少，例如箭头函数，例如 let 变量。”
前端小姐姐：“那你使用过 Promise 吗？”
我：“确定得用，像微信小程序中，好比一个页面，要调用好几个接口，而后调用要有顺序，这时候就要写 Promise 了。”
前端小姐姐：“能够讲下 Promise 你的用法嘛？”
我：“可能我使用的比较简单，都是用那些简单的。”
前端小姐姐：“还有其余 ES6 语法你用过吗？好比 let、var 以及 const”
我：“let 的话就是局部使用，例如使用 for 之类的，由于它不会污染全局变量；var 的话就是全局变量，能够在一个大的局域内进行调用；最后 const 通常都是在调用接口的时候，用 const 来防止接口返回的数据被修改。”
前端小姐姐：“那你知道哪一个被定义声明变量后，再定义声明变量的话，会报错？”
我：“let 吧！"
前端小姐姐：“好的，框架上的话，Vue、React、Angular 哪一个用的比较多？”
我：“Vue 用得比较多，比如个人毕设，比如 ECharts 报表，以及最近的管理平台。”
前端小姐姐：“好的，路由方面能说说么？”
我：“噼里啪啦扯话题……”
……听了下录音，我扯到模块化去了，这里就不爆丑了……
前端小姐姐：“能讲下 v-if 与 v-show 的区别吗？”
我：“v-if 的话，是往 DOM 树上添加或者删除元素；v-show 的话，使用 display: none 这些来控制显示元素。”
前端小姐姐：“v-for 你使用过程当中，有遇到什么问题或者关注点吗？”
我：“避免将 v-if 和 v-for 放在同一个元素上，由于 v-for 优先级比 v-if 更高。而后使用 v-for 的话，注意下 v-bind:key，由于关系到一些代码优化了。”
前端小姐姐：“v-bind:class 有使用过吗？有什么要注意的吗？”
我：“就是那个动态渲染 class 是吗？使用过，而后须要注意的话，尽可能别写太复杂的判断在上面了，毕竟维护起来麻烦，而后接手的看起来也懵逼。”
前端小姐姐：“而后 ElementUI 里面的栅格化，加入说一行分红三列，中间列隐藏的时候，第三列往前挤，可是我但愿布局不能动，有啥办法？”
我：“中间列使用两个块，一个有内容的，一个大的空块，而后根据判断来显示隐藏哪一块。”
前端小姐姐：“关于响应式，还有其余了解吗？”
我：“？？？”
前端小姐姐：“例如 rem？”
我：“噢噢，在作 H5 活动页的时候，使用 rem，可是这个有问题，就是无论在多少屏幕下看起来都同样，手机看起来好的，可是到了 PC 端，就不太好看了。”
前端小姐姐：“你有遇到什么兼容问题吗？”
我：“浏览器兼容的话，IE 10 如下不考虑，其余就是微信和 IPhone 的兼容，让人难受了。”
前端小姐姐：“而后，我看你简历有说到正则小游戏⑤，能聊聊这个么？”

⑤：jsliang 写的正则小游戏。

我：“通常来讲，登陆注册这些使用正则比较多，若是你让我写一个，我确定要回去看看，毕竟不多用就忘了；可是若是你让我看看某个正则啥意思，仍是能看出来的。”
前端小姐姐：“token 失效问题遇到过么？”
我：“没有。”
前端小姐姐：“能讲下原型链么？”
我：“原型链涉及到面向对象，若是在一些比较赶的项目中，可能不会使用，由于通常直接用面向过程的方法来写，通常原型链都是涉及到继承方面的东东。⑥”

⑥：这是个大块，前端必考题，具体的能够查看个人文章【jsliang 的 2019 面试准备】，固然如今还没写完，jsliang 介绍起来也结巴，因此感受那时候回答的也不是很是好。

前端小姐姐：“好的。能聊聊 Ajax 的原理，以及你的使用方法吗？”
我：“很差意思，不太清楚，通常都是用 jQuery 封装好的，或者 Axios。”
前端小姐姐：“那你能讲下 get 和 post 请求吗？”
我：“get 的话会在浏览器的 url 上看到，post 的话相对于 get 安全点。固然，这个安全也是有限的，毕竟前端没有说特别安全的地方。而后就是 get 请求能传的比较少，post 请求能传的数据比较多。”
前端小姐姐：“好的，大体我就清楚了，请稍等回，我跟负责人说下。”
我：“好的，谢谢。”

总结：

首先，小姐姐考点，仍是比较全的，从 HTML 到 CSS 再到 JS，最后到我简历的一些点，都能聊到。

而后，小姐姐的话题，我的感受仍是比较贴近她工做的，不少时候牵扯的知识点，在工做上应该都是她印象比较深入的。

最后，感慨下：哇塞好厉害的小姐姐！