媒介

在大厂工作了6年，当了3年的前端口试官，把大厂常问的口试题与答案汇总在我的Github中。愿望对人人有所协助，助力人人进入本身抱负的企业。

项目地点是：
https://github.com/airuikun/W…

假如你在大厂口试的时刻遇到了什么不懂的问题，迎接给我提issue，我会把答案和考点都列出来，宣布鄙人一期的口试周刊里。

口试题精选

人人假如去大厂口试过，就会发明，在网上刷了许多的前端口试题，然则去大厂口试的时刻照样一头雾水，那是由于那些在网上一搜就能够搜出来的题，大厂的口试官基础看不上，他们都邑问一些开放题，在回复开放题的过程当中，就能够摸清你学问妙技的广度和深度，所以本期会到场几道我在口试候选人经常运用的开放题，供人人进修和思索。

我把下面每道题的难度上下，和对标了大厂的若干职级，都写上去了，人人能够参考一下本身是什么职级。

第 1 题：怎样挟制https的要求，供应思绪

难度：阿里p6+ ~ p7、腾讯t23 ~ t31

许多人在google上搜刮“前端口试 + https详解”，把答案滚瓜烂熟，然则问到怎样挟制https要求的时刻就一脸懵逼，是由于照样停留在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

我是小蝌蚪，高等前端工程师，随着我一同每周霸占几个前端手艺难点。愿望在小伙伴前端进阶的路上有所协助，助力人人进入本身抱负的企业。