2020前端秋招整理

趁10月24秋招尾声整理一下个人秋招的面经
先做一个简单整理，部分答案或者分类有时间再做，完整答案应该不会做，因为没有必要（wo hen lan）🙃

11月份来更新下，最后腾讯， 字节，美团选择了腾讯（中间有一些坎坷，差点去了美团，最后选择了腾讯，不知道这样的选择是否正确🤔）

腾讯（csig）

一面

1. 数字数组取得前三个最大值
2. https为什么安全？
3. https真的就安全吗？——可以从https降级攻击，中间人攻击等等谈
4. WebSocket建立的过程
5. 原型链继承的缺点有什么？
6. 路由的hash模式和history模式的原理以及区别
7. 服务端怎么获取请求来源的url？——Referer 和 Origin
8. http请求头中Referer值可以修改吗 ？
9. 简单请求和复杂请求怎么划分？
10. 跨域
    10.1 跨域的手段
    10.2 图片会跨域吗？ ——不会，通过onload或者onerror确定是否接受到响应，另外img的src标签只能发送get请求,请求通过查询字符串形式发送
    10.3 那么跨域会影响那些资源？
11. object.prototype.toString.call的原理
12. Vue和React的区别和各自优劣

二面

1. 关于首屏渲染时间，受哪些因素影响，如何减少？
2. serverless怎么部署的
3. graphQL
4. 数组去重的几种方法
   3.1 上边介绍的几种方法的时间复杂度是怎样？，
   3.2 怎样优化为o(n)？
   3.3 之前提到可以用set去重，那set的原理是什么？
5. 快排的原理？时空复杂度？
6. event loop（浏览器 node）
7. node多线程怎么管理？

 Node.js 只支持单线程。但是可以开启多进程充分利用多核 CPU，
单个 Node.js 实例运行在单个线程中。 为了充分利用多核系统，有时需要启用一组 Node.js 进程去处理负载任务。可以使用node.js原生
的cluster （集群）模块创建共享服务器端口的子进程，cluster 模块支持两种分发连接的方法。
第一种方法（也是除 Windows 外所有平台的默认方法）是循环法，由主进程负责监听端口，
接收新连接后再将连接循环分发给工作进程，在分发中使用了一些内置技巧防止工作进程任务过载。
第二种方法是，主进程创建监听 socket 后发送给感兴趣的工作进程，由工作进程负责直接接收连接。
理论上第二种方法应该是效率最佳的。 但在实际情况下，由于操作系统调度机制的难以捉摸，会使分发变得不稳定。 
可能会出现八个进程中有两个分担了 70% 的负载。
潜在问题：因为每个进程的内存都是独立的，为了在多进程中共享数据，原来可能存储在内存中的数据，
例如 token 等不能再存储在内存中，应该存储在 redis 等缓存中，以便保证不同的进程都可以访问该数据；

8. 有哪些判断类型的方法？
9. 跨域
   8.1 同源策略
   8.2 跨域方案
   8.3 什么是预检请求，什么情况下使用？
10. 那种继承手段只继承prototype？答案是object.create
11. 从url输入到页面渲染发生了什么？
12. 重绘重排
13. 网络攻击
    12.1 CSRF攻击是什么情况？
    12.2 CSRF攻击如何防范？
    12.3 使用token防范的话，token应该存在哪？
    12.4 如果存在cookie的话怎么避免crsf攻击：——samesite
14. 页面卡顿怎么快速定位？
15. 多个请求中间失败怎么只让最后一个执行响应？——请求发给服务器前给ID
16. 多个图片时会一起发送请求吗？比如100张，10000张，会有限制吗？
17. 前端缓存了解哪些？

三面

1. 点击一个按钮到服务器响应的流程
2. 建立数据库表：学生和课程的关系，每个学生有多个课程，一个课程有多个学生
3. get post put区别
4. 写过的项目的难点有什么？
   剩下就是聊项目，聊经历咯～

字节跳动（广告）：

一面：

1. react比起vue有什么优势？
2. 直出 pwa的一些理解（问的偏底层一些
3. 单页面和路由切换区别有哪些？
4. 前端缓存
   4.1 浏览器缓存的一些特殊场景
   4.2 304 307 302这些状态码的区别
   4.3 Etag/expires是怎么计算的？——Hash
   4.4 cookie session的区别以及联系（联系可以说可以用cookie来存sessionID）
5. 如何获得href？
   5.1 如何读取地址中某个值——需要排除#等一些情况
6. 一些布局的实现
   6.1 浮动
   6.2 清除浮动
   6.3 BFC
7. display值有哪些？
8. 行内块级元素有margin和padding吗？
9. splice,slice,substring,substr的区别
10. 数组找加和某个值

二面：

1. Node怎么读取文件？
2. Buffer和Stream

Buffer：用于创建一个专门存放二进制数据的缓存区 JavaScript 语言没有读取或操作二进制数据流的机制。
 Buffer 类被引入作为 Node.js API 的一部分，使其可以在 TCP 流或文件系统操作等场景中处理二进制数据流。
 buffer 能够与二进制数据流进行交互操作。实例：文件传输或者大数据传输
Stream以及使用实例：在一个应用程序中，流是一组有序的、有起点和终点的字节数据的传输手段。
流(stream)就是一系列从A点到B点移动的数据，完整点的说，就是当你有一个很大的数据需要传输、搬运时，
你不需要等待所有数据都传输完成才开始下一步工作。
实例：大文件传输（不能短期阻塞完成的） 
文件需要多次传输的，使用pipe（防止代码过于冗杂）
四种流类型：
- Readable – 可读操作。 
- Writable – 可写操作。 
- Duplex – 可读可写操作. 
- Transform – 操作被写入数据，然后读出结果。

3. koa与express区别：

koa通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。
koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库

4. 宏任务,微任务分别有哪些？
5. node的eventloop:

轮询–>检查–>关闭事件回调–>定时器检测–>IO事件回调–>闲置阶段
–>再往复（即轮询
Node端，microtask 在事件循环的各个阶段之间执行
浏览器端，microtask 在事件循环的 macrotask 执行完之后执行

6. http的全部请求方式以及具体功能

GET 请求指定的页面信息，并返回实体主体。

HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头

POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
HTTP1.1新增了五种请求方法：

PUT 从客户端向服务器传送的数据取代指定的文档的内容。

DELETE 请求服务器删除指定的页面。

CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

OPTIONS 允许客户端查看服务器的性能。预检请求

TRACE 回显服务器收到的请求，主要用于测试或诊断。

7. get post区别?post是发送了两个请求吗?

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
TCP会出现两次连结的过程，HTTP协议本身不保存状态信息，一次请求一次响应。
对于TCP而言，通信次数越多反而靠性越低，能在一次连结中传输完需要的消息是最可靠的，
尽量使用GET请求来减少网络耗时。如果通信时间增加，这段时间客户端与服务器端一直保持连接状态，在服务器侧负载可能会增加，可靠性会下降。

8. Post提交数据的四种方式:
   application/x-www-form-urlencoded，multipart/form-data，application/json，text/xml
9. 岛屿的数量
10. 手写promise all race

// all
Promise.all = function (iterator) {
     
    let count = 0//用于计数，当等于len时就resolve
    let len = iterator.length
    let res = []//用于存放结果
    return new Promise((resolve,reject) => {
   
        for(var item of iterator){
   
            Promise.resolve(item)//先转化为Promise对象
            .then((data) => {
   
                res[count++] = data
                if(count === len){
   
                    resolve(res)
                }
            })
            .catch(e => {
   
                reject(e)
            })
        }
    })
}

// race
Promise.race = function (iterators) {
     
    return new Promise((resolve,reject) => {
   
        for (const p of iterators) {
   
            Promise.