前端面试题及答案 - 浏览器篇

这篇文章并非最全的前端面试题（没有最全，只有更全），只是针对本身面试过程当中遇到的一些难题、容易忽略的题作一个简单的笔记，方便后面有面试须要的小伙伴们借鉴，后续内容会不定时更新，有错误之处但愿你们不吝指出。

1. 谈谈Cookie的优劣

Cookie不一样之处：

• IE6或更低版本最多20个cookie
• IE7和以后的版本最后能够有50个cookie。
• Firefox最多50个cookie
• chrome和Safari没有作硬性限制

优势：极高的扩展性和可用性

• 经过良好的编程，控制保存在cookie中的session对象的大小。
• 经过加密和安全传输技术（SSL），减小cookie被破解的可能性。
• 只在cookie中存放不敏感数据，即便被盗也不会有重大损失。
• 控制cookie的生命期，使之不会永远有效。偷盗者极可能拿到一个过时的cookie。

缺点：

• Cookie数量和长度的限制。每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉。
• 安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。
• 有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。

例子
JavaScript 中，建立 cookie 以下所示：

document.cookie="username=John Doe";

还能够为 cookie 添加一个过时时间（以 UTC 或 GMT 时间）。默认状况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可使用 path 参数告诉浏览器 cookie 的路径。默认状况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

二、浏览器本地存储 - cookie、localStorage、sessionStorage区别

相同：在本地（浏览器端）存储数据
不一样：

• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
• localStorage是永久存储，除非手动删除。
• sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
• cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。

了解更多

三、一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？
这道题能够说是不少都会被问到的，网上答案五花八门，不过都接近，更详细的请看
简单总结：

• 当发送一个URL请求时，无论这个URL是Web页面的URL仍是Web页面上每一个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器得到请求对应的IP地址。
• 浏览器与远程Web服务器经过TCP三次握手协商来创建一个TCP/IP链接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试创建起通讯，然后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
• 一旦TCP/IP链接创建，浏览器会经过该链接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
• 此时，Web服务器提供资源服务，客户端开始下载资源。浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又能够根据DOM API操做DOM
• 前端面试题及答案 - HTML篇
• 前端面试题及答案 - CSS篇
• 前端面试题及答案 - JS篇
• 前端面试题及答案 - 性能优化篇