秋招复习计划--JavaScript知识点6

  |  

前言

本来这部分是跟着上篇文章一起的,但是觉得这部分的内容太多了,所以单独拿出来写一章,着重来讲讲从输入url到页面渲染的过程


33



从输入地址到页面渲染完成并展示

概述

从输入url到页面渲染完成并展示,期间涉及了很多过程,很多知识都具有专门的研究学科,这里尽量写的全一点。

整个过程大致分成下面几个步骤:

  • 输入网址
  • DNS解析
  • 建立TCP连接
  • 客户端发送HTTP请求
  • 服务器处理请求
  • 服务器返回响应
  • 浏览器渲染展示HTML
  • 浏览器发送请求获取其它在HTML中的资源

下面将详细讲述在这个过程中发生了什么,涉及到哪些知识,以及可能出现的问题

输入地址

当我们在浏览器中输入网址时,大多数浏览器都会开始智能匹配可能的url,浏览器会从历史记录、书签等地方查找符合目前输入的url,可以让用户补全地址。像chrome浏览器,他甚至会从缓存中直接将网页展示出,哪怕你还没有确定访问

DNS解析

DNS解析就是获取用户输入的网址对应的IP地址。

  • 请求发起,浏览器开始解析域名,它首先查看本地硬盘的hosts文件,查看是否存在和这个域名对应的规则,如果有,直接使用hosts文件中的ip地址
  • 如果在hosts文件中没有查找到,浏览器会发送一个DNS请求到本地DNS服务器(由网络接入服务器商:移动、联通、电信提供)
  • DNS请求到达本地DNS服务器,服务器查询缓存中是否存在域名对应IP的记录,如果有直接返回结果,查询过程按递归的方式进行。如果没有本地DNS服务器将向根DNS服务器进行查询
  • 根服务器并不直接记录具体域名和IP地址的对应关系,他只会告诉本地DNS服务器,这个域名在哪个域服务器上继续查询,并给出域服务器的地址。这个过程是一个迭代的过程

  • 本地DNS服务器继续向域服务器发送请求,以我的博客地址为例www.doubler.cn,请求的是.cn域服务器。.cn域服务器接收到请求后,也不会直接返回域名和IP地址,而是告诉本地DNS服务器,你的域名的解析服务器的地址。譬如我这个域名是从腾讯买的,那么这个域名的解析服务器也是腾讯的

  • 最后,本地DNS服务器向域名的解析服务器发送请求,这时就能收到一个域名和地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次查询时,可以直接返回结果,加快网络访问。

下图展示的就是整个过程

DNS解析

扩展知识

DNS是什么

DNS–Domain Name System,域名系统,因特网上作为域名和IP地址相互映射的一个分布式数据库,能够是用户更方便的访问互联网,而不用去记住那些能够被机器直接读取的IP地址

DNS查询的两种方式

递归解析

局部服务器自己负责想其它DNS服务器进行查询,一般是先向该域名的根域服务器查询,再由根域名服务器一级一级往下查询,最后得到的查询结果返回给局部DNS服务器,再由局部DNS服务器返回给客户端

递归解析

迭代解析

局部DNS服务器并不会自己向其它DNS服务器进行查询,而是把能解析该域名的其它DNS服务器的IP地址返回给客户端DNS程序,客户端程序再继续向这些DNS服务器进行查询。知道查到位置

迭代解析

DNS域名称空间的组织形式

组织形式

DNS负载均衡

当一个网站拥有大量用户时,加入每次请求都访问同一台机器,那么着他机器的负载将会很大。处理的方法就是使用DNS负载均衡技术,它的原理就是在DNS服务器中为同一个主机名配置多个IP地址,譬如www.baidu.com它可能配置了1.1.1.1还配置了2.2.2.2。在应答DNS解析时,DNS服务器对每个查询将DNS文件中主机记录的IP地址按顺序返回不同的解析结果,这样就能将客户访问导流到不同IP的机器上去了。

建立TCP连接

在拿到域名对应的IP地址之后,浏览器或以一个随机端口(1024<port<65535)像服务器的WEB应用程序80端口发起TCP请求。

TCP报文机构

TCP报文中文版

TCP报文英文版

报文结构:

源端口和目的端口:各占两个字节,分别写入源端口号和目的端口号

序号:占4个字节,序号使用mode运算。TCP是面向字节流的,在一个TCP连接中传送的字节流中的每一个字节都按顺序编号。

确认序号:占4个字节,是期望收到对方下一个报文段的第一个数据字节的序号。若确认序号=N,则表明到序号N-1为止的所有数据都已正确收到

数据偏移:占4位,表示TCP报文字段的首部长度。以4字节为一个单位,4位最多能表示到15,那么TCP首部的最大长度为60字节(4*15字节)

6个保留标志位:占6位,默认全置0

  • 紧急URG:当它为1时,表明紧急指针字段有效。这是发送发TCP就把紧急数据插入到本报文段数据的最前面,后面仍为普通数据
  • 确认ACK:当它为1时,确认序号才有效。当ACK为0时,确认号无效。TCP规定,在建立连接后所有传输的报文段都必须把ACK置1
  • 推送PSH:当它为1时,及受访TCP收到后就需要尽快地交付给接收应用进程,而不再等到整个缓存都填满后再向上交付
  • 复位RST:当它为1时,表明TCP连接中出现了严重差错,必须释放连接,重新建立
  • 同步SYN:在连接建立时用来同步序号。但它为1时,表明这是一个连接请求和连接接收报文
  • 终止FIN:用来释放连接,当它为1时,表明此报文段的发送方的数据已经发送完毕,并要求释放连接

校验和:占2字节。检验和字段检验的范围包括首部和数据这两部分。和UDP数据报一样,在计算检验和时,也要在TCP报文段的前面加上12字节的伪首部。伪首部的格式与UDP用户数据报的伪首部一样,但要将伪首部第四个字段中的17 改为6(协议号),把第5字段中的UDP长度改为TCP长度。

紧急指针:占2字节。紧急指针仅在URG=1时才有意义,它指出本报文段中的紧急数据的字节数。

TCP三次握手

讲完了TCP报文头的结构,下面讲讲TCP连接的建立和断开。TCP连接的建立需要通过客户端与服务端的三次握手

  • 第一次握手:客户端主动打开,发送连接请求报文段,将SYN标识为置为1,Sequence Number置为x(TCP规定SYN为1时,不能携带数据,x为随机产生的一个值),然后客户端进入SYN_SEND状态
  • 第二次握手:服务器收到SYN报文段进行确认,将SYN设置为1,ACK置为1,SequenceNumber置为y, Acknowledgment Number置为x+1,然后进入SYN_RECV状态,这个状态被称为半连接状态
  • 第三次握手:客户端再进行一次取人,将ACK置为1(SYN不再使用,为0),Sequence Number置为x+1,Acknowledgment Number置为y+1发向服务器,最后客户端与服务器进入连接转台

三次握手

为什么客户端需要第三次握手来再次确认

这主要是为了防止已经失效的连接请求报文段突然又传回到服务器而产生错误的场景。假设有这样一个场景,客户端发送的第一个连接请求报文在网络节点中长时间的滞留了。客户端以为它丢失了,然后发送了第二个连接请求报文,并成功连接完成数据传输,最后断开连接。这时候,滞留的请求报文来到了服务器。假设没有三次确认的话,那么服务器会以为客户端再一次请求了连接,然后他会一直等待客户端传输数据,这样服务端的大量资源会被占用。

TCP四次挥手

TCP四次挥手是TCP连接释放的过程:

  • 客户端发送一个报文给服务端(没有数据),其中FIN设置为1,Sequence Number置为u,客户端进入FIN_WAIT_1状态
  • 服务端收到客户端请求,发送一个ACK给客户端,Acknowledge置为u+1,同时发送Sequence Number为v,服务端进入CLOSE_WAIT状态
  • 服务端发送一个FIN给客户端,ACK置为1,Sequence Number置为w,Acknowledge置为u+1,用来关闭服务端到客户端的数据传送,服务端进入LAST_ACK状态
  • 客户端收到FIN后,进入TIME_WAIT状态,接着发送一个ACK给服务端,Acknowledge置为w+1,Sequence Number置为u+1,最后客户端和服务端都进入关闭状态

四次挥手

为什么握手是三次而挥手需要四次

因为服务器在第二次握手的时候收到建立连接请求的SYN报文后,将ACK和SYN放在一个报文里发送给客户端。而在关闭连接的时候,由于TCP是全双工的,所以发送发和接收方都需要FIN和ACK。而关闭连接是,当收到对方的FIN报文时,仅仅表示对方不再发送数据了但是还能接收数据,己方也未必全部数据都发送给对方了,所以己方可以立即关闭,也可以发送一些数据给对方后,再发送FIN报文给对方表示同意现在关闭连接,因此,己方ACK和FIN一般分开发送。

客户端发送HTTP请求

建立TCP连接后,客户端会发起一个HTTP请求,请求信息包括三个部分:

  • 请求方法/URI协议/版本
  • 请求头
  • 请求正文

但是在发送HTTP请求的时候可能还会出现一点问题。

服务器永久重定向响应

当我们发送的HTTP请求收到的响应不是200,而是30X时,就会触发重定向。当响应是301时,就会导致永久重定向。

为什么服务器一定要重定向而不是直接发送具体的网页内容呢。这跟维护搜索引擎的排名有关。如果一个页面有两个网址,例如http://www.yy.com/http://yy.com/那么搜索引擎会认为它们是两个网站,结果会导致两个网址的搜索链接都会减少从而排名降低。但是搜索引擎知道301永久重定向,这样就会把访问带www和不带的地址归在同一个网址排名下。

301和302的共同和区别

301和302都表示重定向,当浏览器拿到服务器返回的状态码是,会过根据Loction首部的地址跳转到新地址页面

301表示就地址A的资源已经被永久移除(这个资源不可用),搜索引擎在抓取新内容的同时也将旧地址的网址替换为重定向后的网址

302表示旧地址还在(仍可访问),这个重定向知识临时从就地址A跳转到地址B,搜索引擎会抓取新的内容,但保存的仍是旧地址。

302对于SEO而言是优于301的

重定向的原因

  • 网站调整(如改变网页目录结构)
  • 网页被移动到一个新地址
  • 网页扩展名改变(如从.php改到.html)

    这种情况下,如果不做重定向,则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息,访问流量白白丧失;再者某些注册了多个域名的网站,也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

什么时候使用302什么时候使用301

当一个网站或网页在24-48个小时内临时移动到一个新的地址,使用302,而当原有资源因为某种原因被移除,需要到新地址访问,且是永久的,使用301

浏览器跟踪重定向地址

当浏览器重定向获得正确的网址后,重新发送HTTP请求到正确的地址

服务器处理处理请求

在经历的之前的所有步骤后,客户端的HTTP请求到达了服务器。后端从固定的端口接收到TCP报文开始,他就会对TCP连接进行处理,对HTTP协议进行解析,并按报文格式进一步封装成HTTP Request对象,为上层提供接口

一些大一点的网站会将你的请求转到反向代理服务器中,因为当网站访问量非常大时,网站会越来越卡,一台服务器已经不够用了。于时将同一个应用部署在多台服务器上,将大量用户的请求分配给多台机器处理。此时,客户端不是直接通过HTTP协议访问某网站应用服务器,而是先请求到Nginx,Nginx再请求应用服务器,然后将结果返回给客户端,这里Nginx的作用是反向代理服务器。

负载均衡

正向代理和反向代理的区别

正向代理和反向代理的最大区别在于代理服务器是为谁服务的。

正向代理是顺着请求的方向进行的代理,及代理服务器由客户端配置,去请求目标服务器的地址。典型的正向代理的应用就是VPN服务。用通俗例子来讲,A想借钱,C有这笔钱,但是A不认识C,于是A找到了B,B找C去借这笔钱。在这个例子中,B是你找的,它是为你服务的,这就是正向代理

反向代理与正向代理相反,代理服务器是为目标服务器服务的。同样举个例子,A同样需要借钱,但他不知道问谁借,于时它找到了一个借款平台,借款平台把钱借给了它, 但是这笔钱从哪里来的A并不知道。同样的,我们的请求发送给反向代理服务器,服务器将我们的请求发送给具体的服务器,我们获得了服务,但是具体是哪台服务器提供的,我们并不知道。

服务器返回响应

经过前面的步骤,服务器收到并处理完了我们的请求,于时它把它的处理结果返回,也就是返回了一个HTTP响应

HTTP响应由三部分构成,分别是:

  • 状态行
  • 响应头
  • 响应正文

状态行

状态行由协议版本、数字形式的状态代码、以及相应的状态描述构成

状态代码:

1xx:信息性状态码,表示是服务器已经接收客户端请求,客户端可继续发送请求,包括

  • 100 Continue
  • 101 Switching Protocols

2xx:成功状态码,表示服务器已成功接收到请求并进行处理

  • 200 OK 表示客户端请求成功
  • 204 No Content 成功,但不返回任何实体的主体部分
  • 206 Partial Content 成功执行了一个范围请求

3xx:重定向状态码,表示服务器要求客户端进行重定向

  • 301 Moved Permanentily 永久性重定向,响应报文的Location首部应该有该资源的新URL
  • 302 Found 临时性重定向,响应报文的Locaiton首部给出的URL用来临时定位资源
  • 303 See Other 请求的资源存在着另一个URL,客户端应使用GET方法定向获取请求的资源
  • 304 Not Modified 服务器内容没有更新,可以直接读取浏览器缓存
  • 307 Temporary Redirect临时从定向

4xx:客户端错误状态码,表示客户端的请求有非法内容

  • 400 Bad Request 表示客户端请求有语法错误,不能被服务器所理解
  • 401 Unauthonzed 表示请求未经授权,该状态码需要与WWW-Authenticate报头域一起使用
  • 403 Forbidden 表示服务器收到了请求,但是拒绝提供服务,通常会在响应正文中给出不提供服务的原因
  • 404 Not Found 请求的资源不存在,例如输入了错误的地址

5xx:服务器错误状态码,表示服务器未能正常处理客户端的请求而出现意外的错误

  • 500 Internel Server Error 表示服务器发生了不可预期的而错误,导致无法完成客户端的请求
  • 503 Service Unavailable 表示服务器当前不能够处理客户端的请求,在一段时间后服务器可能会恢复正常

响应头

响应头

浏览器显示HTML

在浏览器没有完整接受全部HTML文档时,他就已经开始显示这个页面了,不同的浏览器解析渲染的过程可能不太一样,这里我们介绍一下webkit的渲染过程

webkit

解析HTML构成DOM树,解析CSS构成样式规则,构建render树,布局render树,最后绘制render树

浏览器在解析HTML文件时,会“自上而下”加载,并在加载的过程中进行解析渲染。在解析过程中,如果遇到请求外部资源时,如图片、外链的CSS等,请求过程是异步的,并不影响html文档进行加载。

浏览器发送请求获取其它在HTML中的资源

文章目录
  1. 1. 从输入地址到页面渲染完成并展示
  2. 2. 输入地址
  3. 3. DNS解析
    1. 3.1. 扩展知识
  4. 4. 建立TCP连接
    1. 4.1. TCP报文机构
    2. 4.2. TCP三次握手
    3. 4.3. TCP四次挥手
  5. 5. 客户端发送HTTP请求
    1. 5.1. 服务器永久重定向响应
    2. 5.2. 浏览器跟踪重定向地址
  6. 6. 服务器处理处理请求
    1. 6.1. 正向代理和反向代理的区别
  7. 7. 服务器返回响应
    1. 7.1. 状态行
    2. 7.2. 响应头
  8. 8. 浏览器显示HTML
  9. 9. 浏览器发送请求获取其它在HTML中的资源
|