浏览器http请求流程与网页渲染流程
 
浏览器http请 求流程
浏览器http请求流程简要
URL解析与编码
DNS解析查找IP地址
Http请求数据格式
TCP三次握手与四次挥手
tomcat处理http请求流程
http响应数据格式
http缓存相关
  
网页渲染流程

 
浏览器http请 求流程
 
浏览器http请求流程简要
 
URL解析与编码 / DNS解析查找IP地址。
网络请求发起，进行tcp连接，http协议封装数据。
http报文传输过程。
服务器接收到数据并且处理数据。
服务器响应请求并返回数据。
客户端接收数据。
浏览器加载html,css,js并且渲染页面。## URL解析与DNS解析
 
URL解析与编码
 
当浏览器地址栏输入url，并且按下enter之后，浏览器对URL进行解析，检查URL的协议如果为HTTP/HTTPS或者无协议，则按照web处理；另外，如果URL的URI部分如果存在特殊字符，如中文，空格等，则使用encodeURI/decodeURI进行编码处理，转成utf8编码形式。
 
DNS解析查找IP地址
 
先找浏览器本身缓存的DNS缓存，如果没有，则找系统中DNS缓存。
如果还是没有，则去找本地DNS配置，即hosts文件。
如果还是没有，会去该局域网的路由查找DNS缓存。
如果还是没有，则递归的查找网络上的dns域名服务器，在依然没找到的情况下，知道顶级域名服务器为止，则返回域名错误。
 注意：一个DNS可以配置多个IP，也就形成了基于dns的负载均衡。
 
Http请求数据格式
 
请求方法
url
协议及版本号
请求头
空行
请求体

TCP三次握手与四次挥手
 
相关概念
 
seq : sequence，序列号。随机生成的一个整数型数字。
ack：acknowledge，确认号。收到发送方的seq进行+1。
syn：synchronize，同步。 表示建立同步序号，即建立连接。当建立TCP连接的时候，SYN这个标志位设置为1，握手完成之后就设置为0。
fin：finish，完成。表示释放连接。
 
三次握手的本质
 三次握手的本质是保证建立通信的双方，都能对对方实现一次通讯测试，即我说的话，我知道对方能听到。
 
三次握手流程
 
第一次握手，客户端发送syn=1, seq=随机数x， 服务器收到信息，此时，第一次握手完成。其中seq表示客户端说的话。
第二次握手，服务器端发送syn=1,seq=随机数y，ack=x+1，客服端收到信息，此时，第二次握手完成。其中seq表示服务器端说的话，ack表示服务器端听到了客户端说的话，且客户端可以通过生成的随机数x，通过服务器返回的x+1，验证服务器听到了客户端讲的话。
第三次握手，客户端发送seq=x+1, ack=y+1,表示客户端听到了服务器端说的话。
 - 至此，通过第一次，第二次握手，客户端确定了服务器端能听到自己讲话。通过第二次，第三次握手了，服务器端确定了客户端能听到自己讲话。双方通信正常，则连接建立完成。
 
图片来源：https://www.cnblogs.com/bj-mr-li/p/11106390.html
 
关于不是2次握手，4次握手的原因
 
如果只有两次握手，那么至少有一方无法保证另一方能听到自己说话。
如果是四次握手，那么多了一次没必要的握手。
 为什么不是三次挥手
当客户端发送结束请求时，服务器端可能还在发送上一次的响应数据，此时，还不能结束。所以第三次挥手在服务器端发送数据完毕之后开始，服务器端发送结束请求给客户端，客户端进行第四次挥手，同时，开始2MSL等待（当再次受到挥手时，开始下一次的2MSL等待）。
 
tomcat处理http请求流程
 
未完待续
 
http响应数据格式
 
未完待续
 
http缓存相关
 
未完待续
 
网页渲染流程
 
未完待续

1、概要
 
　　从用户在浏览器输入域名开始，到web页面加载完毕，这是一个说复杂不复杂，说简单不简单的过程，下文暂且把这个过程称作网页加载过程。下面我将依靠自己的经验，总结一下整个过程。如有错漏，欢迎指正。
 
　　阅读本文需要读者已有一定的计算机知识，了解TCP、DNS等。
 
2、分析
 
　　众所周知，打开一个网页的过程中，浏览器会因页面上的css/js/image等静态资源会多次发起连接请求，所以我们暂且把这个网页加载过程分成两部分：
 
html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)
css/js/image等 网页静态资源加载(假设使用CDN)
     2.1 页面加载
 
　　先上一张图，直观明了地让大家了解下基本流程，然后我们再逐一分析。
 
 
　　2.1.1 DNS解析
 
　　什么是DNS解析？当用户输入一个网址并按下回车键的时候，浏览器得到了一个域名。而在实际通信过程中，我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址，这个过程称作DNS解析。
 
      1) 浏览器首先搜索浏览器自身缓存的DNS记录。
 
　　或许很多人不知道，浏览器自身也带有一层DNS缓存。Chrome 缓存1000条DNS解析结果，缓存时间大概在一分钟左右。
 
　　（Chrome浏览器通过输入：chrome://net-internals/#dns 打开DNS缓存页面）
 
　　2) 如果浏览器缓存中没有找到需要的记录或记录已经过期，则搜索hosts文件和操作系统缓存。
 
　　在Windows操作系统中，可以通过 ipconfig /displaydns 命令查看本机当前的缓存。
 
　　通过hosts文件，你可以手动指定一个域名和其对应的IP解析结果，并且该结果一旦被使用，同样会被缓存到操作系统缓存中。
 
　　Windows系统的hosts文件在%systemroot%\system32\drivers\etc下，linux系统的hosts文件在/etc/hosts下。
 
　　3) 如果在hosts文件和操作系统缓存中没有找到需要的记录或记录已经过期，则向域名解析服务器发送解析请求。
 
　　其实第一台被访问的域名解析服务器就是我们平时在设置中填写的DNS服务器一项，当操作系统缓存中也没有命中的时候，系统会向DNS服务器正式发出解析请求。这里是真正意义上开始解析一个未知的域名。
 
　　一般一台域名解析服务器会被地理位置临近的大量用户使用（特别是ISP的DNS），一般常见的网站域名解析都能在这里命中。
 
　　4) 如果域名解析服务器也没有该域名的记录，则开始递归+迭代解析。
 
　　这里我们举个例子，如果我们要解析的是mail.google.com。
 
　　首先我们的域名解析服务器会向根域服务器（全球只有13台）发出请求。显然，仅凭13台服务器不可能把全球所有IP都记录下来。所以根域服务器记录的是com域服务器的IP、cn域服务器的IP、org域服务器的IP……。如果我们要查找.com结尾的域名，那么我们可以到com域服务器去进一步解析。所以其实这部分的域名解析过程是一个树形的搜索过程。
 
       
 
       根域服务器告诉我们com域服务器的IP。
 
　　接着我们的域名解析服务器会向com域服务器发出请求。根域服务器并没有mail.google.com的IP，但是却有google.com域服务器的IP。
 
　　接着我们的域名解析服务器会向google.com域服务器发出请求。...
 
　　如此重复，直到获得mail.google.com的IP地址。
 
 
 
　　为什么是递归：问题由一开始的本机要解析mail.google.com变成域名解析服务器要解析mail.google.com，这是递归。
 
　　为什么是迭代：问题由向根域服务器发出请求变成向com域服务器发出请求再变成向google.com域发出请求，这是迭代。
 
　　5) 获取域名对应的IP后，一步步向上返回，直到返回给浏览器。
 
　　2.1.2 发起TCP请求
 
　　浏览器会选择一个大于1024的本机端口向目标IP地址的80端口发起TCP连接请求。经过标准的TCP握手流程，建立TCP连接。
 
　　关于TCP协议的细节，这里就不再阐述。这里只是简单地用一张图说明一下TCP的握手过程。如果不了解TCP，可以选择跳过此段，不影响本文其他部分的浏览。
 
        
 
 
 
　　2.1.3 发起HTTP请求
 
　　其本质是在建立起的TCP连接中，按照HTTP协议标准发送一个索要网页的请求。
 
　　2.1.4 负载均衡
 
　　什么是负载均衡？当一台服务器无法支持大量的用户访问时，将用户分摊到两个或多个服务器上的方法叫负载均衡。
 
　　什么是Nginx？Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具有占有内存少，稳定性高等优势。
 
　　负载均衡的方法很多，Nginx负载均衡、LVS-NAT、LVS-DR等。这里，我们以简单的Nginx负载均衡为例。关于负载均衡的多种方法详情大家可以Google一下。
 
　　Nginx有4种类型的模块：core、handlers、filters、load-balancers。
 
　　我们这里讨论其中的2种，分别是负责负载均衡的模块load-balancers和负责执行一系列过滤操作的filters模块。
 
　　1) 一般，如果我们的平台配备了负载均衡的话，前一步DNS解析获得的IP地址应该是我们Nginx负载均衡服务器的IP地址。所以，我们的浏览器将我们的网页请求发送到了Nginx负载均衡服务器上。
 
　　2) Nginx根据我们设定的分配算法和规则，选择一台后端的真实Web服务器，与之建立TCP连接、并转发我们浏览器发出去的网页请求。
 
　　　　Nginx默认支持 RR轮转法 和 ip_hash法 这2种分配算法。
 
　　　　前者会从头到尾一个个轮询所有Web服务器，而后者则对源IP使用hash函数确定应该转发到哪个Web服务器上，也能保证同一个IP的请求能发送到同一个Web服务器上实现会话粘连。
 
　　　　也有其他扩展分配算法，如：
 
　　　　fair：这种算法会选择相应时间最短的Web服务器
 
　　　　url_hash：这种算法会使得相同的url发送到同一个Web服务器
 
　　3) Web服务器收到请求，产生响应，并将网页发送给Nginx负载均衡服务器。
 
　　4) Nginx负载均衡服务器将网页传递给filters链处理，之后发回给我们的浏览器。
 
 
 
 
　　而Filter的功能可以理解成先把前一步生成的结果处理一遍，再返回给浏览器。比如可以将前面没有压缩的网页用gzip压缩后再返回给浏览器。
 
　　2.1.5 浏览器渲染
 
　　1) 浏览器根据页面内容，生成DOM Tree。根据CSS内容，生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。
 
　　2) 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)
 
　　3) 根据Render Tree渲染网页
 
　　　　但是在浏览器解析页面内容的时候，会发现页面引用了其他未加载的image、css文件、js文件等静态内容，因此开始了第二部分。
 
　　2.2 网页静态资源加载
 
　　以阿里巴巴的淘宝网首页的logo为例，其url地址为 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg
 
　　我们清楚地看到了url中有cdn字样。
 
　　什么是CDN？如果我在广州访问杭州的淘宝网，跨省的通信必然造成延迟。如果淘宝网能在广东建立一个服务器，静态资源我可以直接从就近的广东服务器获取，必然能提高整个网站的打开速度，这就是CDN。CDN叫内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。
 
　　接下来的流程就是浏览器根据url加载该url下的图片内容。本质上是浏览器重新开始第一部分的流程，所以这里不再重复阐述。区别只是负责均衡服务器后端的服务器不再是应用服务器，而是提供静态资源的服务器。
 
参考链接：https://blog.csdn.net/weixin_40017590/article/details/80596447

 
 
欢迎关注”生信修炼手册”!
 
对于静态网页，我们只需要访问对应的URL就可以获得全部的数据了，动态网页则没有这么简单。比如以下网站
 
http://q.10jqka.com.cn/zjhhy/detail/code/M/
 
在浏览器中打开，我们可以看到对应的表格数据
 

 
在浏览器中，通过翻页按钮，可以查看不同页面的内容
 

 
但是你会发现，在翻页的过程中，页面的url并没有发生变化，这说明这个表格中的数据是动态加载的。目前，常用的动态加载技术有以下两种
 
1. ajax
 
2. js
 
通过构建ajax或者js请求，来获得对应的数据。对于这些动态加载的数据，我们就不能只请求网页的url了，而是需要找到上述两种请求的链接，一些简单的动态加载链接，可以通过浏览器的调试工具来快速查找
 
1. ajax
 
ajax请求通过network选项中的xhr请求来查找，在上述网站进行翻页，可以看到如下如下所示的ajax请求链接
 

 
直接用爬虫或者ajax链接，就可以返回对应的数据了。
 
2. js动态加载
 
js请求通过network选项中的js请求来进行查找，在下列网站中，其翻页的数据就是通过js请求来动态加载的
 
https://finance.sina.com.cn/stock/reportch/jinqilin.shtml
 
js请求的示例如下 
 

 
通过分析请求的url规律，可以帮助我们批量获取对应的数据连接。对于简单的ajax和js请求，通过浏览器调试工具，可以快速的获取数据。
 
·end·
 
—如果喜欢，快分享给你的朋友们吧—
 
原创不易，欢迎收藏，点赞，转发！生信知识浩瀚如海，在生信学习的道路上，让我们一起并肩作战！
 
本公众号深耕耘生信领域多年，具有丰富的数据分析经验，致力于提供真正有价值的数据分析服务，擅长个性化分析，欢迎有需要的老师和同学前来咨询。
 
  更多精彩
 
KEGG数据库，除了pathway你还知道哪些
全网最完整的circos中文教程
DNA甲基化数据分析专题
突变检测数据分析专题
mRNA数据分析专题
lncRNA数据分析专题
circRNA数据分析专题
miRNA数据分析专题
单细胞转录组数据分析专题
chip_seq数据分析专题
Hi-C数据分析专题
HLA数据分析专题
TCGA肿瘤数据分析专题
基因组组装数据分析专题
CNV数据分析专题
GWAS数据分析专题
2018年推文合集
2019年推文合集
 
  写在最后
 
转发本文至朋友圈，后台私信截图即可加入生信交流群，和小伙伴一起学习交流。
 
扫描下方二维码，关注我们，解锁更多精彩内容！
 

 
一个只分享干货的
 
生信公众号
 

目录
 
1、URI与URL      2、超文本hypertext
 
3、HTTP和HTTPS         4、HTTP请求过程
 
5、请求方法                    6、请求头
 
7、请求体                        8、响应
 
9、网页基础
 

 
 
1、URI与URL
 
URI是统一资源标志符（URL是URI的子集，URI还包括一个子类为URN统一资源名称，它只命名资源而不指定如何定位资源）
 
URL统一资源定位符（如：https：//baidu.com/wd=leebeloved是一个URL同样也是一个URI，拆解后为：访问协议https，访问路径baidu.com，资源名称wd=leebeloved）
 
2、超文本hypertext，浏览器所展现的网页为超文本解析而来的，网页源码为HTML代码。
 
3、HTTP和HTTPS
 
HTTP称为超文本传输协议，是从网络传输超文本数据到本地浏览器的协议。而HTTPS为安全版的HTTP，在HTTP下加入ssl层，HTTPS传输内容都是经过ssl加密的。
 
HTTPS作用分为：1、建立安全的信息通道；2、保证网站的真实性
 
4、HTTP请求过程
 
    HTTP请求过程：从输入URL到网页呈现的过程是：浏览器→发送请求→网站所在服务器→网站处理、解析请求→返回相应的响应→传回浏览器（一个网站的请求在开发者工具中的参数：name请求名称，通常为URL最后一部分；status响应状态码；type请求的文档类型；initiator请求源，用来标记求情是由哪个对象或者进程发起的；size从服务器下载或者请求的资源大小；time请求发起到获取响应所用的时间；waterfall网络请求的可视化瀑布流）
 
     网页开发者工具栏：General部分，request url为请求URL，request method为请求方法，status source为响应状态码，remote address为远程服务器地址和端口，referrer policy为referrer判别策略，response headers为响应头，request headers为请求头（请求头中包含有浏览器标识、cookies、host等）
 
 
5、请求方法
 
客户端向服务端发送请求分为4部分：请求方法、网址、头、体。常用的请求方法是get和post。
 
    5.1、get请求中的参数包含在URL里面,数据可以在URL中看到,而POST请求的URL不会包含这些数据,数据都是通过表单形式传输的,会包含在请求体中（URL中看不到）。
     5.2、GET请求提交的数据最多只有1024字节,而POST方式没有限制。
 
6、请求头包含的信息
 
用于说明服务器要使用的附加信息,比较重要的信息有 Cookie、 Referrer、user-agent等。
     6.1、 Accept:请求报头域,用于指定客户端可接受哪些类型的信息；
     6.2、Accept-language:指定客户端可接受的言类型；
     6.3、Accept- Encoding:指定客户端可接受的内容编码；
     6.4、Host:用于指定请求资源的主机IP和端口号,其内容为请求URL的原始务器或网关的位置；
     6.5、Cookie:也常用复数形式 Cookies,网站为了辨别用户进行会话跟踪面存储在用户本地的数据。它的主每功能是维持当前访问会话。 Cookies里有信息标识了我们所对应的服务器
 的会话,每次测览器在请求该站点的页面时,都会在请求头中加上 Cookies并将其发送给服务器,服务器通过 Cookies识别出是我们自己,并且查出当前状态是登录状态。所以返同结果就是登录之后才能看到的网项内容。
     6.6、Referer:此内容用来标识这个请求是从哪个页面发过来的,服务器可以拿到这一信息并做相应的处理,如做来源统计、防盗链处理等。
     6.7、User- Agent:简称UA,它是一个特殊的字符事头,可以使服务器识别客户使用的操作系统及版本,浏览器及版本等信息。在做爬虫时加上此信息,可以伪装为览器;如果不加,很容易被识别出是爬虫。
 
7、请求体：一般承载的内容是post请求中的表单数据，get请求的请求体为空
 
8、响应：服务端返回到客户端，分为响应状态码、头、体
 
响应状态码：200表示服务器正常响应，404表示页面未找到，500代表服务器内部发生错误，403服务器拒绝此访问请求，禁止访问。
 
响应体：做爬虫时候主要通过响应体得到网页源码、json数据等。
 
9、网页基础
 
9.1 网页组成：
 
html描述网页的语言，网页包括文字、图片、视频、按钮等。（不同类型文字通过不同类型标签表示，img图片、video视频、p段落、div布局标签，整个网页框架是各种标签不同的排列和嵌套的组合）；
 
JavaScript：脚本语言，html与css配合使用提供给用户的只是静态信息，缺乏交互性；
 
css：层叠样式表，层叠指在HTML中引用了数个样式文件，并且样式发生冲突时，浏览器可依据层叠顺序处理，样式指网页中文字大小、颜色、元素间距、排列等格式。
 
9.2 节点树及节点间关系
 
DOM文档对象模型，它定义了访问HTML和XML的标准。
 
HTML DOM将HTML文档视为树结构：
 
 
节点有层级关系，父节点、子节点、兄弟节点，节点树中顶端节点称为根，每个节点都有父节点，同时可以拥有任意数量子节点或者兄弟节点。
 
9.3  css选择器，用来定位节点，可嵌套选择。