阅读 6607

记一次前端面试的全过程

引言

接上一篇面试总结一年半经验,百度、有赞、阿里面试总结,把这段时间的面试总结结束一下吧。

本文主要记录一下当天面试的全过程(可能有遗漏,事隔三四天了,我已经尽量回忆了),答案亦为参考答案,仅供借鉴。

原文地址

正文

有赞一面结束后过了两天就收到了二面的邀请,我回复面试邀请的短信,说最近可能请假太多,能不能约到晚上面试,对方很很爽快的答应了,就约在了晚上七点半,我回复可以的,然后第二天,收到了确切的面试的时间和地点,时间定在了晚上7点15分。

到了面试当天,我提前了五分钟下班,照着百度地图的提示路线(约1小时9分钟),到了公交站等车。。。然后等呀等,等了十五分钟公交还没来,怕自己迟到,就打了个滴滴过去,到了面试地点之后上到了公司的前台,前台没有人,可能是因为到饭点了,前台去吃饭了吧。然后看到前台那层楼好多人在打乒乓球,大家也玩得挺开心,看起来环境也很不错,当时想,诶呀,原来有赞的环境这么好。等了一会儿之后,看了一下短信,发现面试邀请里留有面试官的联系电话,果断打了过去,过了一会儿面试官到前台接我,然后找了一个会议室,开始了当天的面试。


面试官:先自我介绍吧

我:巴拉巴拉...

面试官:先说一下你上一家公司的研发部署流程

我:巴拉巴拉...(其实这个是我绝活,每次都可以吹很久)

面试官:既然你们是文件覆盖式发布,那你们的缓存是怎么刷新的

我:从公司的业务出发,巴拉巴拉...(还没说完)

面试官:那我现在就不谈业务,你说一下浏览器的缓存方案吧

我:哦,脱离业务呀,首先,浏览器有两种缓存方案,一种是强缓存一种是协商缓存。

面试官:嗯,那怎么使用强缓存?

我:浏览器在第一次请求资源的时候,服务端响应头里可以设置expires字段,该字段表示该资源的缓存过期时间,第二次请求的时候,如果时间还在该缓存时间之内,则会直接使用缓存,否则重新加载资源,这个expires字段有个缺陷,就是它必须服务端和客户端的时间严格同步才能生效,所以现在很多人不会使用改方案。另外一种方案是第一次请求资源的时候,服务端设置响应头cache-control: max-age,这样设置的意思是告诉浏览器,这个资源什么时候过期,等第二次请求资源的时候,判断是否超出了过期时间,如果没超出,直接使用缓存。

面试官:cache-control这个头是服务端设置的还是客户端设置的?

我:cache-control服务端设置的

面试官:cache-control的其他值,你也说一下吧

我:首先是public,客户端和服务端都可以缓存;然后是private,只能客户端缓存;no-store,不使用缓存;no-cache,使用协商缓存。

面试官:那你往下说,说一下协商缓存

我:协商缓存有两种,一种是Last-Modified,就是第一次请求资源的时候,服务端会在响应头里面设置该字段,表示该资源的最后修改时间,浏览器第二次请求该资源的时候,会在请求头里面加上一个字段If-Modified-Since,值为第一次请求的时候服务端返回的Last-Modified的值,服务端会判断资源当时的最后更改时间与请求头里面的If-Modified-Since字段是否相同,如果相同,则告诉客户端使用缓存,否则重新下载资源。然后另外一种协商缓存时使用ETag,原理与Last-Modified类似,就是第一次请求的时候,服务端会根据资源的内容或者最后修改时间生成一个标识,然后在响应头里面设置为ETag返回给客户端,客户端第二次请求的时候会在请求头里面带上这个ETag,也就是在请求头里面加上If-None-Match字段,服务端接收到了ETag之后判断是否与原来第一次的标识相同,如果相同,则告诉客户端使用缓存。

说一下Last-modified/If-Modified-Since和If-None-Match/ETag两种方案的优缺点

我:嗯呢,这个我想一想(我并不知道,假装思考一下)......我觉得其实ETag其实也是有的时候是根据资源的最后修改时间生成的,原理和Last-modified好像有点类似,而ETag需要耗费服务端的资源去生成,所以性能较低。。。(虽然不会,也尽量说说,万一面试官也不知道呢。哈哈哈哈)

面试官:那说一下性能优化的方案吧

我:首先,减少HTTP请求次数,比如说合并CSS和JS文件,但是也不要完全的合并在同一个文件里面,一个域名分散三四个资源,这样方便浏览器去并行下载,当然浏览器对每个域名的并行下载个数有限制,一个域名分配三四个资源虽然增加了HTTP请求数量,但是对比并行下载来说,性价比更高。

面试官:为什么浏览器要限制同一域名并行下载资源的个数。

我:嗯呢,这个我也想一下(其实我也不知道)......这个我没有深究过,难道是因为浏览器启动了太多下载线程的原因?

面试官:下载资源和线程有什么关系?

我:除了了每个标签页是一个进程以外,浏览器有一个进程是专门用来管理下载,我觉得大概是每下载一个资源启动一个线程吧(反正我也不知道,也猜猜结果是不是这样)

面试官:(沉默了一会儿),进程和线程区别是什么

我:进程是分配内存的最小单位,线程是CPU调度的最小单位,进程可以包含多个线程。

面试官:nodejs用得多吗?说一下nodejs进程之间是怎么通信的

我:nodejs用的比较少,nodejs可以启动子线程,然后用主线程来监听订阅子线程的消息,子线程之间的通信,由主线程来控制。(大概错了吧,应该是进程)

面试官:好吧,性能优化继续往下说

我:减少HTTP请求数量还可以把图标合并在同一张图片里面,使用的时候用background-position去控制。然后首屏的时候图片使用懒加载的形式,尽量在需要显示的时候在加载它,当然占位符和图片尽量指定宽度和高度,避免图片加载完之后替换图片浏览器会进行回流。

面试官:图片懒加载怎么实现

我:监听浏览器的滚动事件,结合clientHeight、offsetHeight、scrollTop、scrollHeight等等变量计算当前图片是否在可视区域,如果在,则替换src加载图片,当然这个滚动事件要主要节流。

面试官:怎么判断图片是否加载完成

我:使用onload事件。

面试官:好吧,你继续往下说。

我:性能优化的话,还可以合理的利用缓存,尽量把CSS和JS文件使用外链的形式,虽然使用内联的CSS和JS在空缓存的时候更快,因为内联的样式和脚本不需要发送HTTP请求,但是为了尽量发挥浏览器的缓存功能,尽量使用外链形式。

我:然后尽量把CSS放在头部,JS放在底部。

面试官:假如现在页面里放在head的css文件下载速度很慢,页面会出现什么情况?

我:大概页面会等待这个CSS的下载,这个时候页面是白屏状态,然后这个CSS资源会有一个超时时间,假如超过了这个超时时间,这个资源相当于会下载失败,浏览器会直接跳过这个CSS资源,根据已有的CSS资源生成CSS规则树,进而生成Render树,然后渲染页面。

面试官:假如我现在在页面动态添加了一个CSS文件,页面一定会回流吗?

我:只要加入的CSS影响到了页面的结构,那么浏览器就会回流。

面试官:例如页面这个CSS文件中有translate3d呢?

我:其实我感觉它不会回流,因为translate3d只是变换了自己的位置,不会影响其他元素的位置,但是实际上是会造成回流的。

面试官:那假如我在页面里面加了一个<div style="position:absolute;width:0;hegiht:0"></div>呢,会回流吗

我:不会,因为没有影响页面结构的变化。

面试官:好吧,那你继续往下说

我:性能优化,尽量使用CDN。

面试官:CDN的原理是啥?

我:首先,浏览器会先请求CDN域名,CDN域名服务器会给浏览器返回指定域名的CNAME,浏览器在对这些CNAME进行解析,得到CDN缓存服务器的IP地址,浏览器在去请求缓存服务器,CDN缓存服务器根据内部专用的DNS解析得到实际IP,然后缓存服务器会向实际IP地址请求资源,缓存服务器得到资源后进行本地保存和返回给浏览器客户端。

面试官:你来实现以下刚刚说的节流函数吧

。。。当时有点不记得什么是防抖,什么节流,把函数写成了防抖。(这个时候有一个人走进了会议室,好像是一面小哥)

var debounce = function(fn, delay, context) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      const arg = Array.prototype.slice.call(arguments);
      fn.apply(context, arg);
    }, delay)
  }
}

// 测试部分
var run = function(text) {
  console.log(text);
}

run = debounce(run, 200);

run('run1');
run('run2');

setTimeout(() => {
  run('run3');
}, 201)

复制代码

面试官:我这边没有什么问题了,你还有什么要补充的吗?

我:那我把性能优化这个问题说完?

面试官:可以。

然后我开始描述使用webpack使用进行减少js文件的体积,可以使用babel-plugin-import、babel-plugin-component、webpack.ContextReplacementPlugin、webpack.IgnorePlugin...

面试官:这个我知道。你还有什么问题吗?(大概是想结束面试了吧,不想让我往下说了)

我:巴拉巴拉。。。问了很多关于有赞公司的问题,比如公司有多少层楼啊、公司主要技术栈啊、公司主要做2B还是2C的啊,公司有多少前端的啊(本人可能还是太啰嗦)

最后问了一个问题,问了一下面试官本次便是的评价是啥,面试官只回了一句,还好吧。然后面试到此结束了,全称大概一个多小时。


面试结束后,面试官送我到电梯口。。。可以说楼层是真的高,上楼和下楼都需要等很久的电梯。。。到了外面之后,下着大雨,落汤鸡似的又打了个滴滴回家,结束了当天的面试之旅。

最后

直到昨天,收到了有赞的面试结果回复邮件,告知没有合适的职位(有赞还是挺不错的,没通过面试还通知一下),心里虽然有点不甘,但是想想确实可能是自己不够优秀,或者是自己面得不是很好,或者是自己的能力跟公司的职位不太匹配。

在上一篇面试总结中一年半经验,百度、有赞、阿里面试总结,部分同学关心最后面试结果情况,情况是已经有幸的收到了百度的offer,蚂蚁金服的一面面试已经过一周了,不知道是因为流程太长还是一面被挂了。

这个时候一想,其实面试还是有很大的运气成分在里面,正好公司需要,正好你又合适,这个时候就很幸运。

关注下面的标签,发现更多相似文章
评论

查看更多 >