目录
1.浏览器缓存
window.sessionStorage:
- 生命周期为关闭浏览器窗口
- 在同一个窗口下数据可以共享
- 以键值对的形式存储使用
// 存储数据
sessionStorage.setItem(key,value)
// 获取数据
sessionStorage.getItem(key)
// 删除数据
sessionStorage.removeItem(key)
// 清空数据
sessionStorage.clear()
window.localStorage:
- 生命周期为永久有效,除非手动删除,否则关闭页面也会存在
- 可以多窗口共享数据
- 以键值对的形式存储使用
// 存储数据
localStorage.setItem(key,value)
// 获取数据
localStorage.getItem(key)
// 删除数据
localStorage.removeItem(key)
// 清空数据
localStorage.clear()
cookie:
(1)概念:HTTP协议本身是无状态的,即每次的请求都是独立的,服务器并不知道请求之间有什么联系。Cookie 实际上是一小段的文本信息(key-value格式),客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用浏览器颁发一个Cookie。浏览器会把Cookie保存起来,当浏览器再次请求该网站时,会把请求的网址连同该Cookie一同提交给服务器,服务器检查该Cookie,以此来辨认用户状态。
(2)格式:Set-Cookie:"name = value; domain = .domian.com; path = /; expires = Sat, 11 Jun 2016 11:11:11 GMT; HttpOnly; secure",其中name = value是必选项。
(3)构成:
- name:一个唯一确定的cookie名称,通常来讲cookie的名称是不区分大小写的。
- value:存储在cookie中的字符串值,最好为cookie的name和value进行url编码。
- domain:cookie对于哪个域是有效的,所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域,也可以不包含。
- path:表示这个cookie影响到的路径,浏览器会根据这项配置,向指定域中匹配的路径发送cookie。
- expires:失效时间,表示cookie何时应该被删除的时间戳。如果不设置这个时间戳,浏览器会在页面关闭时删除所有cookie。可以自己设置删除时间,这个值是GMT时间格式,如果客户端和服务器端时间不一致,使用expires就会存在偏差。
- max-age:与expires作用相同,用来告诉浏览器此cookie多久过期(单位是秒),而不是一个固定的时间点。正常情况下max-age的优先级会高于expires。
- HttpOnly:告知浏览器不允许通过脚本document.cookie去更改这个值,同样这个值在document.cookie中也不可见,但在http请求中仍然会携带这个cookie。这个值虽然在脚本中不可获取,但在浏览器安装目录中以文件形式存在。
- secure:安全标志,指定后只有在使用SSL链接时才能发送到服务器,如果是http链接则不会传递该信息。
(4)与sessionStorage和localStorage的区别:
- cookie数据大小不能超过4k;sessionStorage和localStorage的存储比cookie大得多,可以达到5M。
- cookie设置的过期时间之前一直有效;localStorage永久存储,浏览器关闭后数据不丢失除非主动删除,sessionStorage数据在当前浏览器窗口关闭后自动删除。
- cookie数据会自动传递到服务器;sessionStorage和localStorage数据保存在本地。
前端基础-浏览器缓存/HTTP缓存机制(面试常考)_http缓存头面试题-CSDN博客
2.HTTP版本
HTTP及其版本(HTTP1.0、HTTP1.1、HTTP2.0、HTTP3.0)详解_星河梦~的博客-CSDN博客
3.HTTP方法
4.HTTP状态码
当用户访问一个网页时,用户的浏览器会向网页所在服务器发出请求。浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。HTTP状态码(HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码。
1xx:信息响应,服务器收到请求,需要请求者继续执行操作。
- 100:继续。客户端应继续其请求。
- 101:切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议。
2xx:成功响应,操作被成功接收并处理。
- 200:请求成功。一般用于GET与POST请求。
- 201:已创建。成功请求并创建了新的资源。
- 202:已接受。已经接受请求,但未处理完成。
- 203:非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本。
- 204:无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档。
- 205:重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域。
- 206:部分内容。服务器成功处理了部分GET请求。
3xx:重定向,需要进一步的操作以完成请求。
- 300:多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择。
- 301:永久重定向。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。
- 302:临时重定向。与301类似。但资源只是临时被移动。客户端应继续使用原有URI。
- 303:查看其它地址。与301类似。使用GET和POST请求查看。
- 304:未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。
- 305:使用代理。所请求的资源必须通过代理访问。
4xx:客户端错误,请求包含语法错误或无法完成请求。
- 400:客户端请求的语法错误,服务器无法理解。
- 401:请求要求用户的身份认证,未经许可,需要通过HTTP认证。
- 403:服务器理解请求客户端的请求,但是拒绝执行此请求(访问权限出现问题)。
- 404:服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面。除此之外,也可以在服务器拒绝请求但不想给拒绝原因时使用。
5xx:服务器错误,服务器在处理请求的过程中发生了错误。
- 500:服务器内部错误,无法完成请求。
- 501:服务器不支持请求的功能,无法完成请求。
- 502:作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应。
- 503:由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中。
- 504:充当网关或代理的服务器,未及时从远端服务器获取请求。
- 505:服务器不支持请求的HTTP协议的版本,无法完成处理。
5.HTTPS原理
深入浅出HTTPS工作原理_https :// privatte r.net/p/10054124-CSDN博客
6.HTTP和HTTPS的区别
HTTP:超文本传输协议(Hyper Text Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法,它可以使浏览器更加高效。HTTP协议是以明文方式发送信息的,如果黑客截取了Web浏览器和服务器之间的传输报文,就可以直接获得其中的信息。
原理:
- 客户端的浏览器首先要通过网络与服务器建立连接,该连接是通过TCP来完成的,一般TCP连接的端口号是80。建立连接后,客户机发送一个请求给服务器,请求方式的格式为:统一资源标识符(URI)、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和许可内容。
- 服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码,后边是MIME信息包括服务器信息、实体信息和可能的内容。
HTTPS:是以安全为目标的HTTP通道,是HTTP的安全版 。HTTPS的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持。SSL协议可分为两层:SSL记录协议(SSL Record Protocol),它建立在可靠的传输协议(如TCP)之上,为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议(SSL Handshake Protocol),它建立在SSL记录协议之上,用于在实际的数据传输开始前,通讯双方进行身份认证、协商加密算法、交换加密密钥等。
设计目标:
- 数据保密性:保证数据内容在传输的过程中不会被第三方查看。
- 数据完整性:及时发现被第三方篡改的传输内容。
- 身份校验安全性:保证数据到达用户期望的目的地。
HTTP与HTTPS的区别:
- HTTP是超文本传输协议,信息是明文传输,HTTPS则是具有安全性的SSL加密传输协议。
- HTTP和HTTPS使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
- HTTP的连接很简单,是无状态的(其数据的发送、传输和接收都是相互独立的)。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTPS协议安全。
https和http的区别_http和https的区别-CSDN博客
HTTP与HTTPS的区别_http和https的区别_Amy.Wang的博客-CSDN博客
7.TCP连接过程
8.TCP和UDP的区别
经典面试题 TCP和UDP有什么区别?_tcp和udp的区别面试题-CSDN博客
9.域名解析过程
多张图带你彻底搞懂DNS域名解析过程_域名解析流程图_林小鹿@的博客-CSDN博客
10.CDN原理
CDN(Content Delivery Network):内容分发网络。CDN解决的是如何将数据快速可靠地从源站传递到用户的问题。
- 当用户去访问一个内容URL,本地的DNS系统会将其解析,最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
- CDN的DNS服务器将CDN的全局负载均衡设备的IP地址返回用户。用户向CDN的全局负载均衡设备发起内容URL的访问请求。
- 区域负载均衡设备会为用户选择一台合适的缓存服务器提供服务,选择的依据包括:根据用户的IP地址,判断哪一台服务器距用户最近;根据用户所请求的URL中携带的内容名称,判断哪一台服务器上有用户所需内容;查询各个服务器当前的负载情况,判断哪一台服务器尚有服务能力。基于以上这些条件综合分析之后,区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的IP地址。
- 全局负载均衡设备把缓存服务器的IP地址返回给用户。
- 用户向缓存服务器发起请求,缓存服务器响应用户请求,将用户所需内容传送到用户终端。如果这台缓存服务器上并没有用户想要的内容,而区域均衡设备依然将它分配给了用户,那么这台服务器就要向它的上一级缓存服务器请求内容,直至追溯到网站的源服务器,将内容拉取到本地。
11.同源策略
同源策略(same origin policy)_要不要买菜啊的博客-CSDN博客
12.跨域问题
概念:当一个请求url的协议、域名、端口号三者之间任意一个与当前页面url不同即为跨域。
原因:出于浏览器的同源策略限制。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
解决跨域问题的8种方案(最新最全)_跨域解决方案-CSDN博客
【精选】Nginx配置使用详解_shstart7的博客-CSDN博客
13.浏览器进程
14.浏览器内核
五大主流浏览器内核以及国内常见的几种浏览器内核总结_SHUKEd的博客-CSDN博客
15.从输入URL到页面展示的过程
(1)输入URL。
(2)查找缓存:浏览器先查看浏览器缓存 - 系统缓存 - 路由缓存中是否有该地址页面,如果有则显示页面内容,如果没有则进行下一步。
(3)DNS域名解析:浏览器向DNS服务器发起请求,解析该URL中域名对应的IP地址。DNS服务器是基于UDP的,因此会用到UDP协议。
(4)建立TCP连接:解析出IP地址后,根据IP地址和默认80端口,和服务器建立TCP连接。
(5)发起HTTP请求:浏览器发起读取文件的HTTP请求,该请求报文作为TCP三次握手的第三次数据发送给服务器。
(6)服务器响应并返回结果:服务器对浏览器请求做出相应,并把对应的HTML文件发送给浏览器。
(7)关闭TCP连接:通过四次挥手释放TCP连接。
(8)浏览器渲染:客户端(浏览器)解析HTML内容并渲染出来。解析流程为:
- 构建DOM树:词法分析然后解析成DOM树(dom tree),是由DOM元素及属性节点组成,树的根是document对象。
- 构建CSS规则树:生成CSS规则树(CSS Rule Tree) 。
- 构建render树:Web浏览器将DOM和CSS OM结合,并构建出渲染树 。
- 布局(Layout):计算出每个节点在屏幕中的位置。
- 绘制(Painting):即遍历render树,并使用UI后端层绘制每个节点。
浏览器输入url到页面展示出来的全过程_浏览器从输入url到显示页面的过程_cute_ming的博客-CSDN博客
16.token
什么是token?token是用来干嘛的?_服务器_儒雅的烤地瓜-华为云开发者联盟
17.cookie和token的区别
18.get和post的区别
(1)参数传递
- get请求会将参数添加到URL后面,没有请求主体,调用send()函数,传递的参数为null。
- post请求会将数据放在请求体中,用户无法通过URL直接看到,调用send()函数,传递的数据为data。
(2)服务端参数获取
- 使用Express作为服务器框架,get请求通过Request.query获取参数。
- post请求需要添加中间件,同时通过Request.query获取参数。
(3)传递的数据量
- get请求传输的数据量小。
- post请求的数据量较大,一般不受限制。
(4)安全性
- get请求安全性较低,因为其请求的参数出现在URL中,而且采用明文进行数据传输,通过浏览器缓存或者历史记录可以容易获取到某些隐私请求的参数。
- post请求通过请求体进行数据传输,数据不会出现在URL中,隐藏了请求数据的信息。
(5)处理form表单的差异性
- get请求时action指定的url中请求的参数会被丢弃,提交时只会将表单中的元素进行拼接向服务器传递。解决办法:使用隐藏域type = hidden。
get请求和post请求的区别(全面讲解)_get和post请求的区别_心动的偏执的博客-CSDN博客