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…