第一次大公司口试的面经

此次口试说来也有点急忙，本没想过自身会那末快就想去口试大公司，而且把自身第一次面大公司的种种不足展示得一清二楚。当时11月20号摆布身旁一名朋侪给了一名人超nice的师兄的内推，而且勉励我去投简历。终究战胜了自身的怯生生，投了一份简历给内推的师兄。一两天后hr就打电话部署口试了。

没想到口试是要一连着面的，当时面花了一个多小时过了一面，再花一个小时面二面，终究也止于二面。接下来就是本文的主题了。我把当时口试官经由历程牛课网在线口试平台中写给我做的题纪录了下来，实在从口试前就盘算把口试学到的东西积聚下来。接下来就进入本文的主题了，我也只管把每一道题都写上我的解题思绪，愿望能获得人人更多更好的看法。

一面

一、叨教运转这段代码会输出什么。

    let obj = {
        name: 'bytedance',
        getName() {
            return this.name
        }
    }
    let fb = obj.getName;
    fb();

A：我当时好像是答undefined。但我晓得这不会是输出”bytedance“，因为当obj.getName赋给fb的时刻它的this也转变了，详细可以看我之前总结了一篇JavaScript中的this的文章。然后我厥后我在浏览器中运转了一下代码发明是输出"" 。。。

二、设想一个简朴的使命行列，要求离别在1,3,4秒后打印出”1“，”2“，”3“

    new Quene()
        .task(1000, () => {
            console.log(1)
        })
        .task(2000, () => {
            console.log(2)
        })
        .task(1000, () => {
            console.log(3)
        })
        .start()

    function Quene() { ... }

A：讲真，看到这道题的时刻我第一时间觉得自身完了，虽然也只写了一点，没有悉数做出来，然后就跳过这道题了。口试完就勤奋着把这道题写出来

    function Quene() {

        this.task = (time, callback) => {

            setTimeout(callback, time);
            // console.log(this)
            return this;
        };
        this.start = () => {
            return this;
        };

    }

虽然如许纵然最背面不必写.start()也能打印出来。。。愿望能获得指导Q_Q

三、给定一个升序整数数组[0,1,2,4,5,7,13,15,16]，找出个中一连涌现的数字区间以下：

[“0->2″,”4->5“,”7″,”13″,”15->16”]
A:

    function Arr(arr) {
        var len = arr.length,
            j,
            newArr = [],
            str = '';
        for (var i = 0; i < len; i++) {
            j = i;
            if (arr[i] + 1 === arr[j + 1]) {
                while (arr[j] + 1 === arr[j + 1]) {
                    str = '->' + arr[j + 1];
                    j++;
                }
                str = arr[i] + str;
                newArr.push(str)
                i = j
            } else {
                newArr.push(arr[i].toString())
            }
        }
        return newArr;
    }

还算比较简朴的算法题吧，还好当时做出来了，不然可以就止步于此。。也愿望人人能谈点自身对这道题的解法

四、TCP协定竖立衔接的历程、历程间通讯的体式格局有哪些

TCP竖立衔接的历程即为三次握手，三次握手可以参考我之前发的文章，网上也有许多材料，这里就不细讲。

至于历程间的通讯体式格局，当时没能打出来（这就触及到我的学问盲区了【哭丧脸】），厥后网上查了一下，有：

1. 管道pipe：管道是一种半双工的通讯体式格局，数据只能单向活动，而且只能在具有亲缘关联的历程间运用。历程的亲缘关联通常是指父子历程关联。
2. 定名管道FIFO：著名管道也是半双工的通讯体式格局，然则它许可无亲缘关联历程间的通讯。
3. 音讯行列MessageQueue：音讯行列是由音讯的链表，寄存在内核中并由音讯行列标识符标识。音讯行列克服了信号传递信息少、管道只能承载无花样字撙节以及缓冲区大小受限等瑕玷。
4. 同享存储SharedMemory：同享内存就是映照一段能被其他历程所接见的内存，这段同享内存由一个历程建立，但多个历程都可以接见。同享内存是最快的 IPC 体式格局，它是针对其他历程间通讯体式格局运转效力低而特地设想的。它每每与其他通讯机制，如信号两，合营运用，来完成历程间的同步和通讯。
5. 信号量Semaphore：信号量是一个计数器，可以用来掌握多个历程对同享资本的接见。它常作为一种锁机制，防备某历程正在接见同享资本时，其他历程也接见该资本。因而，重要作为历程间以及统一历程内差别线程之间的同步手腕。
6. 套接字Socket：套解口也是一种历程间通讯机制，与其他通讯机制差别的是，它可用于差别及其间的历程通讯。
7. 信号 ( sinal ) ： 信号是一种比较复杂的通讯体式格局，用于关照吸收历程某个事宜已发作。

这里有个题外话，假如口试官问浏览器窗口间的通讯，那末有以下几种：
1.localStore

localStorage.setItem("name", name); 

2.cookie + setInterval
在页面A设置一个运用 setInterval 定时器不停革新，搜检 cookie 的值是不是发作变化，假如变化就举行革新的操纵。
因为 cookie 是在同域可读的，所以在页面 B 转变 cookie 的值，页面 A 是可以拿到的。

五、用纯CSS建立一个三角形的道理是什么？怎样完成？

A：用CSS建立一个三角形的道理是离别设置上下摆布的border属性，中心内容为0面积。完成：

#box {
      width: 0;
      height: 0;
      border-left: 50px transparent solid;
      border-right: 50px transparent solid;
      border-top: 50px transparent solid;
      border-bottom: 50px black solid;
}

六、0.1 + 0.2 > 0.3 返回什么？

A：true。离别转成2进制。

七、类数组对象是什么？

刚开始还对这个类数组觉得懵逼，厥后口试官一提示函数的参数立时领悟到就是伪数组。
A：只包含运用从零开始，且天然递增的整数做键名，而且定义了length示意元素个数的对象。

• function内部的arguments对象就是一个类数组对象
• DOM要领document.getElementsByTagName()…也是返回一个类数组对象

八、什么是同源战略，为何会有这类战略

源包含三个部份：协定、域名、端口（HTTP协定的默许端口是80）。假如个中有任何一个部份差别，则源差别。即为跨域。
限定一个源加载的文档或剧本与来自另一个源的资本举行交互。这是一个用于断绝潜伏歹意文件的症结的平安机制。（来自MDN的诠释）

九、什么CORS

A：受同源战略的限定，支撑跨域；一种新的通讯协定规范。可以明白成同时支撑同源和跨域的Ajax。
MDN诠释：跨域资本同享(CORS) 是一种机制，它运用分外的 HTTP 头来通知浏览器 让运转在一个 origin (domain) 上的Web运用被准予接见来自差别源服务器上的指定的资本。当一个资本从与该资本自身地点的服务器差别的域、协定或端口要求一个资本时，资本会提议一个跨域 HTTP 要求。

十、什么是OPTIONS要求

A：OPTIONS要求是HTTP要求的一种要领，返回服务器针对特定资本所支撑的HTTP要求要领，也可以应用向web服务器发送‘*’的要求来测试服务器的功用性

然后一面就如许完毕了，口试官也直接跟我说我经由历程了一面，我也问了一些问题后就完毕口试了。我赶忙把平台上的口试纪录记下来，过了几分钟，当我还沉浸在经由历程一面的愉悦和全身心已放松了的情况下，发明手机有几个未接电话，然后又再打进了一个，接通电话后对方是头条hr小姐姐，问我说如今可以二面了，二面的口试官已在平台上等着了。。。好吧，这太倏忽了，我立时赶赴疆场。

<hr/>

二面

一、fetch

A：Fetch API 供应了一个猎取资本的接口（包含跨域要求）。不管要求胜利与否，它都返回一个 Promise 对象；

二、用Promise完成耽误3秒后输出 delay(3000).then(f,e)

A:

    function delay(timer) {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve();
            }, timer)
        })
    }

三、XSS/CSRF

XSS：跨站剧本（Cross-site scripting）
经由历程提交或其他体式格局比方宣布批评，个中含有HTML或JavaScript的代码，假如服务器没有过滤掉这些剧本，这些剧本在一些情况下就可以会运转。

1. 防止XSS的要领之一就是过滤用户供应的内容，如<,>,script;
2. cookie设置HttpOnly属性

CSRF：跨站要求捏造（Cross-site request forgery）
是一种挟制受信托用户向服务器发送非预期要求的进击体式格局，即在用户上岸某个平台化拿到用户的上岸凭据后发送捏造要求

1. 提防CSRF的要领之一就是经由历程考证码
2. Referer Check，依据 HTTP 协定，在HTTP 头中有一个字段叫 Referer，它纪录了该 HTTP 要求的泉源地点。经由历程 Referer Check，可以搜检要求是不是来自正当的”源”。
3. 增加token考证，可以在 HTTP 要求中以参数的情势到场一个随机发生的token，该token不存在与cookie中，并在服务器端竖立一个拦截器来考证这个 token，假如要求中没有 token 或许 token 内容不正确，则以为多是 CSRF 进击而谢绝该要求。

四、图片懒加载道理 （lazy image）

A：给每张图片增加一个data-xxx的属性用于寄存图片的src，检测到图片进入视野中的时刻把data-xxx的属性赋给src
怎样检测图片进入视野：
a.document.documentElement.clientHeight猎取屏幕可视窗口高度
b.element.offsetTop猎取元素相对于文档顶部的间隔
c.document.documentElement.scrollTop猎取转动被卷去的高度
假如b-c<a建立则元素进入可视地区
这里我还提到一个函数撙节进步机能：

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 推断是不是已余暇，假如在实行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        // 这里加载图片
        console.log("函数撙节");
        canRun = true;
    }, 500);
};

五、上传图片

1. 表单上传

(1). 供应form表单，method必需是post。
(2). form表单的enctype必需是multipart/form-data。

1. ajax上传

• ajax和FormData可完成页面无革新的文件上传结果

六、将一些ES6的新特征

可以参考之前写的文章，不过当时到了背面真是筋疲力尽，连let和const都没有说出来。。。

七、jsbridge

问到这个观点的时刻我不清楚，记得当前前一两天掘金刚发一篇相干的文章给我，但是当时没去看。。
JSBridge 简朴来说，重如果 给 JavaScript 供应挪用 Native 功用的接口，让夹杂开辟中的“前端部份”可以方便地运用地点位置、摄像头以至付出等Native 功用。是 Native 和非 Native 之间的桥梁，它的中心是构建 Native 和非 Native 间音讯通讯的通道，而且是双向通讯的通道。

二面个中也包含一些IQ题，另有背面问我假如练习能练习多久我说3个月。以后第二天就收到把我简历”丢进“公司人才库的邮件了。

固然这只是个中一部份问题，一些口试官行动问的我当时口试完真是超等累也忘了纪录下来。总之，觉得头条照样会比较注重算法和新技术。

愿望这一两个月可以好好把握，春招再战！！