2019前端面试题（浏览器、协议安全篇）

在此分享、整理前端面试题，如有解答错误的地方，烦请各位大佬指正，感谢！！

请描述一下cookie、sessionStorage、localStorage的区别

• 存储大小：cookie数据不能超过4k，sessionStorage和localStorage，可以达到5M或更大
• 数据有效期：sessionStorage关闭标签就去清除；localStorage需要手动清除；cookie在设置的cookie过期时间之前一直有效
• 请求数据，cookie可以作为请求参数去请求服务器接口，即cookie在浏览器和服务器间来回传递
• 作用范围：cookie只属于某个路径下，需要设置路径，同源窗口共享，sessionStorage不在不同的浏览器窗口中共享，localStorage 在所有同源窗口中都是共享的

如何实现浏览器内多个标签页之间的通信

• localstorage、 cookies 等本地存储方式
• 使用url带参数做页面间的跳转
• 可以把数据传给后端，在另一个页面再去请求后端的接口拿数据

什么是XXS攻击

Cross-site script，跨站脚本攻击，

当其它用户浏览该网站时候，该段 HTML 代码会自动执行，从而达到攻击的目的，如盗取用户的 Cookie，破坏页面结构，重定向到其它网站等。

XSS 类型：

一般可以分为： 持久型 XSS 和非持久性 XSS

持久型 XSS 就是对客户端攻击的脚本植入到服务器上，从而导致每个正常访问到的用户都会遭到这段 XSS 脚本的攻击。(如上述的留言评论功能)

非持久型 XSS 是对一个页面的 URL 中的某个参数做文章，把精心构造好的恶意脚本包装在 URL 参数重，再将这个 URL 发布到网上，骗取用户访问，从而进行攻

防范：

• 对用户的输入做过滤 zhuanlan.zhihu.com/p/22500730

CSRF攻击

CSRF(Cross-site request forgery), 中文名称：跨站请求伪造

CSRF 可以简单理解为：攻击者盗用了你的身份，以你的名义发送恶意请求，容易造成个人隐私泄露以及财产安全。

防范：

• post请求
• 使用token
• 验证码

值得注意的是，过滤用户输入的内容不能阻挡 CSRF 攻击，我们需要做的事过滤请求的来源，因为有些请求是合法，有些是非法的，所以 CSRF 防御主要是过滤那些非法伪造的请求来源。

DDOS 攻击

利用目标系统网络服务功能缺陷或者直接消耗其系统资源，使得该目标系统无法提供正常的服务。

DDoS 攻击通过大量合法的请求占用大量网络资源，以达到瘫痪网络的目的。 具体有几种形式：

通过使网络过载来干扰甚至阻断正常的网络通讯； 通过向服务器提交大量请求，使服务器超负荷； 阻断某一用户访问服务器； 阻断某服务与特定系统或个人的通讯。

WebSocket

WebSocket是用于浏览器与服务器进行全双工通讯的网络技术。

现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客服端的浏览器，这种方式有一个很大的弊端，就是会占用很多的带宽。

使用WebSocket，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。而且它为我们实现即时服务带来了两大好处：

• 节省资源：互相沟通的Header是很小的-大概只有 2 Bytes。
• 推送信息：不需要客户端请求，服务器可以主动传送数据给客户端。

参考：segmentfault.com/a/119000000…

eventloop

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

宏任务：script，setTimeout，setImmediate，promise中的executor

微任务：promise.then，process.nextTick

process.nextTick优先级高于Promise.then

www.ruanyifeng.com/blog/2014/1… juejin.im/post/59e85e…

从URL输入到页面展现到底发生什么

• DNS 解析:将域名解析成 IP 地址
• TCP 连接：TCP 三次握手
• 发送 HTTP 请求
• 服务器处理请求并返回 HTTP 报文
• 浏览器解析渲染页面
• 断开连接：TCP 四次挥手

TCP 三次握手结束后，开始发送 HTTP 请求报文。 请求报文由请求行（request line）、请求头（header）、请求体

1.请求行包含请求方法、URL、协议版本 2.请求头包含请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。 比如：Host，表示主机名，虚拟主机；Connection,HTTP/1.1 增加的，使用 keepalive，即持久连接，一个连接可以发多个请求；User-Agent，请求发出者，兼容性以及定制化需求。

3.请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据

首先浏览器发送过来的请求先经过控制器，控制器进行逻辑处理和请求分发，接着会调用模型，这一阶段模型会获取 redis db 以及 MySQL 的数据，获取数据后将渲染好的页面，响应信息会以响应报文的形式返回给客户端，最后浏览器通过渲染引擎将网页呈现在用户面前。

• 根据 HTML 解析出 DOM 树
• 根据 CSS 解析生成 CSS 规则树
• 结合 DOM 树和 CSS 规则树，生成渲染树
• 根据渲染树计算每一个节点的信息
• 根据计算好的信息绘制页面

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

juejin.im/post/5bf3ad…

页面性能

csspod.com/frontend-pe…

转载于:https://juejin.im/post/5ce8eec36fb9a07ef443e2ba