前端面试题

1、浏览器输入url后发生了哪些事 / 一次完整的http请求过程

1.对输入的网址进行DNS域名解析，得到对应的IP地址；

2.建立TCP连接，根据这个IP，找到对应的服务器，发起TCP的三次握手；

（1）浏览器所在的客户机向服务器发出连接请求报文；

（2）服务器接收报文后，同意建立连接，向客户机发出确认报文；

（3）客户机接收到确认报文后，再次向服务器发出报文，确认已接收到确认报文；此处客户机与服务器之间的TCP连接建立完成，开始通信。

3.建立TCP连接后发起HTTP请求；

4.服务器响应HTTP请求，浏览器得到html代码；

5.断开TCP连接，发起TCP的四次挥手；

（1）浏览器所在主机向服务器发出连接释放报文，然后停止发送数据；

（2）服务器接收到释放报文后发出确认报文，然后将服务器上未传送完的数据发送完；

（3）服务器数据传输完毕后，向客户机发送连接释放报文；

（4）客户机接收到报文后，发出确认，然后等待一段时间后，释放TCP连接。

6.浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源）；

7.浏览器对页面进行渲染（回流、重绘）呈现给用户。

 

2、浏览器事件循环机制

1.js是单线程的，或者说只有一个主线程，也就是它一次只能执行一段代码

2.所有宏任务在主线程上执行，所有的微任务会放在任务队列中

3.当某个宏任务执行完后，会查看是否有微任务队列。如果有，先执行微任务队列中的所有任务，如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。栈空后，再次读取微任务队列里的任务

 

3、预检请求（options）的原理

CORS全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。浏览器将CORS跨域请求分为简单请求和非简单请求。只要同时满足下面两个条件，就属于简单请求；反之就是非简单请求。

• 请求方法是下列方法之一：

1. head
2. get
3. post

• 请求的header是：

1. Accept
2. Accept-Language
3. Content-Language
4. Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求。预检请求就是为了解决跨域问题。

 

4、overflow:hidden 为什么可以清除浮动

overflow:hidden可以形成 格式化上下文（bfc）

 

5、XSS 攻击和 CSRF 攻击

XSS：

Cross Site Script，中译是跨站脚本攻击；XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。

XSS防范：

1.HttpOnly 防止劫取 Cookie
2.对于用户的任何输入要进行检查、过滤和转义
3.一般来说，除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击

CSRF:

Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作

CSRF防范：

1.验证码被认为是对抗 CSRF 攻击最简洁而有效的防御方法
2.添加token验证