每天一道面试题前端

1. 浏览器端的存储类型有哪些，如何判断应该使用那种存储？

1.cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭。数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下,cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。在所有同源窗口中共享的
2.sessionStorage：仅在当前的浏览器窗口关闭有效,存储大小有限制,但是比cookie大得多，可以达到5M或更大；不在不同的浏览器窗口中共享，即使是同一个页面。
3.localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据,存储大小有限制,但是比cookie大得多，可以达到5M或更大；在所有同源窗口都是共享的

2. cookie session区别

1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。
3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE。
4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

3. 从浏览器输入网址到看到页面，发生了哪些事情？

DNS解析–TCP连接–发送HTTP请求–服务器处理请求并返回HTTP报文–浏览器解析渲染页面–连接结束

输入url后，首先需要找到这个url域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器，得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面，之后根据外部央视，内部央视，内联样式构建一个CSS对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为html文件中会含有图片，视频，音频等资源，在解析DOM的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。
Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器
端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先
查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次
响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验
Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304

4.在不同的语境里，this关键字代表什么？

答：普通函数里：this指向全局
对象方法里：this指向方法对象
事件函数中：this指向触发事件的对象
构造函数中，this指向实例对象

5.call，bind和apply的作用

改变this指向：
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
call的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, …,‘string’ )。
apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。
bind 除了返回是函数以外，它 的参数和 call 一样。 当然，三者的参数不限定是 string类型，允许是各种类型，包括函数 、 object 等等！

6.弹性盒常用属性

1.声明为弹性盒： display: flex; -------在父元素中写
2.指定弹性子元素在父容器中的位置：flex-direction: row | row-reverse | column | column-reverse—父 元素中写，默认row
3.主轴对齐方式:justify-content: flex-start | flex-end | center | space-between | space-around—在父元素中写

4.侧轴对齐方式：align-items: flex-start | flex-end | center | baseline | stretch----在父元素中写

5. 是否换行：flex-wrap: nowrap | wrap | wrap-reverse;
nowrap:

wrap:

wrap-reverse:

7. 常用的status code有哪些，代表什么含义

1xx类状态码称之为Information 状态吗，表示信息正在处理。
2xx类状态码称为为Success状态码，表示请求正常完成。
3xx类状态码称之为Redirection 状态码，表示需要客户端进行附加操作（如跳转。重定向）
4xx类状态码称之为Error状态码，通常是由于客户端的错误导致的。
5xx类状态吗称为Server Error状态码，通常是服务端的错误导致的。

100 Continue 继续。客户端应继续其请求 101 Switching Protocols
切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

200 OK 请求成功。一般用于GET与POST请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information
非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

205 Reset Content
重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分GET请求

300 Multiple Choices
多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently
永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303 See Other 查看其它地址。与301类似。使用GET和POST请求查看

304 Not Modified
未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的HTTP状态码

307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found
服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

405 Method Not Allowed 客户端请求中的方法被禁止

406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求

407 Proxy Authentication Required
请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权

408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

409 Conflict 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突

410 Gone
客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置

411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息

412 Precondition Failed 客户端请求信息的先决条件错误

413 Request Entity Too Large
由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息

414 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理

415 Unsupported Media Type 服务器无法处理请求附带的媒体格式

416 Requested range not satisfiable 客户端请求的范围无效

417 Expectation Failed 服务器无法满足Expect的请求头信息

500 Internal Server Error 服务器内部错误，无法完成请求

501 Not Implemented 服务器不支持请求的功能，无法完成请求

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

503 Service Unavailable
由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

8.常用的请求头和响应头有哪些，代表什么含义？

http请求中的常用头（请求头）的含义：
Accept：告诉服务器，客户端支持的数据类型。
Accept-Charset：告诉服务器，客户端采用的编码。
Accept-Encoding：告诉服务器，客户机支持的数据压缩格式。
Accept-Language：告诉服务器，客户机的语言环境。
Host：客户机通过这个头告诉服务器，想访问的主机名。
If-Modified-Since:客户机通过这个头告诉服务器，资源的缓存时间。
Referer:客户机通过这个头告诉服务器，它是从哪个资源来访问服务器的。（一般用于防盗链）
User-Agent:客户机通过这个头告诉服务器，客户机的软件环境。
Cookie：客户机通过这个头告诉服务器，可以向服务器带数据。
Connection：客户机通过这个头告诉服务器，请求完后是关闭还是保持链接。
Date：客户机通过这个头告诉服务器，客户机当前请求时间。
http请求中常用的响应头的含义：
Location:这个头配合302状态码使用，告诉用户端找谁。
Server:服务器通过这个头，告诉浏览器服务器的类型。
Content-Encoding:服务器通过这个头，告诉浏览器数据采用的压缩格式。
Content-Length:服务器通过这个头，告诉浏览器回送数据的长度。
Content-Language：服务器通过这个头，告诉服务器的语言环境。
Content-Type:服务器通过这个头，回送数据的类型
Last-Modified:服务器通过这个头，告诉浏览器当前资源的缓存时间。
Refresh:服务器通过这个头，告诉浏览器隔多长时间刷新一次。
Content-Disposition:服务器通过这个头，告诉浏览器以下载的方式打开数据。
Transfer-Encoding:服务器通过这个头，告诉浏览器数据的传送格式。
ETag:与缓存相关的头。
Expires:服务器通过这个头，告诉浏览器把回送的数据缓存多长时间。-1或0不缓存。
Cache-Control和Pragma：服务器通过这个头，也可以控制浏览器不缓存数据。
Connection:服务器通过这个头，响应完是保持链接还是关闭链接。
Date:告诉客户机，返回响应的时间。

9.说一下浏览器缓存

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。
强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。
协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

cache-control的值有哪些

cache-control是一个通用消息头字段被用于HTTP请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

10.csrf和xss的网络攻击及防范

CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查https头部的refer，使用token
XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中，防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤