资讯专栏INFORMATION COLUMN

【周刊-2】三年大厂面试官-前端面试题(偏难)

xi4oh4o / 2650人阅读

摘要:前言在大厂工作了年,当了年的前端面试官,把大厂常问的面试题与答案汇总在我的中。第题如何劫持的请求,提供思路难度阿里腾讯很多人在上搜索前端面试详解,把答案倒背如流,但是问到如何劫持请求的时候就一脸懵逼,是因为还是停留在理论性阶段。

前言

在大厂工作了6年,当了3年的前端面试官,把大厂常问的面试题与答案汇总在我的Github中。希望对大家有所帮助,助力大家进入自己理想的企业。

项目地址是:https://github.com/airuikun/W...

如果你在大厂面试的时候遇到了什么不懂的问题,欢迎给我提issue,我会把答案和考点都列出来,公布在下一期的面试周刊里。

面试题精选

大家如果去大厂面试过,就会发现,在网上刷了很多的前端面试题,但是去大厂面试的时候还是一头雾水,那是因为那些在网上一搜就能搜出来的题,大厂的面试官基本看不上,他们都会问一些开放题,在回答开放题的过程中,就能摸清你知识技能的广度和深度,所以本期会加入几道我在面试候选人常用的开放题,供大家学习和思考。

我把下面每道题的难度高低,和对标了大厂的多少职级,都写上去了,大家可以参考一下自己是什么职级。

第 1 题:如何劫持https的请求,提供思路 难度:阿里p6+ ~ p7、腾讯t23 ~ t31

很多人在google上搜索“前端面试 + https详解”,把答案倒背如流,但是问到如何劫持https请求的时候就一脸懵逼,是因为还是停留在https理论性阶段。

想告诉大家的是,就算是https,也不是绝对的安全,以下提供一个本地劫持https请求的简单思路。

模拟中间人攻击,以百度为例

先用OpenSSL查看下证书,直接调用openssl库识别目标服务器支持的SSL/TLS cipher suite

    openssl s_client -connect www.baidu.com:443

用sslcan识别ssl配置错误,过期协议,过时cipher suite和hash算法

    sslscan -tlsall www.baidu.com:443

分析证书详细数据

    sslscan -show-certificate --no-ciphersuites www.baidu.com:443

生成一个证书

    openssl req -new -x509 -days 1096 -key ca.key -out ca.crt

开启路由功能

    sysctl -w net.ipv4.ip_forward=1

写转发规则,将80、443端口进行转发给8080和8443端口

    iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8080 
    iptables -t nat -A PREROUTING -p tcp --dport 443 -j REDIRECT --to-ports 8443

最后使用arpspoof进行arp欺骗

如果你有更好的想法或疑问,欢迎在这题目对应的github下留言:https://github.com/airuikun/W...

第 2 题:前端如何进行seo优化 难度:阿里p5、腾讯t21

合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可;description把页面内容高度概括,不可过分堆砌关键词;keywords列举出重要关键词。

语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页

重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,保证重要内容一定会被抓取

重要内容不要用js输出:爬虫不会执行js获取内容

少用iframe:搜索引擎不会抓取iframe中的内容

非装饰性图片必须加alt

提高网站速度:网站速度是搜索引擎排序的一个重要指标

如果你有更好的答案或想法,欢迎在这题目对应的github下留言:https://github.com/airuikun/W...

第 3 题:前后端分离的项目如何seo 难度:阿里p6 ~ p6+、腾讯t22 ~ t23

使用prerender。但是回答prerender,面试官肯定会问你,如果不用prerender,让你直接去实现,好的,请看下面的第二个答案。

先去 https://www.baidu.com/robots.txt 找出常见的爬虫,然后在nginx上判断来访问页面用户的User-Agent是否是爬虫,如果是爬虫,就用nginx方向代理到我们自己用nodejs + puppeteer实现的爬虫服务器上,然后用你的爬虫服务器爬自己的前后端分离的前端项目页面,增加扒页面的接收延时,保证异步渲染的接口数据返回,最后得到了页面的数据,返还给来访问的爬虫即可。

如果你有更好的答案或想法,欢迎在这题目对应的github下留言:https://github.com/airuikun/W...

第 4 题:简单实现async/await中的async函数 难度:阿里p6 ~ p6+、腾讯t22 ~ t23

async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里

function spawn(genF) {
    return new Promise(function(resolve, reject) {
        const gen = genF();
        function step(nextF) {
            let next;
            try {
                next = nextF();
            } catch (e) {
                return reject(e);
            }
            if (next.done) {
                return resolve(next.value);
            }
            Promise.resolve(next.value).then(
                function(v) {
                    step(function() {
                        return gen.next(v);
                    });
                },
                function(e) {
                    step(function() {
                        return gen.throw(e);
                    });
                }
            );
        }
        step(function() {
            return gen.next(undefined);
        });
    });
}

如果你有更好的答案或想法,欢迎在这题目对应的github下留言:https://github.com/airuikun/W...

第 5 题:1000-div问题 难度:阿里p5 ~ p6、腾讯t21 ~ t22

一次性插入1000个div,如何优化插入的性能

使用Fragment

    var fragment = document.createDocumentFragment();
    fragment.appendChild(elem);

向1000个并排的div元素中,插入一个平级的div元素,如何优化插入的性能

先display:none 然后插入 再display:block

赋予key,然后使用virtual-dom,先render,然后diff,最后patch

脱离文档流,用GPU去渲染,开启硬件加速

如果你有更好的答案或想法,欢迎在这题目对应的github下留言:https://github.com/airuikun/W...

第 6 题:(开放题)2万小球问题:在浏览器端,用js存储2万个小球的信息,包含小球的大小,位置,颜色等,如何做到对这2万条小球信息进行最优检索和存储 难度:阿里p7、腾讯t31

你面试阿里和腾讯,能否上p7和t31,就看你对开放题能答有多深和多广。

这题目考察你如何在浏览器端中进行大数据的存储优化和检索优化。

如果你仅仅只是答用数组对象存储了2万个小球信息,然后用for循环去遍历进行索引,那是远远不够的。

这题要往深一点走,用特殊的数据结构和算法进行存储和索引。

然后进行存储和速度的一个权衡和对比,最终给出你认为的最优解。

我提供几个能触及阿里p7和腾讯t31级别的思路:

用ArrayBuffer实现极致存储

哈夫曼编码 + 字典查询树实现更优索引

用bit-map实现大数据筛查

用hash索引实现简单快捷的检索

用IndexedDB实现动态存储扩充浏览器端虚拟容量

用iframe的漏洞实现浏览器端localStorage无限存储,实现2千万小球信息存储

这种开放题答案不唯一,也不会要你现场手敲代码去实现,但是思路一定要行得通,并且是能打动面试官的思路,如果大家有更好的idea,欢迎大家到我的github里补充:https://github.com/airuikun/W...

第 7 题:(开放题)接上一题如何尽可能流畅的实现这2万小球在浏览器中,以直线运动的动效显示出来 难度:阿里p6+ ~ p7、腾讯t23 ~ t31

这题考察对大数据的动画显示优化,当然方法有很多种。

但是你有没有用到浏览器的高级api?

你还有没有用到浏览器的专门针对动画的引擎?

或者你对3D的实践和优化,都可以给面试官展示出来。

提供几个思路:

使用GPU硬件加速

使用webGL

使用assembly辅助计算,然后在浏览器端控制动画帧频

用web worker实现javascript多线程,分块处理小球

用单链表树算法和携程机制,实现任务动态分割和任务暂停、恢复、回滚,动态渲染和处理小球

如果大家有更好的idea,欢迎大家到我的github里补充:https://github.com/airuikun/W...

第 8 题:(开放题)100亿排序问题:内存不足,一次只允许你装载和操作1亿条数据,如何对100亿条数据进行排序。 难度:阿里p6+ ~ p7、腾讯t23 ~ t31

这题是考察算法和实际问题结合的一个问题

众所周知,腾讯玩的是社交,用户量极大。很多场景的数据量都是百亿甚至千亿级别。

那么如何对这些数据进行高效的操作呢,可以通过这题考察出来。

以前老听说很多人问,前端学算法没有用,考算法都是垃圾,面不出候选人的能力

其实。。。老哥实话告诉你,当你在做前端需要用到crc32、并查集、字典树、哈夫曼编码、LZ77之类东西的时候

已经是涉及到框架实现和极致优化层面了

那时你就已经到了另外一个前端高阶境界了

所以不要抵触算法,可能只是我们目前的眼界和能力,还没触及到那个层级

我前面已经公布了两道开放题的答案了,相信大家已经有所参悟。我觉得在思考开放题的过程中,会有很多意想不到的成长,所以我建议这道题大家可以尝试自己思考一下。本题答案会在周五公布到我的github上。
对应的github地址为:https://github.com/airuikun/W...

第 9 题:(开放题)a.b.c.d和a"b"["d"],哪个性能更高 难度:阿里p7 ~ p7+、腾讯t31 ~ t32

别看这题,题目上每个字都能看懂,但是里面涉及到的知识,暗藏杀鸡

这题要往深处走,会涉及ast抽象语法树、编译原理、v8内核对原生js实现问题

直接对标阿里p7 ~ p7+和腾讯t31 ~ t32职级,我觉得这个题是这篇文章里最难的一道题,所以我放在了开放题中的最后一题

大家多多思考,本题答案会在周五公布到我的github上

对应的github地址为:https://github.com/airuikun/W...

第 10 题:git时光机问题 难度:阿里p5 ~ p6+、腾讯t21 ~ t23

现在大厂,已经全部都是用git了,基本没人使用svn了

很多面试候选人对git只会commit、pull、push

但是有没有使用过reflog、cherry-pick等等,这些都很能体现出来你对代码管理的灵活程度和代码质量管理。

针对git时光机经典问题,我专门写了一个文章,轻松搞笑通俗易懂,大家可以看一下,放松放松,同时也能学到对git的时光机操作《git时光机》

结语

本人还写了一些前端进阶知识的文章,如果觉得不错可以点个star。

blog项目地址是:https://github.com/airuikun/blog

我是小蝌蚪,高级前端工程师,跟着我一起每周攻克几个前端技术难点。希望在小伙伴前端进阶的路上有所帮助,助力大家进入自己理想的企业。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/59156.html

相关文章

  • 周刊-2三年大厂面试-前端面试偏难

    摘要:前言在大厂工作了年,当了年的前端面试官,把大厂常问的面试题与答案汇总在我的中。第题如何劫持的请求,提供思路难度阿里腾讯很多人在上搜索前端面试详解,把答案倒背如流,但是问到如何劫持请求的时候就一脸懵逼,是因为还是停留在理论性阶段。前言 在大厂工作了6年,当了3年的前端面试官,把大厂常问的面试题与答案汇总在我的Github中。希望对大家有所帮助,助力大家进入自己理想的企业。 项目地址是:git...

    silvertheo 评论0 收藏0
  • 周刊-2三年大厂面试-前端面试偏难

    摘要:前言在大厂工作了年,当了年的前端面试官,把大厂常问的面试题与答案汇总在我的中。第题如何劫持的请求,提供思路难度阿里腾讯很多人在上搜索前端面试详解,把答案倒背如流,但是问到如何劫持请求的时候就一脸懵逼,是因为还是停留在理论性阶段。 前言 在大厂工作了6年,当了3年的前端面试官,把大厂常问的面试题与答案汇总在我的Github中。希望对大家有所帮助,助力大家进入自己理想的企业。 项目地址是:...

    joywek 评论0 收藏0
  • 周刊-2三年大厂面试-前端面试偏难

    摘要:前言在大厂工作了年,当了年的前端面试官,把大厂常问的面试题与答案汇总在我的中。第题如何劫持的请求,提供思路难度阿里腾讯很多人在上搜索前端面试详解,把答案倒背如流,但是问到如何劫持请求的时候就一脸懵逼,是因为还是停留在理论性阶段。 前言 在大厂工作了6年,当了3年的前端面试官,把大厂常问的面试题与答案汇总在我的Github中。希望对大家有所帮助,助力大家进入自己理想的企业。 项目地址是:...

    madthumb 评论0 收藏0
  • 前端最强面经汇总

    摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...

    wangjuntytl 评论0 收藏0
  • 周刊-1】三年大厂面试-面试精选及答案

    摘要:前言在阿里和腾讯工作了年,当了年的前端面试官,把期间我和我的同事常问的面试题和答案汇总在我的中。项目地址是我是小蝌蚪,腾讯高级前端工程师,跟着我一起每周攻克几个前端技术难点。 前言 在阿里和腾讯工作了6年,当了3年的前端面试官,把期间我和我的同事常问的面试题和答案汇总在我 Github 的 Weekly-FE-Interview 中。希望对大家有所帮助。 如果你在bat面试的时候遇到了...

    Bamboy 评论0 收藏0

发表评论

0条评论

xi4oh4o

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<