【周刊-2】三年大厂面试官-前端面试题（偏难）

前言

在大厂工做了6年，当了3年的前端面试官，把大厂常问的面试题与答案汇总在个人Github中。但愿对你们有所帮助，助力你们进入本身理想的企业。javascript

项目地址是：github.com/airuikun/We…前端

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

面试题精选

你们若是去大厂面试过，就会发现，在网上刷了不少的前端面试题，可是去大厂面试的时候仍是一头雾水，那是由于那些在网上一搜就能搜出来的题，大厂的面试官基本看不上，他们都会问一些开放题，在回答开放题的过程当中，就能摸清你知识技能的广度和深度，因此本期会加入几道我在面试候选人经常使用的开放题，供你们学习和思考。node

我把下面每道题的难度高低，和对标了大厂的多少职级，都写上去了，你们能够参考一下本身是什么职级。nginx

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

难度：阿里p6+ ~ p7

不少人在google上搜索“前端面试 + https详解”，把答案滚瓜烂熟，可是问到如何劫持https请求的时候就一脸懵逼，是由于仍是停留在https理论性阶段。git

想告诉你们的是，就算是https，也不是绝对的安全，如下提供一个本地劫持https请求的简单思路。github

模拟中间人攻击，以百度为例web

先用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下留言：github.com/airuikun/We…面试

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

难度：阿里p5

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

若是你有更好的答案或想法，欢迎在这题目对应的github下留言：github.com/airuikun/We…算法

第 3 题：先后端分离的项目如何seo

难度：阿里p6 ~ p6+

使用prerender。可是回答prerender，面试官确定会问你，若是不用prerender，让你直接去实现，好的，请看下面的第二个答案。
先去 www.baidu.com/robots.txt 找出常见的爬虫，而后在nginx上判断来访问页面用户的User-Agent是不是爬虫，若是是爬虫，就用nginx方向代理到咱们本身用nodejs + puppeteer实现的爬虫服务器上，而后用你的爬虫服务器爬本身的先后端分离的前端项目页面，增长扒页面的接收延时，保证异步渲染的接口数据返回，最后获得了页面的数据，返还给来访问的爬虫便可。

若是你有更好的答案或想法，欢迎在这题目对应的github下留言：github.com/airuikun/We…

第 4 题：简单实现async/await中的async函数

难度：阿里p6 ~ p6+

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下留言：github.com/airuikun/We…

第 5 题：1000-div问题

难度：阿里p5 ~ p6

一次性插入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下留言：github.com/airuikun/We…

第 6 题：（开放题）2万小球问题：在浏览器端，用js存储2万个小球的信息，包含小球的大小，位置，颜色等，如何作到对这2万条小球信息进行最优检索和存储

难度：阿里p7

你面试阿里和腾讯，可否上p7和t31，就看你对开放题能答有多深和多广。

这题目考察你如何在浏览器端中进行大数据的存储优化和检索优化。

若是你仅仅只是答用数组对象存储了2万个小球信息，而后用for循环去遍历进行索引，那是远远不够的。

这题要往深一点走，用特殊的数据结构和算法进行存储和索引。

而后进行存储和速度的一个权衡和对比，最终给出你认为的最优解。

我提供几个能触及阿里p7和腾讯t31级别的思路：

用ArrayBuffer实现极致存储
哈夫曼编码 + 字典查询树实现更优索引
用bit-map实现大数据筛查
用hash索引实现简单快捷的检索
用IndexedDB实现动态存储扩充浏览器端虚拟容量
用iframe的漏洞实现浏览器端localStorage无限存储，实现2千万小球信息存储

这种开放题答案不惟一，也不会要你现场手敲代码去实现，可是思路必定要行得通，而且是能打动面试官的思路，若是你们有更好的idea，欢迎你们到个人github里补充：github.com/airuikun/We…

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

难度：阿里p6+ ~ p7

这题考察对大数据的动画显示优化，固然方法有不少种。

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

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

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

提供几个思路：

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

若是你们有更好的idea，欢迎你们到个人github里补充：github.com/airuikun/We…

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

难度：阿里p6+ ~ p7

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

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

那么如何对这些数据进行高效的操做呢，能够经过这题考察出来。

之前老据说不少人问，前端学算法没有用，考算法都是垃圾，面不出候选人的能力

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

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

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

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

我前面已经公布了两道开放题的答案了，相信你们已经有所参悟。我以为在思考开放题的过程当中，会有不少意想不到的成长，因此我建议这道题你们能够尝试本身思考一下。本题答案会在周五公布到个人github上。对应的github地址为：github.com/airuikun/We…

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

难度：阿里p7 ~ p7+

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

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

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

你们多多思考，本题答案会在周五公布到个人github上

对应的github地址为：github.com/airuikun/We…

第 10 题：git时光机问题

难度：阿里p5 ~ p6+

如今大厂，已经所有都是用git了，基本没人使用svn了

不少面试候选人对git只会commit、pull、push

可是有没有使用过reflog、cherry-pick等等，这些都很能体现出来你对代码管理的灵活程度和代码质量管理。

针对git时光机经典问题，我专门写了一个文章，轻松搞笑通俗易懂，你们能够看一下，放松放松，同时也能学到对git的时光机操做《git时光机》

结语

本人还写了一些前端进阶知识的文章，若是以为不错能够点个star。

blog项目地址是：github.com/airuikun/bl…

我是小蝌蚪，高级前端工程师，跟着我一块儿每周攻克几个前端技术难点。但愿在小伙伴前端进阶的路上有所帮助，助力你们进入本身理想的企业。