东一榔头西一棒槌的前端面试准备 - 基础篇 （持续整理中...）

HTTP

GET和POST的区别

• 报文格式不同，get把参数放在Url里，post把参数放在body里；
• get请求由于把所有参数都暴露在url里，所以相对post安全性差一些；
• url有长度限制，所以会限制get传参(这条其实会根据浏览器的实现不同而不同);
• get可以被缓存可以被收藏为书签，post不能；
• get会被保存在浏览器历史里，post不会；
• 回退或者前进的时候get是无害的，post会重新提交；

IP和TCP

IP： 互联网的数据是通过数据包传递的，如果要将主机A的数据传递到主机B，就需要知道主机B的IP地址，才能正确寻址；额外的，数据包上还会添加上A的IP地址，这样B才知道怎么回复A；但是，B拿到数据包之后，并不知道要交给哪个程序进行处理，就需要UDP（用户数据包协议）和TCP协议的帮助；
TCP（传输控制协议）：上层把数据包传递给传输层 --> 传输层给数据包加上UDP头交给网络层 --> 网络层把IP头附加在数据包上，交给底层 --> 数据包被传输给了B的网络层，这时候主机B把IP头拆开，把数据包交给传输层 --> 传输层把UDP头拆开，根据端口号交给相应的应用程序进行处理；
TCP的三次握手：主要是为了确认通信能力，也就是双方都有发信和收信的能力，如果不确认的话任何数据传送都是不稳定的~所以需要三次握手：
客户端A向服务端B发送报文（B已确认了A的发信能力和B的收信能力） --> 服务端收到报文后，向客户端发送报文(A已确认了双方的收发能力) --> A返回ACK并建立连接（B确认了A的收信能力和B的发信能力）。TCP连接建立后，浏览器就可以利用HTTP／HTTPS协议向服务器发送请求了。
TCP的四次挥手：由于TCP协议有半关闭的状态（就是只可以接收信息不可以发生信息），关闭可以由客户端或者服务端提出：
两者在established状态，客户端A向服务端B提出关闭请求 --> B收到之后，给A发送收到信息的响应，同时通知应用程序关闭相关资源 --> B准备好了之后，给A发送关闭通知消息 --> A回复B，断开连接。

缓存

DNS缓存

主要就是在浏览器本地把对应的 IP 和域名关联起来，这样在进行DNS解析的时候就很快。

MemoryCache

存在内存里的缓存。不会请求服务器。从优先级上来说，它是浏览器最先尝试去命中的一种缓存。从效率上来说，它是响应速度最快的一种缓存。主要用来缓存图片、字体、一般脚本等；和渲染进程“生死相依”，tab关掉就没有了；

http缓存

• 强缓存：不会请求服务器。expires和cache-control字段控制。expires依赖本地时间，所以并不是最好的策略。cache-control: max-age=31536000比较合适。cache-control比expires优先度更高;
• 协商缓存：依赖于服务端与浏览器之间的通信。协商缓存机制下，浏览器需要向服务器去询问缓存的相关信息，进而判断是重新发起请求、下载完整的响应，还是从本地获取缓存的资源。如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情况下网络请求对应的状态码是 304。

协商缓存的实现,从Last-Modified到Etag。Last-Modified 是一个时间戳，第一次请求的时候，服务器会返回Last-Modified，随后我们每次请求时，会带上一个叫 If-Modified-Since 的时间戳字段, 服务器会进行比较；但是存在last-modified不准确的现象（比如我们编辑了文件但是内容没有发生改变，服务器只认修改的时间，因此会去修改last-modified的值，这样的话就么有正确使用协商缓存~），因此有了Etag，Etag是由服务器为每个资源生成的唯一的标识字符串。

Service worker cache

Service Worker 是一种独立于主线程之外的 Javascript 线程。它脱离于浏览器窗体，因此无法直接访问 DOM。这样独立的个性使得 Service Worker 的“个人行为”无法干扰页面的性能，这个“幕后工作者”可以帮我们实现离线缓存、消息推送和网络代理等功能。我们借助 Service worker 实现的离线缓存就称为 Service Worker Cache。

Service worker

ES6

let和const

class

函数（箭头函数、参数解构）

Promise

async / await

Map和Set

Vue

为什么vue的列表渲染要加key？

React

Promise

跨域

js遵循同源策略，即同协议，同域名，同端口号，否则都算跨域。
下图帮助理解：

可以进行跨域的主要有iframe / JSONP / CORS

iframe

• window.self: 自己； window.parent: 父级窗口； window.top: 顶级窗口；
• 在前端领域，我们可以通过window.top来防止我们页面被嵌套。

if(window != window.top){
    window.top.location.href = myURL;
}

• iframe通过iframe.postMessage进行跨域通信；通过window.addEventListener('message', fn)来监听通信事件；

闭包

原型链和class

浏览器相关

浏览器相关原理(面试题)详细总结一

EventLoop

• js是单线程的，会出现阻塞问题，因此有了异步队列的出现
• 主进程同步执行任务，异步操作将添加到异步队列中
• 等候主进程执行完毕后再执行异步队列中的操作

什么是宏任务和微任务？
异步队列有宏任务和微任务之分。

• 宏任务

  • setTimeout
  • setImmediate
  • setIntarval
  • requestAnimationFrame
  • I/O
  • UI rendering

• 微任务

  • process.nextTick
  • Promise.then
  • Object.observe
  • MutationObserver
• 一次事件循环：先运行宏任务队列中的一个，然后运行微任务队列中的所有任务。接着开始下一次循环

浏览器渲染过程

• 解析HTML，构建DOM树；
• 解析CSS，生成CSS规则树；
• 合成HTML和CSS，生成render树；
• 布局render树，计算每一个节点的位置和尺寸；
• 绘制render树（paint），绘制图像信息；
• 浏览器会把各层信息发给GPU，由GPU显示在屏幕上；

重新布局叫回流，就是改变布局，每次的回流都会触发重绘（repaint)， 又要去消耗gpu; 但并不是每次repaint都会触发reflow，比如改个背景色啥的，就不需要重新布局；

webSocket