前言我在大厂工作6年，做前端面试官3年。我在我的Github中总结了大厂经常问的面试问题和答案。希望对大家有所帮助，帮助大家进入理想的公司。项目地址为：https://github.com/airuikun/W...如果大家在大厂面试的时候遇到不懂的问题，可以提交issue给我，我会列出答案和测试点。刊登于下一期《访谈周刊》。面试题的选择如果去大厂面试，你会发现自己在网上看了很多前端面试题，但是去大厂面试还是一头雾水。大厂的面试官基本上不喜欢这个问题，他们会问一些开放性的问题，在回答开放性问题的过程中，你可以发现自己的知识和技能的广度和深度，所以这一期会增加一些问题我是面试考生常用的开放式问题，供大家研究和思考。我在下面记下了每道题的难易程度，以及对标过的大厂的排名。你可以参考你是什么级别的。问题一：如何劫持https请求，提供思路难度：阿里p6+~p7，腾讯t23~t31很多人谷歌搜索“前端面试+https详解”，倒着背答案，但是当被问到如何劫持https时requests就看糊涂了，因为还停留在https的理论阶段。我想告诉你的是，即使是https也不是绝对安全的。这是一个在本地劫持https请求的简单想法。模拟中间人攻击，以百度为例，先使用OpenSSL查看证书，直接调用openssl库识别目标服务器支持的SSL/TLS密码套件openssls_client-connectwww.baidu.com:443使用sslcan识别ssl配置错误、过期协议、过时的密码套件和哈希算法sslscan-tlsallwww.baidu.com:443分析证书详细数据sslscan-show-certificate--no-ciphersuiteswww.baidu.com:443生成证书opensslreq-new-x509-days1096-keyca.key-outca.crt启用路由功能sysctl-wnet.ipv4.ip_forward=1写转发规则，将80和443端口转发到8080和8443端口iptables-tnat-APREROUTING-ptcp--dport80-jREDIRECT--to-ports8080iptables-tnat-APREROUTING-ptcp--dport443-jREDIRECT--to-ports8443最后使用arp欺骗之arpspoof如果大家有更好的想法或者疑惑，欢迎在本主题对应的github下留言：https://github.com/airuikun/W...问题2：如何优化SEO难度前端：阿里p5、腾讯t21合理的title、description、keywords：搜索对三项的权重一一降低，title值可以强调重点；描述高度概括了页面内容，关键词不能堆砌太多；关键词列出重要的关键词。语义HTML代码，符合W3C规范：语义代码使搜索引擎更容易理解网页的重要内容。HTML代码放在顶部：搜索引擎从上到下抓取HTML，以确保抓取重要内容。使用js输出：爬虫不会执行js获取内容少用iframe：搜索引擎不会爬取iframe中的内容非装饰图片必须加alt提高网站速度：网站速度是搜索引擎排名的重要指标如果你有更多好的答案或想法，欢迎在本主题对应的github下留言：https://github.com/airuikun/W...问题三：如何分离项目前后端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...问题四：async/await中async函数的简单实现难度：阿里p6~p6+、腾讯t22~t23async函数的实现原理是将Generator函数和自动执行器封装在一个函数中functionspawn(genF){returnnewPromise(function(resolve,reject){constgen=genF();functionstep(nextF){letnext;try{next=nextF();}catch(e){returnreject(e);}if(next.done){returnresolve(next.value);}Promise.resolve(next.value).then(function(v){step(function(){returngen.next(v);});},function(e){step(function(){returngen.throw(e);});});}step(function(){returngen.next(undefined);});});}如果大家有更好的答案或者想法，请在本题对应的github下留言：https://github.com/airuikun/W...第5题：1000-div题目难度：阿里p5~p6，腾讯t21~t22一次插入1000个div，如何优化插入性能useFragmentvarfragment=document.createDocumentFragment();fragment.appendChild(elem);在1000个并排的div元素中插入一个leveldiv元素，如何优化先插入display:none再插入再display:block分配key的性能，然后使用virtual-dom，先render，再diff，最后补丁出文档流，使用GPU渲染，开启硬件加速如果你有更好的答案或者想法欢迎在本题对应的github下留言：https://github.com/airuikun/W...第6题：（开放题）20000个小球问题：在浏览器端，利用js存储20000个球的信息，包括球的大小、位置、颜色等，如何实现最优检索和这20000个球信息的存储难度：阿里p7，腾讯t31你面试阿里和腾讯，能不能上到p7和t31就看你能把openquestions回答多深多广了。这个问题检查你如何优化浏览器中大数据的存储和检索。如果只是用一个数组对象存储20000个小球信息，然后用for循环遍历索引，是不行的。这个问题要深入一点，使用特殊的数据结构和算法进行存储和索引。然后在存储和速度上做取舍和比较，最后给出你认为的最优方案。我提供几个可以达到阿里p7和腾讯t31水平的思路：使用ArrayBuffer实现极致存储哈夫曼编码+字典查询树实现更好的索引使用位图实现大数据筛选使用哈希索引实现简单快速检索IndexedDB实现动态存储，扩展浏览器端虚拟容量。利用iframe漏洞实现浏览器端localStorage无限存储，实现2000万小球信息存储。这个开放式问题的答案不是唯一的，你不需要现场敲代码来实现。但是想法一定要可行，一定要能够打动面试官。如果大家有更好的idea，欢迎补充到我的github：https://github.com/airuikun/W...Part7问题：（开放题）继续上一题，20000如何变现浏览器中的小球尽可能流畅，并以直线运动的动态效果显示。数据动画显示优化，当然有很多方法。但是你用过浏览器的高级api吗？您是否使用过特定于浏览器的动画引擎？或者你对3D的练习和优化可以展示给面试官看。提供几个思路：使用GPU硬件加速，使用webGL使用assembly辅助计算，然后在浏览器端控制动画帧率，使用webworker实现javascript多线程，使用单链表树算法和携程机制分块处理小球实现任务动态分割和任务暂停、恢复、回滚、动态渲染和小球的处理如果你有更好的想法，欢迎添加到我的github：https://github.com/airuikun/W...第8题：（开放题）100亿排序问题：内存不够，一次只能加载操作1亿条数据，如何对100亿条数据进行排序。难度：阿里p6+~p7，腾讯t23~t31这道题是一道算法和实际问题相结合的题。众所周知，腾讯玩的是社交，用户量巨大。很多场景的数据量都是百亿甚至上千亿。那么如何高效的操作这些数据，就可以通过这个问题找到答案。以前听说很多人问前端算法没用，算法考的很垃圾，不能表露应聘者的能力。..大哥说实话，当你在做前端的时候需要用到crc32、unionsearch、dictionarytree、Huffmancoding、LZ77等东西的时候，已经和framework实现和极致优化级别相关了，那你已经达到了另一个前端高层状态，所以不要抗拒算法。可能是我们现在的眼界和能力还达不到那个层次。我已经公布了两个开放性问题的答案。我相信每个人都已经学到了一些东西。我觉得在思考openquestion的过程中，会有很多意想不到的成长，所以我建议大家可以试着自己思考一下这个问题。这个问题的答案将于周五发布在我的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。很多面试的人只会commit、pull、push到git，但是他们有没有用过reflog、cherry-pick等，这可以体现出你在代码管理和代码质量管理上的灵活性。针对gittimemachine这个经典问题，专门写了一篇文章，轻松搞笑，通俗易懂。可以看看，放松心情，同时学习如何操作gittimemachine进阶知识文章，觉得不错可以点个star。博客项目地址为：https://github.com/airuikun/blog我是小蝌蚪，高级前端工程师，每周跟随我攻克几个前端技术难关。希望对进阶之路上的小伙伴有所帮助，帮助大家进入自己理想的企业。
