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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2049 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

在阿里和腾讯工作了 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