URL解析
URL:熟称网址,例如:www.juejin.cn/post/696467… 网址的各部分组成如下
https:常见的协议有http,https,file,ftp,最常见的是http,而https则是进行加密的网络传入
www:定义域主机 http的默认主机是www
juejin.cn:域名
port:端口http默认端口是80,https默认端口是443
post:服务器上的路径(如果省略就默认根路径)
file:定义文档/资源的名称
域名解析
浏览器输入网址之后,首先要经过域名解析,因为浏览器并不能直接通过域名找到服务器, 而是需要通过ip地址找到服务器。这个时候大家可能有疑问为什么不直接使用ip非要使用域名呢？
1.IP 地址
IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协议提供的一 种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来 屏蔽物理地址的差异。IP 地址是一个 32 位的二进制数，比如 127.0.0.1 为本机 IP。 域名就相当于 IP 地址乔装打扮的伪装者，带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。用户通常使用主机名或域名来访问对方的计算机，而不是直接通过 IP 地址访问。因为与 IP 地址的一组纯数字相比，用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去理解名称，相对而言就变得困难了。因为计算机更擅长处理一长串数字。为了解决上述的问题，DNS 服务应运而生。
2.什么是域名解析
DNS协议提供通过域名查找ip地址,或逆向通过ip地址查找域名的服务，DNS是一个网络服务器，我们的域名解析简单的来说就是就是DNS上记录的一条信息记录。
例如 juejin.cn 183.213.21.222:443
3.浏览器如何通过域名去查找对应的ip？
- 浏览器缓存： 浏览器会按照一定的频率缓存DNS记录。
- 操作系统缓存: 如果浏览器中找不到就去操作系统中查找。
- 路由器缓存: 如果操作系统中依然找不到就去路由器中查找缓存。
- ISP的DNS服务器： ISP有专门的DNS服务器应对DNS的查询请求。
- 根域名服务器: 如果以上依然查询不到,就从根域名服务器上查询依次递归的查询。如下图
4.小结
浏览器通过向DNS服务发送域名,DNS服务查询到与域名相对应的ip地址,然后返回给浏览器,浏览器将ip地址打在协议上,同时请求参数也会在协议上搭载,然后一并发送给对应的服务器。
TCP链接
在客户端发送数据之前,会发起TCP的三次握手以同步客户端和服务器序列号和确认号。
1.TCP的三次握手流程如下:
- 客户端会发送一个带SYN=1,Seq=x的数据包到服务器。
- 服务器会返回一个SYN=1,ACK=x+1,Seq=y响应包以示传达确认信息。
- 客户端再回传一个带ACK=y+1,Seq=z的数据包以示握手结束。
2.为啥需要三次握手:
谢希仁著《计算机网络》中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。
发送http请求
发送http请求的过程就是构建http请求报文并通过tcp协议发送到服务器指定的端口,请求报文由请求行,请求头,请求正文组成。
1.请求行包含请求方法,URL,协议版本
- 请求方法包含8种: GET,POST,DELETE,PUT,HEAD,PATCH,OPTIONS,TRACE。
- URL: 由协议+主机+端口+路径+参数组成
- 协议的版本 GET / HTTP/1.1
2.请求头包含请求的附加信息,右关键字/值成对组成,每行一对,关键字和值中间以:分隔
请求头部通知服务器有关客户端请求的信息,它包含很多有关客户端和请求正文相关的信息。例如一下字段:Host,method,content-type,referer,scheme,path,user-agent,Accept,Connection,Cookie
3.请求体可以承载多个请求数据,包含回车符、换行符和请求数据，并不是所有请求都具有请求数据。
name=tom&password=1234&realName=tomson
4.http缓存
http属于客户端缓存,一般认为浏览器有个缓存数据库,用来保存一些静态文件,下面就介绍一下强缓存和协商缓存
1.认识强缓存和协商缓存
第一幅图中memory和disk走的就是强缓存
第二幅图中304走的就是协商缓存
缓存的策略是先走强缓存->协商缓存->取服务器最新的数据
介绍强缓存和协商缓存
1.强缓存
对于强制缓存,服务器响应字段里会有两个字段来表明 Expires/cache-Control Expires为服务器返回的资源到期时间,当再次请求时请求时间小于该时间则使用缓存的数据。Expires为http1.0的产物,故现在大部分使用Cache-Control替代。 Cache-Control有很多属性不同的属性代表不同的含义
- private 客户端可以缓存
- public 客户端和代理服务器都可以缓存
- max-age=t 缓存内容在t秒后失效
- no-cache 需要使用协商缓存来验证缓存数据
- no-store 内容不会被缓存
2.协商缓存
协商缓存需要对比判断是否需要使用缓存。浏览器第一次请求数据时，服务器会把缓存标识和数据一起返回给客户端,客户端将其备份至缓存中,当再次发送请求时,客户端会将缓存标识发送给服务器，服务器根据此标识来判断，如未失效则返回304状态码,则浏览器拿此状态码使用缓存数据。 对与协商缓存 缓存标识要着重理解一下。 Last-Modified:服务器在返回数据时会告诉浏览器最后资源修改的时间
-
if-Modified-Since 浏览器再次请求服务器的时候，请求头会包含此字段，后面跟着在缓存中获得的最后修改时间。服务端收到此请求头发现有if-Modified-Since，则与被请求资源的最后修改时间进行对比，如果一致则返回304和响应报文头，浏览器只需要从缓存中获取信息即可。 从字面上看，就是说：从某个时间节点算起，是否文件被修改了 如果真的被修改：那么开始传输响应一个整体，服务器返回：200 OK 如果没有被修改：那么只需传输响应header，服务器返回：304 Not Modified
-
if-Unmodified-Since:从字面上看, 就是说: 从某个时间点算起, 是否文件没有被修改 如果没有被修改:则开始`继续'传送文件: 服务器返回: 200 OK
如果文件被修改:则不传输,服务器返回: 412 Precondition failed (预处理错误)
Etag:服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识（生成规则由服务器决定）
If-None-Match：再次请求服务器时，浏览器的请求报文头部会包含此字段，后面的值为在缓存中获取的标识。服务器接收到次报文后发现If-None-Match则与被请求资源的唯一标识进行对比。 不同，说明资源被改动过，则响应整个资源内容，返回状态码200。 否则返回304
强缓存和协商缓存的使用场景
一般项目中生成的css和jss和图片等静态资源使用强缓存,因为这些资源配合webpack打包使用的是contenthash 没有变化时资源路径是不会变化的
根html可以使用协商缓存(目前淘宝使用此方案)或者不使用缓存(目前百度和京东使用此方案)
服务器处理请求
1.响应行
2.响应头部包含响应报文的附加信息，由 名/值 对组成
状态码规则如下：
1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。
3 响应主体包含回车符、换行符和响应返回数据，并不是所有响应报文都有响应数据
TCP的四次挥手
渲染页面
参考文章
生成dom树
1.转码
把返回的二进制数据按指定的编码(utf8)转成html字符串
2.解析html
根据w3c的规则解析html字符串构建出dom树
CSS解析
渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式
生成render树
1.根据dom树和css生成一个渲染树 2.去计算dom在页面中的位置(回流) 3.根据dom的位置去绘制到页面上(重绘) 回流与重绘的补充 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作：
页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类（例如：:hover）
- 查询某些属性或调用某些方法
重绘 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
