1. 用户在浏览器中输入url,浏览器接收到url。

2.浏览器接收到这个url之后,会根据这个url会先查看缓存,如果有缓存且没有过期的话直接提供给客户端,完成页面渲染。

3.否则浏览器就会通过DNS解析url ,获得协议名、主机名、端口号。

DNS解析详解:

  1. 输入域名时,操作系统会先检查自己本地host文件中是否有这个网址的映射关系,如果有,就调用这个IP地址映射,完成域名解析。

  2. 如果host没有这个域名的映射,则查找本地的DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析。

  3. 如果本地解析器缓存没有的话,则查找本地DNS服务器,如果要查询的域名包含在本地配置资源中,则完成域名解析。

  4. 如果本地DNS服务器没有的话,就会请求根服务器,根服务器就会返回一个负责该区域的主服务器IP

  5. 本地域名服务器根据主服务器IP,链接到这个主域名服务器,如果有这个域名的话,就调用这个IP地址映射,完成域名解析。如果没有的话,则递归请求下一级域名服务器,直到找到对应的域名

4.然后浏览器就会根据这个IP跟对应的服务端建立tcp连接

TCP三次握手

  1. 第一次握手:客户端向服务器发送一个 SYN=1 报文,并指定客户端的初始化序列号 seq=x。此时客户端处于SYN_Sent 状态

  2. 第二次握手:服务器接收到客户端的 SYN=1 报文后,同意连接的话,会发出一段确定报文。确定报文中应该ACK= 1,SYN= 1,确认号是ack=x+1,同时也要为自己初始化一个序列号seq=y.此时服务器处于 SYN-RCVD

  3. 第三次握手:客户端接收到 SYN 报文之后,还会向服务器发送确定。确定报文的 ACK=1,ack=y+1 ,自己的序列号变成 x+1。TCP 连接建立,客户端处于 已连接状态 。

5.当服务器接受到客户端的确认后也进入了 已连接状态 。此时双方就可以开始通信了

6.接下来就是浏览器向服务器发送HTTP请求

TCP 连接建立之后,浏览器端会构建请求行、 请求头等信息,并把和该域名相关的 Cookie 等数据附加到请求头中,然后向服务器发送构建的请求信息。如果是 HTTPS,还需要进行 TSL 协商。服务器还会检查 HTTP 的请求头,看是否包含缓存信息。

7.服务器接受并解析这个请求然后发送一个数据包给浏览器

8.关闭浏览器与服务器之间的连接

TCP四次挥手

  1. 第一次挥手:客户端向服务端发送一个FIN报文,报文中指定一个序列号。此时,客户端处于 FIN_WAIT-1状态
  2. 第二次挥手:服务端收到客户端 发送的 FIN报文后,会将客户端的序列号+1 作为ACK报文的序列号值发送给客户端,表明收到了客户端的报文。然后服务器就会处于 CLOSE-WAIT-1状态
  3. 第三次挥手:服务端向客户端发送 FIN报文,且指定一个序列号。此时,服务端处于 LAST_ACK状态
  4. 第四次挥手:客户端收到服务端发送的FIN报文后,会将服务端的序列号+1 作为ACK报文的序列号值发送给服务端,此时客户端处于 TIME_WAIT 状态。需要等服务端确定收到自己的ACK报文后才会进入 CLOSED 状态
  5. 服务端接收到 ACK报文后,就关闭连接,处于 CLOSED 状态。

9.浏览器就会根据这个数据包解析HTML文档,构建DOM树,构建CSSOM树,解析js脚本,下载资源

渲染的具体过程

  1. 浏览器会通过 HTML Parser (HTML解析器)根据深度遍历的原则,将html解析成 DOM tree (DOM 树)。

  2. 浏览器会通过 CSS Parser (CSS解析器)将CSS 解析成 CSS Rule Tree(CSSOM 树)。

  3. 浏览器会将 javascript 通过 DOM API 或者 CSSOM API 将 JS代码进行解析并应用到布局中,且会呈现出响应式的结果。

  4. 根据 DOM 树 与 CSSOM 树构建出响应的 render Tree。

  5. 接下来就是进行重排(reflow)与重绘(repaint)。当页面中任意一个节点的几何尺寸发生变化的时候,就会触发重排,就会重新计算页面中所有的节点的位置。当页面中任意元素的样式属性发生变化时(几何尺寸不发生变化),就会发生重绘,重新绘画发生变化的元素。重排一定会触发重绘,而重绘不一定会有重排。

  6. paint:绘制。遍历render Tree,并调用硬件图形API 来绘制每个节点到页面上。

10.最终就会显示出这个页面

输入一个url全过程详解的更多相关文章

  1. 浏览器解析html全过程详解

    前端文摘:深入解析浏览器的幕后工作原理 关于浏览器解析html全过程详解 输入URL到浏览器接收返回的数据的整个过程 TCP报文格式详解 IP报文格式详解 Linux IO模式及 select.pol ...

  2. StreamingContext详解,输入DStream和Reveiver详解

    StreamingContext详解,输入DStream和Reveiver详解 一.StreamingContext详解 1.1两种创建StreamingContext的方式 1.2SteamingC ...

  3. 网易笔试题:浏览器中输入一个url后回车到返回页面信息的过程

    You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...

  4. URL组成部分详解

    URL组成部分详解 URL是Uniform Resource Locator的简写,统一资源定位符. 一个URL是由以下几部分组成的: scheme://host:port/path/?query-s ...

  5. 转载]OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]

    原文地址:OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]作者:千山我独行 由于工作的平台也是嵌入式,差不多的平台,所以一直就没有把自己买过来的ok6410板子好好玩玩.以前一直都是 ...

  6. 第五篇Django URL name 详解

    Django URL name 详解 利用Django开发网站,可以设计出非常优美的url规则,如果url的匹配规则(包含正则表达式)组织得比较好,view的结构就会比较清晰,比较容易维护. Djan ...

  7. Flask(4)- URL 组成部分详解

    URL Uniform Resource Locator 的简写,中文名叫统一资源定位符 用于表示服务端的各种资源,例如网页 下面将讲解 Flask 中如何提取组成 URL 的各个部分   URL 组 ...

  8. ​ 用一个开发案例详解Oracle临时表

    ​ 用一个开发案例详解Oracle临时表 2016-11-14 bisal ITPUB  一.开发需求  最近有一个开发需求,大致需要先使用主表,或主表和几张子表关联查询出ID(主键)及一些主表字段 ...

  9. 编写一个C语言函数,要求输入一个url,输出该url是首页、目录页或者其他url

    编写一个C语言函数,要求输入一个url,输出该url是首页.目录页或者其他url 首页.目录页或者其他url 如下形式叫做首页: militia.info/ www.apcnc.com.cn/ htt ...

随机推荐

  1. Linux服务器安全加固10条建议

    以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过. 设置复杂密码 服务器设置大写.小写.特殊字符.数字组成的12-16位的复杂 ...

  2. springboot处理blog字段

    springboot处理blog字段 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章https://www.javaman.cn/ 1.数据库表结构 其中content为long ...

  3. srpingboot拦截器

    1.创建一个普通的web工程. 2.先创建需要的基础文件,比如一个用户类. package com.example.mode; public class User { private Integer ...

  4. 思索 p5.js 的最佳实践

    思索 p5.js 的最佳实践 本文写于 2020 年 12 月 18 日 p5.js 是一个 JavaScript 库,用于为艺术家.设计师提供更容易上手的创意编程. 它有着完整的一套基于 Canva ...

  5. AQS源码三视-JUC系列

    AQS源码三视-JUC系列 前两篇文章介绍了AQS的核心同步机制,使用CHL同步队列实现线程等待和唤醒,一个int值记录资源量.为上层各式各样的同步器实现画好了模版,像已经介绍到的ReentrantL ...

  6. 好客租房21-react组件的两种创建方式(函数组件)

    1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使 ...

  7. 个人冲刺(五)——体温上报app(二阶段)

    冲刺任务:完成用户登录和随机验证码功能 loginActivity.java package com.example.helloworld; /** * 纯粹实现登录注册功能,其它功能都被注释掉了 * ...

  8. babel使用

    Babel转码器 Babel定义 Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行 Babel安装 仅需要在项目文件下安装 npm ins ...

  9. 附001.Python多版本环境管理

    一 环境背景 由于Python的版本过多,且不同版本之间差异性较大.同时又因系统底层需要调用当前版本Python,所以不能随意变更当前系统Python版本.因此,在多版本共存的情况下,Python多环 ...

  10. 给小白的 PostgreSQL 容器化部署教程(上)

    作者:王志斌 编辑:钟华龙 本文来自社区小伙伴 王志斌 的投稿.从小白的角度,带你一步步实现将 RadonDB PostgreSQL 集群部署到 Kubernetes 上.文章分为上下两部分,第一部分 ...