[周刊-2] 三年大厂面试官-前端面试题披露（偏难）

[tony19890820]

前言

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

项目地址是： https://github.com/airuikun/Weekly-FE-Interview

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

面试题精选

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

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

第 1 题：如何劫持 https 的请求，提供思路

难度：阿里 p6+ ~ p7、腾讯 t23 ~ t31

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

我们腾讯新闻部门在 18 年年底的时候，新疆地区打开腾讯新闻页面全都是被篡改后的页面，但是我们的网站都是 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/Weekly-FE-Interview/issues/11

第 2 题：前端如何进行 seo 优化

难度：阿里 p5、腾讯 t21

• 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可； description 把页面内容高度概括，不可过分堆砌关键词； keywords 列举出重要关键词。
• 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，保证重要内容一定会被抓取
• 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
• 少用 iframe：搜索引擎不会抓取 iframe 中的内容
• 非装饰性图片必须加 alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

如果你有更好的答案或想法，欢迎在这题目对应的 github 下留言： https://github.com/airuikun/Weekly-FE-Interview/issues/12

第 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/Weekly-FE-Interview/issues/13

第 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/Weekly-FE-Interview/issues/14

第 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/Weekly-FE-Interview/issues/15

第 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/Weekly-FE-Interview/issues/16

第 7 题：（开放题）接上一题如何尽可能流畅的实现这 2 万小球在浏览器中，以直线运动的动效显示出来

难度：阿里 p6+ ~ p7、腾讯 t23 ~ t31

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

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

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

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

提供几个思路：

• 使用 GPU 硬件加速
• 使用 webGL
• 使用 assembly 辅助计算，然后在浏览器端控制动画帧频
• 用 web worker 实现 javascript 多线程，分块处理小球
• 用单链表树算法和携程机制，实现任务动态分割和任务暂停、恢复、回滚，动态渲染和处理小球

如果大家有更好的 idea，欢迎大家到我的 github 里补充： https://github.com/airuikun/Weekly-FE-Interview/issues/17

第 8 题：（开放题） 100 亿排序问题：内存不足，一次只允许你装载和操作 1 亿条数据，如何对 100 亿条数据进行排序。

难度：阿里 p6+ ~ p7、腾讯 t23 ~ t31

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

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

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

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

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

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

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

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

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

第 9 题：（开放题） a.b.c.d 和 a['b']['c']['d']，哪个性能更高

难度：阿里 p7 ~ p7+、腾讯 t31 ~ t32

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

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

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

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

对应的 github 地址为： https://github.com/airuikun/Weekly-FE-Interview/issues/19

第 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

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

交流

欢迎关注我的微信公众号，微信扫下面二维码或搜索“前端屌丝”，讲述了一个前端屌丝逆袭的心路历程，共勉。

[wktrf]

一上来就是 https 劫持，你们是怎么破掉的呢？