前言
在阿里和腾讯工作了 6 年，当了 3 年的前端面试官，把阿里和腾讯常问的面试题与答案汇总在我的 Github 中。希望对大家有所帮助，助力大家进入自己理想的企业。
项目地址是：https://github.com/airuikun/W…
如果你在阿里和腾讯面试的时候遇到了什么不懂的问题，欢迎给我提 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/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
我是小蝌蚪，腾讯高级前端工程师，跟着我一起每周攻克几个前端技术难点。希望在小伙伴前端进阶的路上有所帮助，助力大家进入自己理想的企业。
交流
欢迎关注我的微信公众号，微信扫下面二维码或搜索“前端屌丝”，讲述了一个前端屌丝逆袭的心路历程，共勉。