这篇文章并不是最全的前端面试题(没有最全,只有更全),只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记,方便后面有面试需要的小伙伴们借鉴,后续内容会不定时更新,有错误之处希望大家不吝指出。
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=/";
2、浏览器本地存储 – cookie、localStorage、sessionStorage区别
相同:在本地(浏览器端)存储数据
不同:
- localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。
- localStorage是永久存储,除非手动删除。
- sessionStorage当会话结束(当前页面关闭的时候,自动销毁)
- cookie的数据会在每一次发送http请求的时候,同时发送给服务器而localStorage、sessionStorage不会。
3、一个页面从输入 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篇
- 前端面试题及答案 – 性能优化篇