本文原载于SegmentFault专栏"腾讯新闻前端团队"
作者：第一名的
小蝌蚪，腾讯高级前端工程师。
整理编辑：SegmentFault
作者在阿里和腾讯工作了6年，当了3年的前端面试官，近日他把
阿里和腾讯常问的前端面试题与答案汇总
，SF小姐姐整理后发给大家。希望对你有所帮助，助力大家进入自己理想的企业。
如果你在阿里和腾讯面试的时候遇到了什么不懂的问题，也欢迎到SegmentFault社区或者本文下留言，作者会把答案和考点都列出来，公布在下一期的面试周刊里。
大家如果去阿里和腾讯面试过，就会发现，在网上刷了很多的前端面试题，但是去大厂面试的时候还是一头雾水，那是因为那些在网上一搜就能搜出来的题，大厂的面试官基本看不上，
他们都会问一些开放题，在回答开放题的过程中，就能摸清你知识技能的广度和深度
，所以本期会加入几道我在面试候选人常用的开放题，供大家学习和思考。
我把下面每道题的难度高低，和对标了阿里和腾讯的多少职级
，都写上去了，大家可以参考一下自己是什么职级。
第 1 题：
如何劫持https的请求，提供思路
难度：阿里p6+ ~ p7、腾讯t23 ~ t31
很多人在google上搜索“前端面试 + https详解”，把答案倒背如流，但是问到如何劫持https请求的时候就一脸懵逼，是因为还是停留在https理论性阶段。
我们腾讯新闻部门在18年年底的时候，新疆地区打开腾讯新闻页面全都是被篡改后的页面，但是我们的网站都是https协议的，为什么还会被劫持和篡改呢？因为有人在路由层面上动了手脚，具体方法因为涉密所以不方便公布。
想告诉大家的是，就算是https，也不是绝对的安全，以下提供一个本地劫持https请求的简单思路。
模拟中间人攻击，以百度为例——
openssl s_client -connect www.baidu.com:443
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
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
第 2 题：
前端如何进行SEO优化
难度：阿里p5、腾讯t21
-
合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
-
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
-
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
-
重要内容不要用js输出：爬虫不会执行js获取内容
-
少用iframe：搜索引擎不会抓取iframe中的内容
-
非装饰性图片必须加alt
-
提高网站速度：网站速度是搜索引擎排序的一个重要指标
第 3 题：
前后端分离的项目如何SEO
难度：阿里p6 ~ p6+、腾讯t22 ~ t23
-
使用prerender。但是回答prerender，面试官肯定会问你，如果不用prerender，让你直接去实现，好的，请看下面的第二个答案。
-
先去 https://www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫，就用nginx方向代理到我们自己用nodejs + puppeteer实现的爬虫服务器上，然后用你的爬虫服务器爬自己的前后端分离的前端项目页面，增加扒页面的接收延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即可。
第 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); }); });}
第 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去渲染，开启硬件加速
第 6 题：
（开放题）2万小球问题：
在浏览器端，用js存储2万个小球的信息，包含小球的大小，位置，颜色等，如何做到对这2万条小球信息进行最优检索和存储
难度：阿里p7、腾讯t31
你面试阿里和腾讯，能否上p7和t31，就看你对开放题能答有多深和多广。
这题目考察你如何在浏览器端中进行大数据的存储优化和检索优化。
如果你仅仅只是答用数组对象存储了2万个小球信息，然后用for循环去遍历进行索引，那是远远不够的。
这题要往深一点走，用特殊的数据结构和算法进行存储和索引。然后进行存储和速度的一个权衡和对比，最终给出你认为的最优解。
我提供几个能触及阿里p7和腾讯t31级别的思路：
这种开放题答案不唯一，也不会要你现场手敲代码去实现，但是思路一定要行得通，并且是能打动面试官的思路。
第 7 题：
（开放题）接上一题如何尽可能流畅的实现这2万小球在浏览器中，以直线运动的动效显示出来
难度：阿里p6+ ~ p7、腾讯t23 ~ t31
这题考察对大数据的动画显示优化，当然方法有很多种。
但是你有没有用到浏览器的高级api？
你还有没有用到浏览器的专门针对动画的引擎？
或者你对3D的实践和优化，都可以给面试官展示出来。
提供几个思路：
-
使用GPU硬件加速
-
使用webGL
-
使用assembly辅助计算，然后在浏览器端控制动画帧频
-
用web worker实现javascript多线程，分块处理小球
-
用单链表树算法和携程机制，实现任务动态分割和任务暂停、恢复、回滚，动态渲染和处理小球
第 8 题：
（开放题）100亿排序问题：
内存不足，一次只允许你装载和操作1亿条数据，如何对100亿条数据进行排序。
难度：阿里p6+ ~ p7、腾讯t23 ~ t31
这题是考察算法和实际问题结合的一个问题。
众所周知，腾讯玩的是社交，用户量极大。很多场景的数据量都是百亿甚至千亿级别。那么如何对这些数据进行高效的操作呢？可以通过这题考察出来。
以前老听说很多人问，前端学算法没有用，考算法都是垃圾，面不出候选人的能力。
其实，老哥实话告诉你，当你在做前端需要用到crc32、并查集、字典树、哈夫曼编码、LZ77之类东西的时候，已经是涉及到框架实现和极致优化层面了，那时你就已经到了另外一个前端高阶境界了。
所以不要抵触算法，可能只是我们目前的眼界和能力，还没触及到那个层级。
我前面已经公布了两道开放题的答案了，相信大家已经有所参悟。我觉得在思考开放题的过程中，会有很多意想不到的成长，所以我建议这道题大家可以尝试自己思考一下。
本道题目的答案，请到SegmentFault社区关注作者的后续更新。
第 9 题：
（开放题）a.b.c.d和a'b'['d']，哪个性能更高
难度：阿里p7 ~ p7+、腾讯t31 ~ t32
别看这题，题目上每个字都能看懂，但是里面涉及到的知识，暗藏玄机。
这题要往深处走，会涉及ast抽象语法树、编译原理、v8内核对原生js实现问题。
直接对标阿里p7 ~ p7+和腾讯t31 ~ t32职级，我觉得这个题是这篇文章里最难的一道题，所以我放在了开放题中的最后一题。
