输入一个url全过程详解
1. 用户在浏览器中输入url,浏览器接收到url。
2.浏览器接收到这个url之后,会根据这个url会先查看缓存,如果有缓存且没有过期的话直接提供给客户端,完成页面渲染。
3.否则浏览器就会通过DNS解析url ,获得协议名、主机名、端口号。
DNS解析详解:
输入域名时,操作系统会先检查自己本地host文件中是否有这个网址的映射关系,如果有,就调用这个IP地址映射,完成域名解析。
如果host没有这个域名的映射,则查找本地的DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析。
如果本地解析器缓存没有的话,则查找本地DNS服务器,如果要查询的域名包含在本地配置资源中,则完成域名解析。
如果本地DNS服务器没有的话,就会请求根服务器,根服务器就会返回一个负责该区域的主服务器IP
本地域名服务器根据主服务器IP,链接到这个主域名服务器,如果有这个域名的话,就调用这个IP地址映射,完成域名解析。如果没有的话,则递归请求下一级域名服务器,直到找到对应的域名
4.然后浏览器就会根据这个IP跟对应的服务端建立tcp连接
TCP三次握手:
第一次握手:客户端向服务器发送一个 SYN=1 报文,并指定客户端的初始化序列号 seq=x。此时客户端处于SYN_Sent 状态
第二次握手:服务器接收到客户端的 SYN=1 报文后,同意连接的话,会发出一段确定报文。确定报文中应该ACK= 1,SYN= 1,确认号是ack=x+1,同时也要为自己初始化一个序列号seq=y.此时服务器处于 SYN-RCVD
第三次握手:客户端接收到 SYN 报文之后,还会向服务器发送确定。确定报文的 ACK=1,ack=y+1 ,自己的序列号变成 x+1。TCP 连接建立,客户端处于 已连接状态 。
5.当服务器接受到客户端的确认后也进入了 已连接状态 。此时双方就可以开始通信了
6.接下来就是浏览器向服务器发送HTTP请求
TCP 连接建立之后,浏览器端会构建请求行、 请求头等信息,并把和该域名相关的 Cookie 等数据附加到请求头中,然后向服务器发送构建的请求信息。如果是 HTTPS,还需要进行 TSL 协商。服务器还会检查 HTTP 的请求头,看是否包含缓存信息。
7.服务器接受并解析这个请求然后发送一个数据包给浏览器
8.关闭浏览器与服务器之间的连接
TCP四次挥手:
- 第一次挥手:客户端向服务端发送一个FIN报文,报文中指定一个序列号。此时,客户端处于 FIN_WAIT-1状态
- 第二次挥手:服务端收到客户端 发送的 FIN报文后,会将客户端的序列号+1 作为ACK报文的序列号值发送给客户端,表明收到了客户端的报文。然后服务器就会处于 CLOSE-WAIT-1状态
- 第三次挥手:服务端向客户端发送 FIN报文,且指定一个序列号。此时,服务端处于 LAST_ACK状态
- 第四次挥手:客户端收到服务端发送的FIN报文后,会将服务端的序列号+1 作为ACK报文的序列号值发送给服务端,此时客户端处于 TIME_WAIT 状态。需要等服务端确定收到自己的ACK报文后才会进入 CLOSED 状态
- 服务端接收到 ACK报文后,就关闭连接,处于 CLOSED 状态。
9.浏览器就会根据这个数据包解析HTML文档,构建DOM树,构建CSSOM树,解析js脚本,下载资源
渲染的具体过程:
浏览器会通过 HTML Parser (HTML解析器)根据深度遍历的原则,将html解析成 DOM tree (DOM 树)。
浏览器会通过 CSS Parser (CSS解析器)将CSS 解析成 CSS Rule Tree(CSSOM 树)。
浏览器会将 javascript 通过 DOM API 或者 CSSOM API 将 JS代码进行解析并应用到布局中,且会呈现出响应式的结果。
根据 DOM 树 与 CSSOM 树构建出响应的 render Tree。
接下来就是进行重排(reflow)与重绘(repaint)。当页面中任意一个节点的几何尺寸发生变化的时候,就会触发重排,就会重新计算页面中所有的节点的位置。当页面中任意元素的样式属性发生变化时(几何尺寸不发生变化),就会发生重绘,重新绘画发生变化的元素。重排一定会触发重绘,而重绘不一定会有重排。
paint:绘制。遍历render Tree,并调用硬件图形API 来绘制每个节点到页面上。
10.最终就会显示出这个页面
输入一个url全过程详解的更多相关文章
- 浏览器解析html全过程详解
前端文摘:深入解析浏览器的幕后工作原理 关于浏览器解析html全过程详解 输入URL到浏览器接收返回的数据的整个过程 TCP报文格式详解 IP报文格式详解 Linux IO模式及 select.pol ...
- StreamingContext详解,输入DStream和Reveiver详解
StreamingContext详解,输入DStream和Reveiver详解 一.StreamingContext详解 1.1两种创建StreamingContext的方式 1.2SteamingC ...
- 网易笔试题:浏览器中输入一个url后回车到返回页面信息的过程
You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...
- URL组成部分详解
URL组成部分详解 URL是Uniform Resource Locator的简写,统一资源定位符. 一个URL是由以下几部分组成的: scheme://host:port/path/?query-s ...
- 转载]OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]
原文地址:OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]作者:千山我独行 由于工作的平台也是嵌入式,差不多的平台,所以一直就没有把自己买过来的ok6410板子好好玩玩.以前一直都是 ...
- 第五篇Django URL name 详解
Django URL name 详解 利用Django开发网站,可以设计出非常优美的url规则,如果url的匹配规则(包含正则表达式)组织得比较好,view的结构就会比较清晰,比较容易维护. Djan ...
- Flask(4)- URL 组成部分详解
URL Uniform Resource Locator 的简写,中文名叫统一资源定位符 用于表示服务端的各种资源,例如网页 下面将讲解 Flask 中如何提取组成 URL 的各个部分 URL 组 ...
- 用一个开发案例详解Oracle临时表
用一个开发案例详解Oracle临时表 2016-11-14 bisal ITPUB  一.开发需求 最近有一个开发需求,大致需要先使用主表,或主表和几张子表关联查询出ID(主键)及一些主表字段 ...
- 编写一个C语言函数,要求输入一个url,输出该url是首页、目录页或者其他url
编写一个C语言函数,要求输入一个url,输出该url是首页.目录页或者其他url 首页.目录页或者其他url 如下形式叫做首页: militia.info/ www.apcnc.com.cn/ htt ...
随机推荐
- 基于SqlSugar的数据库访问处理的封装,支持.net FrameWork和.net core的项目调用
由于我们有时候需要在基于.net framework的项目上使用(如Winform端应用),有时候有需要在.net core的项目上使用(如.net core的WebAPI),那么我们把基于SQLSu ...
- [笔记] 期望概率DP
线性高斯消元 模型概述 转移不是 DAG 的期望 DP. 成环的转移有特殊性质,如:只总父亲/根/儿子转移,只从左右转移-- 处理方式 以只从父亲和儿子转移的期望 DP 为例: \[f(x)=p\cd ...
- 关键字 global和nonlocal
globale 表示从全局把一个变量(比如a)引入局部,后面的变量全是此变量a 使用 globale 变量名 # 全局变量一般是不能随意的修改的 # a = 10 # def func(): # ...
- 12┃音视频直播系统之 WebRTC 实现1对1直播系统实战
一.搭建 Web 服务器 前面我们已经实现过,但是没有详细说HTTPS服务 首先需要引入了 express 库,它的功能非常强大,用它来实现 Web 服务器非常方便 同时还需要引入 HTTPS 服务, ...
- Vue基础之 动态组件
为什么会有动态组件> vue 通过组件机制 实现的页面功能的模块化处理,通常情况下 我们在vue中使用组件 就是先定义组件 然后再需要的地方 插入组件即可 但是在某些情况下 需要根据不同的需求 ...
- dubbo是如何实现可扩展的?
dubbo如何实现可扩展的,援引官网描述: Dubbo 的扩展点加载从 JDK 标准的 SPI (Service Provider Interface) 扩展点发现机制加强而来. Dubbo 改进了 ...
- 看Spring源码不得不会的@Enable模块驱动实现原理讲解
这篇文章我想和你聊一聊 spring的@Enable模块驱动的实现原理. 在我们平时使用spring的过程中,如果想要加个定时任务的功能,那么就需要加注解@EnableScheduling,如果想使用 ...
- python 企业微信发送文件
import os import json import urllib3 class WinxinApi(object): def __init__(self,corpid,secret,chatid ...
- quasar + uni-app混合打包APP
写几个关键点,作为备忘录. 和所有框架一样,现在本地run build quasar的cli是 quasar build 然后记住打包好以后的静态文件 目录 uni-app新建一个5+App的默认模板 ...
- CabloyJS也有工作流引擎了,是你想要的吗?
前言 众所周知,NodeJS作为后端开发语言和运行环境,样样都好,就差一个NodeJS工作流引擎.CabloyJS 4.0重点开发了NodeJS工作流引擎,并作为内置的基础核心模块,近一步拓展了Nod ...