一面

一、请问运行这段代码会输出什么。

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). 提供form表单，method必须是post。

(2). form表单的enctype必须是multipart/form-data。

ajax上传

ajax和FormData可实现页面无刷新的文件上传效果

六、将一些ES6的新特性

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

七、jsbridge

问到这个概念的时候我不清楚，记得当前前一两天掘金刚发一篇相关的文章给我，然而当时没去看。。

当然这只是其中一部分题目，一些面试官口头问的我当时面试完真是超级累也忘了记录下来。总之，感觉头条还是会比较重视算法和新技术。